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.

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.

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

Cette semaine je travaillais sur un projet dans lequel une page affiche une liste de documents que l’on peut filtrer à l’aide de checkboxes. Dans cet article je vais vous exposer un cas d’usage que j’ai rencontré et comment je l’ai solutionné.

La fonctionnalité que j’avais a créer était un genre d’arborescence de checkboxes. En d’autres termes, l’un des filtres présentait une liste d’options avec des sous-options, chacune pouvant être cochée ou non. Si une option « mère » est cochée, toutes les sous options qui lui appartiennent doivent être cochées automatiquement. À l’inverse, si on ne coche pas toutes les options « filles », l’état de l’option « mère » doit être indéfini.

Voici le résultat final est visible sur Codepen.

Structure HTML

La structure HTML que j’ai utilisé est plutôt basique, ce sont simplement des <input type="checkbox"> regroupez dans une <div class="children"></div> pour les checkboxes « filles ». L’attribut id de la checkbox « mère » va nous permettre de la cibler plus facilement en JavaScript.

<div class="options">
  <div class="input input--checkbox">
    <input type="checkbox" name="parent" id="checkAll">
    <label for="checkAll">Tout sélectionner</label>
  </div>
  <div class="children">
    <div class="input input--checkbox">
      <input type="checkbox" name="child[]" id="child1">
      <label for="child1">Option 1</label>
    </div>

    <div class="input input--checkbox">
      <input type="checkbox" name="child[]" id="child2">
      <label for="child2">Option 2</label>
    </div>

    <div class="input input--checkbox">
      <input type="checkbox" name="child[]" id="child3">
      <label for="child3">Option 3</label>
    </div>
  </div>
</div>

Passons maintenant au JavaScript.

Ajouter un écouteur d’évènement sur les checkboxes

Nous allons d’abord créer un écouteur pour le clic sur les checkboxes. Pour plus de simplicité, notre écouteur exécutera une fonction que l’on nomme changeOptionsHandler() et dans laquelle on traitera les changement d’état de chaque checkbox. Voici comment ajouter l’’écouteur sur nos checkboxes:

document.querySelectorAll('[type="checkbox"]').forEach((input) => {
  input.addEventListener("click", (event) => {
    changeOptionsHandler(event.target);
  });
});

D’abord on cible tous les checkboxes avec document.querySelectorAll('[type="checkbox"]') puis on attache l’écouteur d’évènement click sur chacune d’elle.

forEach((input) => {
  input.addEventListener("click", (event) => {
    // …
  })
}

Passons maintenant à la fonction changeOptionsHandler().

Gérer les changement d’état des checkboxes

D’abord on gérer le clic sur la checkbox dont l’id est « checkAll », puis dans une fonction différente on gèrera le clic sur les checkboxes « filles » et leur conséquences sur la checkbox « mère »

if (input.id === "checkAll") {
  if (input.checked === true) {
    input
      .closest(".options")
      .querySelectorAll('[type="checkbox"][name="child[]"]')
      .forEach((child) => {
        child.checked = true;
      });
  } else {
    input
      .closest(".options")
      .querySelectorAll('[type="checkbox"][name="child[]"]')
      .forEach((child) => {
        child.checked = false;
      });
  }

Si la checkbox est cochée, alors on récupères toutes les checkboxes contenues dans la <div></div> dont l’attribut class contient « options », puis pour chaque on modifie l’attributcheckedavec la même valeur (true).

if (input.checked === true) {
  input
    .closest(".options")
    .querySelectorAll('[type="checkbox"][name="child[]"]')
    .forEach((child) => {
      child.checked = true;
    });
}

Puis on fait la même chose si la checkbox est décochée. Ici ‘false’.

Maintenant on va s’intéresser aux différents états que pourra avoir la checkbox « mère » lors d’un clic sur l’une de ses « filles ».

Gérer les états de la checkbox « mère »

La checkbox « mère » pourra avoir trois états :

• coché
• décoché
• indéterminé

Pour déterminer sont état, il faudra que l’on compte le nombre d’options disponibles et le nombre de « filles » cochées. Si le total d’options est égal au nombre d’options cochées, alors l’état de la checkbox « mère » est « coché ». Si le nombre d’options décochées est égal au total d’options, alors celle-ci sera « décochée ». Dans tout les autres cas, la checkbox « mère » sera dans un état « indéterminé ».

Voilà comment cela se traduit en code :

let checkAllState = (input) => {
  let countOptions = input
    .closest(".options")
    .querySelectorAll('[type="checkbox"][name="child[]"]').length;
  let checkedOptions = input
    .closest(".options")
    .querySelectorAll('[type="checkbox"][name="child[]"]:checked').length;
  let checkAll = input.closest(".options").querySelector("#checkAll");

  if (countOptions !== checkedOptions) {
    if (checkedOptions == 0) {
      checkAll.indeterminate = false;
      checkAll.checked = false;
    } else {
      checkAll.indeterminate = true;
      checkAll.checked = false;
    }
  } else {
    checkAll.indeterminate = false;
    checkAll.checked = true;
  }
};

Et voilà ! Je vous met ici le code JavaScript complet.

let changeOptionsHandler = (input) => {
  if (input.id === "checkAll") {
    if (input.checked === true) {
      input
        .closest(".options")
        .querySelectorAll('[type="checkbox"][name="child[]"]')
        .forEach((child) => {
          child.checked = true;
        });
    } else {
      input
        .closest(".options")
        .querySelectorAll('[type="checkbox"][name="child[]"]')
        .forEach((child) => {
          child.checked = false;
        });
    }
  }
  checkAllState(input);
};

let checkAllState = (input) => {
  let countOptions = input
    .closest(".options")
    .querySelectorAll('[type="checkbox"][name="child[]"]').length;
  let checkedOptions = input
    .closest(".options")
    .querySelectorAll('[type="checkbox"][name="child[]"]:checked').length;
  let checkAll = input.closest(".options").querySelector("#checkAll");

  if (countOptions !== checkedOptions) {
    if (checkedOptions == 0) {
      checkAll.indeterminate = false;
      checkAll.checked = false;
    } else {
      checkAll.indeterminate = true;
      checkAll.checked = false;
    }
  } else {
    checkAll.indeterminate = false;
    checkAll.checked = true;
  }
};

document.querySelectorAll('[type="checkbox"]').forEach((input) => {
  input.addEventListener("click", (event) => {
    changeOptionsHandler(event.target);
  });
});

Conclusion

Grâce à un peu de magie JavaScript, on a réussi à créer une petite danse entre une checkbox « mère » et ses petites « filles », tout ça pour rendre notre interface utilisateur encore plus cool et intuitive.

Si vous avez des astuces, des idées pour améliorer cette petite méthode ou même si vous avez juste envie de partager vos expériences, n’hésitez pas à me répondre sur Mastodon. J’adorerais entendre vos retours et idées.

Happy Birthday Matt! Hope you like your gift

Conditionner le mode sombre en JavaScript ET via les styles CSS

Si il y a bien une chose à éviter, c’est celle-ci. En effet, il est préférable de décider qui, de JavaScript ou CSS, va gérer le mode sombre et de s’y tenir, afin d’éviter que des conditions définies en JavaScript soient écrasées par une feuille de style. C’est le soucis que j’avais ici : je définissais à la fois des règles CSS ciblées par un attribut html[data-theme="dark"] qui était ensuite modifié via JavaScript ainsi que des règles ciblées par une media query @media (prefers-color-scheme: dark).

html[data-theme="dark"] body {
    background-color: #222222;
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222222;
    color: #ffffff;
  }
}

Et voici ce que je faisais en JavaScript :

Je sauvegardais dans un booléen isDarkMode le résultat de la condition media query (prefers-color-scheme: dark) ou de l’attribut [data-theme="dark"].

Au chargement de la page, le thème était défini sur “dark” ou “light” suivant la valeur du booléen isDarkMode. Puis lorsque un changement au niveau de la media query était détecté, j’appelai à nouveau ma fonction switchTheme().

var themeToggle = document.querySelector('.site-theme-switcher');
var useDark = window.matchMedia("(prefers-color-scheme: dark)")
var isDarkMode = useDark.matches || document.querySelector('html').getAttribute('data-theme') === "dark";

var switchTheme = function(darkModeState) {
	if (darkModeState) {
		document.querySelector('html').setAttribute('data-theme', 'dark');
		themeToggle.setAttribute('data-switch-theme', 'light');
	} else {
		document.querySelector('html').removeAttribute('data-theme');
		themeToggle.setAttribute('data-switch-theme', 'dark');
	}
};

document.addEventListener('DOMContentLoaded', function() {
	switchTheme(isDarkMode);
	useDark.addListener(function(event) {
		switchTheme(event.matches);
	});
});

En soit, cette méthode n’est pas mauvaise, mais à aucun moment elle ne prend en compte la volonté de l’utilisateur de visionner votre site Web en version sombre ou non. C’est le système d’exploitation de l’ordinateur qui prend la main.

Ne pas utiliser de cookie

Une autre erreur à ne pas faire, si on veut que l’utilisateur garde la main, c’est de ne pas enregistrer son choix. C’est tout bête, mais je ne m’en suis rendu compte que ce soir en me penchant enfin sur le problème…

La correction est simple à mettre en place, il suffit de modifier la fonction switchTheme() comme suit :

var switchTheme = function(darkModeState) {
	if (darkModeState) {
		document.querySelector('html').setAttribute('data-theme', 'dark');
		themeToggle.setAttribute('data-switch-theme', 'light');
		document.cookie = "darktheme=true; expires=Fri, 31 Dec 9999 23:59:59 GMT;";
	} else {
		document.querySelector('html').removeAttribute('data-theme');
		themeToggle.setAttribute('data-switch-theme', 'dark');
		document.cookie = "darktheme=false; expires=Fri, 31 Dec 9999 23:59:59 GMT;";
	}
};

Il conviendra ensuite de modifier l’écouteur de l’évènement DOMContentLoaded comme ceci :

document.addEventListener('DOMContentLoaded', function() {
	if (document.cookie.split(";").some((item) => item.trim().startsWith("darktheme=true"))) {
		switchTheme(true);
	} else if (document.cookie.split(";").some((item) => item.trim().startsWith("darktheme=false"))) {
		switchTheme(false);
	} else {
		switchTheme(useDark.matches);
	}
}

Et voilà !

L’idée était de faire une sorte de présentation vidéo expliquant les différents menus de l’application et que l’on puisse « naviguer » dans celle-ci, un peu comme une sorte de PowerPoint vidéo.

Première idée, à chaud

Au départ, mon idée était de réaliser un screencast en suivant un scénario d’utilisation de l’application puis d’utiliser un logiciel de montage vidéo, du genre After Effects pour placer les différentes info-bulles.

Mais ça voulait dire perdre la possibilité de modifier les textes des info-bulles une fois la vidéos montée, encodée et tout le toutim.

Ma solution (presque parfaite)

Je me suis alors demandé comment je pouvais bien faire pour garder la possibilité de modifier les info-bulles a posteriori.

Voilà où je suis arrivé : le principe était de réaliser plusieurs petits screencasts pour chaque menu dans lesquels on suivait le scénario et de les inclure dans un document HTML à l’aide de balises <video>.

Pour lire chaque morceaux de vidéos et afficher les info-bulles aux bons moments, on a utilisé JavaScript et CSS.

Structure de la page HTML

Dans notre page HTML, nous allons créer un <div> auquel au ajoutera l’attribut class="wrapper". Ce div.wrapper contiendra deux éléments <div>; le premier encapsulera nos info-bulles (div.bubbles-holder) et le second regroupera nos vidéos (div.medias-holder).

<div class="wrapper">
  <a href="#step-1" id="start" data-media="1">Start</a>
  <div class="bubbles-holder">
    <!-- ici, nos info-bulles -->
  </div>

  <div class="medias-holder">
    <!-- ici, nos vidéos -->
  </div>
</div>

Les info-bulles

Chaque info-bulle est composée d’un paragraphe explicatif et de boutons permettant la navigation entre les vidéos.

Pour afficher l’info-bulle adéquate via JavaScript, elles auront toute une ID unique, du style #step-X.

Chaque bouton de navigation aura un attribut data-media qui permettra de savoir quelle vidéo doit être jouée lorsqu’on clique dessus.

Voici ce que ça donne.

<div class="bubbles-holder">
  <div id="step-1" class="bubble">
    <div class="bubble__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, eos.</p>
    </div>

    <div class="bubble__navigation">
      <a data-media="1" href="#step-1" class="navigation__btn--replay">Replay</a>
      <a data-media="2" href="#step-2" class="navigation__btn--next">Next</a>
    </div>
  </div>

  <!-- Les info-bulles suivantes -->
</div>

Les vidéos

Pour les vidéos, rien de bien fou, simplement un ID qui nous servira dans le JavaScript et deux formats différents comme sources pour ainsi couvrir la majorité des navigateurs Web actuels.

<div class="medias-holder">
  <div class="media" id="media-1">
    <video class="media--video" id="video-1">
      <source src="video-1.webm" type="video/webm">
      <source src="video-1.mp4" type="video/mpeg">
    </video>
  </div>

  <!-- les autres vidéos -->
</div>

La feuille de styles CSS

Lorsque la page s’affiche on ne souhaite afficher que la première vidéo et un bouton « Start » qui permettra de jouer la présentation vidéo. Tout le reste doit être caché et ne sera affiché qu’au moment voulu, via JavaScript.

Voici ce que ça donne.

.wrapper {
  height: 720px;
  margin: 0 auto;
  position: relative;
  width: 1080px;
}

.bubbles-holder,
.medias-holder  {
  display: block;
  position: absolute;
}

.bubbles-holder .bubble,
.medias-holder .media {
  display: none;
  position: absolute;
}

.medias-holder .media:fist-child {
  display: block;
}

Le reste de la feuille de styles CSS n’est pas important ici, il suffira juste d’ajouter des règles pour l’esthétisme de la page et de l’interface.

Gestion des évènements en JavaScript

Pour plus de facilité avec la gestion des évènements, j’utilise jQuery. Ce que l’on souhaite, c’est lancer la lecture d’une vidéo lorsqu’on clique sur un bouton de navigation (« Start », « Replay », « Next », « Prev »), et afficher l’info-bulle qui s’y rapporte.

$(document).on('click', 'a', function (event) {
  event.preventDefault(); // Permet d'annuler l'action normal d'un clic sur un lien hypertexte

  // On affiche uniquement la vidéo voulue  
  var media = $(this).attr('data-media');
  if (media !== undefined) {
    $('.media').hide(); // On cache tous les .media en display: block
    $('#media-' + media).show();
    
    // On force la vidéo à être jouée depuis le début (utile pour le clic sur 'Replay'
    var video = document.getElementById('video-' + media);
    video.pause();
    video.currentTime = 0;
    video.play();
  }

  // Si le clic ne s'est pas fait sur un bouton 'Replay', on cache toutes les info-bulles et on affiche seulement celle de la vidéo jouée
  var step = $(this).attr('href');
  if (href.length > 0 && $(this).hasClass('navigation__btn--replay') != true) {
    $('.bubble)"fadeOut('fast');
    $(href).delay(ac__getDelay(step)).fadeIn();
  }

  // Si on clic sur le bouton 'Start', on le cache en fondue
  if ($(this).attr('id') == "start")
    $(this).fadeOut('fast');
});

Et voilà ! Au clic sur un bouton de navigation (ou sur le bouton « Start »), on affiche la vidéo dont la référence est passée dans l’attribut data-media du bouton, puis on affiche l’info-bulle qui s’y rapporte dont la référence est passée dans l’attribut href du bouton.

Vous remarquerez l’appel de la fonction ac__getDelay() lors de l’affichage des info-bulles, je ne la détaillerai pas ici, mais c’est une fonction qui me permet de retourner un nombre de milli-secondes différent en fonction de l’info-bulle passée en paramètre.

Mission accomplie !?

Je ne sais pas si avec mes collègues on a fait le bon choix en partant sur cette solution, mais le fait est que ça marche et que le rendu est plutôt sympa.

Par contre, si le contenu de la présentation vidéo est amené à changer régulièrement, ça peut-être fastidieux, car il faut enregistrer les screencasts, caler les délais d’affichage des info-bulles sur la vidéo, etc.

En tout cas, je pose ça là et vous en faites ce que vous voulez.

Tchô !