Kako prilagoditi pogled brskalnika Firefox za boljšo berljivost

Reader View je priljubljena funkcija brskalnika Firefox spremeni videz spletne strani in omogoča bolj berljivo jo odstranitev vizualne nereda kot so slike, oglasi, glave in stranske vrstice. Prikaz brskalnika ni na voljo za vse domače strani.

Če je funkcija na voljo za določeno stran, boste našli ikono, ki jo bo omogočila v obliki a ikona majhne knjige desno od naslovne vrstice.

Obstaja nekaj vgrajenih možnosti, ki bralcem omogočajo, da prilagodijo videz izdelka Pogled bralnika. Te možnosti bomo preučili, preden vam pokažemo, kaj lahko naredite, da bi še bolj prilagodili videz bralnika. Za demo namene bom uporabil članek članka National Geographic.

Možnosti pred vgradnjo

Pregledovalnik brskalnika Firefox ima nekaj vnaprej pripravljenih možnosti prilagajanja, kot so temna, lahka in sepija ozadja, nastavljiv velikosti pisav, in serif in sans-serif pisave. Teme lahko prilagodite prevladati pravila CSS obstoječih možnosti.

Uporabljam temno kožo s serifnimi pisavami, kar pomeni, da bom moral preglasiti pripadajoče CSS razrede, v mojem primeru .temno in .serif.

Če želite prilagoditi drugo tematsko različico (skin + font), boste morali uporabite ustrezne CSS selektorje. To lahko preverite s pomočjo Firefox Developer Tools, tako da pritisnete F12.

Ustvarite datoteko CSS po meri

Ustvariti morate datoteko, imenovano userContent.css znotraj krom mapo mapo profila Firefox za prilagoditve pregledovalnika Reader. Če želite najti mapo s profilom za Firefox, vnesite about: podpora v vrstico URL in pritisnite Enter.

Boste našli na strani, ki vsebuje tehnične podatke, povezane z namestitvijo Firefoxa. Kliknite gumb Pokaži mapo in odpre mapo Profil.

Ustvarite imenovano mapo krom znotraj mape profila (če je še nimate) in imenovana datoteka userContent.css znotraj krom mapo. Pot datoteke izgleda tako:

Profili \ tchrome userContent.css 

Dodajte pravila CSS po meri

Ko ste ustvarili in odprli userContent.css v urejevalniku kod je čas, da dodate pravila CSS. Če želite prilagoditi zasnovo pogleda bralnika, morate to storiti ciljno usmerjeni na z ustreznimi izbirniki.

Za različne privzete možnosti lahko uporabite naslednje izbirnike:

 / * Ko je izbrano temno ozadje * /: root [hasbrowserhandlers = "true"] body.dark  / * Ko je izbrano svetlo ozadje * /: root [hasbrowserhandlers = "true"] body.light  / * Ko sepia ozadje je izbrano * /: root [hasbrowserhandlers = "true"] body.sepia  / * Ko je izbrana pisava serifa * /: root [hasbrowserhandlers = "true"] body.serif  / * Če je sans-serif pisava izbrano * /: root [hasbrowserhandlers = "true"] body.sans-serif  

Lahko tudi kombinirate razrede, da ciljate na določeno kombinacijo nastavitev.

 / * Ko izberete temno ozadje in pisavo serifa * /: root [hasbrowserhandlers = "true"] body.dark.serif  / * Ko izberete sepia ozadje in sans-serif pisavo * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia 

Ne uporabljajte skupni izbirnik : root [hasbrowserhandlers = "true"] za ciljanje vseh nastavitev hkrati. Delovalo bo, vendar bo vplivajo tudi na druge strani brskalnika, kot naprimer about: newtab, kot njihovi korenski elementi nosijo tudi hasbrowserhandlers atribut (ki se uporablja za označevanje obdelovalcev dogodkov na notranjih straneh Firefox, na primer približno: strani).

Tukaj je koda, ki sem jo dodal svojemu userContent.css. Spremenil sem družino pisav, slog pisave, barve in razširil vsebino z besedilom. Uporabite lahko katera koli druga slogovna pravila po lastnem okusu.

 / ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # domena za branje font-family: "courier new"! : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! barva: # BAE3DB! pomembna; : 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 barva: # 06FEB0! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! 

Upoštevajte, da morate uporabiti !pomembno ključna beseda v userContent.css za vsa pravila CSS. Brskalnik doda vrednosti lastnosti, ki jih določi uporabnik pred vrednostmi, ki jih je določil avtor (razvijalec dane spletne strani, tukaj Reader View). Zato je vsaka vrednost lastnosti, ki jo določi uporabnik, brez !pomembno ključna beseda ne bo delovalo, če je na seznamu slogovnih predlogov, ki ga je podal avtor, cilj isto lastnost, saj bo preklicana.

Končni rezultat

Spodaj si lahko ogledate spremembe moje teme Pogleda v bralniku. Uporabite svoja pravila za CSS, da prilagodite oblikovanje lastnega prilagojenega pogleda brskalnika Firefox.

Pred tem

Po

Če se želite poglobiti v tematsko prilagajanje orodij za Firefox, si oglejte moje prejšnje vadnice o prilagajanju teme orodij za razvijalce Firefox..