Sådan tilpasser du Firefox Reader View til bedre læsbarhed
Reader View er et populært element i Firefox-browseren, det ændrer udseendet af en webside og gør det mere læseligt ved fjernelse af visuel rod f.eks. billeder, annoncer, overskrifter og sidebjælker. Reader View er dog ikke tilgængelig for alle hjemmesider.
Hvis funktionen er tilgængelig for en bestemt side, finder du ikonet for at aktivere det i form af a lille bogikon vises til højre for adresselinjen.
Der er et par indbyggede muligheder, der gør det muligt for læsere at tilpasse udseendet af Reader View. Vi vil se på disse muligheder, før vi viser dig, hvad du kan gøre for at tilpasse udseendet af Reader View yderligere. Til demo formål vil jeg bruge en artikel efter National Geographic artikel.
Forindbyggede muligheder
Firefox Reader View leveres med et par forudindstillede tilpasningsindstillinger som mørke, lys og sepia baggrunde, justerbar skrifttypestørrelser, og serif og sans-serif skrifttyper. Du kan tilpasse temaet ved overstyrer CSS reglerne af disse eksisterende muligheder.
Jeg bruger en mørk hud med serif skrifttyper, og det betyder, at jeg bliver nødt til at tilsidesætte de tilhørende CSS klasser, i mit tilfælde .mørk og .serif.
Hvis du vil tilpasse en anden temavariant (hud + skrifttype), skal du Brug de relevante CSS-selektorer. Du kan tjekke disse ud ved hjælp af Firefox Developer Tools ved at trykke på F12.
Opret den brugerdefinerede CSS-fil
Du skal oprette en fil, der hedder userContent.css inde i krom mappe af din Firefox profil mappe til dine læservisningstilpasninger. For at finde din Firefox-profilmappe, skriv om: støtte ind i adresselinjen og tryk på Enter.
Du finder dig selv på en side, der indeholder tekniske data relateret til din Firefox installation. Klik på knappen Vis mappe, og den åbner din profilmappe.
Opret en mappe, der hedder krom inde i din profilmappe (hvis du ikke har det endnu), og en fil kaldet userContent.css inde i krom folder. Filstien ser sådan ud:
... \ Profiler \\ Krom \ userContent.css
Tilføj de tilpassede CSS-regler
Når du har oprettet og åbnet userContent.css i en kode editor er det tid til at tilføje dine CSS regler. For at tilpasse designet af Reader View skal du målrette mod tag med de relevante selektorer.
Du kan bruge følgende vælgere til de forskellige standardindstillinger:
/ * Når mørk baggrund er valgt * /: root [hasbrowserhandlers = "true"] body.dark / * Når lys baggrund er valgt * /: root [hasbrowserhandlers = "true"] body.light / * Når sepia baggrund er valgt * /: root [hasbrowserhandlers = "true"] body.sepia / * Når serif skrifttype er valgt * /: root [hasbrowserhandlers = "true"] body.serif / * Når sans-serif font er valgt * /: root [hasbrowserhandlers = "true"] body.sans-serif
Du kan også kombinere klasserne for at målrette en bestemt kombination af indstillinger.
/ * Når der er valgt mørk baggrund og serif skrifttype * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Når sepia baggrund og sans-serif skrifttype er valgt * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Brug ikke den fælles vælger : root [hasbrowserhandlers = "true"] body at målrette alle indstillingerne på én gang. Det vil fungere, men det vil påvirker også andre browsersider, såsom om: newtab, da deres grundelementer også bærer hasbrowserhandlers attribut (som bruges til at markere begivenhedshåndteringen af interne Firefox-sider, f.eks om: sider).
Her er koden, jeg tilføjede til min userContent.css. Jeg har ændret skrifttypefamilien, skrifttypestil, farver og udvidet tekstbeholderen. Du kan bruge andre stilregler efter din egen smag.
/ ** userContent.css ************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # læser-domæne font-family: "courier new"! vigtigt; : root [hasbrowserhandlers = "true"] body.dark.serif baggrundsfarve: # 13131F! vigtigt; farve: # BAE3DB! vigtigt; : root [hasbrowserhandlers = "true"] body.dark.serif # læser-domæne font-style: kursiv! vigtigt; : 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 farve: # 06FEB0! vigtig; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Bemærk at det er nødvendigt at bruge !vigtig søgeord i userContent.css for alle CSS regler. Browseren tilføjer brugerspecificerede egenskabsværdier før de værdier, der er angivet af forfatteren (udvikleren af den givne webside, her læseren visning). Derfor er enhver brugerspecificeret egenskabsværdi uden !vigtig Søgeordet virker ikke, hvis et forfatterspecificeret stylesheet også retter sig mod den samme egenskab, da det vil blive tilsidesat.
Endeligt resultat
Du kan se ændringerne i mit Reader View-tema nedenfor. Brug dine egne CSS-regler til at tilpasse designet af din egen personlige Firefox Reader View.
Før
Efter
Hvis du vil dykke dybere i temaet tilpasning af Firefox-værktøjer, skal du tjekke min tidligere vejledning om tilpasningen af Firefox Developer Tools-temaet.
