CSS1 und CSS2 vs CSS3
Während die ersten Versionen der CSS-Spezifikation noch abgeschlossene Spezifikationen waren, kam CSS2.1 schon in Form von Modulen wie Visual Effects und Generated Content. CSS3 steuert Stück für Stück neue Module wie etwa das CSS3-Selector-Modul, Media Queries oder CSS Grid hinzu. Die Module wiederum haben Versionen wie Level 1, Level 2.
So entdecken wir neue CSS-Eigenschaften eher durch Zufall, manchmal in WordPress-Themes oder HTML-Templates, manchmal bei der Recherche, wenn das CSS mal wieder nicht will, manchmal in caniuse.com, wenn wir etwas ganz anderes gesucht haben.
CSS Grid: subgrid
Weder display:flex noch display:grid haben eine Lösung für ein tägliches Problem: Eine Überschrift, ein kurzer Text, ein Bild in einer Spalte oder Karte bilden ein Raster. Solang Überschriften und Text gleich lang sind, ist das leichtes Spiel.
Ist aber ein Text kürzer oder eine Überschrift länger, gerät das Raster aus der Fassung und schiebt das Bild nach unten oder oben.
Philodendron
Philodrendron – der Baumfreund – ist aus der Mode gekommen. Dabei war kaum eine Zimmerpflanze so genügsam (außer bei der Größe der Töpfe)
Die Blaue Pieksende Silverdistel
Sie ist und bleibt das Rührmichnichtan.
Während sich ein Element ganz unten durch etwas umständliche Tricks nach ganz unten schieben lässt, gab es bislang keine Lösung für unterschiedlich hohe Zeilen in einem Grid. Das ändert sich jetzt mit grid-template-rows: subgrid; (zurzeit nur Safari Technology Preview und aktueller Firefox).
<div class="block-grid"> <div class="sub"> <h4>Philodendron</h4> <p>Philodrendron …</p> <img src="philo.jpg" …> </div> <div class="sub"> <h4>Die Blaue …</h4> <p>Sie ist und bleibt …</p> <img src="distel.jpg" …> </div> </div>
.block-grid {
display: grid;
gap: 14px;
grid-template-columns: 1fr 1fr;
}
.sub {
grid-row: 1 / 4;
display: grid;
grid-template-rows: subgrid;
border:1px solid silver;
}
Mehr zu subgrid auf CSS Grid und Subgrid auf mediaevent.de.
CSS has()-Selektor
has() wird der lang ersehnte Vorfahre- oder Parent-Selector. Damit erreicht CSS :has() ein Parent-Element, das mindestens ein bestimmtes Element enthält. Der Selektor für das Child-Element sitzt innerhalb der Klammern des has-Selektors.
:has() stellt z.B. fest, ob ein Element eines Navigationsmenüs ein Untermenü enthält. Obendrein findet CSS dann ohne die Hilfe von JavaScript heraus, wie viele Elemente das Menü umfasst.
.menu ul {
max-height: 0;
overflow: hidden;
height: auto;
}
.menu li.op ul {
max-height: 400px;
}
.menu li:has(ul)::before {
content: "▶ ";
}
@media (min-width: 780px) {
.menu { display: flex; }
.menu:has(li:nth-child(5)) li { width: 20%; }
}
Firefox ist mit CSS :has seit Ende 2023 dabei. Mehr zum CSS :has Selektor …
Variable Fonts
Statt verschiedener Schriftdateien für reguläre, dünne und fette Schriftschnitte nutzen variable Schriften eine Schriftdatei mit Variationen anhand einer Achse. Variable Schriften können z.B. die Schriftstärke nicht einfach durch numerische Werte von 100 bis 900 aufweisen, sondern alle Schriftstärken in einem Bereich von 1 bis 999 in einer einzigen Schriftdatei ausliefern.
Neben font-weight sind width, slant, italic und optical-size typische Kandidaten variabler Schriften.
.bolder {
font-weight: 400;
}
.wdth {
font-variation-settings: ;
}
CSS inset für position: absolute
CSS platziert ein absolut positioniertes Element anhand von vier Eigenschaften: top, right, bottom und left. Anstelle der vier Eigenschaften beschreibt CSS die Position des absolut positionierten Elements mit der Kurzschrift inset.
.elem {
position: absolute;
inset: auto 5% 0 5%;
}
Mehr zum Platzieren von absolut positionierten Elementen mit CSS inset.
aspect-ratio
Aspect Ratio – das Seitenverhältnis – ist das Verhältnis der Breite zur Höhe eines Bildes, einer HTML-Box, eines Videos oder einfachen iframes. Typische Seitenverhältnisse lauten 3:2 bei Fotos aus der Digitalkamera, 16:9 für Video.
Meist müssen wir über das Seitenverhältnis von Bildern nicht nachdenken, denn sie werden fast immer mit width- und height-Attribut eingesetzt und einfaches CSS sorgt dafür, dass ihr Seitenverhältnis auf kleinen und großen ViewPorts erhalten bleibt.
img {
width: 100%;
height: auto;
}
Videos, die in einem iframe geladen werden (YouTube-Video), machen es nicht so einfach. Ein nicht gerade intuitiver padding-Hack hält das Seitenverhältnis seit ewig und drei Tagen aufrecht.
Aber CSS aspect-ratio verkürzt auch bei einfachen Bildern wie dem kleinen Carousel das CSS: So kommt es nicht zu Sprüngen an Breakpoints, sondern der Inhalt der Carousel-Slides verkleinert und vergrößert sich stufenlos durch clamp() und aspect-ratio.
Die neue CSS-Eigenschaft aspect-ratio ist leichter verständlichen und knackig kurz.
iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
#carousel {
position: relative;
width: clamp(300px, 70%, 600px);
aspect-ratio: 4/3;
margin-left: auto; margin-right: auto;
}
Neue CSS-Eigenschaften: clamp ()
Media Queries haben eine Abfrage für »zwischen«, die CSS-Funktion clamp() setzt einen Wert auf Werte zwischen einem Minimum und einem Maximum.
clamp() ist eine neue Technik, die zwischen einem minimalen und einem maximalen Wert wählt, z.B. um den Text linear an die Breite des Platzangebots im Viewport oder im Layout anzupassen.
clamp (min, preferred, max);
Solange der bevorzugte Wert (preferred) zwischen den Minimum und dem Maximum liegt, gibt clamp preferred zurück. Wenn aber preferred kleiner als das Minimum oder größer als das Maximum ist, liefert clamp den Wert von min oder max.
Während Media Queries nur in der CSS-Datei oder im style-Element sitzen können, kann clamp auch inline in das style-Attribut gesetzt werden.
<p style="font-size: clamp(1.2rem, 3vw, 3rem)">Transfer</p>
Transfer
.banner {
width: clamp(200px, 50%, 500px);
margin: 2em auto;
}
preferred darf auch ein Ausdruck wie 50% + 20px sein.
Die CSS-Funktionen min, max und clamp werden von allen modernen Browsern unterstützt.
Scroll-Snap
CSS scroll-snap fängt den ViewPort an beliebigen Elementen ein, wenn der Benutzer über einen Bereich scrollt. Per scroll-snap kann z.b. die Leserichtung von vertikal auf horizontal ausgerichtet werden (so wie wir das bei den Einstellungen der Apps auf Handys kennen), oder ein einfaches Carousel mit CSS ohne Javascript realisiert werden.
#carousel.snap {
scroll-snap-type: x mandatory;
}
#carousel.snap.vertical {
scroll-snap-type: y mandatory;
}
CSS ScrolSnap Carousel von NewInWeb
Mehr zu CSS scroll-snap
CSS Layer
CSS Layer (@layer) unterteilen CSS-Regeln in logische Ebenen und steuern ihre jeweilige Priorität. Das ist besonders nützlich, wenn eigene Styles mit Drittanbieter-Styles kombiniert werden und verhindert den Missbrauch von !important.
Der Cascade Layer wird durch eine neue CSS-Regel in Gang gesetzt: @layer. Vor dem Auftritt des Cascade Layers war es wichtig, auf die Reihenfolge der Regeln zu achten. Typischerweise kam das unwichtigste Stylesheet zuerst, das wichtigste wurde als letztes notiert.
@layer basics {
button {
all: unset;
}
}
@layer twentyfive {
button {
background: blue;
color: white;
padding: 10px;
}
}
@layer custom {
button {
background: red;
}
}
Der Button wird rot, denn custom hat die höchste Priorität.
@layer custom, twentyfive, basics;
Jetzt hat basics die Priorität.
Mit der @layer-Regel kann das Haupt-Stylesheet die Layer und ihre Reihenfolge im Voraus festlegen. Anschließend werden die Stile geladen oder definiert und dann in einem Layer untergebracht, um den Rang bzw. das Gewicht zu erhalten, ohne sich Gedanken um das akribische Management des Stil-Orchesters zu machen.
Layer machen das Überschreiben von Third Party-Stilen einfach und bringen Ordnung in die Stil-Vielfalt.
CSS Level4 Colors
Jetzt kommt mehr Farbe ins CSS CSS Color Module Level 4 – W3C Working Draft, 1 June 2021.
Der Farbraum des Webs ist sRGB, Farben können nur als RGB-Farben angelegt und wiedergegeben werden. Aber heute schon können die modernen Browser Bilder im CMYK-Farbraum anzeigen.
Auch sind heute die meisten Monitore nicht mehr schlichte sRGB-Monitore, sondern die jüngere Generation der Monitore beherrscht bereits einen großen Teil des P3-Farbraums (iPhones, Google Pixel und HTML und viele Smartphones haben ebenfalls ein P3-Display).
Zwar werden Farben immer noch im sRGB-Farbraum interpretiert, aber Colors L4 bringt Farbmanagement in die Webseite, z.B. Farben im P3-Farbraum.
color: color(display-p3 1 0.5 0)
Ebenfalls auf dem Weg ins Web sind Farbangaben im LCH und Lab-Farbraum.
lch(52.2345% 72.2 56.2)
All
all setzt alle Eigenschaften eines Elements (außer unicode-bidi und direction) zurück auf seine initialen Werte.
body {
all: initial;
}
Unterstützt von allen Browsern außer IE11 und älter.
