Découvrez quelques-unes des fonctionnalités de Baseline.
Publié le 10 mai 2023
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 ?" "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 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 lancées 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 cette annonce sur Baseline.
É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.
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 intégré, des fonctionnalités telles que la gestion du focus, le suivi des onglets et le maintien 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
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.
Parfois, la barre d'adresse et la barre de navigation sont visibles, mais parfois, elles sont 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.
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 considérablement 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 Copie profonde en JavaScript à l'aide de structuredClone.
La pseudo-classe :focus-visible
En tant que développeurs Web, nous connaissons tous l'anneau de sélection qui s'affiche lorsque vous parcourez une page avec un clavier ou 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 considère 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;
}
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 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 sur les nouveautés, consultez la page de référence.
Pour vous tenir informé, notre équipe publie des articles lorsque qu'une fonctionnalité devient interopérable et des informations mensuelles sur l'actualité de la plate-forme Web, des fonctionnalités expérimentales aux 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.