Blokuj reklamy display i sponsorowane bloki za pomocą CSS
Dedykowany bloker reklam jest świetny, ale czasem chcesz po prostu pozbyć się kilku konkretnych slotów — przyklejonego banera pod filmem, "polecanego" bloku wypchanego sponsorowanymi linkami, gigantycznego billboardu nad artykułem. JustZix pozwala ukryć je zwykłym CSS.
Ukrywanie CSS kontra blokowanie sieciowe
Tradycyjny bloker reklam zatrzymuje żądania reklam na poziomie sieci. Ukrywanie CSS jest inne: reklama może się nadal załadować, ale nigdy jej nie zobaczysz. Brzmi gorzej, a jednak ma realne zalety. Reguły CSS nigdy nie psują układu strony tak, jak potrafi zablokowane żądanie, łatwo się je pisze i działają na slotach, które bloker sieciowy pomija — jak własne "sponsorowane" bloki wydawcy serwowane z tej samej domeny co artykuły.
Przepis 1: Ukryj standardowe kontenery reklam
Branża reklam display ustandaryzowała się wokół garstki rozmiarów slotów i nazw klas. Ta reguła zgarnia te najczęstsze.
/* Standardowe sloty reklam 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;
}Selektory atrybutów [id^="ad-"], [id*="-ad-"] i [id$="-ad"] dopasowują początek, środek i koniec id, łapiąc odpowiednio ad-top, main-ad-rail i sidebar-ad.
Przepis 2: Zlikwiduj puste miejsce
Ukrycie reklamy przez display: none zwykle usuwa też jej miejsce, ale zarezerwowane sloty reklam mają czasem stałą wysokość ustawioną na rodzicu. Jeśli widzisz pustą przerwę, zlikwiduj ją.
/* Zlikwiduj zarezerwowane miejsce na reklamę */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
}Przepis 3: Usuń bloki "sponsorowane" i "promowane"
Treści sponsorowane serwowane przez wydawcę są najtrudniejsze do złapania dla blokera sieciowego, bo pochodzą z tego samego serwera co prawdziwe artykuły. CSS może namierzyć je po etykietach, które te bloki noszą.
/* Bloki treści sponsorowanych / promowanych */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
display: none !important;
}Taboola i Outbrain — dwie największe sieci widżetów "w sieci" — są niezawodnie nazwane, więc te selektory usuwają większość bałaganu pod artykułami na stronach informacyjnych.
Przepis 4: Przebieg JS dla reklam wstrzykiwanych dynamicznie
Niektóre skrypty reklamowe wstrzykują sloty po pierwszym renderowaniu. Krótka reguła JavaScript czyści je, gdy się pojawiają.
// Stale usuwaj wstrzykiwane węzły reklam
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 });Jak nie psuć stron
Ukrywanie reklam przez CSS jest bezpieczne, ale dwa selektory powyżej są szerokie. Jeśli strona traci prawdziwą treść, zawęź regułę:
- Zastąp
[class*="ad-banner"]dokładną klasą, którą widzisz w DevTools. - Ogranicz regułę do jednej domeny wzorcem typu
https://site.example/*. - Trzymaj osobną, bezpieczną regułę globalną, a agresywne selektory zarezerwuj dla reguł per strona.
Bonus wydajnościowy
Nawet gdy reklama nadal się pobiera, ukrycie jej przez CSS usuwa pracę nad układem i powstrzymuje przyciągające uwagę animacje przed ponownym renderowaniem. Na ciężkich stronach informacyjnych strona po prostu wydaje się spokojniejsza i przewija się płynniej.
Uruchom przepisy
Zainstaluj ze strony pobierz JustZix i połącz te reguły z naszymi gotowymi przykładami. Reklamy często siedzą obok przyklejonych nagłówków zasłaniających treść — napraw je naszym poradnikiem usuń przyklejone nagłówki. Kilka selektorów dziś, spokojniejszy internet jutro.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.