Actualités hebdomadaires de la plate-forme: anneaux de mise au point, lunette de beignet, plus d'unités EM et contrôle mondial de la confidentialité

Les nouvelles de développement Web de cette semaine couvrent des mises à jour importantes sur diverses plateformes. Les principaux points forts incluent la gestion des anneaux de mise au point par Chrome, les capacités améliorées du sélecteur CSS :not() , l'adoption majeure du contrôle mondial de la confidentialité (GPC) et un argument convaincant pour les requêtes médiatiques basées sur EM. Nous explorons également une solution CSS pour améliorer le style de validation de la forme.

Changement de comportement de l'anneau de focus de Chrome

Chrome, Edge et d'autres navigateurs à base de chrome affichent actuellement des anneaux de mise au point sur les clics de bouton. Cela diffère de Safari et Firefox, qui ne montrent que des anneaux de mise au point lorsque la navigation par clavier est utilisée. Les développeurs ont utilisé des solutions de contournement en utilisant data-whatintent et :focus-visible pour gérer ce comportement. Cependant, Chrome 90 éliminera la nécessité de ces solutions de contournement en modifiant sa feuille de style d'agent utilisateur pour hiérarchiser :focus-visible , supprimant ainsi les anneaux de mise au point sur les clics et les robinets tout en les préservant pour les utilisateurs de clavier.

Tirer parti de CSS :not() pour la sélection de la "portée du beignet"

Le modèle de sélecteur A:not(B *) permet de sélectionner tous A éléments non descente de B . L'élargissement à AB:not(C *) crée une «portée de beignet», permettant une sélection précise d'éléments dans un contexte spécifique, à l'exclusion de ceux dans un élément imbriqué. Par exemple, article p:not(blockquote *) sélectionne tous les paragraphes dans un article, à l'exclusion des BlockQuotes à l'intérieur.

Le contrôle mondial de la confidentialité gagne du terrain

Global Privacy Control (GPC), un signal de confidentialité légalement appliquée à l'aide de l'en-tête Sec-GPC: 1 , signale la préférence des utilisateurs contre le partage ou la vente de données. Le New York Times est le premier éditeur majeur à soutenir pleinement GPC, avec d'autres comme le Washington Post et Automattic en progestion de soutien sous peu. Lorsqu'un signal GPC est détecté, les sites conformes cesseront de partager les données utilisateur (à l'exclusion des fournisseurs de services) lorsque les lois de confidentialité pertinentes s'appliquent.

Les avantages des requêtes médiatiques basées sur EM

Les sites Web utilisant des tailles de police basés sur des pixels ( font-size: 20px ) ne répondent pas aux ajustements de taille de police au niveau du navigateur. L'utilisation d'unités em et rem permet la réactivité aux préférences des utilisateurs. Pour un comportement cohérent, les requêtes multimédias doivent également utiliser les unités em (par exemple, min-width: 80em ). Cela garantit que les dispositions réactives s'adaptent correctement même lorsque les utilisateurs ajustent leur taille de police par défaut, empêchant des problèmes tels que des lignes excessivement courtes dans les dispositions multi-colonnes. Un plugin PostCSS simplifie la conversion de px à em dans les requêtes multimédias.

Amélioration du style de validation de formulaire avec :user-invalid

Le CSS standard :invalid a des limites de validation de la forme. Il déclenche sur chaque frappe et immédiatement sur la page pour les champs requis, provoquant potentiellement une expérience utilisateur déroutante. Le :user-invalid , déjà pris en charge dans Firefox AS :-moz-ui-invalid , résout ces problèmes en ne postulant qu'après une interaction utilisateur significative. Des efforts sont en cours pour standardiser :user-invalid entre les autres navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!