Lolinas
11.01.2021, 01:16
Поговорим про каскадные таблицы стилей. С их помощью можно изменить любой элемент на веб-сайте. Естественно, это будет отображаться только в вашем браузере. Из-за внедрения большого количества рекламы не хочется и вовсе посещать некоторые сайты, например, довольно популярный сайт openssource.biz имеет просто обилие рекламных баннеров. Да, можно воспользоваться адблоком, однако разработчики тоже не дураки, и публикуют рекламу без опознавательных стилей. Поэтому блокировщик не может отличить рекламный баннер от простой картинки. Иногда сайты просят выключить блокировщик для отображения определённого контента. Используем специальный плагин для браузера – stylish. С его помощью можно изменить сайт, так как хотите этого именно вы, а не дизайнер сайта. Рассмотрим пример на простой странице группы в вк
https://sun9-39.userapi.com/impg/aRCk3aCdGJcJ_hZLyRXDzztWTR0S899XDhJagg/x3EOCOWIHJg.jpg?size=807x744&quality=96&sign=2f0b2c84a3512719bdc505996eb94ed3&type=album?v1
Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)
https://sun9-40.userapi.com/impg/oNp86U_usWwUpB77K5BV5Rd8gK0EjtRp1RlCQg/Wpxe45ePnKw.jpg?size=538x471&quality=96&proxy=1&sign=d34b27b645685a1effa7453681b27dfc&type=album?v1
И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)
https://sun9-50.userapi.com/impg/cqbqWcmwyyh10b3qYP0vb_1GUuuon_SE638e5Q/Sq8dpEcGSIA.jpg?size=807x147&quality=96&sign=15263183e04c5e04586b77310308f9f9&type=album?v1
https://sun9-22.userapi.com/impg/LBn6VluxtYA8X_HumEZdvQELpc-tvAGecOPMfg/MLSxdhYOg20.jpg?size=807x160&quality=96&sign=af7e3fcc16e2c41d3312284d71cde201&type=album?v1
div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль
https://sun9-34.userapi.com/impg/4KmLkMbcg35IbCK0qCf_IDOGRv1J7zqOHGZ9tA/1O8-m29GVlE.jpg?size=648x181&quality=96&proxy=1&sign=63f07ad240d05b8d082cc40dc57b885c&type=album?v1
domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("https://vk.com/friends?section=list2")
Теперь посмотрим на страницу группы
https://sun9-16.userapi.com/impg/1Jiqd0ybtam1ORScPRfbksKbre49Gxsq9XTO1w/sfXfmtoHlU0.jpg?size=807x359&quality=96&sign=7d5c9504c01b801f3ac2b5dd68e04e79&type=album?v1
Элемент исчез, таким образом можно полностью очистить всю страницу
https://sun9-33.userapi.com/impg/H75QD2J1_0X4ta_CdzWUQ_iQWU8Moxe3YK9VRA/VZPUcpueJ_g.jpg?size=807x511&quality=96&sign=88df09187ec4b30ee7454365aa0e08af&type=album?v1
- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «С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;
- Чтобы изменить фон сайта нужно сначала узнать селектор, отвечающий за фон
https://sun9-2.userapi.com/impg/fKUyr2eRFkf4BvXYtiBm08_2zMtY_yWwdnSJ-Q/svstvClXj38.jpg?size=807x371&quality=96&sign=0b3c95a74fa0878d327e031b97810395&type=album?v1
Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон
https://sun9-14.userapi.com/impg/niZfb9EgPCEH-Eq7tlDTEpnttpJcXjHylE2sFA/BwMI9c-9qUk.jpg?size=807x353&quality=96&sign=7f92150645a7aa047dcec10e811a3225&type=album?v1
Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;
- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект
https://sun9-34.userapi.com/impg/MSuymOfXL-ApUrh6krrCVoLAYAzs732Wz7zMhg/v4OiJ_Y7G8k.jpg?size=807x529&quality=96&sign=46e5244922edd2f392607c0d9912c21d&type=album?v2
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"]
- Иногда заблокировали элемент, а пустое место от него осталось и нужно подтянуть остальные элементы. Например, сдвинем пост в группе вк в сторону
https://sun9-60.userapi.com/impg/tgQIwVx6fwxHjcG8JtH-xYvrYe_jsNVY4BPGYg/kUpN0b0Jj6Q.jpg?size=648x593&quality=96&proxy=1&sign=dead17676d45ad1c03bb39a907840ee7&type=album?v1
Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}
https://sun9-62.userapi.com/impg/EfKiR36NTmAnXCwTLDjfucRa46xN9WzuhyUCjA/Yzp4zYEujqA.jpg?size=686x607&quality=96&proxy=1&sign=1f5ada387efed20bb65822e747260b26&type=album?v2
Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы
https://sun9-54.userapi.com/impg/HZRkbwKSKpiDjDIpSG_GVhC5HSjSEYWpLi2T2A/sKhl3Xclils.jpg?size=647x631&quality=96&proxy=1&sign=feda2c789bddd5920a92511dff3255c1&type=album?v2
На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp
vk.com/id58924119
https://sun9-39.userapi.com/impg/aRCk3aCdGJcJ_hZLyRXDzztWTR0S899XDhJagg/x3EOCOWIHJg.jpg?size=807x744&quality=96&sign=2f0b2c84a3512719bdc505996eb94ed3&type=album?v1
Предположим нужно оставить все кроме стены. Как это сделать? Для этого откроем инструменты разработки (firefox)
https://sun9-40.userapi.com/impg/oNp86U_usWwUpB77K5BV5Rd8gK0EjtRp1RlCQg/Wpxe45ePnKw.jpg?size=538x471&quality=96&proxy=1&sign=d34b27b645685a1effa7453681b27dfc&type=album?v1
И с низу появится окно, в котором описан весь код страницы. И очень удобная функция, способная выбирать любой слой страницы (в левом верхнем углу)
https://sun9-50.userapi.com/impg/cqbqWcmwyyh10b3qYP0vb_1GUuuon_SE638e5Q/Sq8dpEcGSIA.jpg?size=807x147&quality=96&sign=15263183e04c5e04586b77310308f9f9&type=album?v1
https://sun9-22.userapi.com/impg/LBn6VluxtYA8X_HumEZdvQELpc-tvAGecOPMfg/MLSxdhYOg20.jpg?size=807x160&quality=96&sign=af7e3fcc16e2c41d3312284d71cde201&type=album?v1
div.page_cover_info означает селектор элемента, который отвечает за выделенную область. Тег div означает слой (аналог с фотошопом), который может имеет идентификатор класс (class) или айди (id). Не стану углубляться в правила написания файлов таблицы стилей и метода построения веб-страниц, это очень большая тема. Рассмотрим кратко определённые теги и как менять их атрибуты налету. Теперь перейдем в сам stylish. Открываем вкладку с аддонами и выбираем «Стили» и создаем новый стиль
https://sun9-34.userapi.com/impg/4KmLkMbcg35IbCK0qCf_IDOGRv1J7zqOHGZ9tA/1O8-m29GVlE.jpg?size=648x181&quality=96&proxy=1&sign=63f07ad240d05b8d082cc40dc57b885c&type=album?v1
domain("vk.com") – говорит о том что правило будет работать на всем домене vk.com. Если требуется определённая страница, то нужна написать так url-prefix("https://vk.com/friends?section=list2")
Теперь посмотрим на страницу группы
https://sun9-16.userapi.com/impg/1Jiqd0ybtam1ORScPRfbksKbre49Gxsq9XTO1w/sfXfmtoHlU0.jpg?size=807x359&quality=96&sign=7d5c9504c01b801f3ac2b5dd68e04e79&type=album?v1
Элемент исчез, таким образом можно полностью очистить всю страницу
https://sun9-33.userapi.com/impg/H75QD2J1_0X4ta_CdzWUQ_iQWU8Moxe3YK9VRA/VZPUcpueJ_g.jpg?size=807x511&quality=96&sign=88df09187ec4b30ee7454365aa0e08af&type=album?v1
- Рассмотрим теперь случай, в котором требуется изменить шрифт на странице. Мне к примеру, очень нравится «С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;
- Чтобы изменить фон сайта нужно сначала узнать селектор, отвечающий за фон
https://sun9-2.userapi.com/impg/fKUyr2eRFkf4BvXYtiBm08_2zMtY_yWwdnSJ-Q/svstvClXj38.jpg?size=807x371&quality=96&sign=0b3c95a74fa0878d327e031b97810395&type=album?v1
Eсли вписать это body.lstfml {background: #000 !important;} то получим черный фон
https://sun9-14.userapi.com/impg/niZfb9EgPCEH-Eq7tlDTEpnttpJcXjHylE2sFA/BwMI9c-9qUk.jpg?size=807x353&quality=96&sign=7f92150645a7aa047dcec10e811a3225&type=album?v1
Кстати, можно заменить картинку на свою картинку, например так background-image: url("paper.gif") !important;
- Также существует объекты на странице, которые трудно поддаются идентификации, для этих целей существует специальная функция «Копирование css селектора». Данный селектор будет уникальным, и дает ссылку на конкретный объект
https://sun9-34.userapi.com/impg/MSuymOfXL-ApUrh6krrCVoLAYAzs732Wz7zMhg/v4OiJ_Y7G8k.jpg?size=807x529&quality=96&sign=46e5244922edd2f392607c0d9912c21d&type=album?v2
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"]
- Иногда заблокировали элемент, а пустое место от него осталось и нужно подтянуть остальные элементы. Например, сдвинем пост в группе вк в сторону
https://sun9-60.userapi.com/impg/tgQIwVx6fwxHjcG8JtH-xYvrYe_jsNVY4BPGYg/kUpN0b0Jj6Q.jpg?size=648x593&quality=96&proxy=1&sign=dead17676d45ad1c03bb39a907840ee7&type=album?v1
Для этого нужно идентифицировать целый пост - post-75459680_1022156. Напишем правило сдвигающее, например, влево на 100 точек - #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important;}
https://sun9-62.userapi.com/impg/EfKiR36NTmAnXCwTLDjfucRa46xN9WzuhyUCjA/Yzp4zYEujqA.jpg?size=686x607&quality=96&proxy=1&sign=1f5ada387efed20bb65822e747260b26&type=album?v2
Но картинка находится под левым меню, чтобы поставить картинку на передний план нужно воспользоваться атрибутом z-index. И теперь правило будет выглядеть так #post-75459680_1022156 {margin-left: -100px !important; margin-right: 100px !important; z-index: 100 !important;}. Z-index: 100 взято с потолка. 100 – это порядковый номер слоя веб страницы
https://sun9-54.userapi.com/impg/HZRkbwKSKpiDjDIpSG_GVhC5HSjSEYWpLi2T2A/sKhl3Xclils.jpg?size=647x631&quality=96&proxy=1&sign=feda2c789bddd5920a92511dff3255c1&type=album?v2
На этом, пожалуй, все. В этой статье собрана подборка самых актуальных правил, которые могут понадобится обычному пользователю. Для более детального рассмотрения можно воспользоваться интернетом, а именно - w3schools.com/cssref/css_selectors.asp
vk.com/id58924119