Блокировка рекламы в браузере (User CSS)

Поделюсь опытом, как я блокирую рекламу в браузере Chrome (к счастью, мне хватает одного браузера), пользуясь базовыми знаниями HTML/CSS. Этим способом делается также и мелкая настройка интерфейса веб-страниц (поля, размер шрифта и т.д.) под свои хотелки.

---

Когда-то (лет 20 назад) в браузерах (по крайней мере в Firefox) была возможность писать User CSS в специальном файле; сейчас я использую для этого расширение (extention). Это, кстати, единственное расширение, которым я обременил свой браузер.

Итак, уберём навязчивые баннеры с часто посещаемых сайтов

Шаг 1. Установим расширение User CSS либо аналогичное, какое нравится.

Шаг 2. Находясь на конкретном сайте с раздражающей нас рекламой, жмём на сине-зелёный значок расширения в правом верхнем углу браузера:

Открывается редактор CSS-кода (для данного домена). Обычно одного CSS-правила

display: none !important;

хватает, чтобы не отображать не понравившийся нам элемент (блок) HTML. Можно также ограничить ширину, высоту, прозрачность блока, задвинуть его за экран и многое другое (вся мощь CSS нам в помощь). Можно увеличить шрифт в той же Википедии… Но вернёмся к рекламе.

Чтобы достать имена (id, class) элементов HTML, к которым мы хотим применить правила CSS, клацаем правой кнопкой мыши по элементу (баннеру) и выбираем последний пункт меню «Просмотреть код»:

Внизу откроется инспектор объектов (вкладка Elements). Наводя мышь на разные строки кода, мы без труда поймём, к какой именно прямоугольной области экрана эта конкретная строка кода относится. Вот, например, нажав правой кнопкой мыши по выбранной строке, я копирую сразу селектор выбранного элемента:

Это оказался селектор #sidebar-direct

Теперь, если пропишем

#sidebar-direct {   display: none !important; }

то пропадёт вся правая колонка страницы. Поля ввода и перевода текста сдвинутся вправо:

Мне такой сдвиг (за счёт вырезанной колонки) не понравился, поэтому продолжаю нашаривать мышкой строки ниже, чтобы перейти к вложенным блокам. Выбираю код на две строки ниже — копирую его селектор: #sidebar-direct > div > div

Вставляю этот селектор перед {

Ура, теперь сдвига нет. И если повторно нажать на сине-зелёный значок расширения, убрав редактор кода, мы убедимся, что гадкой рекламы тоже нет 🙂

Вот так, методом проб и ошибок, за несколько дней эпизодической (затрачивая по 5 минут на сайт) несложной работы, которая заключается в исследовании HTML-кода, я настроил обрезку рекламы (а также некоторых других элементов интерфейса) на регулярно посещаемых сайтах.

Делюсь готовым кодом

Итак, для яндекс-переводчика код получился такой:

#sidebar-direct > div > div {   display: none !important; }

Девять строк кода для ya.ru избавят от пульсирующих просьб попробовать яндекс-браузер (первые пять строк), а также от рекламы в правой колонке:

.Distribution-Popup {   position: relative;   right: 0px;   max-width: 1px; } iframe, .content__right .VanillaReact {   display: none !important; }

Для vk.com :

#l_ads, #ads_left {   display: none !important; }

Код для livejournal.com :

.b-discoverytimes-wrapper, .discoverytimes-noiframe, .ng-scope {   display: none; } div[class^="hgsstwa"], div[id^="yandex_rtb"] {   display: none; } body div, body p {   font-size: 20px;   line-height: 1;   }

Для dic.academic.ru :

#ad_top {   display: none; } div[id^="yandex_rtb"], div[class^="ee"] {   display: none !important; }

Пример настройки размера шрифта (сайт arxiv.org):

body {   font-size: 24px; } .content .arxiv-result p.title {   font-size: 30px; }

Для books.google.ru (тот случай, когда бесят огромные поля, отнимающие место у основного контента):

#gb {   line-height: 20px; } #gba+div {   line-height: 0px;   height: 0px; } #gbq2 {   padding: 2px; }

Для dzen.ru :

yatag[id^="ya_partner"], .article-right-ad-block__main {   display: none !important; }

Для сайтов pythontutor.ru, cyberleninka.ru (и многих других, использующих яндекс-рекламу):

iframe, div[id^="yandex_rtb"] {   display: none; }

Примечание

Разработчики сайтов время от времени меняют код рекламных блоков, а значит — и нам придётся заново отследить, под какими селекторами теперь прячется реклама. К счастью, это бывает нечасто (раз в два-три года, и то не у всех).

Другие способы защиты от рекламы (а также нежелательных обновлений и прочая, и прочая)

Наверное, многие этот способ знают: запретить винде обращаться к вредоносным (с нашей точки зрения) доменам в файлике hosts (он без расширения) который лежит обычно в папке \Windows\System32\drivers\etc (если мы не меняли адреса системных папок).

Пример:

127.0.0.1 www.sublimetext.com # 127.0.0.1www.yastatic.net # не видны картинки яндекс-поиска # 127.0.0.1yastatic.net

В этом примере только одна рабочая строка. Две другие закомментированы — как оказалось, блокировка этих доменов (вместе с рекламой) нарушает работу яндекс-картинок, яндекс-карт и т.п.

Примеры файла hosts с известными вредоносными сайтами ищутся без труда, я скачивал у кого-то с дзена.

Выводы

Чем такой способ скрытия рекламы (посредством user css) лучше использования блокировщиков рекламы (вот тут свежая свежая статья по ним)?

Индивидуальной тонкой настройкой. А ещё — мы не ввязываемся в эту войнушку разработчиков блокировщиков и обиженных блокированных.

Ну и дополнительные хотелки по настройке под себя внешнего вида того или иного сайта здесь же можно реализовать.

Недостатки? Да, нужно повозиться с каждым сайтом отдельно. Но зато Вы точно знаете, что и где заблокировано. Это сделано сознательно своими руками. Можно точечно откатить.

---

К сожалению, не разрабатываю под мобильные устройства — не знаю, есть ли user css в браузерах под андроид. Кто знает — пишите в комментариях 🙂