Combler le fossé

Faciliter le développement pour le Web.

Rachel Andrew

Lorsque nous discutons avec des développeurs, que ce soit individuellement ou par le biais d'enquêtes telles que State of CSS, nous entendons toujours les mêmes choses. Les développeurs ont du mal à créer des sites Web et des applications qui fonctionnent bien sur tous les navigateurs, et à savoir quand ils peuvent utiliser de nouvelles fonctionnalités intéressantes en toute sécurité.

Espacement Flexbox

Par exemple, la propriété gap vous permet de créer des espaces entre les éléments grid ou flex, ou entre les colonnes d'un conteneur multicol. Bien que nous ayons column-gap dans multicol depuis longtemps, la propriété est apparue pour la première fois dans la mise en page en grille sous la forme grid-gap, avec grid-column-gap et grid-row-gap.

Peu de temps après l'arrivée de la mise en page en grille dans les navigateurs, la propriété a été renommée gap, ainsi que row-gap et column-gap. Il a ensuite été spécifié pour fonctionner également dans la mise en page flexible. Ce changement de nom signifie que nous n'avons pas plusieurs propriétés qui font la même chose.

.box {
  display: flex;
  gap: 1em;
}

Firefox a déployé la propriété pour les mises en page flexibles en octobre 2018. Il n'est apparu dans Chrome qu'en juillet 2020, puis dans Safari en avril 2021. Cela signifiait qu'il y avait un délai de deux ans et six mois avant que nous puissions utiliser gap en toute sécurité. En réalité, pour la plupart des développeurs, l'attente a été beaucoup plus longue, car ils devaient prendre en charge des versions de navigateur plus anciennes que la dernière. La prise en charge de gap dans la mise en page flexible a été rendue plus problématique par le fait que nous ne pouvons pas utiliser les requêtes de fonctionnalité pour détecter la prise en charge des espaces dans la mise en page flexible. Comme la propriété gap est compatible avec la grille, @supports (gap:1em) renverra la valeur "true".

Un autre problème est que lorsqu'une nouvelle fonctionnalité est disponible dans un navigateur, les utilisateurs commencent à en parler et à partager des démonstrations. Cela commence souvent bien avant que la fonctionnalité ne soit disponible dans un navigateur stable. Cela peut dérouter les développeurs, ou du moins les frustrer. Vous entendez parler de nouvelles fonctionnalités intéressantes partout, mais vous découvrez ensuite que vous ne pouvez pas les utiliser, car elles ne sont pas prises en charge.

Pourquoi y a-t-il des lacunes dans l'assistance ?

Cet article ne vise pas à pointer du doigt un navigateur en particulier pour sa lenteur. Si vous examinez les différentes fonctionnalités des plates-formes, vous constaterez que différents navigateurs sont en tête pour différentes fonctionnalités.

La plupart des fonctionnalités seront prototypées dans un navigateur. Par exemple, la spécification de mise en page en grille a d'abord été créée par Microsoft et implémentée sous une forme initiale dans Internet Explorer 10. Un ingénieur de Mozilla a beaucoup travaillé pour déterminer comment la sous-grille devait se comporter. C'est pourquoi cette fonctionnalité a été implémentée en premier dans Firefox. Safari prend la tête en ce qui concerne de nouvelles fonctions de couleur intéressantes.

Bien qu'un navigateur puisse prendre l'initiative en matière de prototypage, les représentants de tous les navigateurs (et d'autres organisations) du groupe de travail CSS discutent des fonctionnalités CSS. Il est très important qu'une fonctionnalité puisse être implémentée dans tous les navigateurs et qu'elle ne soit pas conçue de manière à rendre son implémentation impossible dans un navigateur. Cela entraînerait un manque d'assistance permanent et un manque d'adoption de la fonctionnalité.

Toutefois, lorsqu'il s'agit d'implémenter une fonctionnalité, elle doit être priorisée par rapport à toutes les autres fonctionnalités possibles pour ce navigateur. Parfois, les choses sont bloquées par d'autres tâches qui doivent être effectuées pour améliorer le navigateur. Le projet RenderingNG dans Chromium en est un excellent exemple. Cela a ouvert la voie à l'implémentation de sous-grilles. Toutefois, le long délai entre l'implémentation de sous-grilles dans Firefox et Chromium est dû à la nécessité de réimplémenter d'abord la mise en page en grille dans le nouveau moteur de rendu.

Les problèmes

Nous avons deux problèmes ici. Le premier est le problème d'interopérabilité, à savoir le fait qu'il peut s'écouler beaucoup de temps entre le moment où une fonctionnalité est disponible dans un navigateur et celui où elle l'est partout.

Le deuxième est un problème de messagerie. Comment identifier clairement les lacunes en termes d'assistance ? Comment partager de nouvelles fonctionnalités sans que chacun ait à faire des recherches approfondies pour savoir si elles sont bien prises en charge ?

Interopérabilité

Les navigateurs travaillent déjà ensemble pour résoudre le problème d'interopérabilité. L'année dernière, Compat 2021 a permis de combler le manque de compatibilité pour un certain nombre de fonctionnalités, y compris la propriété "gap" dans la mise en page flexible. Cette année, l'initiative Interop 2022 se concentre sur 15 fonctionnalités, dont certaines ont déjà été améliorées.

Vous pouvez suivre la progression sur le tableau de bord Interop 2022.

Messagerie

Le deuxième problème est celui sur lequel je souhaite vous aider lorsque nous parlons de fonctionnalités sur web.dev et developer.chrome.com. Je veux que l'état des fonctionnalités soit très clair lorsque vous lisez notre contenu, et que nous vous fournissions des moyens pratiques de résoudre les problèmes d'assistance.

Nous avons lancé plusieurs cours fondamentaux, et d'autres sont à venir. Ces cours vous aident à apprendre à développer pour le Web moderne, en utilisant les technologies de base de la plate-forme Web. Date de départ :

Nous nous efforçons de concentrer le contenu de ce site sur les éléments que vous pouvez utiliser en toute sécurité. Nous n'y sommes pas encore tout à fait, mais vous devriez commencer à voir un changement vers le côté pratique au cours des prochains mois.

Nous contribuons également à la documentation sur le Web ouvert en soutenant le projet Open Web Docs. Cela nous permet de disposer d'une documentation de premier ordre sur MDN, ainsi que de données de compatibilité des navigateurs à jour. Nous utilisons ensuite ces données sur web.dev pour indiquer la compatibilité des fonctionnalités. Voici la prise en charge actuelle de gap dans la mise en page flexible.

Browser Support

Si vous souhaitez en savoir plus sur la vision de Chrome pour le Web et sur les fonctionnalités que nous testons dans les phases d'évaluation et les versions d'essai pour les développeurs, vous trouverez de plus en plus de contenu sur notre site associé developer.chrome.com. Le contenu qui y est proposé peut être expérimental ou uniquement compatible avec Chrome pour le moment. N'hésitez pas à l'explorer et à nous faire part de vos commentaires.

Nous vivons une période vraiment passionnante pour le Web. Nous espérons pouvoir vous proposer plus rapidement des fonctionnalités clés et être clairs sur les lacunes existantes, afin de rendre le développement Web plus amusant et moins frustrant.

Photo de Cristofer Maximilian.