EMZETT.CSS hat sich stark weiterentwickelt. Vieles, wofür man früher Sass oder JavaScript brauchte, geht heute direkt. Prüfe die Browserunterstützung auf caniuse.com oder MDN; alle hier gezeigten Funktionen sind in aktuellen Browsern verfügbar.
CSS-Verschachtelung (Nesting)
Ergebnis
& steht für den Elternselektor. So bleibt zusammengehöriges CSS beieinander.
@layer: Reihenfolge der Kaskade steuern
Mit Ebenen legst du fest, welche Regeln Vorrang haben, unabhängig von der Spezifität:
@layer reset, basis, komponenten, werkzeuge;
@layer reset { * { margin: 0; box-sizing: border-box; } }
@layer basis { a { color: royalblue; } }
@layer komponenten { .button { background: navy; color: white; } }Spätere Ebenen schlagen frühere. Ungeschichtete Regeln schlagen alle Ebenen. Praktisch, um Frameworks sauber zu überschreiben.
:has() und :is()
Ergebnis
:has() ist der lang ersehnte Eltern-Selektor; :user-invalid meldet Fehler erst nach der Eingabe der Nutzerin.
Container Queries und Einheiten
Neue Einheiten passen sich dynamisch an: dvh/svh/lvh (Höhe des sichtbaren Fensters auf Handys, wenn Adressleisten ein-/ausfahren), cqw (Breite des Containers), lh (Zeilenhöhe), rlh.
.vollbild { min-height: 100dvh; } /* statt 100vh auf Handys */
.titel { font-size: clamp(1.2rem, 6cqw, 3rem); } /* relativ zum Container */aspect-ratio, gap, inset
Ergebnis
Logische Eigenschaften
Statt left/right/top/bottom gibt es logische Entsprechungen, die bei Sprachen mit anderer Schreibrichtung (Arabisch, Hebräisch) richtig mitwandern:
| Physisch | Logisch |
|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end |
margin-top / margin-bottom | margin-block-start / margin-block-end |
width / height | inline-size / block-size |
text-align: left | text-align: start |
Scrollen und Snapping
Ergebnis
Weitere Neuerungen im Überblick
| Funktion | Zweck |
|---|---|
accent-color | Farbe von Formularelementen |
color-mix(), oklch(), light-dark() | Farben mischen und Hell/Dunkel-Paare |
text-wrap: balance / pretty | schönerer Zeilenumbruch |
field-sizing: content | Textfelder wachsen mit dem Inhalt |
@starting-style | Startzustand für Übergänge beim Einblenden |
transition-behavior: allow-discrete | display-Wechsel animierbar |
Popover API (popover-Attribut) | Menüs und Hinweise ohne JavaScript |
anchor-positioning | Elemente an andere Elemente binden |
@scope | Regeln auf einen Teilbaum begrenzen |
| View Transitions | animierte Seitenwechsel |
Ergebnis
Ohne Präprozessor und Bibliothek auskommen?
- Sass/SCSS ergänzt Schleifen, Mixins und Funktionen; Variablen und Verschachtelung gibt es inzwischen auch in nativem CSS
- Tailwind CSS liefert viele kleine Hilfsklassen (
p-4 text-lg); beliebt, aber nicht nötig - Frameworks wie Bootstrap bieten Fertigkomponenten
Lerne zuerst natives CSS. Es ist die Grundlage aller dieser Werkzeuge.
Merke
- Verschachtelung mit
&, Ebenen mit@layer :has()wählt Eltern,:is()/:where()gruppieren,:user-invalidmeldet Eingabefehler- Einheiten
dvh,cqw,lh;aspect-ratio,inset,gapvereinfachen Layouts - Logische Eigenschaften (
margin-inline) funktionieren in jeder Schreibrichtung - Popover,
scroll-snap,text-wrap: balanceersetzen viel JavaScript - Unterstützung vorher auf caniuse.com prüfen
Aufgabe
Baue eine Karte mit verschachteltem CSS, einem :has()-Zustand (Checkbox hebt die Karte hervor) und einem Popover für zusätzliche Infos.