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 | - |
In bestimmten Fällen möchte man, dass sich Elemente an die Breite von Bereichen anpassen, aber gleichzeitig ein bestimmtes Seitenverhältnis beibehalten wird. Das ist besonders wichtig beispielsweise bei Videos. Wenn Sie ein video-Element pur einsetzen, wird das Seitenverhältnis beibehalten, aber nicht wenn Sie Ihr Video mit iframe oder Ähnlichem einbetten. Das Problem: Wenn die Breite sich verändert, verändert sich die Höhe nicht gleichermaßen mit und das Bild wird verzerrt. Das löst man oft über den sogenannten padding-Trick. Dafür benötigen Sie ein zusätzliches Element, dem Sie padding-bottom mit einer Prozentangabe zuweisen. Dieses padding-bottom bezieht sich immer auf die Breite des Elternelements und sorgt damit für die gewünschte Höhe. Für die genaue Umsetzung stehen verschiedene Varianten zur Verfügung. So kann man statt mit zusätzlichen Elementen im HTML-Code mit erzeugten Inhalten arbeiten. Im HTML-Code steht nur das Element, das das gewünschte Seitenverhältnis haben soll:
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar
