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