CSS Verschachtelung

Browserunterstützung

ab Chrome 112, unterstützt
ab Firefox 117, unterstützt
ab Edge 112, unterstützt
ab Safari 16.5, unterstützt

https://developer.chrome.com/articles/css-nesting/

CSS-Verschachtelung, etwas, das die Leute von Sass lieben und seit Jahren eine der häufigsten Anfragen von CSS-Entwicklern ist, landet endlich auf der Webplattform. Durch die Verschachtelung können Entwickler in einem prägnanteren, gruppierten Format schreiben, das Redundanz reduziert.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Sie können auch Medienabfragen verschachteln , was bedeutet, dass Sie auch Containerabfragen verschachteln können . Im folgenden Beispiel wird eine Karte von einem Hochformat-Layout in ein Querformat-Layout geändert, wenn im Container genügend Breite vorhanden ist:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Die Layoutanpassung erfolgt flex, wenn für den Container mehr (oder gleich viel) 480pxInline-Speicherplatz verfügbar ist. Der Browser wendet diesen neuen Anzeigestil einfach an, wenn die Bedingungen erfüllt sind.

Weitere Informationen und Beispiele finden Sie in unserem Beitrag zur CSS-Verschachtelu