Plattform-Nachrichten: Abgerundete Outlines, GPU-beschleunigte SVG-Animationen, Wie CSS-Variablen aufgelöst werden

In den Nachrichten dieser Woche erhält Firefox abgerundete Outlines, SVG-Animationen sind in Chrome nun GPU-beschleunigt, es gibt keine physikalischen Einheiten in CSS, das Kreuzworträtsel der *New York Times* ist zugänglich und CSS-Variablen werden aufgelöst, bevor der Wert vererbt wird.

Springen wir in die Nachrichten!

Abgerundete Outlines kommen zu Firefox

Die Idee, dass die Outline der abgerundeten Bogenkante folgt, existiert seitdem es möglich ist, abgerundete Ränder über die border-radius-Eigenschaft Mitte der 2000er Jahre zu erstellen. Dies wurde Mozilla, WebKit und Chromium vor über zehn Jahren vorgeschlagen und ist seit 2015 sogar Teil der CSS UI-Spezifikation.

Die Teile der Outline müssen nicht rechteckig sein. Soweit die Outline der Kante folgt, sollte sie der border-radius-Kurve folgen.

Schneller Vorlauf bis heute im Jahr 2021 und Outlines sind in jedem Browser ohne Ausnahme immer noch Rechtecke.

Aber das ändert sich endlich. In wenigen Wochen wird Firefox der erste Browser mit abgerundeten Outlines sein, die automatisch der Form des Rahmens folgen. Dies gilt auch für die standardmäßige Fokus-Outline von Firefox auf Schaltflächen.

Bitte sternen Sie das Chromium Issue #81556 (Anmeldung erforderlich), um die Priorisierung dieses Fehlers zu unterstützen und abgerundete Outlines früher als später zu Chrome zu bringen.

SVG-Animationen sind in Chrome nun GPU-beschleunigt

Bis vor kurzem löste die Animation eines SVG-Elements per CSS in Chromium-basierten Browsern bei jedem Frame (normalerweise 60 Mal pro Sekunde) ein Repaint aus. Solche konstanten Neuzeichnungen können sich negativ auf die Geschmeidigkeit der Animation und die Leistung der Seite selbst auswirken.

Die neueste Version von Chrome hat dieses Leistungsproblem behoben, indem sie die Hardwarebeschleunigung für SVG-Animationen aktiviert hat. Das bedeutet, dass SVG-Animationen auf die GPU ausgelagert werden und nicht mehr auf dem Hauptthread laufen.

Der Wechsel zur GPU-Beschleunigung hat SVG-Animationen in Chromium-basierten Browsern automatisch performanter gemacht (was Firefox ebenfalls tut), was definitiv gute Nachrichten für das Web sind.

Hurra für besser auf Screenreader zugängliche, progressiv verbesserte SVG-Animationen und weniger Canvas.

Es kann keine echten physikalischen Einheiten in CSS geben

CSS definiert sechs physikalische Einheiten, darunter in (Zoll) und cm (Zentimeter). Jede physikalische Einheit hat ein festes Verhältnis zur Pixeleinheit, die die kanonische Einheit ist. Zum Beispiel ist 1in immer genau 96px. Auf den meisten modernen Bildschirmen entspricht diese Länge keinem echten Zoll.

Die FAQ-Seite der CSS Working Group beantwortet nun die Frage, warum es in CSS keine echten physikalischen Längen geben kann. Kurz gesagt, der Browser kann nicht immer die genaue Größe und Auflösung der Anzeige ermitteln (denken Sie an Projektoren). Für Websites, die genaue reale Einheiten benötigen, empfiehlt die Working Group eine gerätespezifische Kalibrierung.

Haben Sie eine Kalibrierungsseite, auf der Sie den Benutzer bitten, den Abstand zwischen zwei Linien zu messen, die einen CSS-Abstand voneinander haben (z. B. 10cm), und den erhaltenen Wert eingeben. Verwenden Sie dies, um den für diesen Bildschirm notwendigen Skalierungsfaktor zu ermitteln (CSS-Länge geteilt durch vom Benutzer angegebene Länge).

Dieser Skalierungsfaktor kann dann einer benutzerdefinierten Eigenschaft zugewiesen und zur Berechnung genauer Längen in CSS verwendet werden.

html {
  --unit-scale: 1.428;
}

.box {
  /* 5 real-world centimeters */
  width: calc(5cm * var(--unit-scale, 1));
}

Das Times-Kreuzworträtsel ist für Screenreader-Benutzer zugänglich

Das NYT Open-Team schrieb über einige der Verbesserungen der New York Times-Website, die sie in den letzten Jahren zugänglicher gemacht haben. Die Website verwendet semantisches HTML (<article>, <nav> usw.), erhöhte Kontraste bei wichtigen Komponenten (z. B. An- und Registrierung) und Skip-to-Content-Links, die sich an die Paywall der Seite anpassen.

Darüber hinaus hat das Spiele-Team das tägliche Kreuzworträtsel für Tastatur- und Screenreader-Benutzer zugänglich gemacht. Das Kreuzworträtsel ist als Gitter von SVG <rect>-Elementen implementiert. Wenn der Benutzer durch das Rätsel navigiert, wird das aria-label-Attribut (zugänglicher Name) des aktuellen Feldes dynamisch aktualisiert, um zusätzlichen Kontext zu liefern.

Sie können das Mini-Kreuzworträtsel ohne Konto spielen. Versuchen Sie, das Rätsel mit der Tastatur zu lösen.

CSS-Variablen werden aufgelöst, bevor der Wert vererbt wird

Yuan Chuan teilte kürzlich ein kleines CSS-Quiz, das ich nicht richtig beantwortet habe, weil ich mir nicht sicher war, ob eine CSS-Variable (die var()-Funktion) vor oder nach der Vererbung des Werts aufgelöst wird. Ich werde versuchen zu erklären, wie das anhand des folgenden Beispiels funktioniert.

html {
  --text-color: var(--main-color, black);
}

footer {
  --main-color: brown;
}

p {
  color: var(--text-color);
}

Die Frage: Ist die Farbe des Absatzes in der Fußzeile black oder brown? Es gibt zwei Möglichkeiten. Entweder (A) die deklarierten Werte beider benutzerdefinierter Eigenschaften werden an den Absatz vererbt und dann wird die color-Eigenschaft zu brown aufgelöst, oder (B) die Eigenschaft --text-color wird direkt auf dem <html>-Element zu black aufgelöst und dann wird dieser Wert an den Absatz vererbt und der color-Eigenschaft zugewiesen.

Die richtige Antwort ist Option B (die Farbe ist schwarz). CSS-Variablen werden aufgelöst, *bevor* der Wert vererbt wird. In diesem Fall greift --text-color auf black zurück, da --main-color auf dem <html>-Element nicht existiert. Diese Regel ist im CSS Variables-Modul festgelegt.

Es ist wichtig zu beachten, dass benutzerdefinierte Eigenschaften alle var()-Funktionen in ihren Werten zur Computed-Value-Zeit auflösen, was vor der Vererbung des Werts geschieht.