Plattform-Neuigkeiten: Standardmäßig Logisches CSS, Fugu-APIs, Benutzerdefinierte Media Queries und WordPress vs.  Kursivschrift

Es sieht so aus, als ob 2021 das Jahr ist, an dem man mit CSS Logical Properties beginnen sollte! Außerdem hat Chrome kürzlich ein paar APIs veröffentlicht, die für Aufsehen gesorgt haben, SVG erlaubt uns, das Seitenverhältnis zu deaktivieren, WordPress konzentriert sich auf die Barrierefreiheit seiner Typografie und es gibt immer noch keine Aktualisierung (oder Fortschritt) bei der Entwicklung von benutzerdefinierten CSS-Media-Queries.

Lasst uns direkt in die Nachrichten eintauchen...

Logisches CSS könnte bald zum neuen Standard werden

Sechs Jahre nachdem Mozilla die ersten Teile von CSS Logical Properties in Firefox veröffentlicht hat, ist diese Funktion nun auf dem Weg zur vollständigen Browserunterstützung im Jahr 2021. Die in der folgenden Tabelle aufgeführten Kategorien von logischen Eigenschaften und Werten werden bereits in Firefox, Chrome und der neuesten Safari Preview unterstützt.

CSS-Eigenschaft oder -Wert	Das logische Äquivalent
margin-top	margin-block-start
text-align: right	text-align: end
bottom	inset-block-end
border-left	border-inline-start
(n. a.)	margin-inline

Logisches CSS führt auch einige nützliche Kurzschriften für Aufgaben ein, die früher mehrere Deklarationen erforderten. Zum Beispiel setzt margin-inline die Eigenschaften margin-left und margin-right, während inset die Eigenschaften top, right, bottom und left setzt.

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

Eine Website kann die Unterstützung für ein RTL-Layout (von rechts nach links) hinzufügen, indem sie alle Vorkommen von left und right durch ihre logischen Gegenstücke im CSS-Code der Website ersetzt. Der Wechsel zu logischem CSS ist für alle Websites sinnvoll, da der Benutzer die Website möglicherweise in eine Sprache übersetzt, die von rechts nach links geschrieben wird, und das mit einem maschinellen Übersetzungsdienst. Die größten Sprachen mit RTL-Schriften sind Arabisch (310 Millionen Muttersprachler), Persisch (70 Millionen) und Urdu (70 Millionen).

/* Switch to RTL when Google translates the page to an RTL language */
.translated-rtl {
  direction: rtl;
}

Die persönliche Website von David Bushell verwendet jetzt logisches CSS und stützt sich auf Googles translated-rtl Klasse, um die Inline-Grundrichtung der Website umzuschalten. Versuchen Sie, Davids Website in Chrome in eine RTL-Sprache zu übersetzen und vergleichen Sie das RTL-Layout mit dem standardmäßigen LTR-Layout der Website.

Chrome liefert drei kontroverse Fugu-APIs

Letzte Woche lieferte Chrome drei Web-APIs für "fortgeschrittene Hardware-Interaktionen" aus: die WebHID und Web Serial APIs auf dem Desktop und Web NFC unter Android. Alle drei APIs sind Teil von Googles Fähigkeitenprojekt, auch bekannt als Project Fugu, und wurden in W3C-Community-Gruppen entwickelt (obwohl sie keine Web-Standards sind).

• Die WebHID API ermöglicht Web-Apps die Verbindung mit alten und ungewöhnlichen Human Interface Devices, die keinen kompatiblen Gerätetreiber für das Betriebssystem haben (z. B. Nintendos Wii Remote).
• Die Web Serial API ermöglicht Web-Apps die Kommunikation ("Byte für Byte") mit Peripheriegeräten wie Mikrocontrollern (z. B. dem Arduino DHT11 Temperatur-/Feuchtigkeitssensor) und 3D-Druckern über eine emulierte serielle Verbindung.
• Web NFC ermöglicht es Web-Apps, NFC-Tags drahtlos über kurze Distanzen (weniger als 10 cm) zu lesen und zu schreiben.

Apple und Mozilla, die Entwickler der beiden anderen großen Browser-Engines, sind derzeit gegen diese APIs. Apple hat beschlossen, "noch nicht zu implementieren, aufgrund von Fingerprinting, Sicherheit und anderen Bedenken". Mozillas Bedenken sind auf der Seite Mozilla Specification Positions zusammengefasst.

SVG mit preserveAspectRatio=none dehnen

Standardmäßig skaliert eine SVG, um die Content-Box des <svg>-Elements zu füllen, wobei das durch das Attribut viewBox definierte Seitenverhältnis beibehalten wird. In einigen Fällen möchte der Autor die SVG so strecken, dass sie die Content-Box auf beiden Achsen vollständig ausfüllt. Dies kann erreicht werden, indem das Attribut preserveAspectRatio auf none im <svg>-Element gesetzt wird.

Das Verzerren von SVG auf diese Weise mag kontraintuitiv erscheinen, aber das Deaktivieren des Seitenverhältnisses über den Wert preserveAspectRatio=none kann für einfache, dekorative SVG-Grafiken auf einer responsiven Webseite sinnvoll sein

Dieser Wert kann nützlich sein, wenn Sie einen Pfad für eine Bordüre oder zur Hinzufügung eines kleinen Effekts zu einem Abschnitt (wie einer diagonalen [Linie]) verwenden und möchten, dass der Pfad den Raum ausfüllt.

WordPress reduziert die Verwendung von Kursivschrift

Eine kursive Schrift kann zur Hervorhebung wichtiger Wörter (z. B. des <em>-Elements), Titel von kreativen Werken (<cite>), Fachbegriffe, fremde Phrasen (<i>) und mehr verwendet werden. Kursivschrift ist hilfreich, wenn sie diskret auf diese Weise verwendet wird, aber lange Abschnitte mit kursivem Text gelten als Barrierefreiheitsproblem und sollten vermieden werden.

Kursiv geschriebener Text kann für manche Menschen mit Legasthenie oder verwandten Lesestörungen schwer zu lesen sein.

WordPress 5.7, das vor ein paar Tagen veröffentlicht wurde, entfernte Kursivschrift für Beschreibungen, Hilfetexte, Beschriftungen, Fehlermeldungen und andere Stellen im WordPress-Admin-Bereich, um "die Barrierefreiheit und Lesbarkeit zu verbessern".

In verwandten Nachrichten hat WordPress 5.7 auch benutzerdefinierte Web-Schriftarten entfernt und stattdessen System-Schriftarten verwendet.

Kein Fortschritt bei benutzerdefinierten CSS-Media-Queries

Das CSS Media Queries Level 5 Modul spezifiziert eine @custom-media Regel zur Definition benutzerdefinierter Media-Queries. Diese vorgeschlagene Funktion wurde ursprünglich vor fast sieben Jahren zum CSS-Standard hinzugefügt (im Juni 2014) und wurde seitdem weder weiterentwickelt noch auf Interesse von Browser-Herstellern gestoßen.

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

Eine an mehreren Stellen verwendete Media-Query kann stattdessen einer benutzerdefinierten Media-Query zugewiesen werden, die überall verwendet werden kann, und die Bearbeitung der Media-Query erfordert nur die Änderung einer Codezeile.

Benutzerdefinierte Media-Queries werden möglicherweise nicht so bald in Browsern erscheinen, aber Websites können diese Funktion heute über das offizielle PostCSS-Plugin (oder PostCSS Preset Env) nutzen, um Code-Wiederholungen zu reduzieren und Media-Queries lesbarer zu machen.

In verwandtem Zusammenhang gibt es auch die Idee von vom Autor definierte Umgebungsvariablen, die (im Gegensatz zu benutzerdefinierten Eigenschaften) in Media-Queries verwendet werden könnten, aber diese potenzielle Funktion wurde im CSS-Standard noch nicht vollständig ausgearbeitet.

@media (max-width: env(--narrow-window)) {
  /* narrow window styles */
}