Mon Site Web

Section Héroïque "Full-Bleed"

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 !

Techniques CSS Modernes (Sans DIV)

Sections Full-Bleed Sans 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.

Padding Dynamique

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.

Grid CSS Direct

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 !

Zéro DIV, 100% Sémantique

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().

Zéro JavaScript, Zéro DIV, Zéro Classes CSS !

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.