Каждый из нас, блуждая по Интернету, иногда сталкивается со следующей проблемой: информация на сайте полезна и нужна, но ее очень сложно читать.
Либо шрифт слишком мелкий, либо фон темный, а текст светлый и глаза быстро устают. В этой статье я хочу рассказать о своем расширении для Firefox « Тюнер стиля », что позволяет настроить цвета и шрифты любого сайта удобным для вас способом.
Например, рассмотрим сайт rocklab.ru, где музыканты выкладывают свои работы, общаются и оценивают композиции.
Так уж получилось, что сайт изначально создан темным, а шрифты на нем светлые, что соответствует его рок-ориентации, но зачастую неудобно для пользователей.
Особенно если вы проводите много времени, например, на форуме.
Ниже приведено демо-видео работы расширения (без звука):
Итак, устанавливаем расширение с сайта addons.mozilla.org , откройте сайт, который редактируете, и нажмите на иконку 
на панели браузера.
На боковой панели Firefox появляются пять значков.
О назначении последних четырех мы поговорим позже, а пока нажмите на первый и перейдите в режим редактирования стиля сайта.
Идея расширения заключается в том, что любой пользователь может настроить стили сайта, даже тот, кто совершенно не знаком с HTML и CSS. Программа проходит по всему сайту и отображает список элементов в боковой панели.
Идентичные теги одного класса отображаются на панели одним блоком.
Теперь выбираем нужный нам элемент и приступаем к редактированию.
Выбрать можно либо наведя курсор на блок в сайдбаре (в этом случае элемент на странице будет выделен рамкой), либо кликнув по элементу на самой странице (в этом случае блок управления элементом будет выделен рамкой).
быть выделено на боковой панели).
Чтобы отменить выбор на самой странице, нужно еще раз нажать на выбранный элемент. Поскольку фон сайта не полностью черный, а серый, начнем редактирование с цвета шрифта и в последнюю очередь заменим цвет фона.
Выберите элемент на боковой панели и перетащите ползунок, чтобы сделать его цвет черным.
Далее измените цвета ссылок, например, на синий: 
Также мы зададим цвета ссылок навигации по страницам: 
Ну и последний шаг — установить светлый фон для страницы.
Всё, за четыре шага мы получили более удобный и читаемый контент.
Аналогично вы можете редактировать содержимое всех остальных элементов сайта.
Помимо изменения цвета шрифта и фона, вы можете редактировать размер шрифта и выбирать семейство.
Если вы хотите вернуть исходные настройки для какого-либо элемента, просто нажмите на ссылку «По умолчанию».
Теперь давайте посмотрим на назначение остальных четырех кнопок вверху боковой панели браузера.
Кнопка «Удалить изменения для этого сайта» 
предназначен для сброса настроек собственного сайта и возвращения ему первоначального вида, то есть делает сайт таким, каким его задумали создатели.
Кнопка «Удалить изменения для всех сайтов» 
удаляет все настройки для всех сайтов.
Кнопка настроек 
позволяет настроить цветовую тему самого расширения, выбрать цвет границ, которые будут выделять блоки на странице, а также имеет еще одну очень важную опцию «Изменить время хранения».
Чтобы не засорять память браузера, ненужные настройки, конечно, нужно удалить.
Вручную это делать просто неудобно, да и не все помнят, на каких сайтах вносили изменения.
Поэтому было решено предоставить пользователю возможность установить количество дней после его последнего посещения сайта, за которое он внес изменения, после чего эти изменения автоматически удаляются.
Например, вы перестали заходить в Google, и через 10 дней все изменения в его интерфейсе были стёрты.
И наконец, кнопка «Выйти из режима редактирования» 
удаляет список элементов с боковой панели и перезагружает открытую страницу сайта, но оставляет боковой панели открытой.
Напоследок можно добавить, что расширение можно использовать и другими способами.
Например, вам или вашему клиенту срочно понадобилось внести изменения в цвета или шрифты сайта.
Вы можете попробовать несколько разных вариантов элемента, а затем нажать кнопку CSS, чтобы получить новые стили, которые затем можно использовать в исходном коде вашего проекта.
В ближайшем будущем: добавление возможности включения и выключения фонового изображения, а также добавление возможности управления такими свойствами, как высота строки и стиль шрифта.
Теги: #Firefox #расширения #Firefox
-
Каковы Важные Проблемы Аутсорсинга Erp
19 Oct, 24 -
«Здесь В Одиночку Далеко Не Уйдешь»
19 Oct, 24 -
Как Микки Маус Изменил Авторские Права?
19 Oct, 24 -
Подкаст «Я Сказал На Каннада» (№ 11)
19 Oct, 24 -
Что Внутри Чат-Бота?
19 Oct, 24 -
Вещи, Которые Мы Хотим Сделать «Позже»
19 Oct, 24
