Chaque année, Chrome, Safari, Firefox et Edge intègrent de nouvelles fonctions. Pour vous, cela signifie des sites plus légers, avec moins de code à maintenir.
1. Des blocs qui s’adaptent à leur place (Container Queries)
Jusqu’ici, une mise en page s’adaptait seulement à la largeur de l’écran. Désormais, chaque bloc s’adapte à la place dont il dispose.
Exemple : une fiche produit s’affiche en ligne (photo à gauche, texte à droite) dans la page principale, et en colonne dans une barre latérale étroite, avec le même code.
2. Des changements de page animés (View Transitions)
La photo d’un produit peut glisser de la liste vers sa page détaillée, comme dans une application de téléphone, sans bibliothèque supplémentaire. Sur un navigateur qui ne gère pas encore cette fonction, la page change simplement, sans animation.
3. Des images plus légères (AVIF)
À qualité visuelle égale, une image AVIF pèse souvent deux fois moins qu’un JPEG. Le format est lu par tous les navigateurs récents. Des pages plus légères s’affichent plus vite, surtout sur téléphone.
4. Des menus et bulles d’aide intégrés (Popover)
Un menu ou une bulle d’aide se déclare maintenant en quelques mots de HTML. Le navigateur gère l’ouverture, la fermeture par la touche Échap ou par un clic à côté. Moins de code, et un fonctionnement correct au clavier.
5. Des styles mieux rangés (CSS Nesting)
Les règles de mise en forme d’un même bloc se regroupent, comme des sous-dossiers. Il fallait auparavant un outil supplémentaire (Sass) et une étape de préparation.
Ce que cela change pour vous
Moins de bibliothèques externes, c’est un site plus rapide, moins de mises à jour de sécurité à suivre et une maintenance moins coûteuse. C’est pourquoi nous utilisons les fonctions intégrées aux navigateurs dès qu’elles suffisent.