Slik tilpasser du Firefox Reader View for bedre lesbarhet
Reader View er en populær funksjon av Firefox-nettleseren, det endrer utseendet av en nettside, og gjør det mer lesbart av fjerner visuell rot for eksempel bilder, annonser, overskrifter og sidebjelker. Reader View er imidlertid ikke tilgjengelig for alle hjemmesider.
Hvis funksjonen er tilgjengelig for en bestemt side, finner du ikonet for å aktivere det i form av a lite bokikon vises til høyre for adressefeltet.
Det er noen innebygde alternativer som tillater leserne å tilpasse utseendet til Leservisning. Vi ser på disse alternativene før du viser hva du kan gjøre for å tilpasse utseendet til leservisningen. For demoformål vil jeg bruke en artikkel etter National Geographic artikkel.
Pre-Built Options
Firefox Reader View leveres med noen forhåndsbygde tilpasningsalternativer som mørkt, lys og sepia bakgrunn, regulerbar skriftstørrelser, og serif og sans-serif skrifttyper. Du kan tilpasse temaet ved overstyrer CSS-reglene av disse eksisterende mulighetene.
Jeg bruker en mørk hud med seriffonter, og dette betyr at jeg må overstyr de tilhørende CSS-klassene, i mitt tilfelle .mørk og .serif.
Hvis du vil tilpasse en annen temavariant (hud + skrift), må du bruk de riktige CSS-valgene. Du kan sjekke disse ut ved hjelp av Firefox Developer Tools ved å trykke på F12.
Lag den egendefinerte CSS-filen
Du må opprette en fil som heter userContent.css inne i krom mappe av Firefox-profilmappen din for tilpassing av leservisning. For å finne Firefox-profilmappen din, skriv inn om: support inn i nettadresselinjen og trykk på Enter.
Du finner deg selv på en side som inneholder tekniske data relatert til din Firefox installasjon. Klikk på Vis mappe-knappen, og den åpner profilmappen din.
Opprett en mappe som heter krom i profilmappen din (hvis du ikke har den ennå), og en fil som heter userContent.css inne i krom mappe. Filbanen ser slik ut:
... \ Profiler \\ Krom \ userContent.css
Legg til de tilpassede CSS-reglene
Når du har opprettet og åpnet userContent.css i en kodeditor, er det på tide å legge til CSS-reglene dine. For å tilpasse utformingen av Reader View må du mål på merk med de aktuelle valgene.
Du kan bruke følgende valgmuligheter for de forskjellige standardalternativene:
/ * Når mørk bakgrunn er valgt * /: root [hasbrowserhandlers = "true"] body.dark / * Når lys bakgrunn er valgt * /: root [hasbrowserhandlers = "true"] body.light / * når sepia bakgrunn er valgt * /: root [hasbrowserhandlers = "true"] body.sepia / * Når serif font er valgt * /: root [hasbrowserhandlers = "true"] body.serif / * Når sans-serif font er valgt * /: root [hasbrowserhandlers = "true"] body.sans-serif
Du kan også kombinere klassene, for å målrette mot en bestemt kombinasjon av innstillinger.
/ * Når mørk bakgrunn og serif font er valgt * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Når sepia bakgrunn og sans-serif font er valgt * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Ikke bruk fellesvelgeren : root [hasbrowserhandlers = "true"] kroppen å målrette alle innstillingene samtidig. Det vil fungere, men det vil påvirker også andre nettlesersider, som for eksempel om: newtab, som deres roten elementer også bære hasbrowserhandlers attributt (som brukes til å markere hendelsesbehandlerne av interne Firefox-sider, for eksempel handle om: sider).
Her er koden jeg la til min userContent.css. Jeg endret skriftfamilien, skrifttypestil, farger og utvidet tekstbeholderen. Du kan bruke andre stilregler i henhold til din egen smak.
/ ** userContent.css ************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! viktig; : root [hasbrowserhandlers = "true"] body.dark.serif bakgrunnsfarge: # 13131F! viktig; farge: # BAE3DB! viktig; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: kursiv! viktig; : 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! viktig; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container maksimal bredde: 50em! viktig;
Legg merke til at det er nødvendig å bruke !viktig søkeord i userContent.css for alle CSS-regler. Nettleseren legger til brukerdefinerte eiendomsverdier før verdiene angitt av forfatteren (utvikleren av den gitte nettsiden, her leservisningen). Derfor er enhver brukerspesifisert eiendomsverdi uten !viktig Søkeordet virker ikke hvis et forfatter-spesifisert stilark også retter seg mot samme eiendom, da det vil bli tilsidesatt.
Endelig resultat
Du kan se endringene i temaet Leservisning nedenfor. Bruk dine egne CSS-regler for å tilpasse utformingen av din egen personlige Firefox Reader View.
Før
Etter
Hvis du vil dykke dypere i temaet tilpasning av Firefox-verktøy, sjekk ut min forrige veiledning om tilpasningen av Firefox Developer Tools-temaet.
