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

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

Le Web est en constante évolution, et les navigateurs se mettent constamment à jour pour offrir 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 plate-forme Web et sont pris en charge par tous les navigateurs, ainsi que des moyens plus courts ou plus simples de coder les éléments de conception.

Si cette évolution et cette adaptation constantes sont utiles, elles peuvent également prêter à confusion. Il peut être difficile de s'y retrouver parmi toutes ces mises à jour. En tant que développeurs, nous nous posons des questions : "Quand tous les moteurs de navigateur prendront-ils en charge cette nouvelle fonctionnalité ?" "Quand pourrai-je réellement commencer à utiliser ces fonctionnalités dans mon code de production ?" "Pendant combien de temps devrions-nous prendre en charge des navigateurs plus anciens ?"

La bonne réponse est "ça dépend". Les besoins et les capacités utilisables dépendent de votre base d'utilisateurs, de votre pile technologique, de la structure de votre équipe et des appareils compatibles. Cependant, nous sommes tous d'accord sur le fait que l'environnement actuel du Web peut rendre difficile la prise de telles décisions.

L'équipe Chrome collabore avec d'autres moteurs de navigation et la communauté Web pour apporter plus de clarté. Cela inclut notre travail sur des projets tels que 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é ajoutées 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, je souhaite mettre en avant certaines fonctionnalités qui sont désormais disponibles pour tous les principaux moteurs de navigateur dans les deux dernières versions majeures. C'est à ce stade que nous estimons que la majorité des développeurs peuvent utiliser une fonctionnalité en toute sécurité. Il s'agit de l'ensemble de fonctionnalités que nous appelons la référence. Pour en savoir plus, consultez l'annonce de Baseline ici.

É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 fenêtres modales.

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 ciblage, 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 du mouvement à votre site.
Vous savez peut-être écrire des transformations CSS avec trois propriétés sur une même ligne.
Vous pouvez désormais spécifier des propriétés de transformation individuelles de manière individuelle. Cela s'avère pratique lorsque vous écrivez des animations d'images clés complexes.

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

Pour en savoir plus sur ce changement, consultez Contrôle précis des transformations CSS à l'aide de propriétés de transformation individuelles.

Nouvelles unités de fenêtre d'affichage

Sur mobile, la taille de la fenêtre d'affichage est influencée par la présence ou l'absence de barres d'outils dynamiques.
Parfois, une barre d'adresse et une barre d'outils 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.
Les nouvelles unités de fenêtre d'affichage, comme svh et lvh, offrent aux développeurs Web un contrôle plus précis sur la conception de sites Web pour mobile. Pour en savoir plus, consultez l'article Blocs de fenêtre d'affichage grands, petits et dynamiques.

Copie complète en JavaScript

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

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

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

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

Pour en savoir plus, consultez la section Copie approfondie en JavaScript à l'aide d'un clonage structuré.

Pseudo-classe :focus-visible

En tant que développeurs Web, nous connaissons tous cet "anneau de mise au point" qui s'affiche lorsque vous naviguez sur une page avec un clavier ou cliquez sur des éléments d'entrée. Il s'agit d'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 considère que le curseur doit être visible. Vous pouvez désormais spécifier des styles uniquement pour les cas où le focus doit être visible.

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

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

Pour en savoir plus, consultez la section Focus sur CSS (Apprendre à utiliser CSS).

Interface TransformStream

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

Par exemple, vous pouvez diffuser des données depuis un emplacement, puis les compresser vers un autre emplacement à mesure qu'elles sont transmises. L'article Diffuser des requêtes à l'aide de l'API Fetch vous guide tout au long de cet exemple de cas d'utilisation.

Conclusion

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

Si vous souhaitez vous tenir au courant, sachez que notre équipe publie des articles lorsqu'une fonctionnalité devient interopérable et publie des mises à jour mensuelles sur les nouveautés de la plate-forme Web, des fonctionnalités expérimentales aux nouvelles interopérables.

Nous sommes toujours curieux de savoir si ce que nous faisons pour vous aider ou si vous avez besoin d'autres types d'assistance, alors n'hésitez pas à nous contacter via le WebDX Community Group.