Plattformnachrichten: Abgerundete Umrisse, GPU-bewertete SVG-Animationen, wie CSS-Variablen aufgelöst werden

In den Nachrichten in dieser Woche erhält Firefox abgerundete Umrisse, SVG-Animationen werden jetzt in Chrom GPU-Beschleunigungen, es gibt keine physischen Einheiten in CSS, das Kreuzworträtsel der New York Times ist zugänglich und CSS-Variablen werden aufgelöst, bevor der Wert erbelt wird.

Lass uns in die Nachrichten einspringen!

Abgerundete Umrisse kommen nach Firefox

Die Idee, den Umriss der Grenzkurve zu folgen, bestand seit der Erkenntnis, abgerundete Grenzen über das grenzwertige Grundstück Mitte der 2000er Jahre zu schaffen. Mozilla, Webkit und Chromium vor über zehn Jahren wurde vorgeschlagen und ist seit 2015 sogar Teil der CSS -UI -Spezifikation:

Die Teile des Umrisss müssen nicht rechteckig sein. In dem Maße, in dem der Umriss der Grenzkante folgt, Es sollte der Grenzkurve folgen .

Schneller Vorlauf bis heute im Jahr 2021 und die Umrisse sind in jedem Browser immer noch Rechtecke ausnahmslos:

Aber das ändert sich endlich. In wenigen Wochen wird Firefox der erste Browser mit abgerundeten Umrissen, die automatisch der Grenzform folgen. Dies gilt auch für den Standard -Fokusriss von Firefox auf Schaltflächen.

Bitte starre Chromium Ausgabe Nr. 81556 (Anmelden angemeld), um diesen Fehler zu priorisieren und rundere Umrisse eher früher als später zu Chrom zu bringen.

SVG-Animationen werden jetzt in Chrome GPU-Beschleunigungen

Bis vor kurzem würde das Animieren eines SVG-Elements über CSS in jedem Rahmen (normalerweise 60-mal pro Sekunde) in Browsern auf Chrombasis ein Repigat auslösen. Eine solche ständige Neulackierung kann sich negativ auf die Glätte der Animation und die Leistung der Seite selbst auswirken.

Die neueste Version von Chrome hat dieses Leistungsproblem beseitigt, indem die Hardware -Beschleunigung für SVG -Animationen aktiviert wurde. Dies bedeutet, dass SVG -Animationen in die GPU geladen und nicht mehr auf dem Haupt -Thread ausgeführt werden.

Der Wechsel zur GPU-Beschleunigung hat SVG-Animationen automatisch in Chrombasis-Browsern aufführender gemacht (Firefox macht dies auch), was definitiv eine gute Nachricht für das Web ist:

Hurra für mehr zugängliche Bildschirmleser, zunehmend verbesserte SVG-Animationen und weniger Leinwand.

In CSS können wir keine echten physischen Einheiten geben

CSS definiert sechs physische Einheiten, darunter in (Zoll) und CM (Zentimeter). Jede physische Einheit befindet sich in einem festen Verhältnis mit der Pixeleinheit, der kanonischen Einheit. Zum Beispiel ist 1in immer genau 96px. Auf den meisten modernen Bildschirmen entspricht diese Länge nicht 1 Real-World-Zoll.

Die FAQ -Seite der CSS -Arbeitsgruppe beantwortet jetzt die Frage, warum es in CSS keine echten physischen Einheiten geben kann. Kurz gesagt, der Browser kann nicht immer die genaue Größe und Auflösung des Displays bestimmen (denken Sie an Projektoren). Für Websites, die genaue reale Einheiten benötigen, empfiehlt die Arbeitsgruppe die Kalibrierung der Persevice:

Haben Sie eine Kalibrierungsseite, auf der Sie den Benutzer auffordern, die Entfernung zwischen zwei Zeilen zu messen, die einen CSS -Abstand voneinander entfernt sind (z. B. 10 cm), und geben Sie den Wert ein, den sie erhalten. Verwenden Sie dies, um den für diesen Bildschirm erforderlichen Skalierungsfaktor zu finden (CSS-Länge geteilt durch die von der Benutzer bereitgestellte Länge).

Dieser Skalierungsfaktor kann dann auf eine benutzerdefinierte Eigenschaft eingestellt und verwendet werden, um genaue Längen in CSS zu berechnen:

 html {
  -Einheitskala: 1.428;
}

.Kasten {
  / * 5 reale Zentimeter *//
  Breite: Calc (5cm * var (-Einheitsmaßstab, 1));
}

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

Das NYT Open Team schrieb über einige der Verbesserungen der New York Times -Website, die es in den letzten Jahren zugänglicher gemacht haben. Die Website verwendet semantische HTML (,

usw.), einen erhöhten Kontrast zu wichtigen Komponenten (z. B. Anmeldung und Registrierung) und Überlinks, die sich an die Paywall der Website anpassen.

Darüber hinaus machte das Spielteam das tägliche Kreuzworträtsel für die Nutzer der Tastatur und den Bildschirmleser zugänglich. Das Kreuzworträtsel wird als Gitter von SVG -Elementen implementiert. Da der Benutzer das Puzzle durchläuft, wird das ARIA-Label-Attribut des aktuellen Quadrats (zugänglicher Name) dynamisch aktualisiert, um einen zusätzlichen Kontext bereitzustellen.

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

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

Yuan Chuan hat kürzlich ein kleines CSS -Quiz geteilt, das ich nicht richtig geantwortet habe, da ich nicht sicher war, ob eine CSS -Variable (die Funktion var ()) vor oder nach dem Wert geerbt wurde. Ich werde versuchen zu erklären, wie dies am folgenden Beispiel funktioniert:

 html {
  --Text-Color: var (-Hauptfarbe, schwarz);
}

Fußzeile {
  -Main-Color: Brown;
}

P {
  Farbe: var (-Textfarbe);
}

Die Frage: Ist die Farbe des Absatzes in der Fußzeile schwarz oder braun? Es gibt zwei Möglichkeiten. Entweder (a) Die deklarierten Werte beider benutzerdefinierten Eigenschaften werden in den Absatz geerbt, und dann beschreibt die Farbeigenschaft auf Braun, oder (b) die textfarbene Eigenschaft beschleunigt sich direkt auf das -Element, und dieser Wert wird dann dem Absatz geerbt und der Farbeigenschaft zugeordnet.

Die richtige Antwort ist Option B (die Farbe ist schwarz). CSS -Variablen werden vor der Vererbung des Wertes aufgelöst. In diesem Fall fällt-Text-Color zurück in Schwarz, weil-Main-Color nicht auf dem -Element existiert. Diese Regel ist im CSS -Variablenmodul angegeben:

Es ist wichtig anzumerken, dass benutzerdefinierte Eigenschaften alle var () -Funktionen in ihren Werten zu berechneten Wertszeiten auflösen, die vor dem Wert der Wert auftritt.

Das obige ist der detaillierte Inhalt vonPlattformnachrichten: Abgerundete Umrisse, GPU-bewertete SVG-Animationen, wie CSS-Variablen aufgelöst werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!