Unbekanntere CSS3-Features 27.02.2016, 16:15 Uhr

Nützliches CSS3

CSS3 bietet auch weniger bekannte, aber durchaus nützliche Features.
Abseits der umfassenden Spezifikationen in CSS3 zu Flexbox, Media Queries und Co. existieren auch weniger bekannte Spezifikationen mit nützlichen kleineren Features, die den CSS-Alltag erleichtern – eine Auswahl stellen wir Ihnen hier vor (Tabelle 1). Ausgewählt wurden dabei nur Techniken, deren Browserunterstützung einem Einsatz in der Praxis nicht im Weg steht: Da wäre etwa currentColor, das Farbanpassungen vereinfacht, calc() für flexiblere Breiten, object-fit für die richtigen Anpassungen von Bildern und Videos und mehr.
Tabelle 1: Browserunterstützung der vorgestellten Eigenschaften
Feature Anmerkung Chrome/Opera Firefox Safari IE/Edge
currentColor Verwendet den aktuell definierten color-Wert ja ja ja ab 9
calc() Berechnete Längenangaben ja ja (aber nicht bei Farbangaben oder bei line-height) ja ab 9 (aber nicht bei Farbangaben)
object-fit Anwendbar auf ersetzte Elemente wie Bilder zur Bestimmung der Anpassung ja ja ja nein, Edge under consideration, Nachbessern per JS
object-position Positionierung eines ersetzten Elements, etwa eines Bildes ja ja nein nein
min-content Neues Schlüsselwort für width/max-width et cetera ja ja ja Nachbessern möglich durch Aktivierung der Gridlayout­-Darstellung
Quantity Queries Besondere Formatierung ab bestimmter Anzahl an Elementen über Selek­toren wie :nth-last-child() ja ja ja ab 9
background-position mit Schlüsselwort und Längenangabe Zum Beispiel background- position: bottom 20px right 50px; ja ja ja ab 9
Tabelle 1: Browserunterstützung der vorgestellten Eigenschaften
Feature Anmerkung Chrome/Opera Firefox Safari IE/Edge
currentColor Verwendet den aktuell definierten color-Wert ja ja ja ab 9
calc() Berechnete Längenangaben ja ja (aber nicht bei Farbangaben oder bei line-height) ja ab 9 (aber nicht bei Farbangaben)
object-fit Anwendbar auf ersetzte Elemente wie Bilder zur Bestimmung der Anpassung ja ja ja nein, Edge under consideration, Nachbessern per JS
object-position Positionierung eines ersetzten Elements, etwa eines Bildes ja ja nein nein
min-content Neues Schlüsselwort für width/max-width et cetera ja ja ja Nachbessern möglich durch Aktivierung der Gridlayout­-Darstellung
Quantity Queries Besondere Formatierung ab bestimmter Anzahl an Elementen über Selek­toren wie :nth-last-child() ja ja ja ab 9
background-position mit Schlüsselwort und Längenangabe Zum Beispiel background- position: bottom 20px right 50px; ja ja ja ab 9

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