Neue CSS-Eigenschaften und Selektoren
01.03.2021, 10:25 Uhr
Neues von CSS
Von aspect-ratio über content-visibility bis hin zu einzelnen transform-Eigenschaften: CSS hat interessante Neuerungen parat.
Es gibt keine großen Versionsnummern mehr in CSS – alles nach CSS 2.1 wird global mit CSS 3 betitelt. Aber trotzdem entwickelt sich CSS rasant weiter und bietet eine Reihe von Neuerungen: Da wären aspect-ratio zur Angabe der Seitenverhältnisse, nützliche Pseudoklassen wie :is(), :where() und :focus-visible oder der Performance-Booster content-visibility. Was es mit diesen Angaben auf sich hat, erfahren Sie im Artikel – inklusive Browserunterstützung und Fallbacklösungen (Tabelle 1).
Tabelle 1: Browserunterstützung der vorgestellten Eigenschaften
| Feature/Beispiel | Anmerkung | Chrome/ Opera/Edge | Firefox | Safari | IE/Edge (vor Chromium) |
| aspect-ratio | Seitenverhältnis von Elementen bestimmen | ab 88 | hinter Flag | - | - |
| clip-path: path() | path()-Angabe bei clip-path | ab 88 | ab 71 | ab 13.1 | - |
| content-visibility | Sichtbarkeit von Bereichen steuern für verbesserte Performance | ab 85 | - | - | - |
| :is() | Pseudoklasse, übergeben wird eine Liste von Selektoren | ab 88 | ab 78 | ab 14 | - |
| .is() mit "forgiving selector list" | ein ungültiger Selektor macht nicht die ganze Selektorengruppe ungültig | ab 88 | ab 82 | - | - |
| :focus-visible | eigene Formatierung beim Tabben mit der Tastatur | ab 86 | ab 85, davor mit -moz- | wird implementiert | - |
| masonry (CSS Grid) | bei grid-template-rows für Masonry-Darstellung | - | hinter Flag | - | - |
| prefers-reduced-data | Medien-Feature zur Abfrage, ob weniger Daten bevorzugt werden | ab 88 hinter Flag | - | - | - |
| subgrid (CSS Grid) | bei grid-template-columns/grid-template-rows, damit das Elternraster benutzt wird | - | ab 71 | - | - |
| scroll-margin-top | Abstand nach oben beim Anspringen über einen internen Link | ja | ja | braucht scroll-snap-margin-top und nicht bei Ankerlinks | ab 79 |
| text-emphasis | Kleine Symbole bei den Glyphen zur Betonung | -webkit- | ja | ja | - |
| text-underline-offset | Verschiebung der Unterstreichung | ab 87 | ab 70 | ab 12.1 | - |
| :where() | Pseudoklasse wie is(), aber keine Beitrag zur Spezifität | ab 88 | ab 78 | ab 14 | - |
| individuelle transform -Eigenschaften | zum Beispiel rotate: 180deg statt | ||||
| transform: rotate(180deg) | hinter Flag | ja | ab Safari Technology Preview 117 | - |
Tabelle 1: Browserunterstützung der vorgestellten Eigenschaften
| Feature/Beispiel | Anmerkung | Chrome/ Opera/Edge | Firefox | Safari | IE/Edge (vor Chromium) |
| aspect-ratio | Seitenverhältnis von Elementen bestimmen | ab 88 | hinter Flag | - | - |
| clip-path: path() | path()-Angabe bei clip-path | ab 88 | ab 71 | ab 13.1 | - |
| content-visibility | Sichtbarkeit von Bereichen steuern für verbesserte Performance | ab 85 | - | - | - |
| :is() | Pseudoklasse, übergeben wird eine Liste von Selektoren | ab 88 | ab 78 | ab 14 | - |
| .is() mit "forgiving selector list" | ein ungültiger Selektor macht nicht die ganze Selektorengruppe ungültig | ab 88 | ab 82 | - | - |
| :focus-visible | eigene Formatierung beim Tabben mit der Tastatur | ab 86 | ab 85, davor mit -moz- | wird implementiert | - |
| masonry (CSS Grid) | bei grid-template-rows für Masonry-Darstellung | - | hinter Flag | - | - |
| prefers-reduced-data | Medien-Feature zur Abfrage, ob weniger Daten bevorzugt werden | ab 88 hinter Flag | - | - | - |
| subgrid (CSS Grid) | bei grid-template-columns/grid-template-rows, damit das Elternraster benutzt wird | - | ab 71 | - | - |
| scroll-margin-top | Abstand nach oben beim Anspringen über einen internen Link | ja | ja | braucht scroll-snap-margin-top und nicht bei Ankerlinks | ab 79 |
| text-emphasis | Kleine Symbole bei den Glyphen zur Betonung | -webkit- | ja | ja | - |
| text-underline-offset | Verschiebung der Unterstreichung | ab 87 | ab 70 | ab 12.1 | - |
| :where() | Pseudoklasse wie is(), aber keine Beitrag zur Spezifität | ab 88 | ab 78 | ab 14 | - |
| individuelle transform -Eigenschaften | zum Beispiel rotate: 180deg statt | ||||
| transform: rotate(180deg) | hinter Flag | ja | ab Safari Technology Preview 117 | - |
web & mobile DEVELOPER
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
- 2 Monate Gratis testen
- Über 4.000 qualifizierte Fachartikel
- Diverse DevBooks thematisch für Sie zusammen gestellt
- Webcasts von 30 - 90 Min.
- Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
- Auf jedem Gerät verfügbar
