Cette page a été traduite par l'API Cloud Translation.

Combler le fossé

Créer plus facilement des applications pour le Web

Rachel Andrew

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 constitue un exemple de propriété problématique. Elle vous permet de créer des écarts entre les éléments de type grille ou flex, ou entre les colonnes d'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 changement de nom signifie qu'il n'existe pas plusieurs propriétés ayant le même rôle.

.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. Comme la propriété gap est acceptée dans 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 d'abord é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é est d'abord apparue 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, des choses sont derrière d'autres tâches qui doivent être faites pour améliorer le navigateur. Le travail sur RenderingNG dans Chromium en est un excellent exemple. Cela a ouvert la voie à l'implémentation d'une sous-grille. Toutefois, l'écart important entre la sous-grille d'expédition de Firefox et de Chromium est dû au fait qu'il faut d'abord réimplémenter la mise en page sous forme de grille dans le nouveau moteur de rendu.

Les problèmes

Nous sommes confrontés à deux problèmes. Premièrement, le problème d'interopérabilité, qui peut prendre beaucoup de temps entre le moment où une fonctionnalité arrive dans un navigateur et le moment où elle est disponible partout.

Le deuxième est un problème de messagerie. 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 l'écart de compatibilité avec un certain nombre de 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

Le deuxième problème concerne les fonctionnalités disponibles 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 puissions vous proposer des solutions pratiques pour 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 changement vers le concret au cours des prochains mois.

Nous contribuons également à la documentation du 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 à jour sur la compatibilité des navigateurs. 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

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 fonctionnalités clés et à être clairs sur les lacunes qui existent, ce qui rend le développement Web plus amusant et moins frustrant.

Photo de Cristofer Maximilian.