Combler le fossé

Créer plus facilement des applications pour le Web

Lorsque nous discutons avec des développeurs, que ce soit individuellement ou via des enquêtes telles que l'état du 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 dans tous les navigateurs, et à savoir quand de nouvelles fonctionnalités intéressantes sont sûres à utiliser.

Espacement Flexbox

La propriété gap est un exemple de propriété problématique. Elle vous permet de créer des espaces entre des éléments grille ou flex, ou des colonnes dans un conteneur multicol. Bien que column-gap soit disponible depuis longtemps dans la mise en page multicolonne, 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é rebaptisée gap, ainsi que row-gap et column-gap. Il a ensuite été spécifié pour fonctionner également dans la mise en page flex. Le renommage permet d'éviter que plusieurs propriétés ne fassent la même chose.

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

Firefox a publié la propriété pour les mises en page flex en octobre 2018. Elle n'est apparue dans Chrome qu'en juillet 2020, puis dans Safari en avril 2021. Cela a entraîné un délai de deux ans et demi 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 navigateurs antérieures à la dernière. La prise en charge de gap dans la mise en page flex a été rendue plus problématique par le fait que nous ne pouvons pas utiliser de requêtes de fonctionnalités pour détecter la prise en charge des espaces dans la mise en page flex. Étant donné que la propriété gap est compatible avec la grille, @supports (gap:1em) renvoie la valeur "true".

Autre problème : 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 être déroutant pour les développeurs, ou du moins frustrant. On parle sans cesse de nouvelles fonctionnalités, et vous découvrez ensuite que vous ne pouvez pas les utiliser en raison d'un manque d'assistance.

Pourquoi l'assistance n'est-elle pas disponible dans tous les pays ?

Cet article ne vise pas à pointer du doigt un navigateur en raison de sa lenteur. Si vous examinez les différentes fonctionnalités de la plate-forme, vous constaterez que différents navigateurs sont à la pointe de certaines d'entre elles.

La plupart des fonctionnalités seront prototypées dans un seul navigateur. Par exemple, la spécification de mise en page en grille a été créée par Microsoft et implémentée dans une forme initiale dans Internet Explorer 10. Un ingénieur de Mozilla a beaucoup travaillé pour déterminer le comportement des sous-grilles. C'est pourquoi cette fonctionnalité a d'abord été lancée dans Firefox. Safari est à la pointe de certaines nouvelles fonctionnalités de couleurs intéressantes.

Un navigateur peut prendre la tête du prototypage, mais 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 à être impossible à implémenter dans un navigateur. Cela entraînerait un manque permanent d'assistance 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, d'autres tâches doivent être effectuées pour améliorer le navigateur. Le travail sur RenderingNG dans Chromium en est un excellent exemple. Cela a ouvert la voie à l'implémentation de la sous-grille. Toutefois, le long délai entre la sortie de la sous-grille dans Firefox et dans Chromium est dû au fait que la mise en page en grille doit d'abord être réimplémentée dans le nouveau moteur de rendu.

Les problèmes

Nous sommes confrontés à deux problèmes. Le premier est le problème d'interopérabilité, c'est-à-dire le fait qu'il peut s'écouler un long moment entre le moment où une fonctionnalité est disponible dans un navigateur et celui où elle est disponible partout.

Le second est un problème de communication. Comment pouvons-nous indiquer clairement les lacunes de l'assistance ? Comment partager de nouvelles fonctionnalités sans obliger tout le monde à effectuer des recherches approfondies sur chaque élément pour déterminer son niveau de compatibilité ?

Interopérabilité

Les navigateurs collaborent déjà pour résoudre le problème d'interopérabilité. L'année dernière, Compat 2021 a permis de combler les lacunes de compatibilité de plusieurs fonctionnalités, y compris la propriété gap dans la mise en page flex. Cette année, Interop 2022 se concentre sur 15 fonctionnalités, dont certaines ont déjà été mises en œuvre.

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

Messagerie

Je souhaite vous aider à résoudre le deuxième problème lorsque nous parlons des fonctionnalités sur web.dev et sur developer.chrome.com. Je veux que l'état des fonctionnalités soit très clair lorsque vous lisez nos contenus, et que nous vous fournissions des moyens pratiques de résoudre les problèmes d'assistance.

Nous avons lancé plusieurs cours de base, et d'autres sont à venir. Ces cours vous aident à créer des applications pour le Web moderne à l'aide des principales technologies de plate-forme Web. Date de départ :

Nous nous efforçons de concentrer nos contenus sur ce site sur les éléments que vous pouvez utiliser en toute sécurité. Nous n'en sommes pas encore tout à fait là, mais vous devriez commencer à voir un léger glissement vers le concret au cours des prochains mois.

Nous contribuons également à la documentation du Web ouvert en soutenant le projet Open Web Docs. Nous disposons ainsi d'une documentation de premier ordre sur le MDN, ainsi que de données de compatibilité des navigateurs à jour. Nous utilisons ensuite ces données sur web.dev pour indiquer la compatibilité avec les fonctionnalités. Voici la compatibilité actuelle de gap avec la mise en page flex.

Navigateurs pris en charge

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Pour en savoir plus sur la vision de Chrome pour le Web et sur les fonctionnalités que nous testons dans les phases d'évaluation Origin et Developer, vous trouverez de plus en plus de contenus sur notre site associé developer.chrome.com. Il est possible que ces contenus soient expérimentaux ou qu'ils ne soient compatibles qu'avec Chrome pour le moment, mais nous serions ravis que vous les exploriez et nous donniez votre avis.

C'est une période passionnante pour le Web. Nous espérons ainsi vous aider à accéder plus rapidement aux principales fonctionnalités et à être clairs sur les lacunes qui existent, ce qui rendra le développement Web plus amusant et moins frustrant.

Photo de Cristofer Maximilian.