Entdecke einige der interessanten Funktionen, die im März 2022 in den stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Seit März sind Chrome 99, Chrome 100, Firefox 98 und Safari 15.4 stabil. Dadurch kam eine ganze Reihe neuer Funktionen auf die Plattform, und viele dieser Ergänzungen führten dazu, dass die Funktion in allen drei Browser-Engines verfügbar war. In diesem Beitrag habe ich mich auf die Ergänzungen konzentriert, die uns browserübergreifende Interoperabilität ermöglichen. In den Versionshinweisen finden Sie jedoch alle Funktionen, die den einzelnen Engines hinzugefügt wurden.
Chrome 99 und Safari 15.4 enthalten Cascade-Ebenen. Die @layer-at-Regel definiert eine Kaskadenschicht, mit der Sie Spezifitäten steuern können. Da sie in Firefox integriert wurden, ist Cascade Layers jetzt in allen drei Browser-Engines verfügbar. Weitere Informationen zu Cascade-Ebenen finden Sie im Artikel Kaskadierende Ebenen in Ihrem Browser verfügbar.
Chrome 100 enthält den neuen Wert plus-lighter für die CSS-Eigenschaft mix-blend-mode. Dieser Wert ist hilfreich beim Überblenden von zwei Elementen, wenn alle oder ein Teil der Pixel dieselben Werte haben. Weitere Informationen zu diesem Problem finden Sie unter Das Überblenden zweier DOM-Elemente ist derzeit nicht möglich.
Unterstützte Browser
- 100
- 100
- 99
- 9,1
Safari 15.4 enthält die Property contain, die eine CSS-Eindämmung ermöglicht.
In Safari 15.4 gibt es außerdem accent-color, mit dem sich die Akzentfarbe einiger Formularsteuerelemente steuern lässt.
In Firefox 98 und Safari 15.4 wurde das Element <dialog> implementiert, das ein Dialogfeld darstellt.
Safari 15.4 hat auch die Unterstützung für die Pseudoklasse :focus-visible abgeschlossen. Die Implementierung hierfür wurde von Igalia durchgeführt.
Beta-Browser-Releases
Beta-Browser-Versionen bieten eine Vorschau auf Elemente in der nächsten stabilen Version des Browsers. Dies ist ein guter Zeitpunkt, um neue Funktionen zu testen oder die Entfernung von Inhalten zu testen, die sich auf Ihre Website auswirken könnten, bevor die Veröffentlichung weltweit verfügbar ist.
Die neuen Betaversionen im März waren Chrome 101 und Firefox 99.
Die Betaversion von Chrome 101 enthält die HWB-Farbnotation. Hiermit wird die Farbe anhand von Farbton, Weiß und Schwärzung angegeben. Wie bei anderen Farbnotationen gibt eine optionale Alpha-Komponente die Deckkraft an.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99 enthält die Eigenschaft pdfViewerEnabled der Navigator-Benutzeroberfläche. Diese Eigenschaft gibt an, ob der Browser die Inline-Anzeige von PDF-Dateien unterstützt.
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
Diese Betafunktionen sind bald auch in stabilen Browsern verfügbar.
Teil der Reihe zum Thema „Neu im Web“