Veröffentlicht am 17. Juli 2026
Willkommen zum monatlichen Baseline-Überblick. Im Juni 2026 wurde field-sizing als neue Baseline-Funktion eingeführt, mit der Formularsteuerelemente automatisch an ihren Inhalt angepasst werden können. Außerdem haben viele CSS-, HTML- und Web API-Funktionen den Status „Weitgehend verfügbar“ erreicht. Gleichzeitig gab es wichtige Updates von der Entwickler-Community.
Baseline-Benachrichtigungen zum Webplattformstatus
Mit Baseline-Benachrichtigungen im Dashboard „Webplattformstatus“ ist es jetzt einfacher, den Überblick zu behalten, wann Webfunktionen interoperabel werden. Wenn Sie sich mit GitHub anmelden, können Sie Benachrichtigungen für Funktionen abonnieren, sobald sie den Status „Neu verfügbar“ oder „Weitgehend verfügbar“ erreichen oder neue Browserimplementierungen erhalten. Abonnements können so konfiguriert werden, dass monatliche, wöchentliche oder sofortige E‑Mail-Updates oder benutzerdefinierte RSS-Feeds gesendet werden. Sie können Benachrichtigungen auf gespeicherte Suchanfragen beschränken, z. B. auf alle HTML-Funktionen, benutzerdefinierte Newsletter erstellen, freigabefähige Funktionslisten generieren oder Slack-Webhooks konfigurieren, um Ihr Entwicklungsteam zu benachrichtigen.
Weitere Informationen in Introducing Baseline Alerts.
Neue Baseline-Funktionen
Die Funktionen in diesem Abschnitt werden ab Juni 2026 in den wichtigsten Browsern unterstützt und sind jetzt als „Neu verfügbar“ gekennzeichnet.
field-sizing
Mit der field-sizing CSS-Eigenschaft können Sie das Verhalten der Größenanpassung von
Formularelementen wie <textarea>, <input>, und <select> steuern, die normalerweise
feste Standardabmessungen haben. Mit field-sizing: content werden Formularsteuerelemente automatisch erweitert oder verkleinert, um an ihren Inhalt angepasst zu werden. So sind keine benutzerdefinierten JavaScript-Skripts für die automatische Größenanpassung mehr erforderlich.
Weitere Informationen finden Sie auf der MDN-Referenzseite für „field-sizing“.
Weitgehend verfügbare Baseline-Funktionen
Die folgenden Funktionen sind jetzt „Weitgehend verfügbar“. Das bedeutet, dass sie jetzt weitgehend kompatibel sind und in Ihren Projekten verwendet werden können.
Pseudoklasse :has()
Mit dem CSS-Elternselektor :has() können Sie ein Element basierend auf seinen Nachfolgern oder nachfolgenden Geschwistern formatieren. Diese funktionale Pseudoklasse ermöglicht bedingte Layoutmuster direkt in CSS, ohne dass JavaScript zum Untersuchen von DOM-Strukturen erforderlich ist.
Weitere Informationen finden Sie auf der MDN-Seite für die :has Pseudoklasse.
HTMLIFrameElement.loading
Mit der Eigenschaft loading für <iframe>-Elemente kann das Lazy Loading für eingebettete
Frames aktiviert werden. Wenn Sie loading="lazy" angeben, verschieben Browser das Laden von IFrame-Elementen außerhalb des Bildschirms, bis sie in die Nähe des Darstellungsbereichs gescrollt werden. So werden Netzwerkbandbreite und anfänglicher
Seitenladeaufwand gespart.
Weitere Informationen finden Sie in der MDN-Referenz für „HTMLIFrameElement.loading“.
CanvasRenderingContext2D.reset()
Mit der Methode reset() für 2D-Canvas-Kontexte wird der Zustand des Zeichenkontexts gelöscht. Eigenschaften wie Transformationen, Clipping-Pfade, Linienstile und Füllstile werden auf ihre Standardwerte zurückgesetzt. So kann ein Canvas-Kontext sauber wiederverwendet werden, ohne dass Eigenschaften manuell bereinigt werden müssen.
Weitere Informationen finden Sie in der MDN-Dokumentation für „CanvasRenderingContext2D.reset“.
Längeneinheit cap
Die schriftbezogene Einheit cap entspricht der nominalen Höhe der Großbuchstaben der Schriftart des Elements. Damit können Sie Elemente relativ zur Höhe von Großbuchstaben ausrichten und ihre Größe anpassen, um präzise typografische Layouts zu erstellen.
Weitere Informationen finden Sie in der MDN-Referenz für Längeneinheiten.
Eigenschaft counter-set
Mit der CSS-Eigenschaft counter-set wird ein CSS-Zähler auf einen bestimmten Wert festgelegt. Sie ergänzt counter-reset und counter-increment. Sie bietet Kontrolle beim Bearbeiten von nummerierten Listen, Dokumentgliederungen oder benutzerdefinierten Zählersequenzen.
Weitere Informationen finden Sie auf der MDN-Seite für „counter-set“.
createImageBitmap()
Die statische Methode createImageBitmap() erstellt ein asynchrones Bitmap-Bild
aus verschiedenen Bildquellen, darunter <img>, <canvas>, Blob oder
ImageData. Da Bilder außerhalb des Hauptthreads decodiert werden, wird die UI-Leistung bei der Verarbeitung komplexer Canvas-Grafiken nicht beeinträchtigt.
Weitere Informationen zur Implementierung finden Sie in der MDN-Dokumentation für „createImageBitmap“.
Datentyp <easing-function>
Der <easing-function> CSS-Datentyp beschreibt mathematische Kurven für die Änderungsrate
für Übergänge und Animationen. Neben Standard-Keywords wie ease-in oder cubic-bezier() werden auch Funktionen wie linear() unterstützt, um benutzerdefinierte Feder- oder Bounce-Effekte zu erstellen.
Weitere Informationen finden Sie in der MDN-Referenz für „easing-function“.
Nesting-Selektor &
Der Nesting-Selektor & verankert Selektoren für untergeordnete Regeln explizit an ihren übergeordneten Selektor, wenn die integrierte CSS-Nesting-Funktion verwendet wird. So werden Klarheit und korrekte Spezifitätsregeln gewährleistet, wenn verschachtelte Hover-, Fokus- oder Pseudoklassen-Zustände definiert werden.
Weitere Informationen finden Sie im MDN-Leitfaden für den Nesting Selektor.
Responsives Vorabladen mit rel="preload"
Mit dem Attribut media für <link rel="preload"> Elemente können wichtige Assets responsiv
vorab geladen werden. Wenn Sie rel="preload" mit Media-Queries kombinieren,
laden Browser nur die Assets herunter, die der Darstellungsbereichsbreite oder den Anzeige
eigenschaften des Nutzers entsprechen, und zwar früh im Ladezyklus.
Weitere Informationen finden Sie in der MDN-Dokumentation für „rel="preload"“.
HTMLMediaElement.preservesPitch
Mit der Eigenschaft preservesPitch für <audio> und <video> Elemente wird gesteuert,
ob der Browser die Tonhöhe anpasst, wenn die playbackRate geändert wird.
Wenn Sie die Eigenschaft auf false setzen, sind Tonhöhenänderungen möglich, wenn die Medienwiedergabe beschleunigt oder verlangsamt wird.
Weitere Informationen finden Sie auf der MDN-Seite für „HTMLMediaElement.preservesPitch“.
Pseudoklasse :dir()
Die CSS-Pseudoklasse :dir() stimmt mit Elementen basierend auf der Textrichtung überein
, z. B. ltr oder rtl. Dabei wird die Richtung berücksichtigt, die von HTML-Attributen wie
dir oder dem berechneten Textkontext übernommen wurde.
Weitere Informationen finden Sie auf der MDN-Seite für die :dir Pseudoklasse.
Mathematische Funktion pow()
Mit der CSS-Funktion pow() können Sie Exponentialwerte direkt in CSS-Deklarationen berechnen, indem Sie eine Basiszahl mit einem Exponenten potenzieren, z. B. pow(2, 3). So lassen sich responsive Skalierung und mathematische Rasterbeziehungen vereinfachen.
Weitere Informationen finden Sie in der MDN-Referenz für die Funktion „pow “.
CSS-Eigenschaft mask
Mit der CSS-Kurzform-Eigenschaft mask können Sie Teile eines Elements ausblenden, indem Sie Bilder oder Farbverläufe als Clipping-Ebenen verwenden. Sie kombiniert Untereigenschaften wie mask-image, mask-position und mask-repeat, um komplexe visuelle Maskierungseffekte zu erstellen.
Weitere Informationen finden Sie auf der MDN-Seite für die Eigenschaft „mask“.
@media (scripting)
Mit dem Media-Feature scripting wird getestet, ob clientseitige Skripts wie JavaScript im Browserkontext aktiviert und verfügbar sind. So können progressive Enhancement-Stile auf Umgebungen mit oder ohne aktives JavaScript ausgerichtet werden.
Weitere Informationen finden Sie in der MDN-Referenz für das Media-Feature „scripting“.
URL.canParse()
Mit der statischen Methode URL.canParse() wird geprüft, ob ein bestimmter String eine gültige,
parsierbare URL ist (mit einer optionalen Basis-URL), ohne eine Ausnahme auszulösen.
So lässt sich die URL zur Laufzeit einfacher validieren, bevor URL Objekte instanziiert werden.
Weitere Informationen zur Implementierung finden Sie in der MDN-Dokumentation für „URL.canParse“.
Storage Access API
Die Storage Access API bietet einen Mechanismus, mit dem websiteübergreifende Inhalte, die in <iframe>s von Drittanbietern eingebettet sind, Zugriff auf nicht partitionierte Cookies und Speicher anfordern können. So sind Authentifizierung und zustandsbehaftete Interaktionen über Domain-Grenzen hinweg möglich.
Weitere Informationen finden Sie auf der MDN-Seite für die Storage Access API.
Das Schlusswort
Wenn wir etwas im Zusammenhang mit Baseline vergessen haben, teilen Sie uns das bitte mit. 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.