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

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

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

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

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

Всё дело — в CSS

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

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

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

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

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

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

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

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

Щёл­ка­ем пра­вой кноп­кой мыш­ки на нуж­ном эле­мен­те и выби­ра­ем «Посмот­реть код». 

Откро­ет­ся панель Инспек­то­ра и под­све­тит нуж­ный уча­сток кода, кото­рый отве­ча­ет за этот элемент. 

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

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

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

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

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

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

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

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