Veröffentlicht am 17. Juli 2026
Willkommen zum monatlichen Baseline-Newsletter. Im Juni 2026 wurde field-sizing
als Baseline verfügbar, sodass sich Formularsteuerelemente automatisch an ihren Inhalt anpassen können. Inzwischen haben viele CSS-, HTML- und Web-API-Funktionen den Status „Baseline Widely available“ erreicht. Außerdem gibt es wichtige Updates von der Entwickler-Community.
Baseline-Benachrichtigungen zum Webplattformstatus
Mit Baseline-Benachrichtigungen im Web Platform Status-Dashboard ist es jetzt einfacher, den Überblick darüber zu behalten, wann Webfunktionen interoperabel werden. Wenn Sie sich mit GitHub anmelden, können Sie Benachrichtigungen für Funktionen abonnieren, wenn sie als „Neu verfügbar“, „Weitgehend verfügbar“ oder mit neuen Browserimplementierungen gekennzeichnet werden. Für Abos können monatliche, wöchentliche oder sofortige E‑Mail-Benachrichtigungen oder benutzerdefinierte RSS-Feeds konfiguriert 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 Entwicklerteam zu benachrichtigen.
Neu verfügbare grundlegende Funktionen
Die Funktionen in diesem Abschnitt werden ab Juni 2026 im Core-Browserset unterstützt und sind jetzt Baseline Newly available.
field-sizing
Mit der CSS-Eigenschaft field-sizing lässt sich das Größenanpassungsverhalten von Formularelementen wie <textarea>, <input> und <select> steuern, die traditionell standardmäßig feste Abmessungen haben. field-sizing: content-Formularsteuerelemente werden automatisch maximiert oder minimiert, um an ihren Inhalt angepasst zu werden. Dadurch 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“.
Allgemein verfügbare grundlegende Funktionen
Die folgenden Funktionen sind jetzt allgemein verfügbar und können in Ihren Projekten verwendet werden.
:has()-Pseudoklasse
Mit dem CSS-Übergeordneten-Selektor :has() können Sie ein Element basierend auf seinen untergeordneten Elementen oder nachfolgenden Geschwisterelementen gestalten. Mit dieser funktionalen Pseudoklasse können Sie bedingte Layoutmuster direkt in CSS definieren, ohne dass JavaScript zum Untersuchen von DOM-Strukturen erforderlich ist.
Weitere Informationen finden Sie auf der MDN-Seite zur Pseudoklasse :has.
HTMLIFrameElement.loading
Das Attribut loading für <iframe>-Elemente ermöglicht das Lazy Loading für eingebettete Frames. Wenn Sie loading="lazy" angeben, verschieben Browser das Laden von iFrames außerhalb des sichtbaren Bereichs, bis sie in den Darstellungsbereich gescrollt werden. So werden Netzwerkbandbreite und der Overhead beim ersten Seitenaufbau eingespart.
Weitere Informationen finden Sie in der MDN-Referenz zu HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
Mit der Methode reset() für 2D-Canvas-Kontexte wird der Status des Zeichenkontexts gelöscht. Eigenschaften wie Transformationen, Clipping-Pfade, Linien- 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 in der MDN-Dokumentation zu CanvasRenderingContext2D.reset
cap Längeneinheit
Die schriftgrößenbezogene Einheit cap entspricht der nominalen Versalhöhe der Schriftart des Elements. Damit können Sie Elemente relativ zur Höhe von Großbuchstaben ausrichten und skalieren, was präzise typografische Layouts ermöglicht.
Weitere Informationen zu Längeneinheiten in MDN
counter-set Unterkunft
Mit der CSS-Eigenschaft counter-set wird ein CSS-Zähler auf einen bestimmten Wert gesetzt. Sie ergänzt counter-reset und counter-increment. Sie bietet mehr Kontrolle beim Bearbeiten von nummerierten Listen, Dokumentgliederungen oder benutzerdefinierten Zählerfolgen.
Weitere Informationen finden Sie auf der MDN-Seite für counter-set.
createImageBitmap()
Mit der statischen Methode createImageBitmap() wird ein asynchrones Bitmap-Bild aus verschiedenen Bildquellen erstellt, darunter <img>, <canvas>, Blob oder ImageData. Da Bilder außerhalb des Haupt-Threads 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 zu createImageBitmap.
Datentyp von <easing-function>
Der CSS-Datentyp <easing-function> beschreibt mathematische Änderungsratenkurven für Übergänge und Animationen. Neben Standard-Keywords wie ease-in oder cubic-bezier() werden auch Funktionen wie linear() unterstützt, mit denen benutzerdefinierte Feder- oder Bouncing-Effekte erstellt werden können.
MDN-Referenz für die Easing-Funktion
&-Nesting-Selektor
Der &-Nesting-Selektor verankert Selektoren für untergeordnete Regeln explizit an ihrem übergeordneten Selektor, wenn das integrierte CSS-Nesting verwendet wird. Sie sorgt für Klarheit und korrekte Spezifitätsregeln beim Definieren von verschachtelten Hover-, Fokus- oder Pseudoklassenstatus.
Weitere Informationen finden Sie im MDN-Leitfaden für den Nesting-Selektor.
Responsives Preloading mit rel="preload"
Mit dem Attribut media für <link rel="preload">-Elemente können wichtige Assets responsiv vorab geladen werden. Durch die Kombination von rel="preload" mit Media-Queries laden Browser nur die Assets herunter, die der Breite des Darstellungsbereichs oder den Anzeigeeigenschaften des Nutzers entsprechen. Dies geschieht früh im Ladezyklus.
Weitere Informationen zur Verwendung finden Sie in der MDN-Dokumentation zu rel="preload".
HTMLMediaElement.preservesPitch
Mit dem Attribut preservesPitch für die Elemente <audio> und <video> wird gesteuert, ob der Browser die Audio-Tonhöhe anpasst, wenn sich die playbackRate ändert.
Wenn Sie diese Option auf false einstellen, werden Tonhöhenverschiebungen beim Beschleunigen oder Verlangsamen der Medienwiedergabe zugelassen.
Weitere Informationen finden Sie auf der MDN-Seite für HTMLMediaElement.preservesPitch.
:dir()-Pseudoklasse
Die CSS-Pseudoklasse :dir() stimmt Elemente basierend auf der Textrichtung ab, z. B. ltr oder rtl. Die Richtung wird von HTML-Attributen wie dir oder dem berechneten Textkontext übernommen.
Weitere Informationen finden Sie auf der MDN-Seite für die Pseudoklasse :dir.
pow()-Funktion
Mit der CSS-Funktion pow() werden Exponentialwerte direkt in CSS-Deklarationen berechnet, indem eine Basiszahl mit einem Exponenten potenziert wird (z. B. pow(2, 3)). Das vereinfacht die responsive Skalierung und mathematische Rasterbeziehungen.
Weitere Informationen finden Sie in der MDN-Referenz zur pow-Funktion.
CSS-Property mask
Mit der CSS-Kurzschreibweise mask werden Teile eines Elements mithilfe von Bildern oder Verläufen als Clipping-Ebenen ausgeblendet. Dabei werden untergeordnete Eigenschaften wie mask-image, mask-position und mask-repeat kombiniert, um komplexe visuelle Maskierungseffekte zu erzielen.
Weitere Informationen finden Sie auf der MDN-Seite zur Maskeneigenschaft.
@media (scripting)
Mit dem Media-Feature scripting wird geprüft, ob clientseitiges Scripting (z. B. JavaScript) im Browserkontext aktiviert und verfügbar ist. So können progressive Enhancement-Stile auf Umgebungen mit oder ohne aktives JavaScript ausgerichtet werden.
URL.canParse()
Die statische Methode URL.canParse() prüft, ob ein bestimmter String eine gültige, parsierbare URL (mit einer optionalen Basis-URL) ist, ohne eine Ausnahme auszulösen. So wird die URL-Validierung zur Laufzeit vereinfacht, bevor URL-Objekte instanziiert werden.
Details zur Implementierung finden Sie in der MDN-Dokumentation zu 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 werden Authentifizierung und zustandsbehaftete Interaktionen über Domänengrenzen hinweg ermöglicht.
Weitere Informationen finden Sie auf der MDN-Seite zur Storage Access API.
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.