Настройка вида для чтения в Firefox

Вы никогда не нажимали в Firefox на кнопку с открытой книжкой именуемой – «Вид для чтения»? Честно признаюсь, что в своем iPad я частенько пользуюсь этой функцией, но на пк – никогда. Недавно мне стала известна статистика, которая показала мне, что довольно внушительный процент людей, использует вид для чтения на сайтах, поэтому я решил не отставать и поиграться с видом для чтения на своем блоге. Что из этого получилось, читайте далее…

Вступление

Из абзаца выше вы уже знаете, что вид для чтения – популярная функция браузера Firefox, которая изменяет вид веб-страницы и делает ее более читаемой, удаляя все визуальные помехи, такие как изображения, рекламу, заголовки, боковые панели и т.д. Однако, вид для чтения не доступен для всех стартовых страниц сайта.

Настройка вида для чтения в Firefox

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

Существует несколько встроенных опций, которые позволяют читателям настраивать вид для чтения. Я буду рассматривать и использовать функции, которые вам можно наглядно показать, а в качестве подопытного, будет выступать мой прошлый пост — Три секрета массивов в JavaScript, о которых вы могли не знать.

Встроенные опции

Вид для чтения в Firefox, поставляется с несколькими встроенными опциями для настройки страницы: темный/светлый/сепия фон, размеры/гарнитуры/засечки шрифтов. Вы также можете настроить свою тему, переопределив CSS правила для существующих опций.

Настройка вида для чтения в Firefox

Для примера я буду использовать темный скин с засечками шрифтов, а это значит, что я должен буду переопределить соответствующие классы — .dark и .serif.

Если вы захотите настроить другой вариант скина (фон + шрифт), то вы естественно должны будете использовать соответствующие CSS селекторы. Что бы узнать, какие селекторы изменять, вы можете зайти в панель разработчика, ну или просто нажать F12.

Настройка вида для чтения в Firefox

Создание CSS файла со своими стилями

Для начала вы должны создать файл userContent.css в директории chrome вашего профиля. Если эта папка у вас еще не создана, то создайте ее и положите в нее ваш файл со стилями. Что бы перейти в папку своего профиля просто введите в строке URL — about:support и нажмите Enter.

После этого вы окажитесь на странице, которая содержи технические данные связанные с вашей установленной версией Firefox. Нажмите на кнопку «Показать папку» и вы окажитесь в папке своего профиля.

Настройка вида для чтения в Firefox

Создайте внутри своего профиля папку chrome и положите туда ваш css файл. Общий путь в файлу, будет примерно похож на приведенный пример ниже.

Настройка вида для чтения в Firefox

Добавление CSS стилей в Firefox

После того как вы создали и открыли файл userContent.css в редакторе кода, пора добавить ваши CSS стили. Чтобы настроить вид для чтения правильно, вы должны начинать прописывать ваши стили с body.

Вы можете использовать следующие селекторы для различных опций по умолчанию:

:root[hasbrowserhandlers="true"] body.dark  {}

:root[hasbrowserhandlers="true"] body.light  {}

:root[hasbrowserhandlers="true"] body.sepia  {}

:root[hasbrowserhandlers="true"] body.serif {}

:root[hasbrowserhandlers="true"] body.sans-serif {}

Вы также можете объединять и комбинировать классы для определенных настроек.

:root[hasbrowserhandlers="true"] body.dark.serif  {}

:root[hasbrowserhandlers="true"] body.sans-serif.sepia  {}

Хочу вас также предупредить, чтобы вы не использовали следующий селектор:  :root[hasbrowserhandlers="true"] body т.к он переопределит ваш стиль везде, а это значит, что например на странице about:newtab ит.п, также будут использоваться ваши настройки.

Ниже я привожу код, который использовал у себя в css файле.

:root[hasbrowserhandlers="true"] body.dark.serif,
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
 font-family: "courier new" !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif {
 background-color: #13131F !important;
 color: #BAE3DB !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
 font-style: italic !important;
}
: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 !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif a:link {
 color: #83E7FF !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #container {
 max-width: 50em !important;
}

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

Хочу также обратить внимание, что для всех CSS правил необходимо использовать правило !important. Это нужно для того чтобы со 100% вероятностью перебить стили браузера по умолчанию, своими стилями.

На этом все, возможно, то, что описано в посте вам когда-нибудь пригодится 🙂 .

Подписаться на новые статьи