CSS. Изменяем отображение любого сайта

Поговорим про каскадные таблицы стилей. С их помощью можно изменить любой элемент на веб-сайте. Естественно, это будет отображаться только в вашем браузере. Из-за внедрения большого количества рекламы не хочется и вовсе посещать некоторые сайты, например, довольно популярный сайт openssource.biz имеет просто обилие рекламных баннеров. Да, можно воспользоваться адблоком, однако разработчики тоже не дураки, и публикуют рекламу без опознавательных стилей. Поэтому блокировщик не может отличить рекламный баннер от простой картинки. Иногда сайты просят выключить блокировщик для отображения определённого контента. Используем специальный плагин для браузера – stylish. С его помощью можно изменить сайт, так как хотите этого именно вы, а не дизайнер сайта. Рассмотрим пример на простой странице группы в вк



Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)



И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)





div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль



domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("https://vk.com/friends?section=list2")
Теперь посмотрим на страницу группы



Элемент исчез, таким образом можно полностью очистить всю страницу



- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «Сomic Sans MS». Создаем новое правило в котором вписываем к необходимому тегу данные атрибуты {font-family: comic sans ms !important;}. Если требуется изменить шрифт вовсе на всем сайте, то быстрее будет воспользоваться таким правилом * {font-family: comic sans ms !important;}. Для изменения размера текста и цвета есть стили font-size и color соответственно. font-size: 15px !important; color: red !important;

- Чтобы изменить фон сайта нужно сначала узнать селектор, отвечающий за фон



Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон



Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;

- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект



ytd-rich-item-renderer.ytd-rich-grid-renderer:nth-child(1) > div:nth-child(1) > ytd-rich-grid-media:nth-child(1) > div:nth-child(1) > ytd-thumbnail:nth-child(1) > a:nth-child(1) > yt-img-shadow:nth-child(1) > img:nth-child(1)

- Как идентифицировать элемент, который может менять часть своего названия? Это очень часто делается для разблокировки рекламного контента. Сегодня заблокировали баннер, а завтра он снова сияет во всей красе.
Есть специальные приемы для отлавливания таких стилей [attribute^=value]; [attribute$=value]; [attribute*=value]
[attribute^=value] – ищет элемент в котором значение атрибут начинается с определённого слова, например, заблокируем любой div, атрибут которого начинается на yandex - div[id^="yandex"] и div[class^="yandex"]
[attribute$=value] – ищет элемент в котором значение атрибут заканчивается на определённое слово - a[href$=".pdf"]
[attribute*=value] – ищет элемент значение которого содержит определённую строку - [id*="google_ads"]

- Иногда заблокировали элемент, а пустое место от него осталось и нужно подтянуть остальные элементы. Например, сдвинем пост в группе вк в сторону



Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}



Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы



На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp

vk.com/id58924119​