Kaip pritaikyti „Firefox Reader“ vaizdą geresniam skaitymui

„Reader View“ yra populiari „Firefox“ naršyklės ypatybė keičia išvaizdą tinklalapio, ir daro jį lengviau skaitomą iki pašalinti regimąjį netvarką pvz., atvaizdai, skelbimai, antraštės ir šoninės juostos. Visiems pagrindiniams puslapiams „Reader View“ nėra.

Jei funkcija prieinama tam tikram puslapiui, rasite piktogramą, kad ji būtų a mažos knygos piktograma rodomas dešinėje adreso juostos pusėje.

Yra keletas įmontuotų parinkčių, leidžiančių skaitytojams pritaikyti Skaitytojo rodinys. Prieš rodydami, ką galite padaryti, kad galėtumėte dar labiau suasmeninti „Reader View“ išvaizdą, peržiūrėsime šias parinktis. Demonstraciniais tikslais naudosiu „National Geographic“ straipsnio straipsnį.

Pasirinktinės parinktys

„Firefox Reader View“ pateikiama keletas iš anksto sukurtų tinkinimo parinkčių, pvz., Tamsus, lengvas ir sepijos fonas, reguliuojamas šrifto dydžius, ir serifas ir sans-serifas šriftai. Galite tinkinti temą viršija CSS taisykles iš šių esamų galimybių.

Aš naudoju tamsią odą su serif šriftais, o tai reiškia, kad turėsiu nepaisyti priklausančių CSS klasių, mano atveju .tamsus ir .serif.

Jei norite pritaikyti kitą temos variantą (odos + šriftą), jums reikės naudoti atitinkamus CSS selektorius. Šiuos veiksmus galite patikrinti naudodami „Firefox“ kūrėjų įrankius, paspaudę F12.

Sukurkite pasirinktinį CSS failą

Turite sukurti failą, pavadintą userContent.css viduje chromas aplankas „Firefox“ profilio aplanką „Reader View“ pritaikymams. Norėdami rasti „Firefox“ profilio aplanką, įveskite apie: palaikymas į URL juostą ir paspauskite „Enter“.

Jūs atsidursite puslapyje, kuriame yra techniniai duomenys, susiję su „Firefox“ įdiegimu. Spustelėkite mygtuką Rodyti aplanką ir atidarys aplanką Profilis.

Sukurkite aplanką, pavadintą chromas viduje savo profilio aplanką (jei to dar neturite) ir failą, pavadintą userContent.css viduje chromas aplanką. Failo kelias atrodo taip:

… \ Tchromas userContent.css 

Pridėkite „Custom CSS“ taisykles

Sukūrę ir atidarę userContent.css kodo redaktoriuje atėjo laikas pridėti savo CSS taisykles. Norint pritaikyti „Reader View“ dizainą, reikia nukreipti su atitinkamais selektoriais.

Įvairiems numatytoms parinktims galite naudoti šiuos parinkiklius:

 / * Kai pasirinktas tamsus fonas * /: root [hasbrowserhandlers = "true"] body.dark  / * Kai pasirinktas šviesus fonas * /: root [hasbrowserhandlers = "true"] body.light  / * Kai sepija fonas pasirinktas * /: root [hasbrowserhandlers = "true"] body.sepia  / * Kai pasirenkamas serifinis šriftas * /: root [hasbrowserhandlers = "true"] body.serif  / * Kai sans-serif šriftas yra pasirinktas * /: root [hasbrowserhandlers = "true"] body.sans-serif  

Taip pat galite derinti klases, kad nukreiptumėte konkretų nustatymų derinį.

 / * Kai pasirinktas tamsus fonas ir serifinis šriftas * /: root [hasbrowserhandlers = "true"] body.dark.serif  / * Kai pasirenkamas sepijos fonas ir sans-serif šriftas * /: root [hasbrowserhandlers = "true") ] body.sans-serif.sepia 

Nenaudokite bendrojo selektoriaus : root [hasbrowserhandlers = "true"] kūnas nukreipti visus nustatymus vienu metu. Jis veiks, bet jis bus taip pat turi įtakos kitiems naršyklės puslapiams, toks kaip apie: newtab, kaip jų šaknų elementai taip pat turi turėtojai atributas (naudojamas žymėti vidinių „Firefox“ puslapių įvykių tvarkytojus, pvz., apie: puslapiai).

Štai kodas, kurį pridėjau prie savo userContent.css. Aš pakeitiau šriftų šeimą, šrifto stilių, spalvas ir išplėčiau teksto talpyklą. Jūs galite naudoti kitas stiliaus taisykles pagal savo skonį.

 / ** 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 fono spalva: # 13131F! spalvos: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: kursyvas! : 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: nuoroda color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! svarbu; 

Atkreipkite dėmesį, kad būtina naudoti !svarbu raktinis žodis userContent.css visų CSS taisyklių. Naršyklė prideda vartotojo nurodytas turto vertes prieš autoriaus nurodytas vertes (konkretaus tinklalapio kūrėjas, čia skaitytojo vaizdas). Taigi, bet kokia vartotojo nurodyta turto vertė be !svarbu raktinis žodis neveiks, jei autoriaus nurodyta stilių lentelė taip pat bus nukreipta į tą patį turtą, nes jis bus panaikintas.

Galutinis rezultatas

Žemiau galite matyti mano Reader View temos pakeitimus. Naudokite savo CSS taisykles, kad pritaikytumėte savo asmeninio „Firefox Reader View“ dizainą.

Prieš

Po

Jei norite giliau įsitraukti į „Firefox“ įrankių temos pritaikymą, patikrinkite mano ankstesnę pamoką apie „Firefox“ kūrėjų įrankių temos pritaikymą.