Full-Bleed: Techniques CSS Sans Classes

Ceci est une section full-bleed (utilisant 100vw + margin négative)

1. CSS Grid (Méthode recommandée)

Utilise une grille avec 3 colonnes pour créer un layout full-bleed élégant.

body > * { display: grid; grid-template-columns: 1fr min(1000px, calc(100% - 2rem)) 1fr; } body > * > [data-full-bleed] { grid-column: 1 / -1; }
✓ Avantages:
  • Très flexible et élégant
  • Responsive avec min()
  • Pas de calculs complexes
  • Fonctionne avec overflow
  • Idéal pour les mises en page modernes
✗ Inconvénients:
  • Nécessite IE 11 minimum
  • Un peu moins intuitif que les autres méthodes

Fichier exemple: 01-grid-full-bleed.html

2. Margin Négative (Classique)

Le conteneur principal a du padding, les sections full-bleed utilisent une marge négative.

body { max-width: 1000px; margin: 0 auto; padding: 0 1rem; } [data-full-bleed] { margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
✓ Avantages:
  • Très simple et directe
  • Fonctionne dans tous les navigateurs (même très anciens)
  • Facile à comprendre
  • Parfait pour les anciens projets
✗ Inconvénients:
  • Nécessite de connaître la valeur du padding
  • Problème potentiel avec overflow
  • Moins flexible si on change le padding

Fichier exemple: 03-negative-margin.html

3. Viewport Width (100vw)

Utilise 100vw pour s'étendre à la largeur complète de la viewport avec un calcul pour recentrer.

[data-full-bleed] { width: 100vw; margin-left: calc(-50vw + 50%); }
✓ Avantages:
  • Très simple à mettre en place
  • Fonctionne dans les navigateurs modernes
  • Couvre toute la viewport
  • Pas de dépendances CSS du conteneur
✗ Inconvénients:
  • Problème avec les scrollbars (100vw inclut la scrollbar)
  • Peut créer un débordement horizontal
  • Le calcul calc(-50vw + 50%) peut être confus

Fichier exemple: 04-viewport-width.html

4. Flexbox

Combine flexbox avec 100vw pour un layout full-bleed responsive.

main { display: flex; flex-direction: column; } [data-full-bleed] { width: 100vw; margin-left: calc(-50vw + 50%); }
✓ Avantages:
  • Contrôle total du flux vertical
  • Responsive et flexible
  • Bon support navigateur
✗ Inconvénients:
  • Hérité du problème de 100vw
  • Un peu plus verbeux que les autres

Fichier exemple: 02-flexbox-full-bleed.html

Tableau Comparatif

Technique Support Complexité Note
CSS Grid IE 11+ Moyenne 🏆 Recommandée
Margin Négative Tous Très simple Classique
100vw Modernes Simple Attention scrollbar
Flexbox Modern browsers Moyenne Flexible

Recommandation

Utilisez CSS Grid pour les nouveaux projets. C'est la méthode la plus moderne, flexible et maintenable.

Utilisez Margin Négative si vous devez supporter des navigateurs très anciens ou si vous préférez une approche simple et éprouvée.

Évitez 100vw seul si vous avez des scrollbars verticales, car cela crée un débordement horizontal.