HTML5 & CSS3 : Aide-mémoire complet

Structure HTML5

Balises sémantiques principales

Structure type d’une page HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Description pour SEO (150-160 caractères)">
    <title>Titre de la page (50-60 caractères)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#services">Services</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Titre principal</h1>
            <section>
                <h2>Section 1</h2>
                <p>Contenu...</p>
            </section>
        </article>

        <aside>
            <h3>À propos</h3>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 Votre site</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

Balises de formulaire HTML5

<!-- Types d'input HTML5 -->
<input type="text" placeholder="Texte" required>
<input type="email" placeholder="email@example.com">
<input type="tel" pattern="[0-9]{10}">
<input type="url" placeholder="https://">
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">
<input type="date" min="2024-01-01">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="color">
<input type="search" placeholder="Rechercher...">
<input type="file" accept="image/*" multiple>

<!-- Attributs de validation -->
<input type="text"
       required
       minlength="3"
       maxlength="20"
       pattern="[A-Za-z]+"
       autocomplete="name">

<!-- Nouveaux éléments de formulaire -->
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>
<input list="browsers">

<meter value="6" min="0" max="10">6 sur 10</meter>
<progress value="70" max="100">70%</progress>

Balises multimédia

<!-- Vidéo -->
<video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
    Votre navigateur ne supporte pas la vidéo.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas l'audio.
</audio>

<!-- Image responsive -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description" loading="lazy">
</picture>

<!-- SVG inline -->
<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#3498db" />
</svg>

Balises utiles moins connues

<!-- Accordéon natif -->
<details>
    <summary>Cliquez pour déplier</summary>
    <p>Contenu caché qui s'affiche au clic</p>
</details>

<!-- Dialogue/Modal -->
<dialog id="monModal">
    <h2>Titre du modal</h2>
    <p>Contenu</p>
    <button onclick="this.closest('dialog').close()">Fermer</button>
</dialog>
<button onclick="document.getElementById('monModal').showModal()">Ouvrir</button>

<!-- Abréviations -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- Citations -->
<blockquote cite="https://source.com">
    <p>Citation longue</p>
    <footer>- <cite>Auteur</cite></footer>
</blockquote>

<!-- Code -->
<pre><code class="language-javascript">
function exemple() {
    console.log("Code formaté");
}
</code></pre>

<!-- Données -->
<dl>
    <dt>Terme 1</dt>
    <dd>Définition 1</dd>
    <dt>Terme 2</dt>
    <dd>Définition 2</dd>
</dl>

CSS3 : Propriétés essentielles

Sélecteurs CSS3

/* Sélecteurs de base */
* { }                           /* Tous les éléments */
div { }                         /* Par balise */
.classe { }                     /* Par classe */
#id { }                         /* Par ID */
div, p { }                      /* Groupement */
div p { }                       /* Descendant */
div > p { }                     /* Enfant direct */
div + p { }                     /* Frère adjacent */
div ~ p { }                     /* Tous les frères */

/* Sélecteurs d'attributs */
[attr] { }                      /* Attribut existe */
[attr="value"] { }              /* Attribut égal */
[attr~="value"] { }             /* Contient le mot */
[attr|="value"] { }             /* Commence par */
[attr^="value"] { }             /* Préfixe */
[attr$="value"] { }             /* Suffixe */
[attr*="value"] { }             /* Contient */

/* Pseudo-classes */
:hover { }                      /* Survol */
:focus { }                      /* Focus */
:active { }                     /* Actif */
:visited { }                    /* Visité */
:first-child { }                /* Premier enfant */
:last-child { }                 /* Dernier enfant */
:nth-child(2) { }               /* N-ième enfant */
:nth-child(odd) { }             /* Impairs */
:nth-child(even) { }            /* Pairs */
:nth-child(3n+1) { }            /* Tous les 3, décalé de 1 */
:nth-of-type(2) { }             /* N-ième du type */
:not(.classe) { }               /* Négation */
:empty { }                      /* Vide */
:checked { }                    /* Case cochée */
:disabled { }                   /* Désactivé */
:enabled { }                    /* Activé */
:required { }                   /* Requis */
:valid { }                      /* Valide */
:invalid { }                    /* Invalide */

/* Pseudo-éléments */
::before { content: ""; }       /* Avant le contenu */
::after { content: ""; }        /* Après le contenu */
::first-letter { }              /* Première lettre */
::first-line { }                /* Première ligne */
::selection { }                 /* Sélection texte */
::placeholder { }               /* Placeholder */

Box Model & Positionnement

/* Box Model */
.element {
    /* Taille */
    width: 300px;
    height: 200px;
    min-width: 200px;
    max-width: 500px;
    min-height: 100px;
    max-height: 400px;

    /* Box-sizing */
    box-sizing: border-box;     /* Inclut padding et border dans width/height */

    /* Espacement */
    margin: 20px;               /* Tous les côtés */
    margin: 10px 20px;          /* Vertical | Horizontal */
    margin: 10px 20px 30px;     /* Haut | H | Bas */
    margin: 10px 20px 30px 40px; /* Haut | Droite | Bas | Gauche */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    margin: 0 auto;             /* Centrer horizontalement */

    padding: 20px;              /* Même syntaxe que margin */

    /* Bordures */
    border: 2px solid #333;
    border-width: 2px;
    border-style: solid;        /* solid, dashed, dotted, double, none */
    border-color: #333;
    border-radius: 10px;
    border-radius: 10px 20px 30px 40px;
    border-top-left-radius: 10px;

    /* Ombres */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Interne */
    box-shadow: 0 0 10px #333, 0 0 20px #666;   /* Multiple */
}

/* Position */
.position {
    position: static;           /* Par défaut */
    position: relative;         /* Relatif à position normale */
    position: absolute;         /* Relatif au parent positionné */
    position: fixed;            /* Relatif au viewport */
    position: sticky;           /* Sticky au scroll */

    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;

    z-index: 100;               /* Ordre d'empilement */
}

/* Display */
.display {
    display: block;
    display: inline;
    display: inline-block;
    display: none;              /* Caché */
    visibility: hidden;         /* Invisible mais prend place */
    opacity: 0.5;               /* Transparence 0-1 */
}

/* Débordement */
.overflow {
    overflow: visible;          /* Par défaut */
    overflow: hidden;           /* Masque le débordement */
    overflow: scroll;           /* Toujours des scrollbars */
    overflow: auto;             /* Scrollbars si nécessaire */
    overflow-x: hidden;
    overflow-y: auto;

    text-overflow: ellipsis;    /* ... pour texte tronqué */
    white-space: nowrap;        /* Pas de retour à la ligne */
}

Flexbox

/* Container Flex */
.flex-container {
    display: flex;
    display: inline-flex;

    /* Direction */
    flex-direction: row;            /* Par défaut, horizontal */
    flex-direction: row-reverse;    /* Inverse */
    flex-direction: column;         /* Vertical */
    flex-direction: column-reverse;

    /* Retour à la ligne */
    flex-wrap: nowrap;              /* Par défaut, une ligne */
    flex-wrap: wrap;                /* Retour à la ligne */
    flex-wrap: wrap-reverse;

    /* Raccourci direction + wrap */
    flex-flow: row wrap;

    /* Alignement horizontal (axe principal) */
    justify-content: flex-start;    /* Par défaut, début */
    justify-content: flex-end;      /* Fin */
    justify-content: center;        /* Centré */
    justify-content: space-between; /* Espacement entre */
    justify-content: space-around;  /* Espacement autour */
    justify-content: space-evenly;  /* Espacement égal */

    /* Alignement vertical (axe secondaire) */
    align-items: stretch;           /* Par défaut, étire */
    align-items: flex-start;        /* Haut */
    align-items: flex-end;          /* Bas */
    align-items: center;            /* Centré */
    align-items: baseline;          /* Ligne de base texte */

    /* Alignement des lignes (si wrap) */
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;

    /* Gap entre items */
    gap: 20px;
    row-gap: 20px;
    column-gap: 10px;
}

/* Items Flex */
.flex-item {
    /* Ordre */
    order: 0;                       /* Par défaut, 0 */

    /* Croissance */
    flex-grow: 0;                   /* Par défaut, ne grandit pas */
    flex-grow: 1;                   /* Grandit pour remplir */

    /* Réduction */
    flex-shrink: 1;                 /* Par défaut, peut rétrécir */
    flex-shrink: 0;                 /* Ne rétrécit pas */

    /* Taille de base */
    flex-basis: auto;               /* Par défaut */
    flex-basis: 200px;              /* Taille de base */
    flex-basis: 50%;

    /* Raccourci grow shrink basis */
    flex: 0 1 auto;                 /* Par défaut */
    flex: 1;                        /* flex: 1 1 0 */
    flex: 1 0 200px;

    /* Alignement individuel */
    align-self: auto;
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

/* Exemple pratique : Layout 3 colonnes */
.layout-flex {
    display: flex;
    gap: 20px;
}
.sidebar {
    flex: 0 0 250px;               /* Largeur fixe 250px */
}
.main-content {
    flex: 1;                       /* Prend l'espace restant */
}
.aside {
    flex: 0 0 200px;               /* Largeur fixe 200px */
}

/* Centrer parfaitement */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

CSS Grid

/* Container Grid */
.grid-container {
    display: grid;
    display: inline-grid;

    /* Définir colonnes */
    grid-template-columns: 200px 200px 200px;           /* 3 colonnes fixes */
    grid-template-columns: 1fr 2fr 1fr;                 /* Proportionnelles */
    grid-template-columns: repeat(3, 1fr);              /* 3 colonnes égales */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
    grid-template-columns: 200px auto 200px;

    /* Définir lignes */
    grid-template-rows: 100px 200px 100px;
    grid-template-rows: repeat(3, 100px);
    grid-template-rows: auto 1fr auto;                  /* Header, content, footer */

    /* Zones nommées */
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";

    /* Gap (espacement) */
    gap: 20px;                      /* Lignes et colonnes */
    row-gap: 20px;
    column-gap: 10px;

    /* Alignement du contenu (dans les cellules) */
    justify-items: start;           /* Horizontal */
    justify-items: end;
    justify-items: center;
    justify-items: stretch;         /* Par défaut */

    align-items: start;             /* Vertical */
    align-items: end;
    align-items: center;
    align-items: stretch;

    /* Alignement de la grille (dans le container) */
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;

    align-content: start;
    align-content: end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: space-evenly;

    /* Taille automatique */
    grid-auto-rows: 100px;          /* Hauteur lignes implicites */
    grid-auto-columns: 200px;       /* Largeur colonnes implicites */
    grid-auto-flow: row;            /* Direction auto (row/column/dense) */
}

/* Items Grid */
.grid-item {
    /* Position par ligne/colonne */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column: 1 / 3;             /* Raccourci */
    grid-column: 1 / span 2;        /* Occupe 2 colonnes */
    grid-column: 1 / -1;            /* Jusqu'à la fin */

    grid-row-start: 1;
    grid-row-end: 3;
    grid-row: 1 / 3;
    grid-row: 1 / span 2;

    /* Zone nommée */
    grid-area: header;

    /* Alignement individuel */
    justify-self: start;
    justify-self: end;
    justify-self: center;
    justify-self: stretch;

    align-self: start;
    align-self: end;
    align-self: center;
    align-self: stretch;
}

/* Exemple : Layout complet */
.page-grid {
    display: grid;
    grid-template-columns: 250px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 20px;
    min-height: 100vh;
}
.page-header { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main { grid-area: main; }
.page-aside { grid-area: aside; }
.page-footer { grid-area: footer; }

/* Exemple : Galerie responsive */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

Typographie

.typography {
    /* Police */
    font-family: Arial, Helvetica, sans-serif;
    font-family: 'Open Sans', sans-serif;

    /* Taille */
    font-size: 16px;
    font-size: 1rem;                /* Relatif à html */
    font-size: 1.2em;               /* Relatif au parent */
    font-size: clamp(14px, 2vw, 24px); /* Responsive fluide */

    /* Poids */
    font-weight: normal;            /* 400 */
    font-weight: bold;              /* 700 */
    font-weight: 100;               /* Thin */
    font-weight: 300;               /* Light */
    font-weight: 500;               /* Medium */
    font-weight: 600;               /* Semi-bold */
    font-weight: 900;               /* Black */

    /* Style */
    font-style: normal;
    font-style: italic;
    font-style: oblique;

    /* Hauteur de ligne */
    line-height: 1.5;               /* Recommandé pour lisibilité */
    line-height: 24px;

    /* Alignement */
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;

    /* Transformation */
    text-transform: none;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;

    /* Décoration */
    text-decoration: none;
    text-decoration: underline;
    text-decoration: line-through;
    text-decoration: overline;
    text-decoration: underline wavy red;

    /* Espacement */
    letter-spacing: 0.05em;         /* Entre les lettres */
    word-spacing: 0.2em;            /* Entre les mots */
    text-indent: 30px;              /* Indentation première ligne */

    /* Ombre texte */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 0 10px #fff, 0 0 20px #fff; /* Glow */

    /* Couleur */
    color: #333;
    color: rgb(51, 51, 51);
    color: rgba(51, 51, 51, 0.8);
    color: hsl(0, 0%, 20%);
    color: hsla(0, 0%, 20%, 0.8);

    /* Ellipsis (texte tronqué) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Limiter lignes avec ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* @font-face personnalisée */
@font-face {
    font-family: 'MaPolice';
    src: url('fonts/mapolice.woff2') format('woff2'),
         url('fonts/mapolice.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;             /* Améliore performance */
}

Couleurs & Arrière-plans

.colors-backgrounds {
    /* Couleurs */
    color: #3498db;
    color: rgb(52, 152, 219);
    color: rgba(52, 152, 219, 0.8);
    color: hsl(204, 70%, 53%);
    color: hsla(204, 70%, 53%, 0.8);

    /* Arrière-plan */
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-repeat: no-repeat;   /* repeat, repeat-x, repeat-y */
    background-position: center;
    background-position: top left;
    background-position: 50% 50%;
    background-size: cover;         /* Couvre tout */
    background-size: contain;       /* Contient entièrement */
    background-size: 100% auto;
    background-attachment: fixed;   /* Parallax */

    /* Raccourci */
    background: #f0f0f0 url('img.jpg') no-repeat center/cover;

    /* Dégradés linéaires */
    background: linear-gradient(to right, #3498db, #e74c3c);
    background: linear-gradient(45deg, #3498db, #e74c3c);
    background: linear-gradient(to bottom, #3498db 0%, #e74c3c 100%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Dégradés radiaux */
    background: radial-gradient(circle, #3498db, #e74c3c);
    background: radial-gradient(ellipse at center, #3498db 0%, #e74c3c 100%);

    /* Dégradés coniques */
    background: conic-gradient(from 0deg, red, yellow, green, blue, red);

    /* Multiples arrière-plans */
    background:
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
        url('image.jpg') center/cover;

    /* Clip du background */
    background-clip: border-box;    /* Par défaut */
    background-clip: padding-box;
    background-clip: content-box;
    background-clip: text;          /* Texte avec dégradé */
    -webkit-background-clip: text;
    color: transparent;             /* Pour background-clip: text */
}

Transitions & Animations

/* Transitions */
.transition {
    transition: all 0.3s ease;
    transition-property: background-color, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;        /* ease, linear, ease-in, ease-out, ease-in-out */
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition-delay: 0.1s;

    /* Raccourci : property duration timing-function delay */
    transition: transform 0.3s ease-in-out 0.1s, opacity 0.3s ease;
}

.transition:hover {
    background-color: #3498db;
    transform: scale(1.1);
}

/* Animations */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animated {
    animation: slideIn 0.5s ease-out;
    animation-name: slideIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-delay: 0s;
    animation-iteration-count: 1;           /* infinite */
    animation-direction: normal;            /* reverse, alternate, alternate-reverse */
    animation-fill-mode: forwards;          /* backwards, both */
    animation-play-state: running;          /* paused */

    /* Raccourci : name duration timing-function delay iteration-count direction fill-mode */
    animation: slideIn 0.5s ease-out 0s 1 normal forwards;
}

/* Transform */
.transform {
    /* 2D */
    transform: translate(50px, 100px);
    transform: translateX(50px);
    transform: translateY(100px);
    transform: scale(1.5);
    transform: scaleX(1.5);
    transform: scaleY(0.5);
    transform: rotate(45deg);
    transform: skew(10deg, 20deg);
    transform: skewX(10deg);
    transform: skewY(20deg);

    /* 3D */
    transform: perspective(1000px) rotateY(45deg);
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    transform: translateZ(50px);
    transform: translate3d(50px, 100px, 75px);
    transform: scale3d(1, 1.5, 1);

    /* Multiple */
    transform: translateX(50px) rotate(45deg) scale(1.2);

    /* Origine */
    transform-origin: center;               /* Par défaut */
    transform-origin: top left;
    transform-origin: 50% 50%;
    transform-origin: 20px 40px;

    /* Style 3D */
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
}

Media Queries (Responsive)

/* Mobile First (recommandé) */
/* Styles de base pour mobile */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablette */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

/* Large Desktop */
@media (min-width: 1280px) {
    .container {
        width: 1200px;
    }
}

/* Desktop First */
@media (max-width: 1023px) {
    /* Tablette */
}

@media (max-width: 767px) {
    /* Mobile */
}

/* Orientation */
@media (orientation: portrait) {
    /* Portrait */
}

@media (orientation: landscape) {
    /* Paysage */
}

/* Ratio d'aspect */
@media (aspect-ratio: 16/9) {
    /* Ratio 16:9 */
}

/* Résolution */
@media (min-resolution: 2dppx) {
    /* Écrans Retina */
}

/* Préférences utilisateur */
@media (prefers-color-scheme: dark) {
    /* Mode sombre */
    body {
        background: #1a1a1a;
        color: #f0f0f0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Réduire animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Seulement tablette */
}

@media (min-width: 768px) and (orientation: landscape) {
    /* Tablette en paysage */
}

Variables CSS (Custom Properties)

/* Définition des variables */
:root {
    /* Couleurs */
    --primary-color: #3498db;
    --secondary-color: #e74c3c;
    --text-color: #333;
    --bg-color: #f0f0f0;

    /* Espacements */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;

    /* Typographie */
    --font-primary: 'Open Sans', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;

    /* Ombres */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

    /* Transitions */
    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* Breakpoints */
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
}

/* Utilisation */
.button {
    background-color: var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-primary);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.button:hover {
    background-color: var(--secondary-color);
}

/* Valeur par défaut (fallback) */
.element {
    color: var(--undefined-color, #333);
}

/* Variables locales */
.card {
    --card-padding: 20px;
    padding: var(--card-padding);
}

/* Mode sombre avec variables */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #f0f0f0;
        --bg-color: #1a1a1a;
        --primary-color: #5dade2;
    }
}

Propriétés modernes utiles

/* Filter */
.filter {
    filter: blur(5px);
    filter: brightness(1.2);
    filter: contrast(1.5);
    filter: grayscale(100%);
    filter: hue-rotate(90deg);
    filter: invert(100%);
    filter: opacity(50%);
    filter: saturate(200%);
    filter: sepia(100%);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));

    /* Multiple */
    filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

/* Backdrop Filter (arrière-plan flou) */
.glassmorphism {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Clip Path */
.clip {
    clip-path: circle(50%);
    clip-path: ellipse(50% 60%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: inset(10px 20px 30px 40px);
}

/* Object Fit (images) */
.image {
    width: 300px;
    height: 200px;
    object-fit: cover;              /* Couvre en rognant */
    object-fit: contain;            /* Contient entièrement */
    object-fit: fill;               /* Étire */
    object-fit: none;               /* Taille originale */
    object-fit: scale-down;
    object-position: center;
    object-position: top right;
}

/* Aspect Ratio */
.video-container {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.square {
    aspect-ratio: 1;
}

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Scroll Snap */
.scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.scroll-item {
    scroll-snap-align: start;
    height: 100vh;
}

/* User Select */
.no-select {
    user-select: none;
}

/* Pointer Events */
.disabled {
    pointer-events: none;
}

/* Mix Blend Mode */
.blend {
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: difference;
}

/* Writing Mode */
.vertical-text {
    writing-mode: vertical-rl;
    writing-mode: vertical-lr;
}

Bonnes pratiques

Performance

1. Minifier CSS en production
2. Utiliser will-change avec parcimonie pour animations
3. Éviter sélecteurs trop complexes
4. Utiliser transform et opacity pour animations (GPU)
5. Charger polices avec font-display: swap

Organisation

/* BEM (Block Element Modifier) */
.card { }                          /* Block */
.card__title { }                   /* Element */
.card__button { }                  /* Element */
.card--featured { }                /* Modifier */
.card__button--primary { }         /* Element + Modifier */

/* Structure recommandée */
/* 1. Variables */
/* 2. Reset/Normalize */
/* 3. Base (html, body) */
/* 4. Layout */
/* 5. Composants */
/* 6. Utilitaires */
/* 7. Media queries */

Accessibilité

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Masquer visuellement mais accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contraste suffisant */
/* Ratio min 4.5:1 pour texte normal */
/* Ratio min 3:1 pour texte large (18px+ ou 14px+ gras) */

/* Éviter animations pour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

Pièges courants

1. Oublier box-sizing: border-box – Toujours l’inclure globalement
2. Z-index anarchique – Définir une échelle (10, 20, 30…)
3. !important – À éviter sauf cas exceptionnels
4. Unités absolues (px) partout – Préférer rem/em pour typographie
5. Animations sans préfixe – Ajouter préfixes navigateurs si support ancien
6. Oublier fallbacks – Toujours prévoir une alternative

Version: 2024 | Compatibilité: Navigateurs modernes (2+ dernières versions)