Les nouveautés de Google IO 2024 : CSS, HTML et performance

Voici un aperçu des toutes dernières annonces de Google I/O 2024, avec une attention particulière sur les nouveautés HTML, CSS, ainsi que les améliorations de performance.

Nouveautés HTML et CSS

1. Scroll Driven Animations

Les animations natives déclenchées par le défilement sont désormais une réalité. Au lieu d'utiliser des librairies tierces comme GSAP, les développeurs peuvent maintenant compter sur le natif pour animer des éléments lors du défilement. Ces animations sont cependant limitées pour l'instant à Chrome et Edge, et sont encore en phase expérimentale pour Firefox. Si vous shouaitez en savoir plus, vous pouvez consulter la playlist "Unleash the power of Scroll-Driven Animations" de la chaîne Chrome for Developers.

2. View Transitions

Les transitions entre les vues, également connues sous le nom de View Transition API, permettent de créer des animations fluides entre les différentes pages ou sections d'une application web. Les développeurs peuvent déjà mettre en pratique certaines fonctionnalités sur Chrome et Edge. La documentation officielle est disponible ici.

3. Popover API

La nouvelle balise popover permet de créer des éléments d'interface utilisateur, comme des modales, simplement et sans utiliser de JavaScript. Un simple ajout d'attributs HTML contrôle l'affichage et le comportement du popover.

4. CSS Anchor Positioning API

La CSS Anchor Positioning API est un nouvel outil puissant pour positionner des éléments par rapport à d'autres. Elle permet, par exemple, de créer des tooltips qui se repositionnent automatiquement selon l'espace disponible.

5. CSS Nesting

La possibilité de nester le CSS de manière native est enfin arrivée. Cette fonctionnalité permet aux développeurs d'organiser leur code CSS de manière plus logique et hiérarchique, à l'instar des préprocesseurs CSS comme SASS.

6. Details et Summary

Les éléments detail et summary, utilisés pour créer des contenus extensibles comme des FAQ, connaissent une popularité grandissante. Google a également annoncé l'introduction de l'exclusive accordion qui permet de faire en sorte qu'un seul élément soit ouvert à la fois.

7. Field Sizing Content

L'attribut field-sizing: content ajuste automatiquement la taille d'un champ de texte en fonction du contenu saisi, supprimant ainsi la barre de défilement vertical parfois gênante.

8. Styleable Select Element

Les éléments select peuvent désormais être stylisés sans hacks compliqués. Vous pouvez inclure des images, des icônes, des séparateurs et différents styles pour les options de sélection.

9. Align Content for Block

Une nouvelle propriété qui centre parfaitement le contenu à l'intérieur d'un bloc, simplifiant ainsi le processus de mise en page sans besoin de flexbox ou grid.

10. color-mix()

La function color-mix() permet de mélanger des couleurs directement via CSS, ouvrant de nouvelles possibilités pour la gestion des thèmes et des palettes de couleurs.

Performances

1. Lazy Loading

Même si cette fonctionnalité n'est pas nouvelle, Lazy Loading reste sous-utilisée. Les développeurs sont encouragés à l'implémenter pour améliorer les temps de chargement des pages.

2. SRCSET et Sizes

Utiliser SRCSET et l'attribut sizes améliore considérablement les performances en adaptant la résolution des images à la taille de l'écran de l'utilisateur.

3. Prefetch et Preload

L'utilisation judicieuse de Prefetch et Preload permet d'optimiser la performance et la fluidité d'un site web, améliorant ainsi l'expérience utilisateur en minimisant les temps d'attente.

L'objectif de preload est de charger des ressources essentielles qui sont nécessaires pour le rendu de la page actuelle. Il permet de spécifier des ressources critiques pour lesquelles le chargement doit être priorisé afin d'améliorer le temps de rendu de la page.

Tandis que le but du préchargement avec prefetch est de récupérer des ressources qui pourraient être nécessaires dans un futur proche, mais pas nécessairement pour la page actuelle. Cela est particulièrement utile pour les ressources nécessaires sur les pages suivantes, ce qui permet de réduire les temps de chargement lors de la navigation.

Conclusion

La conférence Google IO de cette année a mis en avant de nombreuses améliorations et nouvelles fonctionnalités qui visent à rendre le développement web plus efficace et les applications plus performantes. L'accent est mis sur des technologies natives qui simplifient le code et améliorent les performances.