Safari 26.4 livre Grid Lanes, la mise en page « masonry » native en CSS

2026-03-24 · Éditeur : Apple (WebKit) · Domaine : Design, UX et UI

Safari 26.4 active par défaut display: grid-lanes, que les autres navigateurs gardent derrière un drapeau, qui produit des mises en page en cascade sans bibliothèque JavaScript.

### Contexte Le **24 mars 2026**, l'équipe **WebKit** détaille les nouveautés de **Safari 26.4**. La principale est **CSS Grid Lanes**, nom retenu pour la mise en page « masonry » après de longs débats au sein du groupe de travail CSS. ### Caractéristiques - Activation par `display: grid-lanes` (et `inline-grid-lanes`), par exemple avec `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))`. - Extension de CSS Grid : même dimensionnement des pistes, placement explicite possible. - Propriété **`flow-tolerance`** : règle la facilité avec laquelle un élément change de colonne pour rester près du haut ; WebKit souligne son effet sur l'ordre de lecture et la navigation au clavier. - Web Inspector affiche l'ordre des éléments en surimpression. - Safari 26.4 compte au total **44 nouveautés, 191 corrections et une dépréciation**, dont les container queries par nom seul, des animations pilotées par le défilement exécutées hors du fil principal et WebTransport. ### Pourquoi c'est important Les grilles en cascade (galeries, catalogues, tableaux de cartes) reposaient sur des bibliothèques JavaScript qui calculent les positions et dégradent les performances. Une solution native, intégrée à Grid, simplifie le code et améliore la fluidité, à condition de surveiller l'ordre de lecture pour l'accessibilité. ### À retenir Grid Lanes s'utilise dès maintenant en amélioration progressive avec `@supports`, en gardant une grille classique pour les navigateurs qui ne le gèrent pas encore.

Tags : CSS, Mise en page, Navigateurs