Neuere Features

Ein paar bemerkenswerte Neuerungen der letzten Jahre, welche inzwischen von allen verbreiteten Browsern unterstützt werden, sind folgende:

• CSS-Nesting

• Preudo-Selektor :has() - auch beschrieben auf css-tricks.com/the-css-has-selector

• Container-Queries

• Media-Query Range Syntax

• backdrop-filter - siehe auch das Demo auf W3Schools

CSS-Nesting

@-Regeln

Bereits bekannt ist das Nesting bei @-Regeln:

.h1 {
  font-size: 30px;
}
@media screen and (max-width: 800px) {
  .h1 {
    font-size: 20px;
  }
}

Neu (seit 2024) geht dies auch umgekehrt:

.h1 {
  font-size: 30px;
  @media screen and (max-width: 800px) {
    font-size: 20px;
  }
}

Dies war vorher nur mit Precompilern (LESS, SASS) möglich.

Nesting und der Nesting Selektor &

Verschachtelte HTML-Elemente konnten bisher nur über Verkettung angesprochen werden:

body {
  color: black;
}
body .blog-post {
  color: darkgray;
}
body .blog-post a {
  color: red;
}

Seit 2024 können Selektoren auch berschachtelt werden. Auch dies war vorher nur mit Precompilern (LESS, SASS) möglich:

body {
  color: black;
  .blog-post {
    color: darkgray;
    a {
      color: red;
    }
  }
}

Der Nesting-Selektor & steht für alle übergeordneten Selektoren. Er ist oft freiwillig, bei Verkettung im gleichen Element jedoch erforderlich:

body {
  color: black;
  & .blog-post { /* Nesting-Selektor ist freiwillig */
    color: darkgray;
    & a { /* Nesting-Selektor ist freiwillig */
      color: red;
      &:hover { /* Nesting-Selektor ist erforderlich */
        text-decoration: underline;
      }
    }
  }
}

Dies wird vom Browser interpretiert wie folgendes:

body {
  color: black;
}
body .blog-post {
  color: darkgray;
}
body .blog-post a {
  color: red;
}

Aufgabe neue Features

1. Suche selber nach ein paar weiteren Neuerungen, welche seit 1-2 Jahren von allen gängigen Browsern unterstützt werden. Schau dir dazu auch ein paar Videos an.

2. Schau auf caniuse.com, wie die Browser-Unterstützung inzwischen ist.

3. Teste 1-2 Features, welche du spannend findest.

4. Optional: Zeige die Features der Gruppe.