Actualités hebdomadaires de la plate-forme: webkit Autofill, à l'aide du pointeur du curseur, en retardant des vidéos de jeu automatique

Les nouvelles de développement Web de cette semaine couvrent des mises à jour importantes sur diverses fonctionnalités de navigateur. Les principaux points forts incluent la standardisation de la mise au point automatique de WebKit, les utilisations élargies du curseur du pointeur et les optimisations du navigateur pour les vidéos de lecture automatique. Plongeons dans les détails.

CSS :-webkit-autofill devient une norme

Pendant des années, la plupart des navigateurs modernes (à l'exclusion de Firefox) ont soutenu le :-webkit-autofill CSS pseudo-classe pour les champs de forme de navigateur-autofilet. Cela a permis aux développeurs de personnaliser visuellement les entrées automatiquement et de les détecter via JavaScript:

 LET AutoFild = Document.QuerySelectorAll (": - WebKit-Autofill");

Bien qu'un événement standard de remplissage automatique fasse encore défaut, les développeurs pourraient tirer parti de l'événement input et vérifier :-webkit-autofill .

La norme HTML comprend désormais officiellement :autofill (avec :-webkit-autofill comme alias), étendant cette fonctionnalité à tous les navigateurs conformes. Firefox 86 devrait bientôt mettre en œuvre cela.

Le :autofill et :-webkit-autofill pseudo-classes des éléments cibles automatiquement sous le navigateur, cesse pour appliquer si l'utilisateur modifie le champ.

Grille CSS pour l'espacement des bouton et des liens

L'article de Josh W. Comeau, "Remettons les gifs d'espaceur!", Prévocats en utilisant des éléments d'espaceur dédiés pour l'espacement des composants de bouton, s'arrêtant contre le fait de s'appuyer uniquement sur les marges CSS. Il souligne l'ambiguïté d'attribuer une marge à l'icône ou au texte.

CSS Grid offre une solution supérieure. Au lieu d'utiliser des espaces non révolutionnaires (comme dans la newsletter de CSS-Tricks), une disposition de grille fournit un contrôle d'espacement plus précis via la propriété gap .

Élargir le curseur pointer au-delà des liens

Le module d'interface utilisateur de base CSS définit la propriété cursor . Bien que la spécification indique que cursor: pointer (le curseur à main) indique les liens et les navigateurs par défaut pour l'appliquer aux liens et le curseur de flèche aux boutons, la plupart des sites Web (y compris Wikipedia) étendent cursor: pointer vers d'autres éléments interactifs comme les boutons et les cases à cocher pour une expérience utilisateur améliorée. Le<summary></summary> élément (pour<details></details> ) est un autre candidat approprié pour le curseur du pointeur.

Optimisation de la vidéo en jeu automatique: retarder jusqu'à visible

Pour réduire la consommation d'énergie par rapport aux GIF, les navigateurs ont atténué les restrictions de lecture automatique, encourageant l'utilisation de vidéos. Cependant, la lecture vidéo inutile lorsque l'élément est hors écran est inefficace. La plupart des navigateurs majeurs (sauf Firefox) s'arrêtent désormais automatiquement<video autoplay="" muted=""></video> Éléments jusqu'à ce qu'ils soient visibles dans la fenêtre, éliminant le besoin de manipulation manuelle avec Intersection Observer .

<video autoplay=""></video> Les éléments ne jouent qu'une fois visibles à l'écran (par exemple, défilé en vue, révélé via CSS ou ajouté au DOM).

(via Zach Leatherman)

Les nouveaux descripteurs @font-face de Chrome

Les métriques de police incohérentes entre les navigateurs et les systèmes d'exploitation peuvent entraîner un désalignement de texte vertical, en particulier visible dans les grands titres et des changements de disposition pendant l'échange de polices. Chrome a introduit trois nouveaux descripteurs @font-face pour y remédier:

• ascent-override (hauteur au-dessus de la ligne de base)
• descent-override (profondeur en dessous de la ligne de base)
• line-gap-override

 @ FONT-FACE {
  Font-Family: Roboto;
  / * Merriweather Sans a une ascension de 125,875px 
   * et 35px Descente à une taille de police de 128px.
   * /
  Override en ascension: calc (125.875 / 128 * 100%);
  Override de descente: calc (35/128 * 100%);
  SRC: local (roboto-régulier);
}

La suppression de ces mesures garantit une disposition cohérente sur différentes polices, empêchant les décalages de mise en page.

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!