Fonctionnalités de référence que vous pouvez utiliser aujourd'hui

Découvrez quelques-unes des fonctionnalités qui font partie de Baseline.

Mariko Kosaka

Le Web est en constante évolution et les navigateurs sont mis à jour en permanence afin de fournir aux développeurs de nouveaux outils pour innover sur la plate-forme. Les éléments qui nécessitaient auparavant des bibliothèques d'aide font partie de la plateforme Web et sont pris en charge par tous les navigateurs, avec des moyens plus courts ou plus faciles de coder des éléments de conception.

Bien que cette évolution et cette adaptation constantes soient utiles, elles peuvent également prêter à confusion. Il peut être difficile de naviguer dans toutes ces mises à jour. En tant que développeurs, nous nous posons des questions telles que : "Quand tous les moteurs de navigateur seront-ils compatibles avec cette nouvelle fonctionnalité ?". "Quand pourrai-je commencer à utiliser ces fonctionnalités dans mon code de production ?" "Pendant combien de temps devons-nous prendre en charge les navigateurs plus anciens ?"

La bonne réponse est "ça dépend". Les éléments nécessaires et utilisables dépendent de votre base d'utilisateurs, de votre pile technologique, de la structure de votre équipe et des appareils compatibles. Mais une chose que nous sommes tous d'accord, c'est que l'environnement actuel du Web peut rendre ces décisions difficiles.

L'équipe Chrome collabore avec d'autres moteurs de navigation et la communauté Web pour apporter des précisions. Cela inclut notre travail sur des projets tels qu'Interop 2023, qui contribue à améliorer l'interopérabilité d'un ensemble de fonctionnalités clés. Mais qu'en est-il des fonctionnalités qui ont été introduites ces dernières années ? Les fonctionnalités expérimentales découvertes il y a environ deux ans sont-elles prêtes à l'emploi ?

Dans cet article, nous souhaitons mettre en évidence certaines fonctionnalités qui sont désormais disponibles pour les deux principaux moteurs de navigation dans les deux dernières versions. Il s'agit de la date limite où nous estimons que la majorité des développeurs estiment qu'une fonctionnalité peut être utilisée sans risque. Il s'agit de l'ensemble de fonctionnalités que nous appelons "Baseline". Pour en savoir plus, consultez l'annonce de Baseline sur cette page.

Élément de boîte de dialogue

L'élément <dialog> est un nouvel élément HTML permettant de créer des invites de boîte de dialogue, telles que des pop-ups et des modales.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 37
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 98
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

Pour l'utiliser, définissez l'élément modal, puis ouvrez la boîte de dialogue en appelant la méthode showModal() sur l'élément de boîte de dialogue.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

En tant qu'élément HTML natif, des fonctionnalités telles que la gestion du focus, le suivi des onglets et la conservation du contexte d'empilement sont intégrées. Pour en savoir plus, consultez Créer un composant de boîte de dialogue.

Propriétés de transformation CSS individuelles

L'utilisation de transformations CSS est un moyen efficace d'ajouter un mouvement à votre site.
Vous avez peut-être l'habitude d'écrire des transformations CSS avec trois propriétés sur une seule ligne.
Vous pouvez désormais spécifier des propriétés de transformation individuelles individuellement. Cela s'avère particulièrement utile lorsque vous écrivez des animations complexes pour des images clés.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 104
• <ph type="x-smartling-placeholder"></ph> 104
• <ph type="x-smartling-placeholder"></ph> 72
• <ph type="x-smartling-placeholder"></ph> 14,1

Source

Pour en savoir plus sur cette modification, consultez Contrôle plus précis des transformations CSS avec des propriétés de transformation individuelles.

Nouvelles unités de fenêtre d'affichage

Sur mobile, la taille de la fenêtre d'affichage dépend de la présence ou de l'absence de barres d'outils dynamiques.
Parfois, une barre d'URL et une barre de navigation sont visibles, mais il arrive que ces barres soient complètement retirées.
La taille réelle de la fenêtre d'affichage varie selon que les barres d'outils sont visibles ou non.
De nouvelles unités de fenêtre d'affichage, telles que svh et lvh, offrent aux développeurs Web un contrôle plus précis lorsqu'ils conçoivent des annonces pour mobile. Pour en savoir plus, consultez l'article Blocs de fenêtres d'affichage dynamiques, de grande taille et de petite taille.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 108
• <ph type="x-smartling-placeholder"></ph> 108
• <ph type="x-smartling-placeholder"></ph> 101
• <ph type="x-smartling-placeholder"></ph> 15,4

Copie complète dans JavaScript

Auparavant, pour créer une copie complète d'un objet sans faire référence à l'objet d'origine, JSON.stringify et JSON.parse étaient utilisés conjointement avec une astuce populaire. Il s'agissait d'une attaque si courante que V8 (le moteur JavaScript de Chrome) a considérablement amélioré les performances de cette astuce. Mais vous n'avez plus besoin de ce hack avec structuredClone.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 98
• <ph type="x-smartling-placeholder"></ph> 98
• <ph type="x-smartling-placeholder"></ph> 94
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

Pour en savoir plus, consultez Copier profondément dans JavaScript à l'aide de StructuredClone.

Pseudo-classe :focus-visible

En tant que développeurs Web, nous connaissons tous cet anneau de concentration qui apparaît lorsque vous naviguez sur une page avec un clavier ou lorsque vous cliquez sur des éléments de saisie. C'est une fonctionnalité nécessaire à l'accessibilité, mais elle entrave parfois la conception visuelle pour différents utilisateurs. La pseudo-classe CSS :focus-visible vérifie si le navigateur estime que le curseur doit être visible. Vous pouvez désormais spécifier des styles uniquement pour les cas où l'élément d'interface actif doit être visible.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 86
• <ph type="x-smartling-placeholder"></ph> 86
• <ph type="x-smartling-placeholder"></ph> 85
• <ph type="x-smartling-placeholder"></ph> 15,4

Source

Pour en savoir plus, consultez la section Focus sur CSS.

Interface TransformStream

L'interface TransformStream de l'API Streams permet de diriger des flux les uns vers les autres.

Par exemple, vous pouvez diffuser des données depuis un emplacement spécifique, puis les compresser vers un autre emplacement au fur et à mesure que les données sont transmises. L'article Requêtes de streaming avec l'API de récupération vous guide à travers cet exemple de cas d'utilisation.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 67
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> 102
• <ph type="x-smartling-placeholder"></ph> 14,1

Source

Conclusion

De nombreuses autres fonctionnalités sont devenues récemment interopérables et stables sur la plate-forme Web. À l'avenir, nous collaborerons avec le groupe de la communauté WebDX pour clarifier ces ensembles de fonctionnalités de référence. Veuillez consulter web.dev/baseline pour en savoir plus.

Si vous souhaitez vous tenir informé, notre équipe publie des articles lorsqu'une fonctionnalité devient interopérable et publie des informations mensuelles sur l'actualité de la plate-forme Web, qu'il s'agisse de fonctionnalités expérimentales ou de nouvelles fonctionnalités interopérables.

Nous sommes toujours curieux de savoir si nos solutions vous seront utiles ou si vous avez besoin d'autres types d'assistance. N'hésitez donc pas à nous contacter via le groupe de la communauté WebDX.