Ako si prispôsobiť Firefox Reader View pre lepšiu čitateľnosť
Reader View je obľúbená funkcia prehliadača Firefox zmení vzhľad webovej stránky a je čitateľnejšie podľa odstránenie vizuálneho neporiadku ako sú obrázky, reklamy, hlavičky a postranné lišty. Zobrazenie čitateľa však nie je k dispozícii pre všetky domovské stránky.
Ak je táto funkcia k dispozícii pre určitú stránku, ikona ju nájdete v tvare a malá ikona knihy zobrazí sa vpravo od panela s adresou.
Existuje niekoľko vstavaných možností, ktoré umožňujú čitateľom prispôsobiť vzhľad Zobrazenie čitateľa. Budeme sa pozerať na tieto možnosti a ukázať vám, čo môžete urobiť pre ďalšie prispôsobenie vzhľadu Reader View. Pre demografické účely budem používať článok podľa článku National Geographic.
Predvolené možnosti
Firefox Reader View prichádza s niekoľkými predvolenými možnosťami prispôsobenia, ako je tmavá, svetlá a sépia zázemím, nastaviteľný veľkosť písma, a serif a sans-serif písma. Túto tému môžete prispôsobiť nadradené pravidlám CSS týchto predtým existujúcich možností.
Používam tmavú kožu so šerifovými písmenami a to znamená, že v mojom prípade budem musieť prepísať príslušné triedy CSS .tmavý a .serif.
Ak chcete prispôsobiť iný variant motívu (skin + font), budete musieť použite príslušné voliče CSS. Môžete ich skontrolovať pomocou nástrojov pre vývojárov Firefoxu stlačením tlačidla F12.
Vytvorte vlastný súbor CSS
Musíte vytvoriť súbor s názvom userContent.css vnútri chróm priečinok priečinka profilu Firefoxu pre prispôsobenia v aplikácii Reader. Ak chcete nájsť priečinok profilu Firefoxu, napíšte about: podporu do panela s adresou URL a stlačte kláves Enter.
Nachádzate sa na stránke, ktorá obsahuje technické údaje súvisiace s inštaláciou Firefoxu. Kliknite na tlačidlo Zobraziť priečinok a otvorí sa priečinok Profil.
Vytvorte priečinok s názvom chróm v priečinku profilu (ak ho ešte nemáte) a súbor s názvom userContent.css vnútri chróm zložky. Cesta k súboru vyzerá takto:
... \ Profiles \\ Chrome \ userContent.css
Pridajte vlastné pravidlá CSS
Akonáhle ste vytvorili a otvorili userContent.css v editore kódov, je čas pridať pravidlá CSS. Ak chcete prispôsobiť dizajn prehliadača Reader, musíte to urobiť zacieľte na označte príslušným výberom.
Pre rôzne predvolené možnosti môžete použiť nasledujúce voľby:
/ * Keď je vybraté tmavé pozadie * /: root [isbrowserhandlers = "true"] body.dark / * Keď je vybraté svetlo pozadia * /: je vybrané pozadie * /: root [isbrowserhandlers = "true"] body.sepia / * Keď je vybrané písmo serif * /: root [isbrowserhandlers = "true"] body.serif vybrané * /: root [hasbrowserhandlers = "true"] body.sans-serif
Triedy môžete kombinovať aj za účelom zacielenia na konkrétnu kombináciu nastavení.
/ * Keď je vybraté tmavé pozadie a serif písmo * /: root [isbrowserhandlers = "true"] body.dark.serif / * Keď je vybrané písmo sépia a sans serif * /: ] body.sans-serif.sepia
Nepoužívať spoločný výber : root [hasbrowserhandlers = "true"] telo na zacielenie všetkých nastavení naraz. Bude to fungovať, ale to bude ovplyvňujú aj iné stránky prehliadača, ako napr about: newtab, ako ich koreňové prvky tiež nesú hasbrowserhandlers atribút (ktorý sa používa na označenie obslužných programov udalostí interných stránok Firefoxu, ako napr about: stran).
Tu je kód, ktorý som pridal k môjmu userContent.css. Zmenila som rodinu fontov, štýl písma, farby a rozšíril textový kontajner. Môžete použiť akékoľvek iné pravidlá štýlu podľa vlastného vkusu.
/ ** userContent.css *************************** /: root [isbrowserhandlers = "true"] body.dark.serif,: koreň [isbrowserhandlers = "true"] body.dark.serif čítačka-doména font-family: "kuriérom nové"! : koreň [isbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! farba: # BAE3DB! : koreň [isbrowserhandlers = "true"] body.dark.serif čítačka-doména font-style: italic! important; : root [isbrowserhandlers = "true"] body.dark.serif h1,: root [isbrowserhandlers = "true"] body.dark.serif h2, koreň [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 farba: # 06FEB0! : koreň [isbrowserhandlers = "true"] body.dark.serif a: odkaz farba: # 83E7FF! : koreň [isbrowserhandlers = "true"] body.dark.serif #container max-width: 50em!
Všimnite si, že je potrebné použiť !dôležitý kľúčové slovo v userContent.css pre všetky pravidlá CSS. Prehliadač pridáva hodnoty vlastníctva určené používateľom pred hodnotami určenými autorom (vývojár danej webovej stránky, tu Reader View). Preto akékoľvek užívateľsky špecifikované hodnoty vlastnosti bez !dôležitý kľúčové slovo nebude fungovať, ak štýl špecifikovaný autorom bude tiež zameraný na ten istý majetok, pretože bude prepisovaný.
Konečný výsledok
Môžete vidieť zmeny v mojej téme Reader View. Použite svoje vlastné pravidlá CSS na prispôsobenie návrhu vášho osobného Firefox Reader View.
pred
po
Ak sa chcete ponoriť hlbšie do prispôsobenia tém aplikácií prehliadača Firefox, pozrite si môj predchádzajúci návod na prispôsobenie témy pre vývojárov programu Firefox.
