Hur man anpassar Firefox Reader View för bättre läsbarhet
Reader View är en populär funktion i Firefox-webbläsaren, det ändrar utseendet av en webbsida och gör det mer läsligt av avlägsnar visuell rodnad till exempel bilder, annonser, rubriker och sidfält. Reader View är dock inte tillgängligt för alla hemsidor.
Om funktionen är tillgänglig för en viss sida hittar du ikonen för att aktivera den i form av a liten bokikon visas till höger om adressfältet.
Det finns några inbyggda alternativ som gör att läsarna kan anpassa utseendet på Reader View. Vi tittar på dessa alternativ innan du visar vad du kan göra för att ytterligare anpassa utseendet på läsaren. För demoändamål ska jag använda en artikel enligt National Geographic-artikeln.
Förkonstruerade alternativ
Firefox Reader View levereras med några förbyggda anpassningsalternativ som mörk, ljus och sepia bakgrunder, justerbar typsnittstorlekar, och serif och sans-serif typsnitt. Du kan anpassa temat med överväga CSS-reglerna av dessa befintliga alternativ.
Jag använder en mörk hud med serif typsnitt, och det betyder att jag måste överväga de tillhörande CSS klasserna, i mitt fall .mörk och .serif.
Om du vill anpassa en annan temavariant (hud + typsnitt) måste du använd lämpliga CSS-väljare. Du kan kolla dessa ut med hjälp av Firefox Developer Tools genom att trycka på F12.
Skapa den anpassade CSS-filen
Du måste skapa en fil som heter userContent.css inuti krom mapp av din Firefox-profilmapp för dina anpassningar av läsaren. För att hitta din Firefox-profilmapp, skriv om: support till URL-fältet och tryck på Enter.
Du hittar dig själv på en sida som innehåller tekniska data relaterade till din Firefox-installation. Klicka på Visa mappknappen, och den öppnar din profilmapp.
Skapa en mapp som heter krom inuti din profilmapp (om du inte har den än) och en fil som heter userContent.css inuti krom mapp. Filbanan ser ut så här:
... \ Profiler \\ Krom \ userContent.css
Lägg till de anpassade CSS-reglerna
När du har skapat och öppnat userContent.css I en kodredigerare är det dags att lägga till dina CSS-regler. För att anpassa utformningen av Reader View behöver du rikta in sig på tagga med lämpliga selektorer.
Du kan använda följande väljare för de olika standardalternativen:
/ * När mörk bakgrund är vald * /: root [hasbrowserhandlers = "true"] body.dark / * När ljus bakgrund är vald * /: root [hasbrowserhandlers = "true"] body.light / * När sepia bakgrunden är vald * /: root [hasbrowserhandlers = "true"] body.sepia / * När serif-teckensnitt är valt * /: root [hasbrowserhandlers = "true"] body.serif / * När sans-serif-teckensnittet är valda * /: root [hasbrowserhandlers = "true"] body.sans-serif
Du kan också kombinera klasserna för att rikta in en specifik kombination av inställningar.
/ * När mörk bakgrund och serif typsnitt är markerade * /: root [hasbrowserhandlers = "true"] body.dark.serif / * När sepia bakgrund och sans-serif font väljs * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Använd inte den gemensamma väljaren : root [hasbrowserhandlers = "true"] body att rikta alla inställningar på en gång. Det kommer att fungera, men det kommer det påverkar även andra webbläsarsidor, som om: newtab, som deras grundämnen bär också hasbrowserhandlers attribut (som används för att markera händelsehanterare på interna Firefox-sidor, t.ex. handla om: sidor).
Här är koden som jag lagt till i mina userContent.css. Jag ändrade typsnittfamiljen, typsnittstil, färger och breddade textbehållaren. Du kan använda andra stilregler enligt din egen smak.
/ ** userContent.css ************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! viktigt; : root [hasbrowserhandlers = "true"] body.dark.serif bakgrundsfärg: # 13131F! viktigt; färg: # BAE3DB! viktigt; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domän 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 färg: # 06FEB0! viktigt; : root [hasbrowserhandlers = "true"] body.dark.serif a: länk color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Observera att det är nödvändigt att använda !Viktig sökord i userContent.css för alla CSS-regler. Webbläsaren lägger till användardefinierade egenskapsvärden före de värden som anges av författaren (utvecklaren av den givna webbsidan, här läsaren). Alltså användarspecifikt fastighetsvärde utan !Viktig sökord fungerar inte om ett författningsspecifikt formatark också riktar sig till samma egenskap, eftersom det kommer att överskridas.
Slutresultat
Du kan se ändringarna i mitt läsaren Visa-tema nedan. Använd egna CSS-regler för att anpassa utformningen av din egen personliga Firefox Reader View.
Innan
Efter
Om du vill dyka djupare i temaanpassningen av Firefox-verktyg, kolla in min tidigare handledning om anpassningen av Firefox Developer Tools-temat.
