Как да персонализирате Firefox Reader View за по-добра четливост
Reader View е популярна функция на браузъра Firefox променя външния вид на уеб страница и го прави по-разбираем от премахване на визуалния хаос като изображения, реклами, заглавки и странични ленти. Прегледът на Reader, обаче, не е достъпен за всички начални страници.
Ако функцията е достъпна за определена страница, ще намерите иконата, за да я активирате във формата на a икона с малка книга се показва вдясно от адресната лента.
Има няколко вградени опции, които позволяват на читателите да персонализират облика на Преглед на читателя. Ще разгледаме тези опции, преди да ви покажем какво можете да направите, за да персонализирате по-добре изгледа на Viewer View. За демонстрационни цели ще използвам статия от статията на National Geographic.
Предварително построени опции
Firefox Reader View се предлага с няколко предварително изградени опции за персонализиране, като например тъмно, светло и сепия фонове, регулируем размер на шрифта, и serif и sans-serif шрифтове. Можете да персонализирате темата чрез отменя правилата на CSS на тези вече съществуващи опции.
Използвам тъмна кожа със серифни шрифтове, а това означава, че ще трябва да замествам принадлежащите CSS класове, в моя случай .тъмен и .извивка на буква.
Ако искате да персонализирате друг вариант на тема (skin + font), ще трябва да го направите използвайте подходящите CSS селектори. Можете да ги проверите с помощта на Firefox Developer Tools, като натиснете F12.
Създайте CSS файл по избор
Трябва да създадете файл, наречен userContent.css вътре хром папка на папката на профила ви в Firefox за персонализациите ви в Reader View. За да намерите папката на профила си във Firefox, въведете за: подкрепа в лентата с адреси и натиснете 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 / * Когато е избран шрифт serif * /: root [hasbrowserhandlers = "true"] body.serif / * Когато sans-serif шрифтът е избрано * /: root [hasbrowserhandlers = "true"] body.sans-serif
Можете също да комбинирате класовете, за да насочите конкретна комбинация от настройки.
/ * Когато са избрани тъмни фон и серифни шрифтове * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Когато са избрани сепиен фон и sans-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! 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 цвят: # 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. Използвайте свои собствени правила за CSS, за да персонализирате дизайна на собствения си персонализиран изглед на браузъра Firefox.
Преди
След
Ако искате да се потопите по-дълбоко в персонализирането на темите на инструментите на Firefox, вижте предишния ми урок за персонализиране на темата за инструментите за разработчици на Firefox..
