HTML5 & CSS3 : Aide-mémoire complet

Structure HTML5

Balises sémantiques principales

Structure type d’une page HTML5

    
    
    
    
    


    

        
    

    

        

            # Titre principal
            

                ## Section 1
                
Contenu...
            
        

        
    

    

    



Balises de formulaire HTML5























6 sur 10
70%

Balises multimédia








    
    
    





Balises utiles moins connues


    
Cliquez pour déplier
    
Contenu caché qui s'affiche au clic




    ## Titre du modal
    
Contenu
    Fermer

Ouvrir


HTML



    
Citation longue
    




function exemple() {
    console.log("Code formaté");
}



Terme 1
Définition 1
Terme 2
Définition 2


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
Minifier CSS en production
Utiliser will-change avec parcimonie pour animations
Éviter sélecteurs trop complexes
Utiliser transform et opacity pour animations (GPU)
Charger polices avec font-display: swap
Organisation
/ BEM (Block Element Modifier) /
.card { }                          / Block /
.cardtitle { }                   / Element /
.cardbutton { }                  / 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
Oublier box-sizing: border-box - Toujours l'inclure globalement
Z-index anarchique - Définir une échelle (10, 20, 30...)
!important - À éviter sauf cas exceptionnels
Unités absolues (px) partout - Préférer rem/em pour typographie
Animations sans préfixe - Ajouter préfixes navigateurs si support ancien
Oublier fallbacks - Toujours prévoir une alternative


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