Bienvenue dans la deuxième édition de Chrome Dev Insider, où nous partageons les nouveautés et les actualités de la communauté et de Chrome. Dans ce nouvel épisode, nous vous présentons des anecdotes sur notre façon de travailler et vous donnons un aperçu des nouveautés les plus importantes auxquelles vous devez prêter attention.
Je m'appelle Rachel Andrew, et je suis responsable du contenu pour web.dev et developer.chrome.com, au sein de l'équipe Chrome Developer Relations. Je travaille sur le Web depuis plus de 20 ans, en me concentrant sur les normes Web ouvertes et le CSS. Je suis également membre du groupe de travail CSS.
Il y a deux mois, nous avons clôturé la conférence Google I/O, au cours de laquelle nous avons présenté certaines des mises à jour les plus importantes concernant la façon dont nous aidons les développeurs à rendre le Web plus rapide et plus puissant, tout en protégeant la sécurité et la confidentialité des informations des utilisateurs.
L'un des points qui nous a le plus marqué (et nous sommes ravis que la communauté l'ait remarqué !) est l'énorme quantité de travail que l'équipe consacre à la prise en charge de davantage de fonctionnalités CSS et d'UI sur le Web. Dans cette édition de Chrome Dev Insider, nous allons vous présenter les personnes qui travaillent sur ce projet, la façon dont nous nous efforçons d'aider les développeurs CSS et d'UI, et ce qui nous attend. C'est pourquoi je suis ravi d'animer ce numéro d'Inside.
Lieu à la une
Dans le premier Chrome Dev Insider, nous avons partagé des informations sur les initiatives Compat 2021 et Interop 2022, dans lesquelles les fournisseurs de navigateurs et les acteurs de l'écosystème se sont associés pour proposer davantage de fonctionnalités sur le Web, compatibles avec tous les navigateurs. Cette initiative se concentre fortement sur les CSS, car l'incompatibilité des navigateurs est l'un des plus grands défis pour les développeurs CSS.
Bien que cela ne soit pas nouveau pour la plupart d'entre vous, nous sommes ravis de constater les progrès que nous avons déjà réalisés dans les navigateurs.
Au début du mois dernier, Safari a annoncé une version exceptionnelle avec Safari 16.0 bêta, qui inclut des fonctionnalités intéressantes telles que les requêtes de conteneur, la sous-grille et un inspecteur Flexbox. Les dernières versions de Firefox et Chrome incluent de nombreuses fonctionnalités et corrections intéressantes. Je couvre les points clés des navigateurs stables et bêta chaque mois dans ma série d'articles Nouveautés de la plate-forme Web.
Info exclusive : assistance pour les développeurs CSS et d'UI
L'année 2022 s'est avérée riche en nouveautés concernant les fonctionnalités CSS. Nous avons donc pensé qu'il était temps de vous emmener dans les coulisses. J'ai discuté avec Una Kravets, responsable DevRel pour l'UI Web et les outils de développement, et Nicole Sullivan, notre responsable produit pour l'UI Web qui se concentre sur les API CSS et HTML, pour parler de l'évolution de Chrome en faveur des développeurs d'UI.
Commençons par vous deux. Parlez-nous un peu de vous.
Nicole : je suis responsable produit pour l'UI Web sur Chrome. Je me concentre plus particulièrement sur les nouvelles API CSS et HTML, ainsi que sur les développeurs et les concepteurs qui créent des UI. Il s'agit d'un espace passionnant avec des API très importantes comme Container Queries, Scope et (espérons-le) rythme vertical.
Una : je dirige les équipes DevRel Web UI et DevTools. Nous nous concentrons sur l'assistance aux ingénieurs d'interface utilisateur sur la plate-forme Web et nous nous assurons qu'ils disposent des outils nécessaires pour réussir. Cela inclut les API CSS et les composants HTML, ainsi que les fonctionnalités des outils de développement permettant de voir les modifications et les commentaires actifs.
La prise en charge des développeurs d'UI par Chrome s'est accélérée ces dernières années. Pourquoi pensez-vous que cela a pris autant de temps ? Quels ont été les principaux défis ?
Una : Nous devions faire quelque chose pour montrer l'importance de ce travail et pourquoi il devait être une priorité. Nous avons commencé par l'enquête MDN DNA en 2019, qui a identifié l'UI comme l'un des principaux points faibles de la plate-forme. Depuis, nous avons continué à utiliser les données comme guide pour le MDN et nos propres enquêtes internes sur la satisfaction des développeurs. Grâce à tout cela, nous avons pu obtenir un engagement plus profond de la part de la direction et prioriser les travaux d'ingénierie autour de certaines des fonctionnalités pour les développeurs les plus demandées dans l'espace UI, qui constituent également la majorité des initiatives telles que Compat 2021 et Interop 2022.
Nicole : En plus d'obtenir l'adhésion de la direction, nous devions trouver le bon moyen de mettre ces API à la disposition des développeurs. Quand j'ai rejoint Chrome, j'ai fait une erreur dans un projet appelé Layered APIs (ou LAPIs en abrégé). Les API LAPIs visaient à offrir aux développeurs une expérience de composant intégré. Je pense toujours que c'était un excellent résultat à viser, mais nous avons fait beaucoup d'erreurs ! Nous nous sommes d'abord concentrés sur les notifications toast et une liste virtuelle. Les toasts sont presque impossibles à rendre accessibles, et les listes virtuelles sont l'un des composants les plus difficiles à maîtriser. Nos intentions étaient bonnes, mais cela n'aidait pas les développeurs. Nous avons donc abandonné le projet. Il est difficile d'apprendre de ses erreurs, mais chaque erreur alimente la renaissance du CSS et du HTML qui se produit actuellement.
Parlons un peu plus des API L. Pourquoi ?
Nicole : Pour les API LAPS, nous savions que le Web avait besoin d'une expérience de développement de composants intégrés plus proche de la création d'UI natives. Il était clair que le fait de réinventer la roue freinait les développeurs. Je ne peux pas compter le nombre d'onglets que j'ai créés au cours de ma carrière ! Cela dit, nous avons essayé de résoudre ce problème en fournissant JavaScript avec le navigateur, ce qui était très difficile. Personne n'avait encore déployé JavaScript dans le navigateur, et la façon dont il devait interagir avec le code C++ qui alimente le moteur de rendu du navigateur n'était pas claire. Nous avons écouté les autres fournisseurs de navigateurs (merci, Mozilla !) et avons abandonné cette approche. Nous avons ainsi pu trouver une solution bien meilleure avec Open UI. En nous appuyant sur HTML et CSS, nous obtenons des solutions flexibles et déclaratives. Comme il est déclaratif, nous pouvons intégrer l'accessibilité d'une manière qui n'aurait pas été aussi facile à faire avec JavaScript. Je suis très enthousiaste quant à l'avenir. Nous travaillons à la prise en charge des modèles de conception d'UI essentiels que sont selectmenu, popup, tooltip, nav, accordion, tabs, carousel et toggle.
Nous avons beaucoup appris. Je sais qu'il existe d'autres initiatives dans ce domaine, comme CSS Houdini. De quoi parle-t-on ?
Una : Oui, CSS Houdini est un autre domaine où nous avons appris grâce à la communauté. Houdini propose de nombreuses fonctionnalités utiles, mais beaucoup étaient trop bas niveau pour être largement adoptées et prises en charge. Nous nous sommes rendu compte que l'implémentation d'API de bas niveau ne réduisait pas nécessairement les frictions pour les développeurs. En se concentrant plutôt sur les solutions et les besoins de niveau supérieur, nous avons pu obtenir la prise en charge multi-navigateur et les avancées nécessaires pour faire bouger les choses dans l'écosystème. Nous suivons actuellement les progrès sur https://ishoudinireadyyet.com/.
En parlant de compatibilité entre navigateurs, des initiatives telles qu'Interop 2022 et Open UI semblent avoir des résultats positifs importants pour la communauté. Qu'entendez-vous de la part des développeurs ?
Una : L'un des principaux points faibles que nous signalent les développeurs est de "faire en sorte que la conception fonctionne de la même manière sur tous les navigateurs". Pour y remédier, nous avons collaboré avec d'autres fournisseurs de navigateurs afin de hiérarchiser et d'intégrer certaines des fonctionnalités pour les développeurs les plus demandées. Les commentaires que nous avons reçus de la communauté ont été extrêmement positifs. De plus, grâce à un important effort de refonte appelé RenderingNG, il est devenu possible de déployer certaines de ces fonctionnalités de manière beaucoup plus performante. Les développeurs sont ravis que ces fonctionnalités tant attendues, qu'ils demandent depuis des années, soient enfin en cours de développement et disponibles sur plusieurs navigateurs.
Nicole : L'enthousiasme de la communauté est palpable. Vous pouvez le voir sur Twitter. :)
Collaborer avec l'écosystème s'est avéré essentiel pour nous aider à simplifier la vie des développeurs. Je sais que votre équipe a beaucoup travaillé sur ce point. Pouvez-vous nous en dire plus ?
Nicole : Tout d'abord, je suis constamment impressionnée par les projets que les développeurs créent sur le Web. Des plus petites bibliothèques aux frameworks complets, les développeurs créent des choses étonnantes. C'est une communauté de créateurs fantastique. Chrome prend de nombreuses mesures pour être plus connecté à ces projets.
Par exemple, il y a quelques années, nous avons commencé à travailler avec des frameworks JavaScript tels que React et Angular. Et les méta-frameworks, par exemple Next, Nuxt et Gatsby. L'année dernière, nous avons commencé à faire de même avec les outils et frameworks d'UI tels que Sass, Bootstrap et Material. J'espère que l'année prochaine, nous pourrons collaborer avec GreenSock et d'autres outils qui facilitent la vie des développeurs. Je viens de voir Cassie Evans de GreenSock parler à la Smashing Conference, et cela m'a vraiment donné envie de travailler avec des personnes dans le domaine de l'animation.
Où se situe la plus grande opportunité pour l'écosystème de l'UI Web ?
Una : En termes d'opportunités majeures, j'ai l'impression que nous ne faisons qu'effleurer le potentiel des expériences Web personnalisables. De nouvelles API telles que les requêtes de conteneur et les fonctionnalités média de préférences utilisateur CSS redéfinissent la façon dont les développeurs conçoivent le responsive design. Je suis également enthousiaste à l'idée des expériences de conception collaborative qui permettent aux développeurs et aux concepteurs de travailler à l'unisson avec les utilisateurs qui visitent leurs sites Web.
Nicole, quels sont les prochains projets de votre équipe ?
Nicole : Toutes les explorations ne se transforment pas en produit, mais il y a beaucoup de choses qui m'enthousiasment en ce moment :
Una a évoqué la première chose : nous activons la conception responsive basée sur des composants. Il inclut des outils permettant de concevoir des systèmes de couleurs afin que les concepteurs puissent répondre aux préférences des utilisateurs, comme le mode sombre. Par exemple, l'espace colorimétrique OKLCH maintient une luminosité constante pour toutes les teintes. Les designers peuvent passer du choix des couleurs à la conception de relations entre les couleurs, sans obtenir de palettes aux couleurs ternes.
Nous travaillons également sur certaines des API les plus demandées, comme les requêtes de conteneur, les calques en cascade, le sélecteur parent (:has), les styles limités et l'imbrication. Les développeurs en ont besoin pour créer des systèmes de conception flexibles et remplis de composants réutilisables.
Les animations liées au défilement sont un autre domaine intéressant. J'aime beaucoup la démonstration de Steve Gardner. Il propose un défilement fluide et des animations d'avion déclenchées au défilement. Bien que ces animations soient amusantes, il peut être difficile de les réaliser correctement, en particulier en tenant compte de l'accessibilité. Nous effectuons actuellement des tests utilisateur sur l'accessibilité de cette fonctionnalité.
Ce qui m'enthousiasme le plus personnellement, ce sont les commandes d'interface utilisateur Web intégrées. Les développeurs créent sans cesse le même ensemble d'onglets. Je pense que le navigateur peut les aider. Chez Open UI, nous travaillons sur des composants tels que selectmenu, popup, tooltip, tabs, nav, accordion et toggle. Nous étudions la possibilité d'intégrer l'accessibilité à ces primitives de navigateur afin que le Web puisse, au fil du temps, devenir accessible par défaut. Les développeurs peuvent alors se concentrer sur les problèmes plus complexes et nuancés, tandis que les bases, comme le fonctionnement des onglets, peuvent être gérées par le navigateur. Ce sujet mériterait probablement un post à part entière, alors je vais m'arrêter là pour le moment.
Enfin, nous continuerons d'investir dans l'interopérabilité entre les navigateurs. Nous avons beaucoup apprécié de travailler avec les équipes de WebKit et Gecko pour harmoniser l'expérience des développeurs. Nous avons bien entendu les développeurs qui souhaitaient cette fonctionnalité.
Et si vous ne l'avez pas encore fait, l'API Shared Element Transitions de l'équipe Seamless Web va changer la façon dont les gens conçoivent le Web. Toutes ces petites transitions subtiles qui permettent aux concepteurs d'orienter leurs conceptions dans l'espace physique seront non seulement possibles, mais aussi faciles. Jake Archibald a créé une excellente démo.
Si les normes se passent bien, nous pourrions même nous pencher sur le rythme vertical cette année ! Nous pouvons nous appuyer sur LayoutNG, qui débloque de nombreuses fonctionnalités.
Merci à vous deux. Je suis sûr que toute la communauté, comme nous, est ravie de voir le rythme des améliorations et des fonctionnalités de l'interface utilisateur Web s'accélérer. Il y a encore beaucoup à comprendre. Par où commencer, selon vous ?
Una : notre session Nouveautés de la plate-forme Web à l'I/O présente les points forts de nombreuses fonctionnalités qui seront disponibles cette année. Adam Argyle a également écrit un excellent article sur toutes les nouvelles fonctionnalités CSS à venir. Pour le moment, je me concentrerais sur les versions stables et je me contenterais de prendre connaissance des autres travaux à venir. Votre excellente série Nouveautés de la plate-forme Web est idéale pour cela. Les développeurs peuvent également recevoir ce contenu dans leur boîte de réception en s'abonnant à la newsletter web.dev. Si vous êtes développeur et que vous souhaitez participer et contribuer à tout cela, rejoindre Open UI est l'un des meilleurs moyens de soutenir ce travail.
Principales mises à jour à venir
Comme à notre habitude, nous vous informons d'un prochain changement à prendre en compte lorsque vous développez vos expériences Web.
Limiter la durée de vie maximale des cookies à 400 jours
- Mise à jour : lorsque des cookies sont définis avec un attribut
Expires/Max-Ageexplicite, la valeur est désormais limitée à 400 jours maximum dans le futur. Auparavant, il n'y avait pas de limite et les cookies pouvaient expirer dans plusieurs millénaires. L'objectif de cette limite est de trouver un équilibre entre les schémas d'utilisation courants et le respect de la confidentialité des utilisateurs. Tout site visité plus fréquemment que tous les 400 jours peut actualiser les cookies pour assurer la continuité du service. Les utilisateurs peuvent être assurés que les cookies ne resteront pas dans leur navigateur pendant des millénaires sans être utilisés. - Calendrier prévu : déploiement dans Chrome 104 (version stable le 2 août 2022).
- CTA pour les développeurs : les développeurs devront peut-être actualiser les cookies de manière proactive plus souvent qu'avant lorsque les utilisateurs visiteront leurs sites Web. Sinon, les utilisateurs peuvent être déconnectés 400 jours après la définition initiale du cookie.
J'espère que vous avez apprécié cette édition de Chrome Dev Insider. Si vous l'avez manqué, voici le premier. Nous avons hâte de vous en dire plus au prochain trimestre.
En attendant, dites-nous ce que vous pensez de cette édition de Chrome Dev Insider et ce que nous pouvons faire pour l'améliorer.
Qu'avez-vous pensé de cette édition de The Chrome Dev Insider ? Donnez-nous votre avis.