← Tutti gli articoli

Tutorial

Blocca le pubblicità display e i box sponsorizzati con il CSS

Un ad blocker dedicato è ottimo, ma a volte vuoi semplicemente eliminare alcuni slot pubblicitari specifici — il banner fisso sotto un video, il box "consigliati" pieno di link sponsorizzati, il gigantesco leaderboard sopra un articolo. JustZix ti permette di nasconderli con semplice CSS.

Nascondere con il CSS contro il blocco di rete

Un ad blocker tradizionale ferma le richieste pubblicitarie a livello di rete. Nascondere con il CSS è diverso: l'annuncio può comunque caricarsi, ma tu non lo vedi mai. Sembra peggio, eppure ha vantaggi reali. Le regole CSS non rompono mai il layout di un sito come può fare una richiesta bloccata, sono banali da scrivere e funzionano su slot che un blocco di rete non coglie — come i box "sponsorizzati" di un editore serviti dallo stesso dominio degli articoli.

Ricetta 1: nascondi i contenitori standard degli annunci

Il settore degli annunci display si è standardizzato su una manciata di dimensioni di slot e nomi di classe. Questa regola spazza via quelli comuni.

/* Slot standard per annunci display */
[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;
}

I selettori di attributo [id^="ad-"], [id*="-ad-"] e [id$="-ad"] corrispondono all'inizio, alla metà e alla fine di un id, catturando rispettivamente ad-top, main-ad-rail e sidebar-ad.

Ricetta 2: comprimi lo spazio vuoto

Nascondere un annuncio con display: none di solito ne rimuove anche lo spazio, ma gli slot pubblicitari riservati a volte hanno un'altezza fissa impostata su un genitore. Se vedi uno spazio vuoto, comprimilo.

/* Comprimi lo spazio pubblicitario riservato */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

Ricetta 3: elimina i box "sponsorizzati" e "promossi"

I contenuti sponsorizzati serviti dall'editore sono i più difficili da cogliere per un blocco di rete, perché provengono dallo stesso server degli articoli reali. Il CSS può mirarli tramite le etichette che questi blocchi portano.

/* Blocchi di contenuto sponsorizzato / promosso */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
  display: none !important;
}

Taboola e Outbrain — le due maggiori reti di widget "in giro per il web" — sono nominate in modo affidabile, quindi quei selettori eliminano gran parte del disordine in fondo agli articoli sui siti di notizie.

Ricetta 4: una passata JS per gli annunci iniettati dinamicamente

Alcuni script pubblicitari iniettano slot dopo il primo rendering. Una breve regola JavaScript continua a eliminarli man mano che appaiono.

// Rimuovi continuamente i nodi pubblicitari iniettati
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 });

Evita di rompere i siti

Nascondere gli annunci con il CSS è sicuro, ma due selettori sopra sono ampi. Se un sito perde contenuti reali, restringi la regola:

Bonus prestazioni

Anche quando l'annuncio si scarica comunque, nasconderlo con il CSS elimina il lavoro di layout e impedisce alle animazioni acchiappa-attenzione di ridisegnarsi. Sui siti di notizie pesanti la pagina semplicemente sembra più tranquilla e scorre più fluida.

Metti in funzione le ricette

Installa dalla pagina scarica JustZix e abbina queste regole ai nostri esempi pronti all'uso. Gli annunci spesso si trovano accanto a header fissi che coprono i contenuti: sistemali con la nostra guida su /it/blog/remove-sticky-headers-that-cover-content. Pochi selettori oggi, un web più tranquillo domani.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso