Как настроить Firefox Reader View для лучшей читабельности
Reader View - популярная функция браузера Firefox, которая меняет внешний вид веб-страницы, и делает его более читабельным от удаление визуального беспорядка такие как изображения, реклама, заголовки и боковые панели. Просмотр Reader доступен, однако, не для всех домашних страниц..
Если функция доступна для определенной страницы, вы найдете значок, чтобы включить ее в форме маленький значок книги отображается справа от адресной строки.
Есть несколько встроенных опций, которые позволяют читателям настраивать внешний вид Читатель View. Мы рассмотрим эти варианты, прежде чем показать вам, что вы можете сделать, чтобы персонализировать внешний вид Reader View. В демонстрационных целях я буду использовать статью от National Geographic.
Готовые варианты
Firefox Reader View поставляется с несколькими встроенными параметрами настройки, такими как темный, светлый и сепия фоны, регулируемый размеры шрифта, и с засечками и без засечек шрифты. Вы можете настроить тему по переопределение правил CSS из этих ранее существующих вариантов.
Я использую темный скин со шрифтами с засечками, и это означает, что мне нужно будет переопределить принадлежащие классы CSS, в моем случае .темно а также .засечка.
Если вы хотите настроить другой вариант темы (скин + шрифт), вам нужно будет используйте соответствующие селекторы CSS. Вы можете проверить это с помощью инструментов разработчика Firefox, нажав F12.
Создайте пользовательский файл CSS
Вам нужно создать файл с именем userContent.css внутри хром папка из папка вашего профиля Firefox для вашего читателя Просмотр настроек. Чтобы найти папку профиля Firefox, введите о: поддержка в адресную строку и нажмите Enter.
Вы окажетесь на странице, которая содержит технические данные, связанные с вашей установкой Firefox. Нажмите кнопку Показать папку, и она откроет папку вашего профиля.
Создайте папку с именем хром внутри вашей папки профиля (если у вас ее еще нет) и файла с именем userContent.css внутри хром папка. Путь к файлу выглядит так:
… \ Профили \\ Хром \ userContent.css
Добавьте пользовательские правила CSS
Как только вы создали и открыли userContent.css в редакторе кода пришло время добавить ваши правила CSS. Чтобы настроить дизайн Reader View, вам необходимо цель пометить с соответствующими селекторами.
Вы можете использовать следующие селекторы для различных параметров по умолчанию:
/ * Когда выбран темный фон * /: root [hasbrowserhandlers = "true"] body.dark / * Когда выбран светлый фон * /: root [hasbrowserhandlers = "true"] body.light / * При сепии выбран фон * /: root [hasbrowserhandlers = "true"] body.sepia / * Когда выбран шрифт с засечками * /: root [hasbrowserhandlers = "true"] body.serif / * Когда используется шрифт без засечек selected * /: root [hasbrowserhandlers = "true"] body.sans-serif
Вы также можете комбинировать классы, чтобы настроить конкретную комбинацию настроек.
/ * Когда выбран темный фон и шрифт с засечками * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Когда выбран фон сепия и шрифт без засечек * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Не использовать общий селектор : root [hasbrowserhandlers = "true"] тело чтобы настроить все параметры сразу. Это будет работать, но это будет также влияет на другие страницы браузера, такие как о: newtab, поскольку их корневые элементы также несут hasbrowserhandlers атрибут (который используется для обозначения обработчиков событий внутренних страниц Firefox, таких как около: страниц).
Вот код, который я добавил к своему userContent.css. Я изменил семейство шрифтов, стиль шрифта, цвета и расширил текстовый контейнер. Вы можете использовать любые другие правила стиля по своему вкусу.
/ ** userContent.css ***************************/: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! важный; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! важный; цвет: # BAE3DB! важно; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! важный; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3,: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! важный; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! важный; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! важный;
Обратите внимание, что необходимо использовать !важный ключевое слово в userContent.css для всех правил CSS. Браузер добавляет указанные пользователем значения свойств до значений, указанных автором (разработчик данной веб-страницы, здесь Reader View). Следовательно, любое указанное пользователем значение свойства без !важный ключевое слово не будет работать, если указанная автором таблица стилей также нацелена на то же свойство, так как оно будет переопределено.
Конечный результат
Вы можете увидеть изменения моей темы Reader View ниже. Используйте свои собственные правила CSS, чтобы настроить дизайн своего собственного персонализированного представления для Firefox Reader..
До
После
Если вы хотите глубже погрузиться в настройку темы инструментов Firefox, посмотрите мой предыдущий учебник по настройке темы инструментов разработчика Firefox.
