Veröffentlicht am 3. Juni 2026
Willkommen zum monatlichen Baseline-Digest. Im Mai 2026 wurden mehrere neue CSS-Funktionen, Ereigniseigenschaften und API-Ergänzungen als „Baseline Newly available“ eingestuft. CSS-Einheiten, Eigenschaften für Nutzerinteraktionen und Pseudoklassen erreichten „Baseline Widely available“. Außerdem gab es wichtige Updates von der Entwickler-Community.
Umfrage zum Status von Preisvergleichsportalen 2026
Der jährliche Pulscheck der Web-Community ist da: Die State of CSS 2026-Umfrage ist jetzt verfügbar. In diesem Jahr haben die Organisatoren bewusst versucht, die Umfrage zu optimieren und sich auf die Funktionen zu konzentrieren, die für Entwickler in einer Ära der KI-gestützten Programmierung am wichtigsten sind. Browseranbieter beobachten diese Ergebnisse genau, um ihre Engineering-Roadmaps zu priorisieren und auf die Probleme von Entwicklern einzugehen. Nehmen Sie an der Umfrage teil und teilen Sie Ihre Erfahrungen mit der sich entwickelnden CSS-Landschaft, bevor sie am 1. Juli geschlossen wird.
Neue grundlegende Funktionen
Die Funktionen in diesem Abschnitt werden ab Mai 2026 im Kernbrowsersatz unterstützt und sind jetzt als Baseline verfügbar.
Containerstilabfragen
Containerabfragen sind nicht mehr nur auf die Größe beschränkt. Mit Stilabfragen können Sie jetzt Stile auf Elemente anwenden, die auf den benutzerdefinierten Eigenschaften eines übergeordneten Containers basieren. So können Sie hochgradig modulare Komponenten erstellen, deren Design oder Stil sich je nach kontextbezogenem Placement anpassen lässt, ohne dass komplexe Klassenstrukturen erforderlich sind.
:open-Pseudoklasse
Um Elemente mit offenem und geschlossenem Status wie <dialog> und <details> zu gestalten, mussten bisher Attribute geprüft oder Klassen verwaltet werden. Die Pseudoklasse :open vereinfacht dies, da sie nur Elemente abgleicht, die sich gerade im offenen Status befinden. So lässt sich saubereres und deklaratives CSS erstellen.
Weitere Informationen finden Sie auf der MDN-Seite für die Pseudoklasse :open.
ToggleEvent.source
Wenn Sie mit der Popover API arbeiten, ist es wichtig, auf Statusänderungen zu reagieren. Die source-Eigenschaft der ToggleEvent-Schnittstelle gibt das Steuerelement zurück, das die Popover-Umschaltaktion ausgelöst hat. So können Sie den Ursprung des Ereignisses ermitteln und komplexe UI-Interaktionen koordinieren.
Weitere Informationen finden Sie in der MDN-Dokumentation zu ToggleEvent.source.
image-rendering Unterkunft
Mit der CSS-Eigenschaft image-rendering können Sie den Skalierungsalgorithmus steuern, der beim Ändern der Größe von Bildern verwendet wird. Das ist besonders nützlich für Pixelgrafiken, Bilder mit niedriger Auflösung oder QR-Codes, bei denen es wichtig ist, eine unscharfe Interpolation zu vermeiden und die Skalierung scharf und pixelig zu halten.
Weitere Informationen zur Verwendung
text-decoration-skip-ink: all
Unterstreichungen, die durch Unterlängen verlaufen, können manchmal unübersichtlich aussehen. Während text-decoration-skip-ink: auto die Tinte nur bei Überschneidungen überspringt, wird bei all die Unterstreichung unabhängig von Überschneidungen für alle Glyphen übersprungen. So haben Sie mehr Kontrolle über die typografische Ästhetik.
Weitere Informationen finden Sie im MDN-Leitfaden für „text-decoration-skip-ink“.
SharedWorker
Die SharedWorker API bietet einen speziellen Hintergrund-Worker, auf den von mehreren Browserkontexten aus zugegriffen werden kann, z. B. von verschiedenen Fenstern, Tabs oder iFrames mit demselben Ursprung. Das ist nützlich, um den Status zu teilen, Verbindungen zu verwalten oder Hintergrundaufgaben über Tabgrenzen hinweg zu koordinieren.
MDN-Dokumentation zu SharedWorker
Grundlegende, allgemein verfügbare Funktionen
Die folgenden Funktionen sind jetzt allgemein verfügbar. Das bedeutet, dass sie weitgehend kompatibel sind und in Ihren Projekten verwendet werden können.
lh Längeneinheit
Die relative Einheit lh entspricht der berechneten Zeilenhöhe des Elements, für das sie verwendet wird. So lassen sich Elemente wie Symbolbadges oder Hintergrundhervorhebungen einfacher an die Höhe einer Textzeile anpassen.
Weitere Informationen zu Längeneinheiten in MDN
rlh Längeneinheit
Ähnlich wie bei lh stellt die Einheit rlh die Zeilenhöhe dar, aber speziell für das Stammelement (<html>). So können Sie einen einheitlichen vertikalen Rhythmus auf der gesamten Seite festlegen, unabhängig von lokalen Überschreibungen der Schriftgröße oder Zeilenhöhe.
Weitere Informationen zu Längeneinheiten in der MDN-Referenz
Navigator.userActivation
Viele Web-APIs (z. B. für die Videowiedergabe, Pop-ups oder den Zugriff auf die Zwischenablage) erfordern eine Nutzerinteraktion, bevor sie ausgelöst werden können. Die Eigenschaft Navigator.userActivation gibt ein Objekt mit Informationen zum aktuellen und bisherigen Aktivierungsstatus des Nutzers im Fenster zurück. So können Skripts prüfen, ob eine Nutzeraktion stattgefunden hat.
Weitere Informationen zur Verwendung von „Navigator.userActivation“
clip-path
Mit der CSS-Eigenschaft clip-path können Sie einen Clipping-Bereich erstellen, der definiert, welcher Teil eines Elements sichtbar sein soll. Mit einfachen Formen wie Kreisen, Ellipsen oder Polygonen oder mit SVG-Pfaden lassen sich ansprechende Layoutdesigns und Übergänge erstellen, ohne dass der Überlauf ausgeblendet werden muss.
Weitere Informationen finden Sie auf der MDN-Seite für „clip-path“.
:user-invalid-Pseudoklasse
Im Gegensatz zu :invalid, bei dem das Styling angewendet wird, sobald eine Seite geladen wird (was oft zu einer schlechten Nutzerfreundlichkeit führt), wird die Pseudoklasse :user-invalid nur für ungültige Formularelemente angewendet, nachdem der Nutzer mit ihnen interagiert hat. Das bedeutet, dass Sie Feedback zur Formularvalidierung anzeigen können, nachdem der Nutzer das Feld verlassen hat.
Das Schlusswort
Lassen Sie uns wissen, wenn wir etwas im Zusammenhang mit Baseline übersehen haben. Wir werden es dann in einer zukünftigen Ausgabe berücksichtigen. Wenn Sie Fragen haben oder Feedback zu Baseline geben möchten, können Sie ein Problem in unserem Issue Tracker melden.