Visualiser la grille CSS pour mieux comprendre le layout

Pour corriger des décalages ou mieux comprendre une mise en page, on peut activer des classes CSS de débogage. Le bouton ci-dessous applique dynamiquement des bordures, fonds et motifs aux éléments clés de la page pour en révéler la structure réelle.

En-tête du site
Contenu principal, articles, tableaux ou widgets

Ce bloc représente un composant dynamique, comme un graphique mis à jour en direct dans un tableau de bord. En lui appliquant contain: layout; et will-change: transform;, on demande au navigateur d’optimiser son rendu indépendamment du reste de la page. Cela limite les recalculs de position ou de style quand le contenu change rapidement.