Ce conteneur s'adapte à 100% de la largeur de la vue, créant un effet visuel immersif. Le contenu à l'intérieur, cependant, reste centré et lisible sans utiliser de DIV !
Les sections utilisent width: 100% et les
enfants directs ont
max-width: 1100px; margin: auto pour
centrer le contenu. Plus besoin de DIV conteneur ! La
section héroïque ci-dessus démontre cette technique.
Le header utilise
padding: calc((100% - 1100px) / 2) pour
centrer automatiquement son contenu. Cette technique CSS
moderne élimine le besoin d'un conteneur DIV tout en
maintenant l'effet de centrage et de largeur maximale.
La grille est appliquée directement sur la
<section> qui contient le
<h2> et les
<article>. Le titre utilise
grid-column: 1 / -1 pour occuper toute la
largeur. Aucun conteneur intermédiaire nécessaire !
Cette page ne contient aucun DIV ! Les
éléments HTML5 sémantiques (header,
main, section,
article, footer) suffisent. Le
CSS moderne avec grid, flex et
calc() permet cette approche élégante.
Le menu mobile utilise une technique ingénieuse entièrement
en CSS. Une
<input type="checkbox"> cachée sert
d'interrupteur, détectée via le sélecteur
:checked. Trois éléments
<span> créent les lignes du hamburger qui
se transforment en croix grâce à
transform: rotate() et
translateY(). Le menu glisse depuis la droite
avec transform: translateX(100%) puis
translateX(0) au clic. Un overlay apparaît via
header::before et le sélecteur
:has().
Cette page démontre qu'une approche 100% sémantique est non
seulement possible, mais offre des avantages majeurs :
meilleure accessibilité,
maintenance simplifiée,
CSS plus léger, et
compréhension immédiate de la structure HTML. Les sélecteurs CSS modernes ([data-*],
[aria-*], combinateurs, pseudo-classes)
remplacent avantageusement les classes traditionnelles tout
en offrant une spécificité précise et une documentation
auto-générée du markup.