CSS semble simple jusqu’à ce que quelque chose ne fonctionne pas comme prévu. Tu passes des heures à regarder l’inspecteur du navigateur, tu changes une propriété, puis une autre, et le problème persiste. Cet article recueille les erreurs les plus fréquentes que j’ai rencontrées lors de la création de ce blog, avec des solutions directes.
Le fond qui disparaît au défilement#
Le problème : La page s’affiche bien dans la partie visible, mais en bas apparaît un fond blanc ou différent de celui attendu.
Pourquoi cela se produit : La couleur de fond est définie dans un conteneur interne (comme main ou article), non dans html ou body. Quand le contenu est plus court que la fenêtre, le reste de la page reste sans couleur.
La solution :
/* MAL: solo el body tiene color */
body {
background-color: #0f172a;
}
/* BIEN: también html, para cubrir toda la página */
html,
body {
background-color: #0f172a;
min-height: 100%;
}Cela garantit que le fond couvre du premier pixel au dernier, quel que soit le contenu.
Dark mode qui ne s’applique qu’à moitié#
Le problème : Tu actives le mode sombre et certains éléments changent, mais d’autres restent avec un fond clair.
Pourquoi cela se produit : Le dark mode dans des frameworks comme Tailwind ou Blowfish fonctionne en ajoutant la classe .dark à l’élément html. Si ton CSS personnalisé ne cible que body, il peut perdre la couleur dans certains cas.
/* Puede fallar en algunos navegadores */
html.dark body {
background-color: #0f172a;
}
/* Más robusto: apuntar también a html */
html.dark,
html.dark body {
background-color: #0f172a;
}Règle pratique : lorsque tu travailles avec un dark mode basé sur des classes, applique toujours la couleur de fond à la fois dans html et dans body.
background-image sans background-color#
Le problème : Tu as un motif SVG ou une image de fond, mais dans les zones où l’image ne se charge pas ou tarde, apparaît un fond blanc.
La solution : Définis toujours un background-color de secours junto avec background-image :
body {
background-color: #0f172a; /* fallback si la imagen no carga */
background-image: url("/patron.svg");
background-size: 120px 120px;
background-repeat: repeat;
}La couleur agit comme un filet de sécurité. L’utilisateur ne voit jamais un scintillement blanc pendant le chargement du SVG.
background-attachment: fixed et le problème sur mobile#
Le problème : L’effet parallaxe avec background-attachment: fixed s’affiche bien sur ordinateur mais sur mobile le fond apparaît statique, coupé ou décalé de manière étrange.
Pourquoi cela se produit : La plupart des navigateurs mobiles ignorent fixed sur les éléments autres que html/body, et certains l’implémentent avec des bugs connus sur iOS Safari.
La solution : Désactiv-le sur mobile :
body {
background-attachment: fixed;
}
@media (max-width: 768px) {
body {
background-attachment: scroll; /* o simplemente eliminar el patrón */
background-image: none;
}
}z-index et le contenu qui disparaît derrière le fond#
Le problème : Tu ajoutes un fond décoratif et soudain le texte ou les éléments interactifs disparaissent ou deviennent inaccessibles.
Pourquoi cela se produit : Le fond a un z-index plus élevé que le contenu, ou le contenu n’a pas de position défini (nécessaire pour que z-index fonctionne).
/* El fondo queda detrás */
.fondo-decorativo {
position: fixed;
z-index: 0;
}
/* El contenido queda encima */
main,
article,
.contenido {
position: relative;
z-index: 1;
}Spécificité : quand ton CSS ne surcharge pas celui du framework#
Le problème : Tu écris une règle CSS mais elle n’a pas d’effet. L’inspecteur montre qu’elle est surchargée par le framework (Tailwind, Bootstrap, etc.).
Pourquoi cela se produit : La spécificité CSS détermine quelle règle gagne. Un sélecteur de classe (.dark body) a moins de poids qu’un sélecteur composé du framework.
Solutions par ordre de préférence :
/* 1. Aumentar especificidad añadiendo el padre */
html.dark body { ... }
/* 2. Usar :is() para agrupar sin perder especificidad */
:is(html.dark) body { ... }
/* 3. !important — solo como último recurso */
body { background-color: #0f172a !important; }Évite !important autant que possible — cela crée une dette de spécificité qui s’accumule et rend le CSS impossible à maintenir.
Variables CSS : l’ordre compte#
Le problème : Tu définis des variables CSS (custom properties) mais dans certains contextes elles ne fonctionnent pas.
Pourquoi cela se produit : Les variables CSS (custom properties) ne sont accessibles que dans l’élément où elles sont définies et ses descendants. Si vous les définissez dans body, elles ne seront pas disponibles dans html.
/* BIEN: definir en :root para disponibilidad global */
:root {
--color-fondo: #0f172a;
--color-texto: #f1f5f9;
}
/* Luego úsalas en cualquier elemento */
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}Débogage rapide avec l’inspecteur#
Quand quelque chose ne fonctionne pas :
- Ouvrez DevTools (F12) et sélectionnez l’élément problématique
- Dans l’onglet Styles, recherchez les propriétés barrées — elles sont en cours de remplacement
- Filtrez par :hov pour voir les styles des états (:hover, :focus)
- Activez/désactivez le mode sombre depuis DevTools : panneau Rendering → Emulate CSS media feature prefers-color-scheme
- Utilisez l’onglet Computed pour voir la valeur finale qui s’applique réellement
La plupart de ces erreurs ont la même racine : supposer que le style se propage vers le haut dans le DOM alors qu’en réalité il ne descend que vers le bas. html et body sont le point de départ — assurez-vous qu’ils ont exactement l’apparence que vous voulez avant de vous préoccuper du reste.
Équipement recommandé#
- Raspberry Pi 3 B+ — Serveur léger à faible consommation pour démarrer votre homelab
- Raspberry Pi 4 (4GB) — La base parfaite pour homelab, Docker et surveillance
Liens d’affiliation. Aucun coût supplémentaire pour vous.