Combler le fossé

Faciliter la création de contenus pour le Web

Rachel Andrew

Lorsque nous discutons avec des développeurs, que ce soit individuellement ou via des enquêtes sur l'état du CSS, nous entendons souvent 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 ils ont du mal à savoir quand de nouvelles fonctionnalités intéressantes sont sûres.

Écart du Flexbox

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

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

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

Firefox a lancé la propriété pour les mises en page Flex en octobre 2018. Elle n'est apparue dans Chrome qu'en juillet 2020, et dans Safari en avril 2021. Il restait donc deux ans et six mois avant de pouvoir utiliser gap en toute sécurité. En réalité, l'attente était beaucoup plus longue pour la plupart des développeurs, car ils devaient accepter des versions de navigateur antérieures à la dernière. La prise en charge de gap dans la mise en page Flex était problématique, car nous ne pouvons pas utiliser les requêtes de fonctionnalités pour détecter les écarts de compatibilité dans la mise en page Flex. Comme la propriété gap est prise en charge dans la grille, @supports (gap:1em) renvoie la valeur "true".

Autre inconvénient : lorsqu'une nouvelle fonctionnalité est ajoutée dans un navigateur, les utilisateurs commencent à en parler et à partager des démos. Cela commence souvent bien avant que la fonctionnalité ne soit disponible dans un navigateur stable. Cela peut être déroutant pour les développeurs, ou tout du moins frustrant. À plusieurs reprises, l'on parle des nouvelles fonctionnalités prometteuses partout, et on se rend compte que vous ne pouvez pas les utiliser en raison d'un manque d'assistance.

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

Il ne s'agit pas d'un message pointant du doigt un navigateur pour être lent. Si vous examinez les différentes fonctionnalités des plates-formes, vous constaterez que les navigateurs sont en tête.

La plupart des fonctionnalités seront prototypées dans un seul navigateur. Par exemple, la spécification de mise en page en grille a d'abord été créée par Microsoft, puis implémentée sous un format initial dans Internet Explorer 10. Un ingénieur de Mozilla a beaucoup travaillé pour déterminer le comportement attendu d'une sous-grille, et cette fonctionnalité est d'abord disponible dans Firefox. Safari prend la tête de nouvelles fonctions de couleur intéressantes.

Alors qu'un navigateur peut prendre la tête du prototypage, les représentants de tous les navigateurs (et d'autres entreprises) au sein 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 telle sorte qu'elle ne puisse pas être mise en œuvre dans un seul navigateur. Cela entraînerait un écart permanent au niveau de l'assistance et un manque d'adoption de la fonctionnalité.

Cependant, lorsqu'il s'agit d'implémenter une fonctionnalité, elle doit être prioritaire par rapport à toutes les autres fonctionnalités possibles pour ce navigateur. Parfois, des éléments sont retardés par d'autres tâches à effectuer pour améliorer le navigateur. Le travail RenderingNG dans Chromium en est un bon exemple. Cela a ouvert la voie à l'implémentation d'un sous-réseau. Toutefois, l'écart important entre le sous-réseau de livraison de Firefox et de 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 ici deux problèmes. Le premier d'entre eux est le problème d'interopérabilité, c'est-à-dire qu'il peut s'écouler beaucoup de temps entre l'arrivée d'un élément dans un navigateur et sa disponibilité partout.

Le second est un problème de messagerie. Comment pouvons-nous indiquer clairement quelles sont les lacunes en matière d'assistance ? Comment partager de nouvelles fonctionnalités sans obliger tout le monde à faire des recherches approfondies sur chacune d'entre elles pour en déterminer la compatibilité ?

Interopérabilité

Les navigateurs s'associent déjà pour résoudre ce problème d'interopérabilité. L'année dernière, Compat 2021 a permis de combler les lacunes en termes de prise en charge d'un certain nombre de fonctionnalités, y compris la propriété "gap" dans la mise en page Flex. Cette année, l'initiative Interop 2022 se concentre sur 15 fonctionnalités, et certaines d'entre elles ont déjà fait l'objet de mouvements.

Vous pouvez suivre la progression de l'opération dans le tableau de bord Interop 2022.

Messagerie

Le deuxième problème concerne les fonctionnalités que nous aborderons ici sur web.dev et sur developer.chrome.com. Je souhaite 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é un certain nombre de cours fondamentaux, et d'autres sont à venir. Ces cours vous permettent d'apprendre à créer des applications pour le Web moderne à l'aide des principales technologies des plates-formes Web. Date de départ :

Nous mettons tout en œuvre pour que le contenu de ce site soit axé sur les éléments que vous pouvez utiliser en toute sécurité. Nous n'en sommes pas encore à ce stade. Cependant, vous devriez constater une légère évolution vers la pratique au cours des prochains mois.

Nous contribuons également à la documentation Web ouverte grâce à notre assistance dans le projet Open Web Docs. Nous sommes ainsi assurés 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 ici sur web.dev pour montrer la prise en charge de certaines fonctionnalités. Voici la compatibilité actuelle de gap dans la mise en page flexible.

Navigateurs pris en charge

  • 84
  • 84
  • 63
  • 14.1

Si vous souhaitez en savoir plus sur la vision de Chrome pour le Web, sur ce que nous expérimentons dans les phases d'évaluation et celles destinées aux développeurs, vous trouverez ce contenu de plus en plus sur notre site partenaire : developer.chrome.com. Il s'agit peut-être d'un contenu expérimental ou uniquement compatible avec Chrome pour le moment, mais nous aimerions vous faire part de vos commentaires.

Le Web vit actuellement une période passionnante. Nous espérons pouvoir vous aider à vous proposer plus rapidement des fonctionnalités clés et à clarifier les lacunes qui existent pour rendre le développement Web plus amusant et moins frustrant.

Photo de Cristofer Maximilian.