Composants avancés sans JS ni classes

Skeleton Loading

Placeholders animés avec data-skeleton

Skeleton texte

Skeleton card

Skeleton combiné

Image Lazy Load Placeholder

Images avec loading="lazy" et effet skeleton

Lazy

Image Comparison Slider

Déplacez le curseur pour comparer (utilise :has() et input range)

Après
Avant

Off-canvas Menu

Menu latéral qui glisse depuis le côté

Accordion Menu

Accordéon stylisé avec details et summary

Section 1 : Introduction

Contenu de la première section avec des informations détaillées.

Section 2 : Fonctionnalités

Liste des fonctionnalités principales du produit.

Section 3 : Support

Informations de contact et ressources d'aide.

Tabs Vertical

Onglets verticaux avec input radio

Dashboard

Vue d'ensemble de vos statistiques et activités récentes.

Profil

Gérez vos informations personnelles et vos préférences.

Paramètres

Configurez les options avancées de votre compte.

Récapitulatif des techniques

Sticky Header
position: sticky; top: 0;
Menu Hamburger
input[type="checkbox"] + label avec spans animés
Sticky Sidebar
position: sticky avec hauteur calc(100vh - offset)
Collapsible Sidebar
:checked pour toggle + grid-template-columns dynamique
Sticky Footer
margin-top: auto avec body en flexbox
Off-canvas Menu
position: fixed avec transform/right animé + overlay ::before
Lightbox
:target pour afficher/masquer + position: fixed
Skeleton Loading
linear-gradient animé avec @keyframes
Lazy Load Placeholder
loading="lazy" + background gradient
Image Comparison
:has(input[value="X"]) pour contrôler width dynamiquement
Dropdown Menu
:hover et :focus-within pour afficher sous-menu
Scroll Indicator
animation-timeline: scroll() (CSS moderne)

Sélecteurs CSS utilisés

  • body > header:first-of-type - Ciblage du header principal
  • input[type="checkbox"][id="menu-toggle"] - Input spécifique
  • aside[data-type="sticky-sidebar"] - Attribut data personnalisé
  • section[data-component="lightbox"] - Composant par attribut
  • div[data-skeleton="text"] - Type de skeleton
  • details[data-type="accordion"] - Accordion stylisé
  • nav[data-type="dropdown"] - Dropdown par type
  • input:checked ~ aside - Combinateur sibling
  • :target - Pour lightbox et modals
  • :has() - Pour image comparison
  • :hover, :focus-within - Interactions
  • ::before, ::after - Pseudo-éléments

Avantages de cette approche

🎯 Sémantique

HTML qui a du sens, attributs descriptifs, structure claire

♿ Accessible

Utilisation d'attributs ARIA, rôles natifs, navigation au clavier

🚀 Performance

CSS léger, pas de JS, chargement rapide

🔧 Maintenable

Sélecteurs explicites, pas de nommage de classes

Composants implémentés

  • ✅ Sticky Header
  • ✅ Menu Hamburger
  • ✅ Sticky Sidebar
  • ✅ Collapsible Sidebar
  • ✅ Sticky Footer
  • ✅ Off-canvas Menu
  • ✅ Lightbox / Galerie
  • ✅ Skeleton Loading
  • ✅ Lazy Load Placeholder
  • ✅ Image Comparison Slider
  • ✅ Dropdown Menu
  • ✅ Accordion Menu
  • ✅ Tabs Vertical
  • ✅ Scroll Indicator
  • ✅ Responsive Design

Limitations et alternatives

Quand JavaScript devient nécessaire ?
  • AJAX / Fetch API pour charger des données
  • Validation complexe de formulaires
  • Animations déclenchées par scroll personnalisées
  • Stockage local (localStorage/sessionStorage)
  • Manipulation DOM complexe
  • WebSockets / temps réel
Compatibilité navigateurs

Fonctionnalités modernes utilisées :

  • :has() - Chrome 105+, Firefox 121+, Safari 15.4+
  • animation-timeline: scroll() - Support limité (Chrome 115+)
  • :focus-within - Largement supporté
  • position: sticky - Largement supporté

Pour une compatibilité maximale, évitez :has() et scroll-timeline

Frameworks CSS sans classes

Ces frameworks adoptent la même philosophie :

  • Pico.css - Framework minimaliste
  • Water.css - Style automatique
  • MVP.css - Design par défaut
  • Sakura - Thème japonais minimaliste
  • Simple.css - CSS simple et élégant

Code example : Lightbox

Exemple de code HTML et CSS pour le lightbox :

<!-- HTML -->
<a href="#img1">
  <img src="photo.jpg" alt="Photo">
</a>

<aside data-type="lightbox" id="img1">
  <a href="#">×</a>
  <img src="photo-large.jpg" alt="Photo">
</aside>

/* CSS */
aside[data-type="lightbox"] {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
}

aside[data-type="lightbox"]:target {
  display: flex;
  align-items: center;
  justify-content: center;
}

Code example : Menu Hamburger

<!-- HTML -->
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">
  <span></span>
  <span></span>
  <span></span>
</label>
<nav>...</nav>

/* CSS */
input[id="menu-toggle"] {
  display: none;
}

input:checked ~ nav {
  display: block;
}

input:checked ~ label span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

input:checked ~ label span:nth-child(2) {
  opacity: 0;
}

input:checked ~ label span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

Ressources et documentation