Neu auf der Webplattform im August

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

Im August wurden Firefox 104, Chrome 104 und Chrome 105 stabil.

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

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Quelle

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.
}

Unterstützte Browser

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Quelle

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.

Unterstützte Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Quelle

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()

Unterstützte Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Quelle

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.

Unterstützte Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Quelle

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.

Unterstützte Browser

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • Safari: 15.4.

Quelle

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