Aller au contenu principal

Module CSS.8 – CSS avancé

Objectif​

Maîtriser les fonctionnalités avancées CSS : Variables CSS (Custom Properties), pseudo-classes, pseudo-éléments pour créer du CSS moderne et maintenable.

Théorie​

Variables CSS (Custom Properties)​

Définir des variables :

:root {
    --couleur-primaire: #007bff;
    --couleur-secondaire: #6c757d;
    --espacement: 1rem;
    --font-family: 'Roboto', sans-serif;
}

Utiliser les variables :

.button {
    background-color: var(--couleur-primaire);
    padding: var(--espacement);
    font-family: var(--font-family);
}

Valeurs par défaut :

color: var(--couleur-primaire, blue); /* blue si variable non définie */

Portée :

:root {
    --couleur: blue; /* Globale */
}

.container {
    --couleur: red; /* Locale au container */
}

Avantages :

  • ✅ Réutilisabilité
  • ✅ Maintenance facile
  • ✅ Thèmes (dark mode)
  • ✅ Calculs dynamiques

Dark mode avec variables :

:root {
    --bg-color: white;
    --text-color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: black;
        --text-color: white;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

Pseudo-classes​

Pseudo-classes de base :

a:hover { }      /* Au survol */
a:active { }     /* Pendant le clic */
a:visited { }    /* Liens visités */
a:focus { }      /* Au focus */

Pseudo-classes de structure :

:first-child { }      /* Premier enfant */
:last-child { }       /* Dernier enfant */
:nth-child(2) { }     /* 2ème enfant */
:nth-child(odd) { }   /* Enfants impairs */
:nth-child(even) { }  /* Enfants pairs */
:nth-child(3n) { }    /* Tous les 3 */
:nth-child(3n+1) { }  /* 1, 4, 7, 10... */
:first-of-type { }    /* Premier du type */
:last-of-type { }     /* Dernier du type */
:nth-of-type(2) { }   /* 2ème du type */

Pseudo-classes d'état :

:checked { }          /* Checkbox/radio coché */
:disabled { }         /* Élément désactivé */
:enabled { }          /* Élément activé */
:required { }         /* Champ requis */
:optional { }         /* Champ optionnel */
:valid { }            /* Valeur valide */
:invalid { }          /* Valeur invalide */

Pseudo-classes de position :

:root { }             /* Élément racine */
:not(.classe) { }     /* Négation */
:empty { }            /* Élément vide */
:target { }           /* Cible de l'ancre */

Exemples :

/* Zebra striping */
tr:nth-child(even) {
    background-color: #f5f5f5;
}

/* Premier et dernier */
li:first-child,
li:last-child {
    font-weight: bold;
}

/* Input invalide */
input:invalid {
    border-color: red;
}

/* Exclure une classe */
p:not(.exclu) {
    color: blue;
}

Pseudo-éléments​

Pseudo-éléments de base :

::before { }    /* Avant le contenu */
::after { }     /* Après le contenu */
::first-line { } /* Première ligne */
::first-letter { } /* Première lettre */
::selection { }   /* Texte sélectionné */

Syntaxe (:: vs :) :

  • :: pour pseudo-éléments (CSS3)
  • : pour pseudo-classes
  • : accepté pour compatibilité

::before et ::after :

.element::before {
    content: "★";
    color: gold;
}

.element::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: blue;
}

Important : content est obligatoire pour ::before et ::after.

Exemples pratiques :

/* Icône avant */
.link::before {
    content: "→ ";
}

/* Séparateur après */
.item::after {
    content: " | ";
}

/* Décoration */
.title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: blue;
    margin-top: 10px;
}

::first-letter :

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: blue;
}

::selection :

::selection {
    background-color: yellow;
    color: black;
}

Calc()​

Calculs CSS :

width: calc(100% - 50px);
height: calc(100vh - 100px);
font-size: calc(1rem + 2px);

Avantages :

  • ✅ Mélanger unités
  • ✅ Calculs dynamiques
  • ✅ Responsive

Exemple :

.sidebar {
    width: 250px;
}

.main {
    width: calc(100% - 250px);
}

Clamp()​

Limiter une valeur :

font-size: clamp(1rem, 2.5vw, 2rem);
/* Minimum: 1rem, Idéal: 2.5vw, Maximum: 2rem */

Utilisation :

  • Typographie fluide
  • Responsive automatique

Filter​

Filtres CSS :

filter: blur(5px);
filter: brightness(1.5);
filter: contrast(1.2);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(0.5);
filter: saturate(200%);
filter: sepia(100%);

Combinaisons :

filter: blur(2px) brightness(1.2) contrast(1.1);

Backdrop-filter​

Filtre sur l'arrière-plan :

.modal {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);
}

Effet glassmorphism :

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

Exercices guidés​

Exercice 1 : Variables CSS​

Créez un système de variables :

  • Couleurs principales
  • Espacements
  • Tailles de police
  • Utilisez-les partout

Exercice 2 : Pseudo-classes​

Créez des styles avec :

  • :nth-child pour zebra striping
  • :hover et :focus pour interactions
  • :invalid pour validation

Exercice 3 : Pseudo-éléments​

Créez des effets avec :

  • ::before pour icônes
  • ::after pour décorations
  • ::first-letter pour lettrine

Exercice 4 : Calc()​

Utilisez calc() pour :

  • Layouts flexibles
  • Espacements dynamiques
  • Tailles responsives

Exercice 5 : Dark mode​

Créez un thème dark avec :

  • Variables CSS
  • Media query prefers-color-scheme
  • Toggle manuel (optionnel)

❌ Erreurs fréquentes​

Erreur 1 : Oublier content pour ::before/::after​

❌ Mauvais :

.element::before {
    color: red;
    /* Pas de content = invisible */
}

✅ Bon :

.element::before {
    content: "";
    color: red;
}

Pourquoi : content est obligatoire.

Erreur 2 : Variables non définies​

❌ Mauvais :

.element {
    color: var(--couleur-inexistante);
    /* Pas de fallback */
}

✅ Bon :

.element {
    color: var(--couleur-inexistante, blue);
    /* Fallback */
}

Pourquoi : Évite les erreurs si variable manquante.

Erreur 3 : Pseudo-classes mal utilisées​

❌ Mauvais :

div:first-child {
    /* S'applique seulement si div est premier enfant */
}

✅ Bon :

div:first-of-type {
    /* Premier div */
}

Pourquoi : Comprendre la différence entre :first-child et :first-of-type.

Erreur 4 : Calc() sans espace​

❌ Mauvais :

width: calc(100%-50px); /* Erreur */

✅ Bon :

width: calc(100% - 50px); /* Espaces autour des opérateurs */

Pourquoi : Syntaxe requiert des espaces.

Erreur 5 : Trop de pseudo-éléments​

❌ Mauvais :

/* Utiliser ::before et ::after pour tout */

✅ Bon :

/* Utiliser avec parcimonie, pour la décoration */

Pourquoi : Accessibilité (screen readers ne voient pas toujours).

🚀 Mini-projet​

Mission : Créer un système de design avec CSS avancé

Créez un système complet avec :

Variables CSS :

  • Palette de couleurs
  • Espacements
  • Typographie
  • Dark mode

Pseudo-classes :

  • Interactions (hover, focus)
  • États (checked, invalid)
  • Structure (nth-child)

Pseudo-éléments :

  • Décorations subtiles
  • Icônes
  • Effets visuels

Fonctions avancées :

  • calc() pour layouts
  • clamp() pour typographie fluide
  • filter pour effets

Critères :

  • ✅ Variables CSS complètes
  • ✅ Pseudo-classes appropriées
  • ✅ Pseudo-éléments subtils
  • ✅ Dark mode fonctionnel
  • ✅ Code maintenable

Objectif : Maîtriser les fonctionnalités avancées CSS pour créer des systèmes de design modernes.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les variables CSS, pseudo-classes, pseudo-éléments et créez des systèmes de design avancés.