Il y a environ 15 ans, je travaillais dans une entreprise où nous développions des applications pour les agents de voyages, les employés des aéroports et les compagnies aériennes. Nous avons également créé notre propre framework interne pour les composants d'interface utilisateur et les fonctionnalités d'application d'une seule page. Nous avions des composants pour tout : champs, boutons, onglets, plages, tables de données, menus, sélecteurs de date, sélections et sélections multiples. Nous avions même un composant div. Notre composant div était d'ailleurs génial, il nous permettait d'arrondir les coins sur tous les navigateurs, ce qui, croyez-le ou non, n'était pas une chose facile à faire à l'époque.
Notre travail a eu lieu à un moment de notre histoire où JS, Ajax et HTML dynamique étaient considérés comme une révolution qui nous propulsait vers le futur. Du coup, nous pouvions mettre à jour une page de manière dynamique, obtenir des données d'un serveur et éviter d'avoir à naviguer vers d'autres pages, ce qui était perçu comme lent et faisait clignoter un grand rectangle blanc sur l'écran entre les deux pages. Il y avait une phrase, rendue populaire par Jeff Atwood (le fondateur de StackOverflow), qui disait : « Toute application pouvant être écrite en JavaScript sera finalement écrite en JavaScript. » – Jeff Atwood
Pour nous à l’époque, cela ressemblait à un défi de créer ces applications. C'était comme une approbation générale de tout faire avec JS. Nous avons donc tout fait avec JS, et nous n’avons pas vraiment pris le temps de rechercher d’autres façons de faire. Nous n’avons pas vraiment ressenti l’intérêt d’apprendre correctement ce que HTML et CSS pouvaient faire. Nous ne percevions pas vraiment le Web comme une plateforme d’applications évolutive dans sa globalité. Nous avons surtout considéré cela comme quelque chose que nous devions contourner, en particulier en ce qui concerne la prise en charge des navigateurs. Nous pourrions simplement y ajouter plus de JS pour faire avancer les choses. Est-ce que prendre le temps d’en savoir plus sur le fonctionnement du Web et sur ce qui était disponible sur la plateforme m’aurait aidé ? Bien sûr, j’aurais probablement pu supprimer un tas de code qui n’était pas vraiment nécessaire. Mais, à l’époque, peut-être pas tant que ça. Vous voyez, les différences entre les navigateurs étaient assez importantes à l’époque. C’était une époque où Internet Explorer était encore le navigateur dominant, suivi de près par Firefox, mais commençait à perdre des parts de marché en raison de la popularité croissante de Chrome. Bien que Chrome et Firefox aient réussi à s'entendre sur les normes du Web, les environnements dans lesquels nos applications s'exécutaient signifiaient que nous devions prendre en charge IE6 pendant une longue période. Même lorsque nous étions autorisés à prendre en charge IE8, nous devions encore faire face à de nombreuses différences entre les navigateurs. De plus, le Web de l’époque ne disposait tout simplement pas de nombreuses fonctionnalités directement intégrées à la plate-forme.
Avance rapide jusqu’à aujourd’hui. Les choses ont énormément changé. Non seulement nous disposons d’un plus grand nombre de ces capacités que jamais auparavant, mais le rythme auquel elles deviennent disponibles a également augmenté. Permettez-moi alors de poser à nouveau la question : est-ce que prendre le temps d'en apprendre davantage sur le fonctionnement du Web et sur ce qui est disponible sur la plateforme vous aiderait aujourd'hui ? Absolument oui. Apprendre à comprendre et à utiliser la plateforme Web aujourd’hui vous donne un énorme avantage sur les autres développeurs. Que vous travailliez sur les performances, l'accessibilité, la réactivité, tous ensemble, ou que vous expédiiez simplement des fonctionnalités d'interface utilisateur, si vous souhaitez le faire en tant qu'ingénieur responsable, connaître les outils qui sont à votre disposition vous aide à atteindre vos objectifs plus rapidement et mieux. Certaines choses pour lesquelles vous n’aurez peut-être plus besoin d’une bibliothèque Sachant ce que les navigateurs prennent en charge aujourd'hui, la question est donc la suivante : que pouvons-nous abandonner ? Avons-nous besoin d’un composant div pour arrondir les coins en 2025 ? Bien sûr, ce n’est pas le cas. La propriété border-radius est actuellement prise en charge par tous les navigateurs actuellement utilisés depuis plus de 15 ans. Et la forme en coin sera également bientôt disponible, pour des coins encore plus raffinés. Jetons un coup d'œil aux fonctionnalités relativement récentes qui sont désormais disponibles dans tous les principaux navigateurs et que vous pouvez utiliser pour remplacer les dépendances existantes dans votre base de code. Le but n'est pas d'abandonner immédiatement toutes vos bibliothèques bien-aimées et de réécrire votre base de code. Pour tout le reste, vous devrez d’abord prendre en compte la prise en charge du navigateur et décider en fonction d’autres facteurs spécifiques à votre projet. Les fonctionnalités suivantes sont implémentées dans les trois principaux moteurs de navigateur (Chromium, WebKit et Gecko), mais vous pouvez avoir des exigences différentes en matière de prise en charge du navigateur qui vous empêchent de les utiliser immédiatement. Cependant, c’est encore le bon moment pour en savoir plus sur ces fonctionnalités et peut-être envisager de les utiliser à un moment donné. Popovers et boîtes de dialogue L'API Popover, l'élément HTML
Bien sûr, la vitesse de votre connexion Internet a probablement également augmenté, mais ce n’est pas le cas de tout le monde. Et tout le monde n’a pas non plus les mêmes capacités en matière d’appareil. En revanche, extraire du code tiers pour les choses que vous pouvez faire avec la plate-forme signifie très probablement que vous envoyez plus de code et que vous atteignez donc moins de clients que vous ne le feriez normalement. Sur le Web, de mauvaises performances de chargement entraînent des taux d’abandon importants et nuisent à la réputation de la marque. Exécuter moins de code sur les appareils De plus, le code que vous envoyez sur les appareils de vos clients s'exécute probablement plus rapidement s'il utilise moins d'abstractions JavaScript au-dessus de la plate-forme. Il est aussi probablement plus réactif et plus accessible par défaut. Tout cela conduit à des clients plus nombreux et plus satisfaits. Consultez le blog annuel sur les inégalités de performance de mon collègue Alex Russell, qui montre que les appareils haut de gamme sont largement absents des marchés comptant des milliards d'utilisateurs en raison des inégalités de richesse. Et cet écart ne fait que se creuser avec le temps.
Disposition de maçonnerie intégrée Une fonctionnalité de plate-forme Web qui arrivera bientôt et qui me passionne beaucoup est CSS Masonry.
Permettez-moi de commencer par expliquer ce qu'est la maçonnerie. Qu'est-ce que la maçonnerie La maçonnerie est un type de mise en page rendu populaire par Pinterest il y a des années. Il crée des pistes de contenu indépendantes dans lesquelles les éléments se regroupent aussi près que possible du début de la piste.
Beaucoup de gens voient la maçonnerie comme une excellente option pour les portfolios et les galeries de photos, ce qu’elle peut certainement faire. Mais la maçonnerie est plus flexible que ce que vous voyez sur Pinterest, et elle ne se limite pas aux seules dispositions en forme de cascade. Dans une disposition en maçonnerie :
Les pistes peuvent être des colonnes ou des lignes :
Les pistes de contenu ne doivent pas nécessairement toutes avoir la même taille :
Les éléments peuvent s'étendre sur plusieurs pistes :
Les objets peuvent être placés sur des pistes spécifiques ; ils ne sont pas obligés de toujours suivre l’algorithme de placement automatique :
Démos Voici quelques démos simples que j'ai réalisées en utilisant la prochaine implémentation de CSS Masonry dans Chromium. Une démo de galerie de photos, montrant comment les éléments (le titre dans ce cas) peuvent s'étendre sur plusieurs pistes :
Une autre galerie de photos montrant des pistes de différentes tailles :
Une mise en page de site d'actualités avec certaines pistes plus larges que d'autres et certains éléments couvrant toute la largeur de la mise en page :
Un tableau Kanban montrant que les éléments peuvent être placés sur des pistes spécifiques :
Remarque : Leles démos précédentes ont été réalisées avec une version de Chromium qui n'est pas encore disponible pour la plupart des internautes, car CSS Masonry commence tout juste à être implémenté dans les navigateurs. Cependant, les développeurs Web utilisent déjà depuis des années des bibliothèques pour créer des dispositions de maçonnerie. Sites utilisant la maçonnerie aujourd'hui En effet, la maçonnerie est aujourd’hui assez courante sur le web. Voici quelques exemples que j'ai trouvés en dehors de Pinterest :
Et quelques autres exemples, moins évidents :
Alors, comment ces mises en page ont-elles été créées ? Solutions de contournement Une astuce que j'ai vue utilisée consiste à utiliser une disposition Flexbox à la place, à changer sa direction en colonne et à la configurer pour qu'elle soit renvoyée à la ligne. De cette façon, vous pouvez placer des éléments de différentes hauteurs dans plusieurs colonnes indépendantes, donnant l'impression d'une disposition en maçonnerie :
Il existe cependant deux limites à cette solution de contournement :
L’ordre des éléments est différent de ce qu’il serait avec une véritable disposition en maçonnerie. Avec Flexbox, les éléments remplissent d'abord la première colonne et, lorsqu'elle est pleine, passent ensuite à la colonne suivante. Avec la maçonnerie, les éléments s'empileront dans la piste (ou la colonne dans ce cas) ayant le plus d'espace disponible. Mais aussi, et peut-être plus important encore, cette solution de contournement nécessite que vous définissiez une hauteur fixe pour le conteneur Flexbox ; sinon, aucun emballage ne se produirait.
Bibliothèques de maçonnerie tierces Pour les cas plus avancés, les développeurs utilisent des bibliothèques. La bibliothèque la plus connue et la plus populaire s'appelle simplement Masonry et est téléchargée environ 200 000 fois par semaine selon NPM. Squarespace fournit également un composant de mise en page qui restitue une mise en page Masonry, pour une alternative sans code, et de nombreux sites l'utilisent. Ces deux options utilisent du code JavaScript pour placer les éléments dans la mise en page. Maçonnerie intégrée Je suis vraiment ravi que Masonry commence désormais à apparaître dans les navigateurs en tant que fonctionnalité CSS intégrée. Au fil du temps, vous pourrez utiliser Masonry comme vous le faites avec Grid ou Flexbox, c'est-à-dire sans avoir besoin de solutions de contournement ni de code tiers. Mon équipe chez Microsoft a implémenté la prise en charge intégrée de Masonry dans le projet open source Chromium, sur lequel sont basés Edge, Chrome et de nombreux autres navigateurs. Mozilla a en fait été le premier fournisseur de navigateur à proposer une implémentation expérimentale de Masonry en 2020. Et Apple a également été très intéressé par la réalisation de cette nouvelle primitive de mise en page Web. Le travail de standardisation de la fonctionnalité avance également, avec un accord au sein du groupe de travail CSS sur l'orientation générale et même un nouveau type d'affichage : les grilles. Si vous souhaitez en savoir plus sur la maçonnerie et suivre les progrès, consultez ma page de ressources CSS Masonry. Avec le temps, lorsque Masonry deviendra une fonctionnalité de base, tout comme Grid ou Flexbox, nous pourrons simplement l'utiliser et bénéficier de :
De meilleures performances, Une meilleure réactivité, Facilité d’utilisation et code plus simple.
Examinons-les de plus près. Meilleures performances Créer votre propre système de mise en page de type Masonry, ou utiliser une bibliothèque tierce à la place, signifie que vous devrez exécuter du code JavaScript pour placer des éléments à l'écran. Cela signifie également que ce code bloquera le rendu. En effet, soit rien n’apparaîtra, soit les choses ne seront pas aux bons endroits ou dans les bonnes tailles, jusqu’à ce que ce code JavaScript soit exécuté. La mise en page en maçonnerie est souvent utilisée pour la partie principale d'une page Web, ce qui signifie que le code ferait apparaître votre contenu principal plus tard qu'il n'aurait pu le faire autrement, dégradant votre LCP, ou la métrique Largest Contentful Paint, qui joue un rôle important dans les performances perçues et l'optimisation des moteurs de recherche. J'ai testé la bibliothèque Masonry JS avec une mise en page simple et en simulant une connexion 4G lente dans DevTools. La bibliothèque n'est pas très volumineuse (24 Ko, 7,8 Ko compressés), mais le chargement a pris 600 ms dans mes conditions de test. Voici un enregistrement de performances montrant ce long temps de chargement de 600 ms pour la bibliothèque Masonry et qu'aucune autre activité de rendu ne s'est produite pendant ce temps :
De plus, après le temps de chargement initial, le script téléchargé devait ensuite être analysé, compilé, puis exécuté. Tout cela, comme mentionné précédemment, bloquait le rendu de la page. Avec une implémentation Masonry intégrée dans le navigateur, nous n'aurons pas de script à charger et à exécuter. Le moteur du navigateur fera simplement son travail lors de l’étape initiale de rendu de la page. Meilleure réactivité Semblable au premier chargement d’une page, le redimensionnement de la fenêtre du navigateur entraîne à nouveau le rendu de la mise en page dans cette page. À ce stade, cependant, si la page utilise la bibliothèque Masonry JS, il n'est pas nécessaire de charger à nouveau le script, car il est déjàici. Cependant, le code qui déplace les éléments aux bons endroits doit être exécuté. Maintenant, cette bibliothèque particulière semble être assez rapide pour le faire lors du chargement de la page. Cependant, il anime les éléments lorsqu'ils doivent être déplacés vers un endroit différent lors du redimensionnement de la fenêtre, ce qui fait une grande différence. Bien sûr, les utilisateurs ne passent pas autant de temps à redimensionner les fenêtres de leur navigateur que nous, les développeurs. Mais cette expérience de redimensionnement animé peut être assez choquante et ajoute au temps perçu comme nécessaire à la page pour s'adapter à sa nouvelle taille. Facilité d'utilisation et code plus simple La facilité d’utilisation d’une fonctionnalité Web et la simplicité du code sont des facteurs importants qui peuvent faire une grande différence pour votre équipe. Bien entendu, ils ne pourront jamais être aussi importants que l’expérience utilisateur finale, mais l’expérience du développeur a un impact sur la maintenabilité. L’utilisation d’une fonctionnalité Web intégrée présente des avantages importants à cet égard :
Les développeurs qui connaissent déjà HTML, CSS et JS pourront probablement utiliser cette fonctionnalité facilement car elle a été conçue pour bien s'intégrer et être cohérente avec le reste de la plate-forme Web. Il n’y a aucun risque que des changements radicaux soient introduits dans la façon dont la fonctionnalité est utilisée. Il n’y a presque aucun risque que cette fonctionnalité devienne obsolète ou non maintenue.
Dans le cas de Masonry intégré, parce qu'il s'agit d'une primitive de mise en page, vous l'utilisez à partir de CSS, tout comme Grid ou Flexbox, sans JS impliqué. De plus, d’autres propriétés CSS liées à la mise en page, telles que Gap, fonctionnent comme prévu. Il n'y a aucune astuce ou solution de contournement à connaître, et les choses que vous apprenez sont documentées sur MDN. Pour la bibliothèque Masonry JS, l'initialisation est un peu complexe : elle nécessite un attribut de données avec une syntaxe spécifique, ainsi que des éléments HTML cachés pour définir la taille des colonnes et des espaces. De plus, si vous souhaitez étendre les colonnes, vous devez inclure vous-même la taille de l'espace pour éviter les problèmes :
Comparons cela à ce à quoi ressemblerait une implémentation de Masonry intégrée :
Code plus simple et plus compact qui peut simplement utiliser des éléments comme l'espace et où la répartition des pistes se fait avec l'étendue 2, tout comme dans la grille, et ne nécessite pas que vous calculiez la bonne largeur qui inclut la taille de l'espace. Comment savoir ce qui est disponible et quand il est disponible ? Dans l’ensemble, la question n’est pas vraiment de savoir si vous devez utiliser Masonry intégré sur une bibliothèque JS, mais plutôt quand. La bibliothèque Masonry JS est incroyable et comble une lacune de la plate-forme Web depuis de nombreuses années, et pour de nombreux développeurs et utilisateurs satisfaits. Il présente bien sûr quelques inconvénients si vous le comparez à une implémentation intégrée de Masonry, mais ceux-ci ne sont pas importants si cette implémentation n'est pas prête. Il est facile pour moi de lister ces nouvelles fonctionnalités intéressantes de la plate-forme Web, car je travaille chez un fournisseur de navigateurs et j'ai donc tendance à savoir ce qui s'en vient. Mais les développeurs partagent souvent, enquête après enquête, qu’il est difficile de suivre les nouveautés. Rester informé est difficile, et de toute façon, les entreprises ne donnent pas toujours la priorité à l’apprentissage. Pour vous aider, voici quelques ressources qui fournissent des mises à jour de manière simple et compacte afin que vous puissiez obtenir rapidement les informations dont vous avez besoin :
La plateforme Web propose un site explorateur : Vous pourriez être intéressé par sa page de notes de version. Et, si vous aimez RSS, consultez le flux de notes de version, ainsi que les flux de base nouvellement disponibles et largement disponibles.
Le WebTableau de bord État de la plateforme : Vous aimerez peut-être ses différentes pages sur l’année de référence.
Page de feuille de route de l'état de la plate-forme Chrome.
Si vous avez un peu plus de temps, vous pourriez également être intéressé par les notes de version des fournisseurs de navigateurs :
Chrome Bord Firefox Safari
Pour encore plus de ressources, consultez mon aide-mémoire pour naviguer sur la plate-forme Web. Mon truc n'est toujours pas implémenté C’est l’autre côté du problème. Même si vous trouvez le temps, l’énergie et les moyens de suivre, il reste toujours de la frustration de faire entendre votre voix et de mettre en œuvre vos fonctionnalités préférées. Peut-être attendez-vous depuis des années qu’un bug spécifique soit résolu ou qu’une fonctionnalité spécifique soit livrée dans un navigateur où elle est toujours manquante. Ce que je dirai, c'est que les fournisseurs de navigateurs écoutent. Je fais partie de plusieurs équipes inter-organisationnelles où nous discutons en permanence des signaux et des commentaires des développeurs. Nous examinons de nombreuses sources de commentaires différentes, à la fois internes à chaque fournisseur de navigateur et externes/publiques sur les forums, les projets open source, les blogs et les enquêtes. Et nous essayons toujours de créer de meilleures façons pour les développeurs de partager leurs besoins spécifiques et leurs cas d’utilisation. Donc, si vous le pouvez, demandez davantage aux fournisseurs de navigateurs et faites-nous pression pour que nous implémentions les fonctionnalités dont vous avez besoin. Je comprends que cela prend du temps et peut aussi être intimidant (sans parler d’une barrière élevée à l’entrée), mais cela fonctionne aussi. Voici quelques façons de faire entendre votre voix (ou celle de votre entreprise) : Répondez aux enquêtes annuelles sur l'état de JS, l'état du CSS et l'état du HTML. Ils jouent un rôle important dans la manière dont les fournisseurs de navigateurs priorisent leur travail. Si vous avez besoin d'une API standard spécifique à implémenter de manière cohérente dans tous les navigateurs, envisagez de soumettre une proposition lors de la prochaine itération du projet Interop. Cela prend plus de temps, mais réfléchissez à la façon dont Shopify et RUMvision ont partagé leurs listes de souhaits pour Interop 2026. Des informations détaillées comme celle-ci peuvent être très utiles pour que les fournisseurs de navigateurs établissent des priorités. Pour des liens plus utiles pour influencer les fournisseurs de navigateurs, consultez mon aide-mémoire pour naviguer sur la plate-forme Web. Conclusion Pour conclure, j’espère que cet article vous a laissé quelques éléments de réflexion :
Excitation pour la maçonnerie et d’autres fonctionnalités Web à venir. Quelques fonctionnalités Web que vous souhaiterez peut-être commencer à utiliser. Quelques morceaux de code personnalisé ou tiers que vous pourrez peut-être supprimer au profit de fonctionnalités intégrées. Quelques façons de suivre ce qui s’en vient et d’influencer les fournisseurs de navigateurs.
Plus important encore, j’espère vous avoir convaincu des avantages d’utiliser pleinement la plateforme Web.
