Firefoxi lugejavaate kohandamine parema loetavuse tagamiseks
Reader View on Firefoxi brauseri populaarne omadus muudab välimust veebilehe ja muudab selle loetavamaks kõrval visuaalse segaduse kõrvaldamine näiteks pildid, reklaamid, päised ja külgribad. Lugejavaade pole aga kõigi kodulehtede puhul saadaval.
Kui see funktsioon on teatud lehekülje jaoks saadaval, leiad selle ikooni, mis võimaldab seda a väike raamatu ikoon kuvatakse aadressiriba paremal pool.
On mõned sisseehitatud valikud, mis võimaldavad lugejatel kohandada selle välimust Lugejavaade. Me vaatame neid võimalusi enne, kui näitame teile, mida saate teha, et isikupärastada lugejavaadet. Demo eesmärgil kasutan ma National Geographic'i artikli artiklit.
Eeltöödeldud suvandid
Firefoxi lugejavaates on mõned eelnevalt ehitatud kohandamisvõimalused, nagu tume, kerge ja seepia taustaga, reguleeritav fondi suurused, ja serif ja sans-serif kirjatüübid. Te saate teemat kohandada CSS-i reegleid nendest olemasolevatest valikutest.
Ma kasutan tumeda nahaga serif fonte ja see tähendab, et mul on vaja üle kanda CSS klassid, minu puhul .tume ja .serif.
Kui soovite kohandada teist teemavarianti (naha + font), peate seda tegema kasutage sobivaid CSS-valikuid. Neid saate kontrollida Firefoxi arendusvahendite abil, lööb F12.
Loo kohandatud CSS-fail
Peate looma faili nimega userContent.css sees kroom kausta oma Firefoxi profiili kausta teie Reader View kohanduste jaoks. Firefoxi profiili kausta leidmiseks sisestage umbes: toetus URL-i riba ja vajutage Enter.
Leiad end lehel, mis sisaldab teie Firefoxi installimisega seotud tehnilised andmed. Klõpsake nupul Näita kausta ja see avab kausta Profiil.
Loo nimega kaust kroom Profiili kausta sees (kui seda veel ei ole) ja faili nimega userContent.css sees kroom kausta. Faili tee näeb välja selline:
… ProfiilidChrome'i kontent.css
Lisage kohandatud CSS-reeglid
Kui olete loonud ja avanud userContent.css koodiredaktoris on aeg lisada oma CSS-reeglid. Readeri vaate kujunduse kohandamiseks peate sihtige märgistada sobivate valikulülititega.
Erinevate vaikevalikute jaoks saate kasutada järgmisi valikuid:
/ * Kui on valitud tumedad taustad * /: root [hasbrowserhandlers = "true"] body.dark / * Valides taustvalgust * /: root [hasbrowserhandlers = "true"] body.light / * Seepia taust on valitud * /: root [hasbrowserhandlers = "true"] body.sepia / * Kui on valitud serif font * /: root [hasbrowserhandlers = "true"] body.serif / * Kui sans-serif on font valitud * /: root [hasbrowserhandlers = "true"] body.sans-serif
Saate ka klassid kombineerida, et sihtida teatud seadete kombinatsiooni.
/ * Kui valitud on tume taust ja serif-font * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Kui on valitud sepia taust ja sans-serif font * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Ära kasuta tavalisele valijale : root [hasbrowserhandlers = "true"] keha kõik seaded korraga sihtida. See toimib, kuid ta seda teeb mõjutab ka teisi brauseri lehti, nagu näiteks umbes: newtab, kui nende juurelemendid kannavad ka hasbrowserhandlers atribuut (mida kasutatakse sisemiste Firefoxi lehtede sündmuste käitlejate märkimiseks, näiteks umbes: leheküljed).
Siin on kood, mille ma lisasin userContent.css. Ma muutsin fontide perekonda, fondi stiili, värve ja laiendasin teksti konteinerit. Teil on võimalik kasutada muid stiilireegleid vastavalt oma maitsele.
/ ** 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 taustavärv: # 13131F! värv: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: kursiiv! : 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! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! oluline;
Pange tähele, et seda on vaja kasutada !oluline märksõna userContent.css kõigi CSS-reeglite puhul. Brauser lisab kasutaja määratud vara väärtused enne autori poolt määratud väärtusi (antud veebilehe arendaja, siin Readeri vaade). Seega, mis tahes kasutaja määratud vara väärtus ilma !oluline märksõna ei toimi, kui autori poolt määratud stiilileht on suunatud samale omadusele, kuna see tühistatakse.
Lõplik tulemus
Allpool on näha minu Reader View teema muudatused. Oma isikliku Firefoxi lugejavaate kujunduse kohandamiseks kasutage oma CSS-reegleid.
Enne seda
Pärast
Kui soovite Firefoxi tööriistade teemade kohandamises sügavamalt sukelduda, vaadake minu eelmist juhendit Firefoxi arendustööriistade teema kohandamise kohta.
