Настройка внешнего вида сайтов локально с помощью Stylish

Stylish позволяет локально изменять CSS сайтов прямо в браузере: быстро исправлять мелкие раздражители или полностью перелицовывать страницы. В статье пошагово показано, как найти нужный элемент, протестировать правило и сохранить стиль для Gmail, а также даны чек-листы, шаблоны и рекомендации по совместимости.

Введение

Веб-дизайнерам фактически ставят невыполнимую задачу — создать интерфейс, который понравится всем. На практике это невозможно: даже успешный редизайн найдет недовольных пользователей. Иногда недовольство собирается в массы и компании вынуждены откатывать изменения. Но что делать, если изменение раздражает лично вас, а компания не возвращает старый вид? Не обязательно ждать: локальные пользовательские стили решают такую проблему быстро.

Important

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

Что такое Stylish

Stylish — это бесплатное расширение для Firefox и Chrome, которое позволяет применять собственные стили к элементам веб-страниц. Даже если вы никогда не писали CSS, базовые изменения делаются быстро: увеличить шрифт, скрыть раздражающую панель, добавить подписи к иконкам. Stylish удобен как для мелкого косметического ремонта, так и для полной переработки внешнего вида страницы.

Коротко

• Поддерживает целевые домены, поддомены и шаблоны URL
• Работает локально в браузере; можно экспортировать или делиться стилями
• Поддерживает приоритеты через правило important

UserStyles.org — готовые решения от сообщества

Если вас раздражает что-то в популярном сервисе, велика вероятность, что вы не одиноки. UserStyles.org — площадка, где пользователи публикуют готовые стили. Например, стиль, добавляющий подписи к иконкам в Gmail, может вернуть удобство, которое устраивает многих.

Notes

• Некоторые стили заточены под устаревшие версии сайтов и могут не работать
• Полноценные «перелицовки» часто ломают функциональность, поэтому выбирайте простые и целевые правки

Как создать собственный простой стиль — пошагово

Ниже приведён практический сценарий: я решил увеличить размер шрифта сообщений в Gmail, не меняя размер остальных элементов интерфейса.

Шаг 1. Найдите элемент

1. Откройте страницу, которую хотите изменить.
2. Правой кнопкой мыши щёлкните по тексту или блоку и выберите Просмотреть элемент.
3. Инструмент разработчика подсветит выбранный элемент и покажет его селектор, например div#2d6.ii.gt.adP.adO или div.gs.

Пояснение

• Селектор состоит из тегов, классов и ID. Самая надёжная стратегия — выбрать селектор средней ширины: не настолько узкий, чтобы он затрагивал только один элемент, и не настолько широкий, чтобы затронуть лишнее.

Шаг 2. Откройте панель правил в Stylish

После выбора элемента нажмите кнопку Style или аналог в интерфейсе Stylish, чтобы увидеть применяемые к элементу CSS-правила. Stylish позволяет пробовать изменения в реальном времени.

Шаг 3. Посмотрите все правила и найдите нужное свойство

Снимите фильтр «Only user styles», чтобы видеть полный перечень правил, включая те, которые задаёт сайт. Прокрутите до свойства font-size или другого свойства, которое хотите изменить.

Шаг 4. Экспериментируйте с CSS прямо в панели

Применяйте различные значения, чтобы понять, что лучше выглядит. Эффект виден немедленно, но пока не сохраняется.

Совет

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

Минимальный пример стиля для Gmail

Ниже пример стиля, который увеличивает размер шрифта для содержимого письма. Просто вставьте его в окно написания нового стиля в Stylish и укажите домен mail.google.com.

@-moz-document domain("mail.google.com") {
  div.gs {
    font-size: 20px !important;
  }
}

Объяснение

• @-moz-document domain(“mail.google.com”) ограничивает действие стиля только доменом Gmail
• div.gs относится к области сообщения
• !important заставляет правило иметь приоритет над встроенными стилями сайта

Сохранение и публикация

Когда в предпросмотре результат вас устроил, нажмите Сохранить. Можно оставить стиль только для себя или опубликовать на UserStyles.org, чтобы поделиться с сообществом.

Краткая методология: быстрый процесс для правки стиля

1. Определить проблему и цель правки (пример: увеличить размер шрифта сообщений)
2. Выявить подходящий селектор через элемент инспектора
3. Протестировать изменения в панели Stylish
4. Ограничить область действия стиля (домен или маска URL)
5. Сохранить и проверить в реальном использовании
6. При необходимости опубликовать или экспортировать стиль

Чек-листы по ролям

Для рядового пользователя

• Найти элемент, который раздражает
• Экспериментально изменить одно свойство
• Сохранить и проверить на разных письмах

Для дизайнера или фронтендера

• Выбрать устойчивый селектор, избегая нестабильных классов
• Проверить на разных разрешениях экрана
• Не ломать доступность: убедиться, что контраст и масштаб остаются читабельными

Для администратора корпоративной сети

• Проверить политике безопасности расширений
• Предупредить сотрудников о методах локальной кастомизации
• Рассмотреть централизованные решения, если нужно стандартное оформление

Когда это не сработает

• Сайт использует динамически генерируемые классы, которые меняются при каждой загрузке
• Встроенные стили задаются inline с более высоким приоритетом и сложно переопределяются
• Сайт применяет строгую Content Security Policy, блокирующую расширения или изменение стилей
• На страницах с сильно модульной архитектурой изменение одного селектора может приводить к багам в других местах

Совет

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

Альтернативные подходы

• Расширение Tampermonkey или Greasemonkey для более сложной логики через JavaScript
• Пользовательский CSS в браузерах, которые поддерживают подключение локальных стилей
• Использование Reader Mode в браузере для упрощённого отображения текста (работает не для всех сайтов)

Сравнение кратко

• Stylish: проще и быстрее для CSS-правок
• Tampermonkey: даёт больше возможностей, но требует JS
• Reader Mode: минимализм, мало контроля

Технические советы и чаршит

Шорохатый чек-лист технических решений

• Всегда ограничивайте действие стиля доменом
• Всегда тестируйте на мобильной версии сайта
• Используйте инспектор для поиска точного селектора
• Не забывайте про !important только когда необходимо

Читы и готовые сниппеты

1. Скрыть панель с рекламой

@-moz-document domain("example.com") {
  .ad-banner, .sponsored { display: none !important; }
}

2. Увеличить интерлиний

@-moz-document domain("mail.google.com") {
  div.gs { line-height: 1.6 !important; }
}

3. Сделать шрифт более контрастным

@-moz-document domain("mail.google.com") {
  div.gs { color: #111 !important; font-weight: 500 !important; }
}

Критерии приёмки

• Правка применяется только на целевом домене
• Не ломает другие части интерфейса на страницах того же домена
• Сохраняется при перезагрузке вкладки и после закрытия браузера
• Не ухудшает доступность и читаемость

Совместимость и подводные камни

• Разные браузеры имеют нюансы в обработке расширений. Проверяйте и на Firefox, и на Chrome
• Публичные обновления сайтов могут сломать ваши селекторы — перезапишите стиль при необходимости
• В некоторых корпоративных сетях установка расширений может быть запрещена

Risk matrix

• Низкий риск: изменение шрифта, цвета текста, скрытие украшений
• Средний риск: изменение layout блоков, скрытие интерактивных элементов
• Высокий риск: полная перестройка DOM через JS, что может сломать функционал

Глоссарий в одну строку

• Селектор: правило CSS, которое указывает, к каким элементам применять стиль
• Inline style: стиль, заданный непосредственно в HTML-теге, имеет высокий приоритет
• !important: директива CSS, повышающая приоритет правила

Короткие советы по безопасности и приватности

• Расширения получают доступ к содержимому страниц, поэтому используйте проверенные расширения
• Не публикуйте в открытом доступе стили, которые содержат приватные данные или завязки на внутренние идентификаторы

Резюме

Stylish — быстрый и простой инструмент для локальной кастомизации сайтов. Он особенно полезен, когда вас раздражает конкретная мелочь в интерфейсе, а массовые изменения со стороны разработчиков отсутствуют. Правильная методика включает выбор устойчивого селектора, тестирование и ограничение области действия стиля. В сложных случаях можно комбинировать Stylish с пользовательскими скриптами.

Если что-то осталось непонятным, опишите проблему и я помогу подобрать селектор или написать минимальный стиль.