Блокируйте баннерную рекламу и спонсорские блоки с помощью CSS
Полноценный блокировщик рекламы — это здорово, но иногда вам просто хочется убрать пару конкретных рекламных слотов: липкий баннер под видео, блок «рекомендуемое», набитый спонсорскими ссылками, гигантский лидерборд над статьёй. JustZix позволяет скрыть их обычным CSS.
Скрытие через CSS против сетевой блокировки
Традиционный блокировщик рекламы останавливает рекламные запросы на сетевом уровне. Скрытие через CSS — другое: реклама может всё ещё загружаться, но вы её никогда не видите. Звучит хуже, но у этого есть реальные преимущества. CSS-правила никогда не ломают вёрстку сайта так, как может заблокированный запрос, их тривиально писать, и они работают на слотах, которые сетевой блокировщик пропускает, — например, на собственных «спонсорских» блоках издателя, отдаваемых с того же домена, что и статьи.
Рецепт 1: скрыть стандартные рекламные контейнеры
Индустрия баннерной рекламы стандартизировалась на горстке размеров слотов и имён классов. Это правило подметает распространённые из них.
/* Стандартные слоты баннерной рекламы */
[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;
}Селекторы атрибутов [id^="ad-"], [id*="-ad-"] и [id$="-ad"] совпадают с началом, серединой и концом id, ловя ad-top, main-ad-rail и sidebar-ad соответственно.
Рецепт 2: схлопнуть пустое место
Скрытие рекламы через display: none обычно убирает и её место, но у зарезервированных рекламных слотов иногда задана фиксированная высота на родителе. Если вы видите пустой зазор, схлопните его.
/* Схлопнуть зарезервированное место под рекламу */
.ad-wrapper, .ad-placeholder, [data-ad-slot] {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
}Рецепт 3: убрать блоки «спонсорское» и «продвигаемое»
Спонсорский контент, отдаваемый издателем, сетевому блокировщику поймать труднее всего, потому что он приходит с того же сервера, что и настоящие статьи. CSS может нацелиться на него по меткам, которые несут эти блоки.
/* Блоки спонсорского / продвигаемого контента */
[class*="sponsored"], [class*="promoted"],
[class*="partner-content"], [class*="taboola"],
[class*="outbrain"], [id*="taboola"],
section[aria-label*="sponsored" i] {
display: none !important;
}Taboola и Outbrain — две крупнейшие сети виджетов «по всему вебу» — именуются надёжно, так что эти селекторы убирают большую часть хлама в конце статьи на новостных сайтах.
Рецепт 4: JS-подметание для динамически вставляемой рекламы
Некоторые рекламные скрипты вставляют слоты после первой отрисовки. Короткое правило JavaScript продолжает их убирать по мере появления.
// Непрерывно удалять вставленные рекламные узлы
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 });Чтобы это не ломало сайты
Скрытие рекламы через CSS безопасно, но два селектора выше — широкие. Если сайт теряет настоящий контент, сузьте правило:
- Замените
[class*="ad-banner"]точным классом, который вы видите в DevTools. - Ограничьте правило одним доменом шаблоном вроде
https://site.example/*. - Держите отдельное безопасное глобальное правило, а агрессивные селекторы оставьте для правил конкретных сайтов.
Бонус к производительности
Даже когда реклама всё же скачивается, скрытие её через CSS убирает работу по вёрстке и останавливает перерисовку привлекающих внимание анимаций. На тяжёлых новостных сайтах страница просто ощущается спокойнее и прокручивается плавнее.
Запустите рецепты
Установите со страницы скачать JustZix и сочетайте эти правила с нашими готовыми примерами. Реклама часто соседствует с липкими шапками, закрывающими контент, — почините их с нашим руководством на /ru/blog/remove-sticky-headers-that-cover-content. Несколько селекторов сегодня — более тихий веб завтра.
Оцени эту статью
Оценок пока нет — оцени первым.