Auf der Google I/O habe ich Sie darüber informiert, wie sich Baseline seit unserer Ankündigung auf der I/O letztes Jahr weiterentwickelt hat. Außerdem kündigte ich das Web Platform Dashboard, die Integration in das RUM-Archiv und die baldige Integration in RUMvision an. Dieser Beitrag fasst alle Ressourcen aus dem Vortrag an einem Ort zusammen.
Das Web Platform-Dashboard bietet eine spannende neue Möglichkeit, die gesamte Webplattform und den Weg einzelner Features zur Interoperabilität zu sehen und Teil von Baseline zu werden. Weitere Informationen dazu finden Sie unter Webplattform-Dashboard bekannt.
Die Integration von Baseline in die Tools, die Sie täglich verwenden, war schon immer Teil der Vision für dieses Projekt. Der Umgang mit Browserkompatibilität ist ein Thema, über das Sie sich keine Gedanken mehr machen müssen. Lesen Sie weitere Informationen zur RUM-Archiv-Integration und sehen Sie in diesem Bereich schon bald Nachrichten von weiteren Tool-Anbietern.
Neu bei Baseline
Auf der I/O habe ich 12 Webplattform-Features vorgestellt, die seit Kurzem Teil von Baseline Newly verfügbar sind. Diese Funktionen sind jetzt in Chrome, Edge, Firefox und Safari verfügbar und reichen von kleinen Ergänzungen zur Optimierung der Entwicklung bis hin zu einigen der von Entwicklern am häufigsten gewünschten Funktionen wie Containerabfragen und :has().
Containerabfragen zur Größe
Mit Größencontainerabfragen können Sie Ihr Design basierend auf der Breite oder Inline-Größe eines Containers ändern, statt nur Medienabfragen auf die Größe des Darstellungsbereichs auszurichten. Dies ermöglicht mehr wiederverwendbare Komponenten, die sich bei der Platzierung in einem Layout an den verfügbaren Platz anpassen können. Sie stehen fast so lange, wie das Konzept des responsiven Designs existiert.
- Neu ab Februar 2023.
- Ab August 2025 allgemein verfügbar.
Weitere Informationen zu Containerabfragen in MDN finden Sie unter Containerabfragen landen in stabilen Browsern. In Fallstudien zu Containerabfragen erfahren Sie, wie andere Entwicklungsteams davon profitieren.
:has()-Auswahl
Der :has()-Selektor gibt etwas aus, das seit vielen Jahren eine weitere häufige Anfrage von Entwicklern ist – einen übergeordneten Selektor, eine Möglichkeit, ein Element basierend auf seinem Inhalt auszuwählen. Doch :has() ist viel mehr als nur das.
Wie bei Containerabfragen ist dies unglaublich nützlich, wenn Sie wiederverwendbare Komponenten erstellen, da Sie eine einzelne Komponente erstellen können, die sich an den Inhalt anpassen lässt.
- Neu ab Dezember 2023.
- Ab Juni 2026 allgemein verfügbar.
Weitere Informationen zu :has() in der MDN, in der Familienauswahl für :has() und in den Fallstudien zu :has()
Unterraster des CSS-Rasterlayouts
Subgrid ermöglicht es einem verschachtelten Rasterlayout, die Tracks des übergeordneten Elements zu übernehmen. Es ermöglicht eine bessere Ausrichtung von Elementen innerhalb verschachtelter Raster.
- Neu ab Dezember 2023.
- Ab Juni 2026 allgemein verfügbar.
Weitere Informationen zum Subgrid im MDN und zum CSS-Subgrid, das auf eine Vielzahl anderer Ressourcen verlinkt.
CSS-Verschachtelung
In den letzten Jahren ließ sich CSS von den Funktionen inspirieren, die Entwickler in Präprozessoren wie Sass verwendet haben. Benutzerdefinierte CSS-Eigenschaften, oft auch CSS-Variablen genannt, sind eine weithin verfügbare Funktion, mit der Variablen wie Farben an einem Ort festgelegt und in Ihrem gesamten CSS-Code verwendet werden können. Bisher war dies nur bei Verwendung eines Präprozessors verfügbar.
Eine weitere Funktion von Präprozessoren ist die Verschachtelung. Durch Verschachtelung werden Wiederholungen von Selektoren vermieden. Außerdem wird die Lesbarkeit von CSS verbessert, da zusammengehörige Elemente einfacher in Gruppen zusammengefasst werden können.
- Neu ab August 2023
- Ab Februar 2026 allgemein verfügbar
Weitere Informationen zur Verschachtelung von CSS im MDN und Verschachtelung von Preisvergleichsportalen
Das HTML-Element <search>
Die Suche wird auf vielen Websites und in vielen Anwendungen verwendet. Bis vor Kurzem gab es jedoch kein Element, um Funktionen zum Suchen oder Filtern auf einer Seite mit Markup auszuzeichnen. Das Element <search> wurde für diesen Zweck entwickelt. Es ist ein Element, in das Sie ein Suchformular oder andere Elemente zum Filtern von Ergebnissen platzieren können.
- Neu verfügbar ab Oktober 2023
- Ab April 2026 allgemein verfügbar
Weitere Informationen zum Element <search> in der MDN
Responsive Videoanzeigen
Diese Funktion bezieht sich auf die Möglichkeit, das <source>-Element innerhalb eines <video>-Elements zu verwenden, um Videos in angemessener Größe an verschiedene Geräte zu senden. Dies funktioniert genauso wie Bilder unterschiedlicher Größe.
- Neu verfügbar ab November 2023
- Ab Mai 2026 allgemein verfügbar
Weitere Informationen zu MDN finden Sie unter „Media or Image Source“-Element und Responsive Videos verwenden.
Das Attribut inert
Wenn ein Element inaktiv ist, kann nicht mit ihm interagiert werden. Wenn Sie beispielsweise ein Dialogfenster öffnen, können Elemente, die sich auf der Seite hinter dem Dialogfeld befinden, nicht angeklickt oder mit der Tabulatortaste aufgerufen werden. Mit dem Attribut inert können Sie die Trägheit in einem beliebigen Teil Ihrer UI steuern.
Wenn das Attribut inert auf ein Element angewendet wird, werden Klickereignisse nicht ausgelöst, wenn auf das Element geklickt wird, das Element kann nicht in den Fokus rücken und das Element und sein Inhalt werden von Hilfstechnologien ausgeblendet, da sie aus der Barrierefreiheitsstruktur ausgeschlossen sind.
- Neu verfügbar ab April 2023
- Ab Oktober 2025 allgemein verfügbar
Weitere Informationen finden Sie unter Inert on MDN und Das inert-Attribut.
Die color-mix()-Funktion
Die Funktion color-mix() ermöglicht das Mischen einer Farbe in eine andere in allen verfügbaren Farbräumen. Dazu gehören alle neuen Farbmodelle (LCH, Lab, OKLCH und OKLab), die seit Kurzem Teil von Baseline Newly verfügbar sind.
- Neu verfügbar ab April 2023
- Ab Oktober 2025 allgemein verfügbar
Weitere Informationen zu color-mix() in der MDN und zu CSS color-mix() findest du in unserem umfassenden High Definition CSS-Farbleitfaden, in dem alle neuen Farbmodelle aufgeführt sind, die in CSS verfügbar sind. Außerdem können Sie unter gradient.style mit diesen neuen Farben experimentieren und wunderschöne Farbverläufe erstellen.
:user-valid und :user-invalid
Die Pseudoklassen :valid und :invalid sind in Browsern allgemein verfügbar und geben an, ob ein Formularelement derzeit gemäß den für das Formular festgelegten Einschränkungsregeln gültig oder ungültig ist. Wenn Sie also ein Feld mit einem E-Mail-Typ haben, das einen Namen enthält, wird es von der Pseudoklasse :invalid ausgewählt. Sie können dann eine Farbe oder ein Symbol hinzufügen, um zu zeigen, dass es korrigiert werden muss.
Das Problem bei den Pseudoklassen :valid und :invalid besteht darin, dass sie angewendet werden, bevor der Nutzer mit einem Formular interagiert. Wenn also ein Formularelement erforderlich ist und der Nutzer es noch nicht ausgefüllt hat, wird der ungültige Stil angezeigt. Normalerweise werden ungültige Stile erst dann angezeigt, wenn ein Nutzer etwas falsch eingegeben oder ein Feld übersprungen und das Feld leer gelassen hat.
Verwenden Sie die Pseudoklassen :user-valid und :user-invalid, um die Nutzererfahrung in dieser Situation zu verbessern. Sie verhalten sich fast gleich, mit der Ausnahme, dass
sie erst dann übereinstimmen, wenn der Nutzer mit dem Feld interagiert. Im Beispiel eines Pflichtfeldes muss der Nutzer also mit der Tabulatortaste in das Feld klicken oder es anklicken und dann wegbewegen, ohne das Feld auszufüllen. Nur so wird der ungültige Status im Feld angezeigt.
- Neu verfügbar ab Oktober 2023
- Ab April 2026 allgemein verfügbar
Weitere Informationen zu :user-valid und :user-invalid auf MDN.
Komprimierungsstreams
Viele Webanwendungen müssen dem Nutzer einen Download in einem komprimierten Format wie einer ZIP-Datei zur Verfügung stellen. In der Vergangenheit musste die Anwendung dazu eine Komprimierungsbibliothek enthalten, also Code, mit dem die Größe der Anwendung für alle Nutzer erhöht wurde. Die Compression Streams API bietet eine integrierte Möglichkeit zum Komprimieren eines Datenstreams.
- Neu verfügbar ab Mai 2023
- Ab November 2025 allgemein verfügbar
Weitere Informationen zur Compression Streams API im MDN und Komprimierungsstreams werden jetzt in allen Browsern unterstützt
Das deklarative Shadow-DOM
Das deklarative Shadow-DOM ist eine neue Möglichkeit zum Erstellen eines Schattenbaums aus HTML. Bisher konnte ein Schattenbaum nur aus JavaScript mit attachShadow() erstellt werden. Diese Möglichkeit bietet sich besonders in Umgebungen wie E-Mail-Clients an, in denen JavaScript nicht ausgeführt wird. Wichtig ist auch für serverseitig gerenderte Webkomponenten.
- Neu verfügbar ab Februar 2024
- Ab August 2026 allgemein verfügbar
Weitere Informationen zum deklarativen Shadow-DOM
Popover API
Pop-ups werden in unseren Webanwendungen für viele verschiedene Aufgaben verwendet. Dazu gehören z. B. Menüs, benutzerdefinierte Toast-Benachrichtigungen und Inhaltsauswahl. Die Popover API bietet jetzt eine integrierte Möglichkeit, diese Pop-ups auf dekorative Weise zu erstellen.
- Neu verfügbar ab April 2024
- Ab Oktober 2026 allgemein verfügbar
Weitere Informationen zur Popover API in MDN, zur Popover API in Baseline und in den Popover-Fallstudien
Diese 12 Features sind nur einige der Elemente, die Teil von „Baseline Newly verfügbar“ wurden. Auf dieser Website finden Sie weitere Informationen. Hier erfahren Sie mehr über alle Features, die Teil von Baseline 2023 wurden, und die wachsende Anzahl von Features, die Teil von Baseline 2024 sind.