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

Découvrez quelques-unes des fonctionnalités 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'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 ?" "Combien de temps devons-nous prendre en charge les anciens navigateurs ?"

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 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 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 boîtes modales.

Navigateurs pris en charge

• 37
• 79
• 98
• 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 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;
}

Navigateurs pris en charge

• 104
• 104
• 72
• 14.1

Source

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.
Les nouvelles unités de vue d'ensemble, comme svh et lvh, offrent aux développeurs Web un contrôle plus précis lors de la conception pour mobile. Pour en savoir plus, consultez l'article Unités de vue d'ensemble grandes, petites et dynamiques.

Navigateurs pris en charge

• 108
• 108
• 101
• 15,4

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);

Navigateurs pris en charge

• 98
• 98
• 94
• 15,4

Source

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. 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 pense que la sélection 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;
}

Navigateurs pris en charge

• 86
• 86
• 85
• 15,4

Source

Pour en savoir plus, consultez la section "Focus" de la formation "Apprendre 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 Streaming requests with the fetch API (Requêtes de streaming avec l'API fetch) vous explique comment utiliser cet exemple de cas d'utilisation.

Navigateurs pris en charge

• 67
• 79
• 102
• 14.1

Source

Conclusion

De nombreuses autres fonctionnalités sont récemment devenues 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.