La technique des sprites CSS a longtemps été une excellente solution pour optimiser les menus à base d’image, mais en plus de 15 ans, le Web a bien évolué. En 2026, on peut (on doit ) construire des menus horizontaux plus souples, responsives et accessibles. Dans cet article, on va voir comment recréer l’idée d’un « menu horizontal avec sprites CSS » en utilisant des techniques modernes, en gardant les mêmes objectifs qu’à l’époque : esthétique et performance.

Pourquoi les sprites CSS ne sont plus la solution par défaut

La technique des sprites consistait à regrouper tous les états graphiques (normal, survol, actif) dans une seule grande image, puis à afficher la bonne portion via background-position. Ça réduisait le nombre de requêtes HTTP nécessaires, ce qui était crucial avant l’arrivée de HTTP/2.

Aujourd’hui, cette approche a plusieurs limites pour un menu de navigation, même si elle fonctionne toujours :

• Maintenance lourde : chaque changement de pictogramme ou de texte implique de recalculer les positions.
• Mauvaise adaptation aux écrans haut densité (Retina, 4K), sauf en multipliant les versions d’images.
• Accessibilité limitée : le texte est souvent masqué au profit d’images purement décoratives.
• Utilité réduite : HTTP/2, les formats d’image modernes (WebP, SVG) rendent ce gain de requêtes moins critique.

La technique des sprites reste pertinente pour certains cas (animations, jeux en HTML5), mais pour un simple menu de navigation, des alternatives modernes font clairement mieux le job aujourd’hui.

Structure HTML moderne

La base n’a pas fondamentalement changé depuis 2009 : une liste non ordonnée reste un excellent choix pour construire une navigation. En revanche, on va profiter d’HTML5, des attributs ARIA et des bonnes pratiques en matière d’accessibilité.

<nav class="main-nav" aria-label="Navigation principale">
    <a class="main-nav__logo" href="/">
        <span class="sr-only">Retour à l'accueil</span>
        <!-- Logo SVG inline ou image -->
        <svg aria-hidden="true" viewBox="0 0 100 20">
            <!-- ... -->
        </svg>
    </a>
    
    <button class="main-nav__toggle" aria-expanded="false" aria-controls="main-menu">
        <span class="sr-only">Ouvrir le menu</span>
        <span class="main-nav__toggle-bar"></span>
        <span class="main-nav__toggle-bar"></span>
        <span class="main-nav__toggle-bar"></span>
    </button>

    <ul id="main-menu" class="main-nav__list">
        <li class="main-nav__item">
            <a class="main-nav__link is-active" href="/" aria-current="page">Home</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link" href="/services">Services</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link" href="/references">Références</a>
        </li>
        <li class="main-nav__item">
            <a class="main-nav__link" href="/contact">Contact</a>
        </li>
    </ul>
</nav>

Quelques points importants :

• Utilisation de <nav> et aria-label pour expliciter le rôle de la zone.
• Un bouton de type « hamburger » pour le mobile, relié à la liste via aria-controls.
• Une classe is-active pour gérer l’onglet actif côté CSS.

Mise en page avec Flexbox (bye-bye float !)

Là où mon article d’origine utilisait float: left sur les <li>, on peut aujourd’hui aligner le menu avec Flexbox. Plus simple et plus… flexible ! (ouais, je suis un marrant ).

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(90deg, #1f2933, #111827);
    color: #ffffff;
}

.main-nav__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.main-nav__list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
    font-weight: 500;
    color: #e5e7eb;
    text-decoration: none;
    transition: color 200ms ease-out;
}

Ici, la liste devient une simple rangée flex, ce qui rend l’ajout ou la suppression d’éléments beaucoup plus naturel que la gestion de coordonnées de sprites. On peut aussi, si besoin, passer sur CSS Grid pour gérer un en-tête plus complexe.

Effets de survol modernes

Au lieu de gérer les états normal/hover/actif via une image sprite, on peut recréer des effets visuels sophistiqués en pur CSS : soulignement animé, fond dégradé, « pill » qui se déplace, etc.

Exemple : soulignement animé avec un pseudo-élément

.main-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #ec4899);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
}

.main-nav__link:hover::after,
.main-nav__link:focus-visible::after,
.main-nav__link.is-active::after {
    transform: scaleX(1);
}

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__link.is-active {
    color: #fff;
}

Avec cette approche, on reproduit l’idée d’un état survolé distinct, sans aucune image et avec un rendu parfaitement net sur tous les écrans. On améliore aussi l’accessibilité en stylant :focus-visible pour la navigation au clavier.

Icônes : du sprite bitmap au SVG

Autre gros virage : la façon d’intégrer des icônes. Là où l’on utilisait auparavant une sprite PNG, on privilégie maintenant :

• une « Icon Font » (de moins en moins recommandée),
• des SVG inline (avec <svg> dans le HTML),
• ou une sprite SVG via <symbol> et <use>

Exemple avec une sprite SVG

<svg aria-hidden="true" style="display:none">
    <symbol id="icon-home" viewBox="0 0 24 24">
        <!-- … -->
    </symbol>
    <symbol id="icon-services" viewBox="0 0 24 24">
        <!-- … -->
    </symbol>
</svg>

<nav class="main-nav" aria-label="Navigation principale">
    <ul class="main-nav__list">
        <li class="main-nav__item">
            <a class="main-nav__link is-active" href="#home">
                <svg class="main-nav__icon" aria-hidden="true">
                    <use href="#icon-home"></use>
                </svg>
                <span>Home</span>
            </a>
        </li>
        <!-- … -->
    </ul>
</nav>

.main-nav__icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.4rem;
    flex-shrink: 0;
}

Les avantages sont nombreux : un rendu vectoriel, une couleur facilement personnalisable en CSS (via fill et optionnellement currentColor), et plus aucune gymnastique de background-position !

Rendre le menu responsive

Un menu horizontal moderne doit s’adapter à toutes les tailles de fenêtre. On peut combiner CSS à un petit peu de JavaScript pour gérer l’ouverture et la fermeture du menu sur mobile.

CSS : basculer en mode « hamburger » sur mobile

.main-nav__toggle {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem;
}

.main-nav__toggle-bar {
    display: block;
    width: 1.5rem;
    height: 2px;
    margin: 0.2rem 0;
    border-radius: 999px;
    background-color: #e5e7eb;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Mobile */
@media (max-width: 768px) {
    .main-nav {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
    }

    .main-nav__toggle {
        display: flex;
        flex-direction: column;
        margin-left: auto;
    }

    .main-nav__list {
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease-out;
    }

    .main-nav__list.is-open {
        max-height: unset;
        overflow: initial;
    }
}

JavaScript : gestion de l’état « ouvert »

const navToggle = document.querySelector('.main-nav__toggle');
const navList = document.querySelector('#main-menu');

if (navToggle && navList) {
    navToggle.addEventListener('click', () => {
        const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
        navToggle.setAttribute('aria-expanded', String(!isOpen));
        navList.classList.toggle('is-open', !isOpen);
    });
}

Ce petit script suffit amplement pour un menu responsive classique, tout en respectant les attributs ARIA pour les lecteurs d’écran. Des implémentations plus avancées peuvent gérer le focus, l’échappement au clavier ou les sous-menus (dropdown, mega menu, etc.)

Accessibilité et UX, à ne surtout plus ignorer

Si mon article d’origine se concentrait surtout sur la technique des sprites et l’optimisation des requêtes HTTP, un menu moderne doit aussi intégrer de vraies bonnes pratiques d’accessibilité (et on aurait dû s’en rendre compte déjà à l’époque des mises en page en <table> ).

Quelques points clés :

• Utiliser des textes visibles plutôt que de les masquer derrière une image.
• Prévoir des styles de :focus-visible suffisamment contrastés pour la navigation clavier.
• S’assurer que le contraste texte/fond est suffisant pour une lecture confortable.
• Gérer l’état actif (aria-current="page") pour que l’utilisateur sache où il se trouve.

17 ans de progrès en un menu

En 2009, les sprites CSS étaient une astuce magique pour booster les performances d’un menu horizontal un peu « design ». Aujourd’hui, grâce à Flexbox, SVG, des CSS modernes et un peu de JavaScript (bye jQuery ! ), on obtient un résultat plus performant, plus accessible et infiniment plus maintenable.

See the Pen Untitled by Ange Chierchia (@nighcrawl) on CodePen.

C’est toujours le même problème : t’as besoin de positionner un élément par rapport à un autre… mais ils sont pas dans la même boîte. Résultat : t’injectes du JS, tu bidouilles le DOM, tu fais des hacks moches avec position: absolute.

Et là, paf. Anchor Positioning débarque avec une promesse sexy : tu peux cibler un autre élément comme ancre de positionnement — même s’il est plus haut dans le DOM. anchor() fait le job. position-try() ajoute même une logique de fallback. Et cerise sur le gâteau : pas besoin que ce soit le parent direct.

C’est encore un draft. Mais franchement, vu le nombre de fois où j’ai dû recoder des tooltips, popups ou menus qui s’ouvrent “vers la bonne direction”… j’ai envie d’y croire.

Et c’est typiquement le genre de feature CSS que t’aurais rêvé d’avoir avant : puissante, propre, explicite.

Ça m’a fait sourire. On a tous eu notre période Sass : mixins partout, variables, nesting à outrance. C’était grisant, ça donnait l’impression d’être plus « pro ». Mais le temps passe, le CSS a grandi, et beaucoup de ces artifices ne servent plus à grand-chose.

L’article raconte ce cheminement : désapprendre Sass pour réapprendre le CSS brut. Pas comme une régression, mais comme un gain de clarté. Quand tu enlèves la couche intermédiaire, tu te rends compte que ton code respire mieux, que le navigateur fait déjà pas mal de choses tout seul.

Ça m’a fait réfléchir à ma propre boîte à outils. On accumule, on optimise, on complexifie… et puis un jour on redécouvre que la simplicité, c’est aussi une forme de puissance. Peut-être qu’au fond, le vrai luxe en dev, c’est d’avoir moins à maintenir.

Un rappel utile : parfois, coder mieux, c’est surtout coder moins.

Le “Relative Color Syntax” change la façon dont on pense nos palettes : on ne stocke plus des variantes figées, on décrit des relations. En clair : une seule source (–brand) et des dérivés cohérents pour hover, focus, borders, badges… avec color(from …). Tu ajustes luminosité, saturation, alpha ou canal par canal sans bricoler des HSL magiques ni multiplier les tokens.

Ce que j’aime dans l’article : il reste ancré dans le réel. Des exemples lisibles, des patterns qu’on rencontre tous les jours (états de boutons, overlays, dégradés, dark mode) et surtout une logique de design system : la couleur devient une fonction, pas une valeur. Tu peux faire évoluer ta teinte de base sans réécrire la moitié du CSS. Et les deltas (légèrement plus sombre, un peu plus saturé) gardent la cohérence de marque.

Pragmatiquement, je vois trois gains : 1) moins de variables à maintenir, 2) des thèmes plus fiables, 3) une accessibilité plus maîtrisée (contrastes ajustables sans casser l’identité). Mon conseil : commence petit. Définis 1–2 couleurs sources, dérive –brand-hover, –brand-outline, –surface-elevated avec color(from …), et observe la simplification. Une base solide, des variantes “calculées”, et un design qui respire.

Les design tokens, c’est la promesse d’une cohérence. Mais dans la pratique, on se retrouve souvent avec un fichier SCSS, un fichier JS, un fichier Figma… et des incohérences qui s’accumulent. L’idée proposée ici est toute bête mais super efficace : un seul fichier JavaScript, qui définit tes tokens (couleurs, tailles, etc.), et qui crache directement des variables CSS prêtes à l’emploi. Plus besoin de jongler, tout le monde boit à la même source.

Ce que j’aime, c’est la simplicité. Pas besoin de grosse usine à gaz ni de tooling lourd façon “style dictionary”. Tu écris tes valeurs une fois, tu génères les :root { –variable: valeur }, et basta. Côté dev, tu consommes les tokens en JS et en CSS sans jamais les dédoubler.

Ça ne remplacera pas une infra complète pour une grosse équipe produit, mais pour un projet à taille humaine, c’est pile le bon compromis : un point de vérité unique, une synchro JS/CSS sans douleur, et une dette technique évitée dès le départ. Bref, ça mérite d’être testé sur ton prochain side project.

Franchement, j’avais enterré le parallax avec les carrousels autoplay et les splash pages en Flash. Mais là, j’ai été surpris.

Avec les scroll-driven animations, le truc retrouve une seconde vie : fluide, natif, et surtout sans les usines à gaz JS d’avant.

L’article de CSS-Tricks décortique la méthode avec pédagogie en mode : t’as une timeline liée au scroll, tu cales tes keyframes dessus, et roule ma poule.

Ce que j’ai aimé, c’est qu’on n’est plus dans le « waouh » pour faire waouh.

C’est clean, subtil, et ça s’intègre bien dans un design qui respecte l’utilisateur.

Tu peux même jouer avec la perspective ou l’échelle d’un élément selon sa progression dans la page, sans flinguer les perfs.

Bref, si t’avais lâché l’affaire avec le parallax, c’est le bon moment pour t’y remettre.

Je suis longtemps passé à côté du Shadow DOM. Trop abstrait, trop “spec moderne” pour mes besoins du quotidien.

Mais cet article m’a recadré.

Il explique comment le Shadow DOM te permet d’encapsuler un composant comme un vrai bloc isolé : pas de fuite de styles, pas de conflits de noms, pas de comportements JS qui partent en sucette.

Et ça, dans une époque où chaque lib veut imposer sa logique, ça fait du bien de voir un truc standard qui tient la route.

On n’est pas obligés de tout reconstruire avec Web Components demain matin, mais piger comment le Shadow DOM fonctionne, c’est clairement un level-up pour écrire du code plus robuste — et plus pérenne