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:
- Sostituisci
[class*="ad-banner"]con la classe esatta che vedi nei DevTools. - Limita la regola a un dominio con un pattern come
https://site.example/*. - Tieni una regola globale separata e sicura e riserva i selettori aggressivi alle regole per singolo sito.
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.