Сафари – противоречивый браузер. Это своего рода брат Internet Explorer (Edge) от мира Apple. Он требует к себе специального подхода (-webkit-), часто бывает сложным и неудобным, долго получает новые фишки (gap, .webp) а некоторые фишки Safari можно принять за баги (взять хотя бы открытие видео в отдельном экране). Тем не менее, трудно спорить с тем, что он – самый популярный браузер среди устройств Apple и по некоторым данным самый быстрый.
Эта статья больше для пользователей, а не для разработчиков, поэтому сразу перейдём к делу.
Многие, наверное, знают, что для большинства браузеров есть расширения, которые позволяют организовать тёмную тему на любом сайте, даже том, который еще не подготовлен разработчиками к такой функции. Однако, немногие знают, что на браузер Safari тоже есть такое расширение (кто-то вообще не знает, что существуют расширения для этого браузера).
Как ни странно для закрытой экосистемы Apple, большинство расширений для браузера Safari можно найти в магазине приложений AppStore.
тут есть и addblock и различные “притифаеры”, но нас интересует другое – приложение Tamperish. Это расширение позволяет встраивать собственный код на любой сайт и изменять его как вам удобно – убирать лишние блоки, менять цвета, события, удалять рекламу.
Инструкция к изменению стилей сайтов в Safari
Она простейшая:
- Вводим в AppStore-поиске “Tamperish”
- Скачиваем приложение (это бесплатно)
- Заходим в Safari -> Настройки -> Расширения и ставим галочку напротив Tamperish.
Затем нам нужно открыть само приложение Tamperish и выбрать директорию, где мы будем писать стили. Это может быть любая папка на компьютере, но, если вы хотите, чтобы всё синхронизировалось между вашими mac, то лучше создать и использовать папку в icloud.
Выбрав папку, создаёте внутри неё папки с названиями сайтов, стили на которых хотите изменить. То есть, если я хочу поменять стили на ya.ru, то нужно создать папку ya.ru.
После этого создаю в ней файлы index.css и index.js и открываю с помощью любого редактора кода.
Если редактора кода нет – можно открыть просто через TextEdit.
Далее прописываю самое простое правило, какое только может быть для того чтобы сделать тёмную тему на сайте ya.ru:
*, *::after, *::before{
-webkit-filter: invert(90%);
filter: invert(90%);
}Вот как наш сайт выглядит теперь:
Да, немного бледновато, но это самый простой вариант и он будет неплохо работать с большинством сайтов. Для более точной кастомизации можно посмотреть код сайта, выделить нужные элементы и поменять их.
Например, меня раздражает Алиса в правом нижнем углу. Тогда я выберу её:
Найду класс или нужный индивидуальный атрибут, создам свой селектор и уберу её:
button[aria-label="Алиса"]{
display: none !important;
}В итоге получаем файл:
И Яндекс без Алисы:
А далее вашу фантазию никто не ограничивает! Дерзайте!