Bienvenue dans la deuxième édition de Chrome Dev Insider, où nous vous présentons les nouveautés de la communauté et de Chrome. Voici un nouvel épisode de notre série d'anecdotes internes sur la façon dont nous abordons notre travail, ainsi qu'un aperçu des mises à jour les plus importantes à prendre en compte.
Je m'appelle Rachel Andrew. Je suis responsable du contenu pour web.dev et developer.chrome.com, et je fais partie de l'équipe Chrome Developer Relations. Je travaille sur le Web depuis plus de 20 ans, en mettant l'accent sur les normes Web ouvertes et le CSS. Je suis 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 partagé certaines des informations les plus importantes sur la façon dont nous aidons les développeurs à rendre le Web plus rapide et plus performant, tout en protégeant et en préservant la confidentialité des informations des utilisateurs.
L'un des points qui nous a particulièrement marqués (et nous sommes ravis que la communauté l'ait remarqué) est l'énorme travail que l'équipe accomplit pour prendre en charge davantage de fonctionnalités CSS et d'UI sur le Web. Dans cette édition de Chrome Dev Insider, nous vous emmènerons dans les coulisses de ce travail. Nous vous présenterons les personnes qui en sont à l'origine, la façon dont nous nous efforçons de soutenir les développeurs CSS et d'UI, et ce qui nous attend. C'est pourquoi je suis ravi de vous présenter cette édition de l'Insider.
Lieu à la une
Dans le premier Chrome Dev Insider, nous avons fait le point sur les initiatives Compat 2021 et Interop 2022, qui ont vu les fournisseurs de navigateurs et les acteurs de l'écosystème s'associer pour proposer davantage de fonctionnalités sur le Web, compatibles avec tous les navigateurs. L'initiative est axée sur le CSS, car l'incompatibilité entre les navigateurs est l'un des plus grands défis auxquels sont confrontés les développeurs CSS.
Bien que cela ne soit pas une surprise pour la plupart d'entre vous, nous sommes ravis de constater les progrès que nous avons déjà réalisés dans les différents 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 versions récentes de Firefox et de Chrome incluent un certain nombre de fonctionnalités et de correctifs intéressants. Je présente chaque mois les points clés des navigateurs stables et bêta dans ma série d'articles Nouveau sur la plate-forme Web.
Infos exclusives: Aide aux développeurs CSS et UI
2022 s'avère être une année passionnante pour les fonctionnalités CSS. Nous avons donc pensé qu'il était temps de vous faire découvrir 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 en savoir plus sur l'évolution de Chrome pour aider les développeurs d'UI.
Commençons par vous deux. Pouvez-vous nous en dire un peu plus sur vous ?
Nicole:Je suis responsable produit de l'UI Web dans Chrome. Je me concentre spécifiquement sur les nouvelles API CSS et HTML, ainsi que sur les développeurs et les concepteurs qui créent des UI. C'est un domaine passionnant avec des API vraiment importantes qui sortent, comme les requêtes de conteneur, Scope et (espérons-le) le rythme vertical.
Una:Je dirige les équipes DevRel de l'UI Web et des outils de développement. Nous nous concentrons sur l'assistance aux ingénieurs UI sur la plate-forme Web et nous nous assurons qu'ils disposent des outils dont ils ont besoin pour réussir. Cela inclut les API CSS et les composants HTML, ainsi que les fonctionnalités DevTools pour afficher les modifications et les commentaires actifs.
La prise en charge de Chrome par les développeurs d'UI s'est accélérée ces dernières années. Pourquoi cela a-t-il pris autant de temps ? Quels ont été les plus grands défis ?
Una:Nous avons dû faire un travail de démonstration pour montrer l'importance de ce travail et pourquoi il devait être une priorité. Nous avons commencé par l'enquête ADN de MDN en 2019, qui a identifié l'UI comme l'un des principaux problèmes de la plate-forme. Depuis, nous continuons d'utiliser les données comme guide pour le MDN et nos propres enquêtes internes sur la satisfaction des développeurs. Résultat : nous avons pu obtenir un engagement plus profond de la part des dirigeants et hiérarchiser le travail d'ingénierie autour de certaines des fonctionnalités pour les développeurs les plus demandées dans l'espace de l'interface utilisateur, qui constituent également l'essentiel des initiatives telles que Compat 2021 et Interop 2022.
Nicole:En plus de l'adhésion des dirigeants, nous avons dû trouver le bon moyen de faire connaître ces API aux développeurs. Lorsque j'ai rejoint Chrome, j'ai fait un gâchis dans un projet appelé API en couches (ou LAPI, Layered APIs). Les LAPI visaient à offrir aux développeurs une expérience de composant intégré. Je pense toujours que c'était un excellent objectif à atteindre, mais nous avons fait beaucoup d'erreurs ! Nous nous sommes d'abord concentrés sur les notifications Toast et une liste virtuelle. Il est presque impossible de rendre les toasts accessibles, et une liste virtuelle est l'un des composants les plus difficiles à mettre en place. Nos intentions étaient bonnes, mais cela n'aidait pas les développeurs. Nous avons donc mis fin au projet. Il est difficile d'apprendre par les erreurs, mais chaque erreur alimente la renaissance du CSS et du HTML qui se produit actuellement.
Parlons un peu plus des API LAPI. Pourquoi ?
Nicole:Pour les LAPI, nous savions que le Web avait besoin d'une expérience de développement de composants prêts à l'emploi plus proche de la création d'une UI native. Il était clair que réinventer la roue freinait les développeurs. Je ne compte plus le nombre d'onglets que j'ai créés au cours de ma carrière ! Nous avons essayé de résoudre ce problème en livrant JavaScript avec le navigateur, ce qui a été très difficile. Personne n'avait encore intégré JavaScript dans un navigateur, et il n'était pas clair comment il devait interagir avec le code C++ qui alimente le moteur de rendu du navigateur. Nous avons écouté les autres fournisseurs de navigateurs (merci, Mozilla !) et abandonné cette approche. Nous avons ainsi pu trouver une solution bien meilleure avec l'interface utilisateur ouverte. En s'appuyant sur le HTML et le CSS, nous obtenons des solutions déclaratives et flexibles. Étant donné qu'il est déclaratif, nous pouvons intégrer l'accessibilité d'une manière qui n'aurait pas été aussi simple avec JavaScript. Je suis très enthousiaste quant aux perspectives qui s'offrent à nous. Nous travaillons à la prise en charge des modèles de conception d'interface utilisateur essentiels que sont le menu déroulant, le pop-up, la bulle d'aide, la navigation, l'accordéon, les onglets, le carrousel et le bouton d'activation/de désactivation.
Nous avons donc beaucoup appris. Je sais qu'il y avait d'autres initiatives dans ce domaine, comme CSS Houdini. De quoi s'agit-il ?
Una:Oui, CSS Houdini est un autre endroit où nous avons appris de la communauté. Houdini propose de nombreuses fonctionnalités utiles, mais beaucoup d'entre elles étaient trop basiques 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 sur les solutions et les besoins de niveau supérieur, nous avons pu obtenir une compatibilité multinavigateur et les pages de destination nécessaires pour faire bouger les choses dans l'écosystème. Vous pouvez suivre les progrès sur https://ishoudinireadyyet.com/.
En parlant de compatibilité multinavigateur, des initiatives comme Interop 2022 et Open UI semblent avoir des résultats positifs importants pour la communauté. Qu'en disent les développeurs ?
Una:L'un des principaux problèmes que nous rencontrons avec les développeurs est de "rendre la conception identique dans tous les navigateurs". Pour y remédier, nous avons collaboré avec d'autres fournisseurs de navigateurs afin de hiérarchiser et de lancer certaines des fonctionnalités les plus demandées par les développeurs. 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 désormais 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 réclament depuis des années, soient enfin en cours de développement et disponibles dans tous les navigateurs.
Nicole:L'enthousiasme de la communauté est palpable. Vous pouvez le voir sur Twitter. :)
La collaboration avec l'écosystème s'est avérée essentielle pour nous permettre de faciliter la vie des développeurs. Je sais que votre équipe a beaucoup travaillé là-dessus. Pouvez-vous m'en dire plus ?
Nicole:Tout d'abord, je suis constamment émerveillé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 incroyables. 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étaframeworks, 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 d'écouter Cassie Evans de GreenSock lors de la conférence Smashing. Cela m'a donné envie de travailler avec des personnes du secteur de l'animation.
Quelles sont les plus grandes opportunités pour l'écosystème de l'UI Web ?
Una:En termes d'opportunités, je pense que nous ne faisons qu'effleurer les possibilités offertes par les expériences Web personnalisables. De nouvelles API telles que les requêtes de conteneur et les fonctionnalités multimédias de préférences utilisateur CSS redéfinissent la façon dont les développeurs voient le Responsive Design. Je suis également enthousiaste à propos des expériences de conception collaborative qui permettent aux développeurs et aux concepteurs de travailler en harmonie avec les utilisateurs qui visitent leurs sites Web.
Nicole, quels sont les prochains projets de votre équipe ?
Nicole:Toutes les explorations ne débouchent pas sur un produit commercialisable, mais je suis très enthousiaste à propos de plusieurs projets en cours:
Una a évoqué le premier point : nous permettons une conception responsive basée sur des composants. Il comprend des outils de conception de 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 de couleur OKLCH maintient la luminosité constante entre les teintes. Les concepteurs peuvent passer du choix des couleurs à la conception des relations entre les couleurs, sans se retrouver avec des palettes d'apparence terne.
Nous travaillons également sur certaines des API les plus demandées, comme les requêtes de conteneur, les couches en cascade, le sélecteur parent (:has), les styles de portée et l'imbrication. Les développeurs en ont besoin pour pouvoir créer des systèmes de conception flexibles remplis de composants réutilisables.
Les animations associées au défilement sont un autre domaine amusant. J'aime beaucoup la démonstration de Steve Gardner. Le défilement est fluide et des animations d'avion s'activent lorsque l'utilisateur fait défiler l'écran. Bien que ces éléments soient amusants, il peut être difficile de les mettre en place correctement, en particulier en tenant compte de l'accessibilité. Nous effectuons donc actuellement des tests utilisateur sur l'accessibilité de cette fonctionnalité.
Ce qui me motive personnellement le plus, ce sont les commandes intégrées de l'interface utilisateur Web. Les développeurs continuent de créer le même ensemble d'onglets encore et encore. Je pense que le navigateur peut les aider. Chez Open UI, nous travaillons sur des composants tels que le menu déroulant, le pop-up, la bulle d'aide, les onglets, la navigation, l'accordéon et le bouton d'activation/de désactivation. Nous étudions la possibilité d'intégrer l'accessibilité à ces primitives de navigateur afin que le Web puisse, à terme, devenir accessible par défaut. Les développeurs peuvent alors se concentrer sur les problèmes plus complexes et nuancés, tandis que les éléments de base, comme la gestion des onglets, peuvent être pris en charge par le navigateur. Je vais donc en rester là pour le moment.
Enfin, nous allons continuer à investir dans l'interopérabilité entre les navigateurs. C'était un plaisir de travailler avec les équipes WebKit et Gecko pour assurer la cohérence de l'expérience pour les développeurs. Les développeurs nous ont clairement fait part de leur souhait.
Et si vous ne l'avez pas encore consultée, l'API Shared Element Transitions de l'équipe Seamless Web va changer la façon dont les concepteurs conçoivent pour 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 propose une excellente démonstration.
Si les normes sont bien respectées, nous pourrions même examiner le rythme vertical cette année. Nous pouvons nous appuyer sur LayoutNG, ce qui nous permet de bénéficier de nombreuses fonctionnalités.
Merci à vous deux. Je suis sûr que toute la communauté, comme nous, est ravie de voir le rythme renouvelé des améliorations et des fonctionnalités apportées à l'interface utilisateur Web. Il y a encore beaucoup de choses à comprendre. Par où commencer ?
Una:La session Nouveautés de la plate-forme Web de Google I/O présente les principales fonctionnalités de cette année. Adam Argyle a également rédigé un excellent article sur toutes les nouvelles pages de destination CSS à venir. Pour le moment, je vous recommande de vous concentrer sur les versions stables et de simplement être au courant des autres tâches à venir. Votre excellente série Nouveau sur la plate-forme Web est parfaite pour cela. Si vous vous abonnez à la newsletter web.dev, vous recevrez également ce contenu dans votre boîte de réception. Pour les développeurs qui souhaitent s'impliquer et aider à 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 changement à venir que vous devez garder à l'esprit lorsque vous créez 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 aucune limite, et les cookies pouvaient expirer plusieurs millénaires plus tard. L'objectif de cette limite est de trouver un juste équilibre entre les modèles 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 estimé:Disponible dans Chrome 104 (version stable le 2 août 2022).
- Invite à l'action pour les développeurs:les développeurs peuvent être amenés à actualiser de manière proactive les cookies plus fréquemment qu'auparavant lorsque les utilisateurs visitent leurs sites Web. Sinon, les utilisateurs risquent d'être déconnectés 400 jours après le paramétrage initial 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 cours du 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.