Composants UX sans JavaScript ni classes CSS

Uniquement des sélecteurs d'éléments et d'attributs

Accordéon avec <details> et <summary>

Question 1 : C'est quoi un sélecteur d'attribut ?

Un sélecteur d'attribut cible les éléments HTML en fonction de leurs attributs. Par exemple : [data-status="active"]

Question 2 : Peut-on vraiment éviter les classes ?

Oui ! En utilisant des sélecteurs d'éléments (p, h1, div), d'attributs ([data-*], [role]), et de pseudo-classes (:hover, :checked)

Question 3 : Quels sont les avantages ?

HTML plus sémantique, CSS plus maintenable, moins de noms de classes à inventer, et code plus léger

Onglets avec input[type="radio"]

Profil utilisateur

Informations sur votre profil, photo et biographie.

Paramètres

Configurez vos préférences et options de confidentialité.

Messages

Consultez vos messages et conversations.

Toggle Switch avec checkbox

Notifications activées
Mode sombre
Synchronisation auto

Tooltips avec [data-tooltip]

Survolez HTML et CSS pour voir les tooltips.

Les pseudo-éléments affichent le contenu de l'attribut data-tooltip.

Progress & Meter

Élément <progress>

75%

Élément <meter>

60% 30% 90%

Rating Stars avec input[type="radio"]

Cliquez sur les étoiles pour noter

Cards avec data-type

Card 1

Effet hover avec élévation

Card 2

Transform au survol

Card 3

Transition CSS

Flip Card (survolez)

Recto
Verso

Loading & Skeleton

Spinner

Skeleton Loading

Alerts avec role et data-status

✓ Opération réussie ! Vos modifications ont été enregistrées.
⚠️ Attention : Cette action nécessite une confirmation.
✗ Erreur : Impossible de traiter votre demande.

Pricing Table avec data-type et data-featured

Gratuit

0€

Par mois

  • ✓ 5 projets
  • ✓ 1 Go stockage
  • ✓ Support email

Pro

29€

Par mois

  • ✓ Projets illimités
  • ✓ 100 Go stockage
  • ✓ Support prioritaire
  • ✓ API access

Entreprise

99€

Par mois

  • ✓ Tout Pro +
  • ✓ Stockage illimité
  • ✓ Support 24/7
  • ✓ Intégrations

Expandable Search avec input[type="search"]

Cliquez dans le champ pour l'étendre

Modal avec :target

Ouvrir la modal

Carrousel avec scroll-snap

Défilez horizontalement ou utilisez les indicateurs

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Formulaire Multi-étapes

Formulaire utilisant input[type="radio"] pour la navigation

Étape 1 : Informations

Suivant →

Techniques CSS utilisées

Sélecteurs d'éléments
p, h1, article, section, nav, details, summary
Sélecteurs d'attributs
[data-component], [data-type], [data-status], [role], [aria-current]
Sélecteurs de type d'input
input[type="radio"], input[type="checkbox"], input[type="search"]
Pseudo-classes
:hover, :focus, :checked, :target, :nth-of-type(), :first-child, :last-child
Pseudo-éléments
::before, ::after pour contenu généré
Combinateurs
>, +, ~, (espace) pour relations entre éléments
Sélecteurs d'état
[open] pour details, :checked pour inputs

Avantages de cette approche

Sélecteurs d'attributs disponibles

Sélecteur Description Exemple
[attr] Élément avec attribut [required]
[attr="value"] Valeur exacte [type="radio"]
[attr^="value"] Commence par [data-^="btn"]
[attr$="value"] Termine par [href$=".pdf"]
[attr*="value"] Contient [class*="button"]
[attr~="value"] Mot dans liste [title~="flower"]

Attributs HTML utiles pour le style

Récapitulatif

✅ Mission accomplie !

Cette page démontre qu'il est possible de créer des composants UX riches et interactifs sans JavaScript ET sans classes CSS.

Techniques utilisées :

  • ✓ Sélecteurs d'éléments HTML natifs
  • ✓ Attributs data-* personnalisés
  • ✓ Pseudo-classes (:hover, :checked, :target, :focus)
  • ✓ Pseudo-éléments (::before, ::after)
  • ✓ Combinateurs CSS (>, +, ~)
  • ✓ Transitions et animations CSS
  • ✓ CSS Grid et Flexbox
  • ✓ Variables CSS (--custom-properties)

Résultat : Code HTML sémantique, CSS maintenable, et 0 JavaScript !