Як налаштувати Firefox Reader View для кращої читаності
Reader View - популярна функція браузера Firefox змінює зовнішній вигляд веб-сторінки та робить його більш читабельним від видалення зорового безладу такі як зображення, оголошення, заголовки та бічні панелі. Програма Reader View, однак, недоступна для всіх домашніх сторінок.
Якщо ця функція доступна для певної сторінки, ви знайдете піктограму, щоб увімкнути її у вигляді a маленька книга значок відображається праворуч від адресного рядка.
Є кілька вбудованих варіантів, які дозволяють читачам налаштувати зовнішній вигляд Перегляд читача. Ми розглянемо ці параметри, перш ніж показувати, що ви можете зробити для подальшої персоналізації вигляду Viewer View. Для демонстраційних цілей, я буду використовувати статтю статті National Geographic.
Попередньо побудовані параметри
Firefox Reader View поставляється з декількома вбудованими опціями налаштування, такими як темний, світлий і сепія фони, регульований розмірів шрифту, і зарубок і без зарубок шрифти. Тему можна налаштувати перевизначення правил CSS цих раніше існуючих варіантів.
Я використовую темну шкіру з шрифтами із зарубками, а це означає, що мені потрібно буде перевизначити належні класи CSS, у моєму випадку .темний і .зарубок.
Якщо ви хочете налаштувати інший варіант теми (skin + font), вам потрібно використовуйте відповідні CSS-селектори. Ви можете перевірити це за допомогою Firefox Developer Tools, натиснувши F12.
Створіть власний файл CSS
Потрібно створити файл, званий userContent.css всередині хром папки папку профілю Firefox для налаштувань Reader View. Щоб знайти папку профілю Firefox, введіть about: підтримка у рядок URL і натисніть Enter.
Ви опинитеся на сторінці, яка містить технічні дані, пов'язані з інсталяцією Firefox. Натисніть кнопку Показати папку, і вона відкриє папку профілю.
Створіть назву папки хром у папці профілю (якщо ви його ще не маєте), і називається файл userContent.css всередині хром папки. Шлях до файлу виглядає так:
Профілі \ tхром 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 / * Якщо шрифт без засічок вибрано * /: root [hasbrowserhandlers = "true"] body.sans-serif
Можна також поєднувати класи, щоб націлити на певну комбінацію налаштувань.
/ * Якщо вибрано темний фон і шрифт із зарубками * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Коли виділено шрифт sepia background і sans-serif * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Не використовувати загальний селектор : тіло root [hasbrowserhandlers = "true"] щоб одночасно націлити всі налаштування. Це буде працювати, але воно буде також впливають на інші сторінки веб-переглядача, як от about: newtab, як їхні кореневі елементи також несуть маєдослідників атрибут (який використовується для позначення обробників подій внутрішніх сторінок Firefox, таких як про: сторінок).
Ось код, який я додав до свого userContent.css. Я змінив сімейство шрифтів, стиль шрифту, кольори та розширив текстовий контейнер. Ви можете використовувати будь-які інші правила стилю за власним смаком.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain шрифт-сім'я: "courier new"! : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! колір: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain стиль шрифту: курсив! важливо; : 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 колір: # 06FEB0! важливий; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em!
Зауважте, що необхідно використовувати !важливо ключове слово в userContent.css для всіх правил CSS. Браузер додає вказані користувачем значення властивостей перед значеннями, вказаними автором (розробник даної веб-сторінки, тут Viewer View). Отже, будь-яке значення властивості, вказане користувачем, без значення !важливо ключове слово не працюватиме, якщо вказана таблиця стилів автора також націлюється на одне і те ж властивість, оскільки вона буде перевизначена.
Кінцевий результат
Нижче ви можете побачити зміни моєї теми перегляду Reader. Використовуйте власні правила CSS, щоб налаштувати дизайн власного персоналізованого перегляду Firefox Reader.
Раніше
Після
Якщо ви хочете глибше зануритися в тему налаштування інструментів Firefox, ознайомтеся з моїм попереднім посібником з налаштування теми інструментів розробників Firefox..
