Diese Seite wurde von der Cloud Translation API übersetzt.

Neu auf der Webplattform im August

Entdecke einige der interessanten Funktionen, die im August 2022 in stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

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.

Unterstützte Browser

Quelle

Neue Medienabfragesyntax

Chrome 104 enthält außerdem die Syntax für den Bereich von Mediaabfragen. Diese Funktion wurde bereits von Firefox bereitgestellt und hilft bei der Optimierung von Medienabfragen. 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.
}

Unterstützte Browser

Quelle

Containerabfragen

Chrome 105 ist eine spannende Version, die die lang erwartete Funktion für Containerabfragen auch auf der Webplattform verfügbar macht. Mit Medienabfragen können Sie die Größe des Darstellungsbereichs abfragen. Containerabfragen bieten dagegen die Möglichkeit, die Größe eines Containers abzufragen.

Unterstützte Browser

Quelle

Wenn Sie Containerabfragen verwenden möchten, aktivieren Sie die Begrenzung mithilfe der Property 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. 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 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 und :has(): zwei leistungsstarke neue responsive APIs in Chromium 105.

Die übergeordnete Pseudoklasse :has()

Im oben genannten Beitrag wird auch :has() erwähnt. Mit dieser neuen Pseudoklasse Die CSS-Pseudoklasse :has() bietet Ihnen die Möglichkeit, das übergeordnete Element und gleichgeordnete Elemente basierend auf Bedingungen auszurichten. Weitere Informationen finden Sie unter :has() zur Familienauswahl.

Unterstützte Browser

Quelle

Sanitizer API

Ebenfalls in Chrome 105 enthalten ist die Sanitizer API. 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.

Unterstützte Browser

Quelle

Die Methoden „findLast()“ und „findLastIndex()“

Firefox 104 unterstützt jetzt hinter einem Flag die Methoden Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() und TypedArray.prototype.findLastIndex(). Diese werden verwendet, um den Wert bzw. Index des letzten Elements in einem Array bzw. TypedArray zu ermitteln, das mit einer bereitgestellten Testfunktion übereinstimmt.

Unterstützte Browser

Quelle

Betaversionen von Browsern

Beta-Browserversionen bieten Ihnen eine Vorschau auf Dinge, 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öffentlichungsdaten etwas außerhalb des Monats liegen, war die einzige neue Betaversion im August Firefox 105, die derzeit noch nicht sehr detailliert ist.

Die im Juni erwähnte Betaversion von Safari 16 ist ebenfalls noch verfügbar.

Teil der Reihe „Neu im Web“