2021 markiert eine signifikante Verschiebung in Richtung einer breiteren Annahme der logischen Eigenschaften von CSS! Die jüngsten Chrome -API -Veröffentlichungen haben Debatten ausgelöst, die SCG -Kontrolle von SVG bietet neue Flexibilität, priorisiert WordPress zugängliche Typografie, und die Entwicklung von CSS -Abfragen für benutzerdefinierte Medien bleibt festgefahren. Lassen Sie uns mit den Details befassen.

Logical CSS: Der aufkommende Standard

Sechs Jahre nach der ersten Implementierung von Mozilla nähern sich die logischen CSS -Eigenschaften im Jahr 2021 den vollständigen Browserunterstützung. Firefox, Chrome und die neueste Safari -Vorschau unterstützen bereits die unten beschriebenen Eigenschaften und Werte. Logical CSS simplifies styling with shorthands like margin-inline (combining margin-left and margin-right) and inset (for top, right, bottom, and links).

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

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

Die Anpassung an das Layouts von Recht nach links (RTL) wird erheblich einfacher. Ein einfacher Klassenschalter übernimmt den Übergang, entscheidend für Websites, die in RTL -Sprachen wie Arabisch, Persisch und Urdu übersetzt wurden.

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

David Bushells Website veranschaulicht diesen Ansatz und nutzt Google Translate's translated-rtl Klasse. Vergleichen Sie seine RTL- und LTR -Layouts nach der Übersetzung in Chrome, um den Unterschied zu erkennen.

Chromes kontroverser Fugu apis

Chromes jüngste Veröffentlichung von drei APIs für erweiterte Hardware -Interaktion - WebHid und Web Serial (Desktop) und Web NFC (Android) - Teil von Project Fugu, hat Kontroversen generiert. Während sie in W3C -Community -Gruppen entwickelt wurden, sind sie noch keine Webstandards.

• webhid api: Aktiviert die Web -App -Interaktion mit ungewöhnlichen menschlichen Interface -Geräten ohne OS -Treiber (z. B. Nintendo Wii Remote).
• Web Serien-API: erleichtert die Kommunikation mit Peripheriegeräten wie Mikrocontroller und 3D-Drucker über emulierte serielle Verbindungen.
• web nfc api: erlaubt Kurzstrecke drahtlose Lesen/Schreiben an NFC-Tags.

Apple und Mozilla Express Reservierungen, zitieren Fingerabdruck, Sicherheit und andere Bedenken. Die Position von Mozilla ist auf der Seite der Spezifikationspositionen detailliert.

standardmäßig skaliert SVG gleichzeitig das Seitenverhältnis. Einstellung PreserveSpectratio = "Keine"

streckt den SVG aus, um seinen Container zu füllen und das Bild möglicherweise zu verzerren. Dies kann für einfache, dekorative Elemente auf reaktionsschnellen Seiten wie Grenzen oder diagonale Linien nützlich sein, die einen bestimmten Raum füllen müssen.

WordPress: Reduzierung der Kursivschrift für Accessibility

Während Kursivschrift den Schwerpunkt erhöht, stellt die erweiterte Nutzung die Herausforderungen der Zugänglichkeit dar, insbesondere für Leser mit Legasthenie. WordPress 5.7 befasst sich mit der Entfernung von Kursivschrift aus Beschreibungen, Hilfe von Text und anderen Bereichen innerhalb der Admin -Schnittstelle, um die Lesbarkeit zu verbessern. Das Update ersetzt auch benutzerdefinierte Web -Schriftarten durch Systemschriften.

css benutzerdefinierte Medienfragen: Warten Sie immer noch Fortschritt

Die

@Custom-media

Regel, die vor fast sieben Jahren vorgeschlagen wurde, bleibt unentwickelt. Diese Funktion würde es ermöglichen, wiederverwendbare Medienabfragen zu definieren, die Code -Duplikation zu verringern und die Lesbarkeit zu verbessern.

@Custom-Media-Narrow-Window (max-Width: 30em); @media (-Narrow-Window) { / * schmale Fensterstile */ }

Während Browser -Unterstützung ungewiss ist, bietet das offizielle Postcss -Plugin sofortige Implementierungsvorteile. Das Konzept der Autor-definierten Umgebungsvariablen in Medienabfragen wird ebenfalls untersucht, bleibt jedoch in Arbeit.

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

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

@media (max-width: env (-schmalewindow)) { / * schmale Fensterstile */ }