Hier finden Sie einige der interessanten Funktionen, die im August 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im August wurden Firefox 104, Chrome 104 und Chrome 105 stabil.
Einzelne Transformationen
Chrome 104 enthält einzelne Eigenschaften für CSS-Transforms. Die Attribute sind scale
, rotate
und translate
. Mit ihnen können Sie diese Teile einer Transformation individuell definieren.
Damit schließt sich Chrome Firefox und Safari an, die diese Properties bereits unterstützen.
Syntax für Abfragen zu neuen Medien
Chrome 104 enthält außerdem die Syntax für den Bereich von Mediaabfragen. Diese Funktion wurde bereits in Firefox eingeführt und trägt dazu bei, Medienabfragen zu optimieren. Beispiel:
@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 „Containerabfragen“ auf die Webplattform gebracht wird. Mit Medienabfragen können Sie die Größe des Darstellungsbereichs abfragen. Containerabfragen bieten dagegen die Möglichkeit, die Größe eines Containers abzufragen.
Wenn Sie Containerabfragen verwenden möchten, aktivieren Sie die Begrenzung mithilfe der Property container-type
.
.card-container {
container-type: inline-size;
}
Wenn Sie container-type
auf inline-size
festlegen, wird die Größe des übergeordneten Elements in der Ausrichtung „Inline“ abgefragt. In lateinischen Sprachen wie Englisch entspricht dies der Breite der Karte, da der Text inline von links nach rechts fließt.
Jetzt können wir mit diesem Container mithilfe von @container
Stile auf alle untergeordneten Elemente anwenden:
.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 und :has(): zwei leistungsstarke neue responsive APIs in Chromium 105.
Die übergeordnete Pseudoklasse :has()
Im oben genannten Beitrag wird auch :has()
erwähnt. Mit der neuen Pseudoklasse :has() können Sie das übergeordnete Element und die Geschwisterelemente basierend auf Bedingungen ansteuern. Weitere Informationen zum Familienselektor:has()
Sanitizer API
In Chrome 105 ist auch die Sanitizer API verfügbar. Diese API ist in die Plattform eingebunden, um Cross-Site-Scripting-Sicherheitslücken zu beheben.
In Chrome 105 ist außerdem die CSS-Pseudoklasse :modal verfügbar. Dies entspricht einem Element, das sich in einem Zustand befindet, in dem alle Interaktionen mit Elementen außerhalb ausgeschlossen werden. Beispiel: Eine <dialog>
, die mit der showModal()
API geöffnet wurde.
Die Methoden „findLast()“ und „findLastIndex()“
In Firefox 104 werden die Methoden Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() und TypedArray.prototype.findLastIndex() mit einem Flag unterstützt. Mit diesen Methoden können Sie den Wert bzw. den Index des letzten Elements in einem Array oder TypedArray ermitteln, das mit einer angegebenen Testfunktion übereinstimmt.
Betaversionen von Browsern
Betaversionen von Browsern bieten eine Vorschau auf Funktionen, die in der nächsten stabilen Version des Browsers enthalten sein werden. Jetzt ist der ideale Zeitpunkt, um neue Funktionen oder Änderungen zu testen, die sich auf Ihre Website auswirken könnten, bevor sie allgemein verfügbar sind.
Da die Veröffentlichungstermine des Monats etwas überschritten wurden, war Firefox 105 die einzige neue Betaversion im August. Derzeit sind noch nicht viele Details dazu bekannt.
Die im Juni erwähnte Betaversion von Safari 16 ist ebenfalls noch verfügbar.
Teil der Serie Neu im Web