Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Combler le fossé

Créer pour le Web devient plus facile.

Rachel Andrew Technical Writer

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 de nouvelles fonctionnalités intéressantes peuvent être utilisées en toute sécurité.

Écart Flexbox

Par exemple, la propriété gap vous permet de créer des espaces entre les éléments d'une grille ou d'un flex, ou entre les colonnes d'un conteneur multicol. Bien que nous ayons column-gap dans multicol depuis longtemps, la propriété est d'abord apparue dans la mise en page de la grille en tant que grid-gap, ainsi que grid-column-gap et grid-row-gap.

Juste après l'arrivée de la mise en page de 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 une mise en page Flex. Ce changement de nom nous évite d'avoir plusieurs propriétés qui font la même chose.

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

Firefox a lancé 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 signifie qu'il y a eu 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 Flex était d'autant plus problématique que nous ne pouvions pas utiliser de requêtes de fonctionnalité pour détecter la prise en charge de l'espacement dans la mise en page Flex. Comme la propriété gap est compatible avec la grille, @supports (gap:1em) renverra "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 être déroutant pour les développeurs, ou du moins frustrant. On entend souvent parler de nouvelles fonctionnalités géniales, mais on découvre ensuite qu'on ne peut pas les utiliser, car elles ne sont pas compatibles.

Pourquoi l'assistance n'est-elle pas disponible en continu ?

Cet article ne vise pas à pointer du doigt un navigateur en particulier pour sa lenteur. Si vous examinez les différentes fonctionnalités de la plate-forme, vous constaterez que différents navigateurs prennent les devants sur 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 é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 le comportement de la sous-grille. Cette fonctionnalité a donc d'abord été intégrée à Firefox. Safari prend les devants avec de nouvelles fonctions de couleur intéressantes.

Même si un navigateur peut prendre l'initiative de créer un prototype, 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 impossible son implémentation dans un navigateur. Cela entraînerait un manque permanent d'assistance et une absence d'adoption de la fonctionnalité.

Cependant, 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 retardées 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 de la sous-grille. Toutefois, le long délai entre la livraison de la sous-grille par Firefox et Chromium est dû au fait que la mise en page de la grille doit d'abord être réimplémentée dans le nouveau moteur de rendu.

Les problèmes

Nous avons deux problèmes ici. Le premier est le problème d'interopérabilité, c'est-à-dire 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 est disponible partout.

Le second est un problème de messagerie. Comment pouvons-nous identifier clairement les lacunes de l'assistance ? Comment partager de nouvelles fonctionnalités sans que tout le monde ait à faire des recherches approfondies sur chacune d'elles pour savoir si elle est bien prise 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 les lacunes de compatibilité de plusieurs 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, et certaines d'entre elles ont déjà évolué.

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

Messagerie

Le deuxième problème est un problème que je souhaite résoudre lorsque nous parlons de fonctionnalités 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 fournissions des moyens pratiques de résoudre les problèmes de compatibilité.

Nous avons lancé plusieurs cours fondamentaux, et d'autres sont à venir. Ces cours vous aident à apprendre à créer des applications 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'en sommes pas encore là, mais vous devriez commencer à voir une évolution vers des aspects plus pratiques au cours des prochains mois.

Nous contribuons également à la documentation Web ouverte 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 afficher la compatibilité des fonctionnalités. Voici la compatibilité actuelle de gap dans la mise en page Flex.

Browser Support

Si vous souhaitez en savoir plus sur la vision de Chrome pour le Web, ainsi que sur les éléments que nous testons dans les phases d'évaluation et les versions d'essai pour les développeurs, vous trouverez de plus en plus de contenus sur notre site associé : developer.chrome.com. Le contenu de ce site peut être expérimental ou n'être compatible qu'avec Chrome pour le moment, mais nous vous invitons à l'explorer et à nous faire part de vos commentaires.

Nous vivons actuellement une période passionnante pour le Web. Nous espérons pouvoir vous aider à accéder plus rapidement aux fonctionnalités clés et à identifier clairement les lacunes existantes, afin de rendre le développement Web plus amusant et moins frustrant.