Wöchentliche Plattformnachrichten: Fokusringe, Donut Scope, mehr EM -Einheiten und globale Datenschutzkontrolle

Die Webentwicklungsnachrichten dieser Woche deckt wichtige Updates auf verschiedenen Plattformen ab. Zu den wichtigsten Highlights zählen Chroms Umgang mit Fokusringen, die verbesserten Fähigkeiten des CSS :not() Selektor, die Haupteinführung der globalen Datenschutzkontrolle (GPC) und ein überzeugendes Argument für EM-basierte Medienfragen. Wir untersuchen auch eine CSS -Lösung zur Verbesserung der Form zum Formularvalidierungsstyling.

Das Verhalten von Chroms Fokusring ändert sich

Chrome, Edge und andere Browser auf Chrombasis zeigen derzeit Fokusringe auf Schaltflächenklicks an. Dies unterscheidet sich von Safari und Firefox, die nur Fokusringe zeigen, wenn die Tastaturnavigation verwendet wird. Entwickler haben Workarounds unter Verwendung data-whatintent und :focus-visible verwendet, um dieses Verhalten zu verwalten. Chrome 90 wird jedoch die Notwendigkeit dieser Problemumgehungen beseitigen, indem sein Benutzeragent-Stylesheet geändert wird, um Prioritäten zu setzen :focus-visible , wodurch Fokusringe auf Klicks und Taps unterdrückt und gleichzeitig für Tastaturbenutzer erhalten bleiben.

Nutzung von CSS :not() für die Auswahl der "Donut Scope"

Das A -Auswahlmuster A:not(B *) ermöglicht die Auswahl aller A , die nicht von B abstammen. Erweitern Sie dies auf AB:not(C *) erzeugt einen "Donut -Bereich", der eine präzise Auswahl von Elementen innerhalb eines bestimmten Kontextes ermöglicht, ausgenommen diejenigen innerhalb eines verschachtelten Elements. Zum Beispiel wählt article p:not(blockquote *) alle Absätze in einem Artikel aus, ausgenommen diese innerhalb von Blockquoten.

Die globale Datenschutzkontrolle erhält Traktion

Global Privacy Control (GPC), ein rechtlich durchsetzbares Datenschutzsignal unter Verwendung des Sec-GPC: 1 Header, signalisiert die Benutzerpräferenz für Datenaustausch oder Verkauf. Die New York Times ist der erste große Publisher, der GPC vollständig unterstützt. Wenn ein GPC -Signal erkannt wird, werden die konformen Websites die Nutzungsdaten (ohne Dienstleister ausgenommen) einstellen, wobei relevante Datenschutzgesetze gelten.

Die Vorteile von EM-basierten Medienfragen

Websites, die pixelbasierte Schriftgrößen ( font-size: 20px ) verwenden, reagieren nicht auf die Schriftgrößenanpassungen auf Browserebene. Die Verwendung von em und rem -Einheiten ermöglicht die Reaktion auf Benutzerpräferenzen. Für konsequentes Verhalten sollten Medienabfragen auch em Einheiten verwenden (z. B. min-width: 80em ). Dies stellt sicher, dass reaktionsschnelle Layouts auch dann korrekt anpassen, wenn Benutzer ihre Standardschriftgröße anpassen und Probleme wie übermäßig kurze Linien in mehrspaltigen Layouts verhindern. Ein Postcss em vereinfacht die Konvertierung von px in Medienabfragen.

Verbesserung des Formulars für das Formular Validierungsstyling mit :user-invalid

Die Standard-CSS :invalid Pseudoklasse hat Einschränkungen bei der Formularvalidierung. Es löst bei jedem Tastenanschlag und sofort auf Seitenlast für erforderliche Felder aus, was möglicherweise zu einer verwirrenden Benutzererfahrung führt. Die :user-invalid -Pseudoklasse, die bereits in Firefox als :-moz-ui-invalid unterstützt wird, befasst sich mit diesen Problemen, indem sie sich nur nach einer signifikanten Benutzerinteraktion bewerben. Es sind Anstrengungen unternommen, um zu standardisieren :user-invalid in anderen Browsern.

Das obige ist der detaillierte Inhalt vonWöchentliche Plattformnachrichten: Fokusringe, Donut Scope, mehr EM -Einheiten und globale Datenschutzkontrolle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!