← Tous les articles

Tutoriels

Bloquez les publicités display et les encarts sponsorisés avec le CSS

17 mai 2026 · par JustZix Team

Un bloqueur de publicités dédié, c'est très bien, mais parfois vous voulez juste supprimer quelques emplacements d'annonces précis — la bannière collante sous une vidéo, l'encart « recommandé » bourré de liens sponsorisés, le grand panneau au-dessus d'un article. JustZix vous permet de les masquer avec du simple CSS.

Masquage CSS contre blocage réseau

Un bloqueur de publicités traditionnel arrête les requêtes publicitaires au niveau du réseau. Le masquage CSS est différent : la publicité peut toujours se charger, mais vous ne la voyez jamais. Cela semble pire, et pourtant cela présente de réels avantages. Les règles CSS ne cassent jamais la mise en page d'un site comme peut le faire une requête bloquée, elles sont triviales à écrire, et elles fonctionnent sur des emplacements qu'un bloqueur réseau manque — comme les encarts « sponsorisés » propres à l'éditeur, servis depuis le même domaine que les articles.

Recette 1 : masquer les conteneurs publicitaires standards

L'industrie de la publicité display s'est standardisée autour d'une poignée de tailles d'emplacements et de noms de classes. Cette règle balaie les plus courants.

/* Emplacements publicitaires display standards */
[id^="ad-"], [id*="-ad-"], [id$="-ad"],
[class*="ad-slot"], [class*="ad-banner"],
[class*="advert"], [class*="ad-container"],
ins.adsbygoogle, iframe[src*="doubleclick"],
iframe[src*="googlesyndication"] {
  display: none !important;
}

Les sélecteurs d'attributs [id^="ad-"], [id*="-ad-"] et [id$="-ad"] correspondent au début, au milieu et à la fin d'un id, attrapant respectivement ad-top, main-ad-rail et sidebar-ad.

Recette 2 : réduire l'espace vide

Masquer une publicité avec display: none supprime généralement son espace aussi, mais les emplacements publicitaires réservés ont parfois une hauteur fixe définie sur un parent. Si vous voyez un blanc, réduisez-le.

/* Réduire l'espace publicitaire réservé */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

Recette 3 : éliminer les encarts « sponsorisés » et « promus »

Le contenu sponsorisé servi par l'éditeur est le plus difficile à attraper pour un bloqueur réseau, car il provient du même serveur que les vrais articles. Le CSS peut le cibler par les étiquettes que portent ces blocs.

/* Blocs de contenu sponsorisé / promu */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
  display: none !important;
}

Taboola et Outbrain — les deux plus grands réseaux de widgets « ailleurs sur le web » — sont nommés de façon fiable, donc ces sélecteurs nettoient la plupart du désordre en bas d'article sur les sites d'actualités.

Recette 4 : un balayage JS pour les publicités injectées dynamiquement

Certains scripts publicitaires injectent des emplacements après le premier affichage. Une courte règle JavaScript continue de les éliminer au fur et à mesure qu'ils apparaissent.

// Supprimer en continu les nœuds publicitaires injectés
const AD_HINTS = ['sponsored', 'advert', 'ad-slot', 'taboola', 'outbrain'];

function clearAds() {
  document.querySelectorAll('div, aside, section, iframe').forEach(el => {
    const tag = (el.id + ' ' + el.className).toLowerCase();
    if (AD_HINTS.some(h => tag.includes(h))) {
      el.remove();
    }
  });
}

clearAds();
new MutationObserver(clearAds)
  .observe(document.body, { childList: true, subtree: true });

Éviter de casser les sites

Le masquage CSS des publicités est sûr, mais deux sélecteurs ci-dessus sont larges. Si un site perd du contenu réel, restreignez la règle :

• Remplacez [class*="ad-banner"] par la classe exacte que vous voyez dans les DevTools.
• Limitez la règle à un seul domaine avec un motif comme https://site.example/*.
• Gardez une règle globale séparée et sûre, et réservez les sélecteurs agressifs aux règles par site.

Bonus performance

Même lorsque la publicité se télécharge encore, la masquer avec le CSS supprime le travail de mise en page et empêche les animations capteuses d'attention de se redessiner. Sur les sites d'actualités lourds, la page semble simplement plus calme et défile plus fluidement.

Mettez les recettes en route

Installez depuis la page télécharger JustZix et associez ces règles à nos exemples prêts à l'emploi. Les publicités côtoient souvent les en-têtes collants qui recouvrent le contenu — corrigez-les avec notre guide sur /fr/blog/remove-sticky-headers-that-cover-content. Quelques sélecteurs aujourd'hui, un web plus calme demain.