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

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

Le Web évolue constamment et les navigateurs sont mis à jour en permanence pour fournir aux développeurs de nouveaux outils d'innovation sur la plate-forme. Les éléments qui nécessitaient auparavant des bibliothèques d'assistance font désormais partie de la plate-forme Web et sont compatibles avec tous les navigateurs. De plus, des méthodes plus courtes ou plus simples pour coder des éléments de conception sont disponibles.

Cette évolution et adaptation constantes sont utiles, mais elles peuvent aussi 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 comme "Quand tous les moteurs de navigateur seront-ils compatibles avec cette nouvelle fonctionnalité ?" "Quand puis-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 outils nécessaires et utilisables dépendent vraiment de votre base d'utilisateurs, de votre stack technologique, de la structure de votre équipe et des appareils compatibles. Mais nous sommes tous d'accord sur un point : le paysage actuel du Web peut rendre ces décisions difficiles.

L'équipe Chrome collabore avec d'autres moteurs de navigateur 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é introduites ces dernières années ? Les fonctionnalités expérimentales que nous avons découvertes il y a deux ans sont-elles prêtes à être utilisées ?

Dans cet article, je souhaite mettre en avant certaines fonctionnalités désormais disponibles pour tous les principaux moteurs de navigateur depuis les deux dernières versions majeures. Il s'agit du point de référence à partir duquel la majorité des développeurs estime qu'une fonctionnalité est sûre à utiliser. C'est 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.

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 le maintien du contexte de superposition 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

Les transformations CSS sont un moyen efficace d'ajouter du mouvement à votre site.
Vous savez peut-être écrire des transformations CSS avec trois propriétés sur une seule ligne.
Avec les propriétés de transformation individuelles, vous pouvez désormais spécifier des propriétés de transformation individuellement. Cela est utile lorsque vous écrivez des animations d'images clés complexes.

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

Pour une explication détaillée de ce changement, 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 est influencée par la présence ou l'absence de barres d'outils dynamiques.
Il arrive que la barre d'URL et la barre de navigation soient visibles, mais il arrive aussi qu'elles soient complètement rétracté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 lors de la conception pour le mobile. Pour en savoir plus, consultez l'article Blocs de fenêtres d'affichage dynamiques, de grande taille et de petite taille.

Copier en profondeur en JavaScript

Auparavant, pour créer une copie profonde d'un objet sans référence à l'objet d'origine, un hack populaire consistait à combiner JSON.stringify et JSON.parse. Ce piratage était si courant que V8 (le moteur JavaScript de Chrome) a fortement amélioré les performances de cette astuce. Toutefois, 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 Copier profondément dans JavaScript à l'aide de StructuredClone.

La pseudo-classe :focus-visible

En tant que développeurs Web, nous connaissons tous cet "anneau de sélection" qui s'affiche lorsque vous naviguez sur une page avec un clavier ou que vous cliquez sur des éléments de saisie. Il s'agit d'une fonctionnalité nécessaire pour l'accessibilité, mais elle peut parfois gêner 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 ne pouvez désormais spécifier des styles que pour les éléments qui doivent être mis en surbrillance.

/* 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" de la formation "Apprendre CSS".

Interface TransformStream

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

Par exemple, vous pouvez diffuser des données à partir d'un emplacement, puis compresser le flux de données vers un autre emplacement au fur et à mesure de la transmission des données. L'article Streaming requests with the fetch API (Requêtes de streaming avec l'API fetch) vous explique comment utiliser cet exemple de cas d'utilisation.

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. Pour en savoir plus, consultez web.dev/baseline.

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 aimerions savoir si ce que nous faisons vous aide ou si vous avez besoin d'autres types d'assistance. N'hésitez donc pas à nous contacter via le groupe de la communauté WebDX.