Comportement : Cet élément s'étend toujours sur toute la largeur de la fenêtre, quelle que soit la taille de l'écran.
Explication : La formule margin-inline: min(-1*var(--margin), var(--max-width)/2 - 50cqw); calcule la marge négative exacte nécessaire pour que l'élément atteigne les bords de la page, que l'écran soit petit (où la marge est de -1rem) ou grand.
Quatre techniques de pleine largeur
Le principe de base repose sur un conteneur parent (.container) qui a une largeur maximale et est centré. Les techniques "full-bleed" utilisent des marges latérales négatives (margin-inline) pour permettre à certains éléments enfants de "s'échapper" de ce conteneur et de s'étendre sur toute la largeur de la page, ou presque. La magie opère grâce à l'unité cqw (Container Query Width), qui est ici équivalente à la largeur de la fenêtre (vw) car le conteneur de référence est la balise html.
Technique 2 : Partiellement large sur grand écran
Comportement : Sur mobile et tablette, l'élément est en pleine largeur. Sur grand écran (ordinateur), il s'élargit mais conserve une marge de chaque côté.
Explication : La formule est similaire à la première, mais elle ajoute la variable de marge (+ var(--margin)). Sur grand écran, cela annule juste assez la marge négative pour laisser un espace de 1rem sur les côtés.
Main Content
Le principe de base repose sur un conteneur parent (.container) qui a une largeur maximale et est centré. Les techniques "full-bleed" utilisent des marges latérales négatives (margin-inline) pour permettre à certains éléments enfants de "s'échapper" de ce conteneur et de s'étendre sur toute la largeur de la page, ou presque. La magie opère grâce à l'unité cqw (Container Query Width), qui est ici équivalente à la largeur de la fenêtre (vw) car le conteneur de référence est la balise html.
Technique 3 : Partiellement large sur grand écran (version 2)
Comportement : Sur mobile et tablette, l'élément reste aligné avec le contenu principal. Sur grand écran, il s'élargit en conservant une marge de chaque côté.
Explication : La fonction min(0px, ...) fait la différence. Sur petit écran, le calcul de la marge est positif, donc min() choisit 0px et l'élément ne bouge pas. Sur grand écran, le calcul devient négatif, ce qui élargit l'élément tout en gardant la marge.
Résumé
Ces quatre classes offrent un contrôle nuancé pour décider comment les éléments doivent "casser" la mise en page principale en fonction de la largeur de l'écran, en passant d'une largeur contenue à une pleine largeur avec ou sans marges.