Вы никогда не нажимали в Firefox на кнопку с открытой книжкой именуемой – «Вид для чтения»? Честно признаюсь, что в своем iPad я частенько пользуюсь этой функцией, но на пк – никогда. Недавно мне стала известна статистика, которая показала мне, что довольно внушительный процент людей, использует вид для чтения на сайтах, поэтому я решил не отставать и поиграться с видом для чтения на своем блоге. Что из этого получилось, читайте далее…
Вступление
Из абзаца выше вы уже знаете, что вид для чтения – популярная функция браузера Firefox, которая изменяет вид веб-страницы и делает ее более читаемой, удаляя все визуальные помехи, такие как изображения, рекламу, заголовки, боковые панели и т.д. Однако, вид для чтения не доступен для всех стартовых страниц сайта.
Если функция будет доступна для определенной страницы, то вы без труда найдете значок в форме маленькой развернутой книги, который находится справа от строки поиска.
Существует несколько встроенных опций, которые позволяют читателям настраивать вид для чтения. Я буду рассматривать и использовать функции, которые вам можно наглядно показать, а в качестве подопытного, будет выступать мой прошлый пост — Три секрета массивов в JavaScript, о которых вы могли не знать.
Встроенные опции
Вид для чтения в Firefox, поставляется с несколькими встроенными опциями для настройки страницы: темный/светлый/сепия фон, размеры/гарнитуры/засечки шрифтов. Вы также можете настроить свою тему, переопределив CSS правила для существующих опций.
Для примера я буду использовать темный скин с засечками шрифтов, а это значит, что я должен буду переопределить соответствующие классы — .dark
и .serif
.
Если вы захотите настроить другой вариант скина (фон + шрифт), то вы естественно должны будете использовать соответствующие CSS селекторы. Что бы узнать, какие селекторы изменять, вы можете зайти в панель разработчика, ну или просто нажать F12.
Создание CSS файла со своими стилями
Для начала вы должны создать файл userContent.css в директории chrome вашего профиля. Если эта папка у вас еще не создана, то создайте ее и положите в нее ваш файл со стилями. Что бы перейти в папку своего профиля просто введите в строке URL — about:support и нажмите Enter.
После этого вы окажитесь на странице, которая содержи технические данные связанные с вашей установленной версией Firefox. Нажмите на кнопку «Показать папку» и вы окажитесь в папке своего профиля.
Создайте внутри своего профиля папку chrome и положите туда ваш css файл. Общий путь в файлу, будет примерно похож на приведенный пример ниже.
Добавление 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% вероятностью перебить стили браузера по умолчанию, своими стилями.
На этом все, возможно, то, что описано в посте вам когда-нибудь пригодится 🙂 .