Entdecken Sie einige der interessanten Funktionen, die im August 2022 in den stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Seit August sind Firefox 104, Chrome 104 und Chrome 105 stabil.
Einzelne Transformationen
Chrome 104 umfasst einzelne Eigenschaften für CSS-Transformationen. Die Attribute sind scale, rotate und translate, mit denen Sie diese Teile einer Transformation individuell definieren können.
So wird Chrome in Firefox und Safari integriert, da diese Eigenschaften bereits unterstützt werden.
Syntax neuer Medienabfragen
In Chrome 104 ist außerdem die Syntax für Medienabfragebereiche enthalten. Diese wird bereits von Firefox ausgeliefert und hilft bei der Rationalisierung von Medienabfragen. Zum Beispiel die folgende Medienabfrage:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Kann mit einem Vergleichsoperator geschrieben werden:
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Containerabfragen
Chrome 105 ist eine spannende Version, mit der die lang erwartete Funktion von Containerabfragen jetzt auch auf der Webplattform verfügbar ist. Während Medienabfragen Ihnen eine Möglichkeit bieten, Abfragen nach der Größe des Darstellungsbereichs vorzunehmen, bieten Containerabfragen eine Methode, um die Größe eines Containers abzufragen.
Wenn Sie Containerabfragen verwenden möchten, aktivieren Sie die Begrenzung mithilfe des Attributs container-type.
.card-container {
container-type: inline-size;
}
Wenn Sie für container-type den Wert inline-size festlegen, wird die Größe der Inline-Richtung des übergeordneten Elements abgefragt. Bei lateinamerikanischen Sprachen wie Englisch ist dies die Breite der Karte, da der Text inline von links nach rechts fließt.
Jetzt können wir diesen Container verwenden, um mithilfe von @container Stile auf alle untergeordneten Elemente anzuwenden:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Weitere Informationen zu Containerabfragen finden Sie im Beitrag @container and :has(): zwei leistungsstarke neue responsive APIs, die in Chromium 105 landen.
Die übergeordnete Pseudoklasse :has()
Im oben genannten Beitrag wird auch :has() erwähnt. Diese neue Pseudoklasse Die CSS- :has() -Pseudoklasse bietet Ihnen eine Möglichkeit, das übergeordnete Element und gleichgeordnete Elemente basierend auf Bedingungen auszurichten. Weitere Informationen finden Sie unter :has() der Familienauswahl.
Desitizer-API
In Chrome 105 befindet sich außerdem die Sanitizer API. Mit dieser API wird die Plattform bereinigt, um Cross-Site-Scripting-Sicherheitslücken zu beseitigen.
In Chrome 105 befindet sich außerdem die CSS-Pseudoklasse :modal. Dies entspricht einem Element, das einen Status hat, in dem alle Interaktionen mit Elementen außerhalb dieses Elements ausgeschlossen sind. Beispiel: Ein <dialog> wurde mit der showModal() API geöffnet.
Die Methoden findLast() und findLastIndex()
In Firefox 104 wird eine Unterstützung hinter einem Flag für die Methoden Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() und TypedArray.prototype.findLastIndex() hinzugefügt. Diese werden verwendet, um den Wert bzw. Index des letzten Elements in einer Array- oder TypedArray-Funktion zu ermitteln, die einer angegebenen Testfunktion entspricht.
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.
Da die Veröffentlichungsdaten etwas außerhalb des Monats liegen, war die einzige neue Betaversion im August Firefox 105, das derzeit nur wenig Details enthält.
Die im Juni erwähnte Betaversion von Safari 16 läuft ebenfalls weiter.
Teil der Reihe zum Thema „Neu im Web“