← Alle Beiträge

Anleitungen

Display-Anzeigen und gesponserte Boxen mit CSS blockieren

17 Mai 2026 · von JustZix Team

Ein dedizierter Werbeblocker ist großartig, aber manchmal will man einfach nur ein paar bestimmte Werbeflächen loswerden — das fixierte Banner unter einem Video, die "Empfohlen"-Box voller gesponserter Links, das riesige Leaderboard über einem Artikel. JustZix lässt Sie diese mit reinem CSS ausblenden.

CSS-Ausblenden im Vergleich zum Netzwerk-Blockieren

Ein klassischer Werbeblocker stoppt Werbeanfragen auf Netzwerkebene. CSS-Ausblenden ist anders: Die Anzeige kann trotzdem laden, aber Sie sehen sie nie. Das klingt schlechter, hat aber echte Vorteile. CSS-Regeln zerstören nie das Layout einer Seite, wie es eine blockierte Anfrage kann, sie sind trivial zu schreiben, und sie funktionieren bei Flächen, die ein Netzwerk-Blocker übersieht — wie die "gesponserten" Boxen eines Verlags, die von derselben Domain wie die Artikel ausgeliefert werden.

Rezept 1: Standard-Werbecontainer ausblenden

Die Display-Anzeigen-Branche hat sich auf eine Handvoll Flächengrößen und Klassennamen standardisiert. Diese Regel fegt die häufigen weg.

/* Standard-Display-Anzeigenflächen */
[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;
}

Die Attributselektoren [id^="ad-"], [id*="-ad-"] und [id$="-ad"] passen auf den Anfang, die Mitte und das Ende einer id und erfassen entsprechend ad-top, main-ad-rail und sidebar-ad.

Rezept 2: Den leeren Raum zusammenklappen

Eine Anzeige mit display: none auszublenden entfernt normalerweise auch ihren Platz, aber reservierte Werbeflächen haben manchmal eine feste Höhe auf einem übergeordneten Element. Wenn Sie eine leere Lücke sehen, klappen Sie sie zusammen.

/* Reservierten Werbeplatz zusammenklappen */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

Rezept 3: "Gesponserte" und "beworbene" Boxen entfernen

Vom Verlag ausgelieferte gesponserte Inhalte sind die schwierigste Art für einen Netzwerk-Blocker, weil sie vom selben Server wie echte Artikel kommen. CSS kann sie über die Beschriftungen anvisieren, die diese Blöcke tragen.

/* Gesponserte / beworbene Inhaltsblöcke */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
  display: none !important;
}

Taboola und Outbrain — die zwei größten "rund ums Web"-Widget-Netzwerke — sind zuverlässig benannt, sodass diese Selektoren den meisten Wust am Artikelende auf Nachrichtenseiten beseitigen.

Rezept 4: Ein JS-Durchlauf für dynamisch eingefügte Anzeigen

Manche Werbeskripte fügen Flächen nach dem ersten Zeichnen ein. Eine kurze JavaScript-Regel beseitigt sie weiter, sobald sie erscheinen.

// Eingefügte Werbeknoten kontinuierlich entfernen
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 });

Verhindern, dass es Seiten kaputtmacht

CSS-Werbeausblenden ist sicher, aber zwei der Selektoren oben sind breit. Wenn eine Seite echte Inhalte verliert, schränken Sie die Regel ein:

• Ersetzen Sie [class*="ad-banner"] durch die exakte Klasse, die Sie in den DevTools sehen.
• Beschränken Sie die Regel auf eine Domain mit einem Muster wie https://site.example/*.
• Behalten Sie eine separate, sichere globale Regel und reservieren Sie aggressive Selektoren für seitenspezifische Regeln.

Leistungsbonus

Selbst wenn die Anzeige trotzdem heruntergeladen wird, entfernt das Ausblenden mit CSS Layout-Arbeit und stoppt aufmerksamkeitsheischende Animationen vom Neuzeichnen. Auf schweren Nachrichtenseiten fühlt sich die Seite einfach ruhiger an und scrollt geschmeidiger.

Die Rezepte zum Laufen bringen

Installieren Sie von der Seite JustZix herunterladen und kombinieren Sie diese Regeln mit unseren fertigen Beispielen. Anzeigen sitzen oft neben fixierten Kopfzeilen, die Inhalte verdecken — beheben Sie diese mit unserer Anleitung unter /de/blog/remove-sticky-headers-that-cover-content. Ein paar Selektoren heute, ein ruhigeres Web morgen.