Как убрать что угодно на любом сайте

Как убрать что угодно на любом сайте

Самый популярный приём разработчиков.

Итак, очередной сайт решил перегородить вам обзор своей никчемной нападайкой. Она должна провисеть на экране 10 секунд и только потом отключиться. Но зачем тратить 10 секунд жизни, если можно отключить нападайку самостоятельно за 8? 

Как работают всплывающие нападайки и поп-апы с рекламой

Такие всплывающие окна делаются очень просто: 

  1. Хозяева сайта создают на своей странице объект, который лежит сверху всего, как целлофан на обложке журнала. 
  2. Этому объекту задают ширину во весь экран и высоту во весь экран, чтобы нельзя было дальше кликать и переходить по сайту. 
  3. Затем этому объекту устанавливают затемнённый фон. Так появляется затемнение всего экрана. Именно эта штука с затемнением и мешает нормально пользоваться страницей.
  4. Внутрь объекта с затемнением кладут ещё один объект — рекламу, баннер, призыв подписаться, предложение оставить свой номер телефона.
  5. И всё это висит поперёк страницы

Наша задача — отключить оба объекта, чтобы они пропали с глаз долой.

Как убрать что угодно на любом сайте

Всё дело — в CSS

Чтобы компьютер понимал, какие элементы есть на странице, используют язык HTML, который говорит: «Тут заголовок, тут ссылка, тут обычный текст, тут картинка». А чтобы было ясно, как эти элементы должны выглядеть и работать, используют специальные правила — их называют стилями. Стили задают цвет и внешний вид всего, что есть на странице, а ещё управляют размером и поведением каждого элемента. 

Стили хранятся в таблицах, таблицы называют каскадными, всё вместе называется CSS — cascading style sheets. 

👉 Вот больше примеров и практики по CSS:

Именно возможности CSS позволяют рисовать такие нападайки, которые занимают весь экран и мешают читать. Но мы используем свойства CSS против подобных сайтов и перепишем всё под себя. Для этого нам нужно будет найти код элемента, который отвечает за нападайку.

Как найти код нужного элемента

Чтобы увидеть, какой именно кусок кода отвечает за всплывающее окно, будем пользоваться средствами самого браузера — Инспектором. В Хроме он вызывается нажатием клавиш Ctrl+Shift+i, а в Сафари — Cmd+Option+i.

Как убрать что угодно на любом сайте

Но есть ещё один способ, который сейчас нам подходит больше:

  1. Открываем страницу и дожидаемся, пока появится реклама. 
  2. Затем правой кнопкой мыши щёлкаем на картинке в центре, которая мешает просмотру, и выбираем «Просмотреть код» (Inspect Element).
  3. Инспектор сразу подсветит нужную нам строчку.

Мы нашли участок кода, который отвечает за назойливую рекламу. Теперь пусть браузер сам закроет окно. Для этого используем свойство display — оно решает, показывать этот элемент или нет.

Как убрать что угодно на любом сайте
Щёлкаем правой кнопкой мышки на нужном элементе и выбираем «Посмотреть код».
Как убрать что угодно на любом сайте
Откроется панель Инспектора и подсветит нужный участок кода, который отвечает за этот элемент.

Скрываем элемент со страницы

Чтобы окно не показывалось, нужно написать свойство display:none. Но бывает так, что CSS игнорирует такие команды, если это же свойство задаётся чуть позже в другом месте. Если нужно, чтобы команда выполнилась несмотря ни на что, после команды пишут слово !important — именно так, с восклицательным знаком в начале. Это говорит о том, что у команды приоритет над всеми остальными и её нужно исполнять:

display:none !important

Осталось вставить эту команду в нужное место. Оставляем синюю линию Инспектора на той же строке и переходим на вкладку Styles:

Как убрать что угодно на любом сайте

Там как раз прописаны все CSS-стили, которые отвечают за свойства и поведение этого элемента. Находим в самом верху блок element.style, щёлкаем в нём на свободном месте и вставляем нашу команду display:none !important:

Как убрать что угодно на любом сайте

Картинка исчезла, но осталось затемнение, которое всё равно мешает читать. Разберёмся и с этим: щёлкаем правой кнопкой мыши в любом месте затемнения, выбираем «Посмотреть код», вставляем в element.style нашу команду — готово.

Как скрыть что угодно на любом сайте

Это работает только с нападайками?

Этим способом можно скрыть что угодно, поскольку свойство display есть у всего на странице: у новостей ВКонтакте, постов в Facebook или картинок в Instagram.

❗️ Важный момент: всё, что мы делаем таким образом, происходит только внутри нашего браузера и не влияет на отображение сайта у других людей. Если перезагрузить страницу сайта, то сайт может напасть на вас рекламой снова.

Текст:

Михаил Полянин

Редактура:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства и компенсация, если вы пойдёте работать в «Яндекс».
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как подключить комментарии к сайту
Как подключить комментарии к сайту

Приключение на 4 минуты.

Делаем своё расширение для браузера за 10 минут
Делаем своё расширение для браузера за 10 минут

Cнова запускаем снежинки.

Чат-бот
Делаем своего первого чат-бота

Суперпростой способ создать бота, не зная программирования.

Как устроен проект «Гадаем на статьях Кода»
Как устроен проект «Гадаем на статьях Кода»

Никакой магии, только JavaScript.

Запускаем телеграм-бота на сервере

Тогда он будет работать круглые сутки, а вы — отдыхать.

Как сохранить JSON на сервере
Как сохранить JSON на сервере

И отдать его обратно по запросу.

ООП: атрибуты и методы
ООП: атрибуты и методы

Два главных слова любого программиста в ООП. Знай их, люби их, говори правильно.

Чёртовы психи: как добавить снежинок на любой сайт одной строкой

Ну ладно, тремя строками. Это, считай, одна.

Как сделать свой сайт за 10 минут без программирования

Для некоторых это становится источником постоянного дохода, если подойти к процессу с умом.

Что означает ошибка SyntaxError: missing ) after formal parameters

На самом деле это не просто пропущенная скобка.

Большой разбор: ИИ научился играть в динозаврика из Chrome

Тот редкий случай, когда хочешь остаться без интернета.

Что означает ошибка Exception has occurred: TypeError
Что означает ошибка Exception has occurred: TypeError

Неочевидная ошибка в типах данных Python.

Мегапроект: расшифровщик аудио в текст… через облако Яндекса!

Сегодня мы будем эксплуатировать чужие облака.

easy