Hoe Firefox Reader View aan te passen voor betere leesbaarheid

Reader View is een populaire functie van de Firefox-browser verandert het uiterlijk van een webpagina, en maakt het leesbaarder door visuele rommel verwijderen zoals afbeeldingen, advertenties, kopteksten en zijbalken. Reader View is echter niet beschikbaar voor alle startpagina's.

Als de functie beschikbaar is voor een bepaalde pagina, vindt u het pictogram om het in de vorm van a in te schakelen klein boekpictogram weergegeven aan de rechterkant van de adresbalk.

Er zijn een paar ingebouwde opties waarmee lezers het uiterlijk van de kunnen aanpassen Reader View. We zullen naar die opties kijken voordat we u laten zien wat u kunt doen om het uiterlijk van de Reader-weergave verder te personaliseren. Voor demo-doeleinden zal ik een artikel van National Geographic-artikel gebruiken.

Vooraf gebouwde opties

Firefox Reader View wordt geleverd met enkele vooraf gemaakte aanpassingsopties zoals donker, licht en sepia achtergronden, verstelbaar lettergroottes, en serif en schreefloos lettertypes. U kunt het thema aanpassen met de CSS-regels overschrijven van deze reeds bestaande opties.

Ik gebruik een donkere skin met serif-lettertypen en dit betekent dat ik de bijbehorende CSS-klassen moet overschrijven, in mijn geval .donker en .serif.

Als u een andere themavariant (skin + lettertype) wilt aanpassen, moet u dit doen gebruik de juiste CSS-selectors. Je kunt deze bekijken met behulp van de Firefox-ontwikkelaarstools door op F12 te drukken.

Maak het aangepaste CSS-bestand

U moet een bestand maken met de naam userContent.css binnen in de chroom map van uw Firefox-profielmap voor aanpassingen in je leesvenster. Om uw Firefox-profielmap te vinden, typt u about: support in de URL-balk en druk op Enter.

U bevindt zich op een pagina met de technische gegevens met betrekking tot uw Firefox-installatie. Klik op de knop Map weergeven om uw profielmap te openen.

Maak een map met de naam chroom in uw profielmap (als u die nog niet hebt) en een bestand met de naam userContent.css binnen in de chroom map. Het bestandspad ziet er als volgt uit:

... \ Profielen \\ Chrome \ userContent.css

Voeg de aangepaste CSS-regels toe

Als je eenmaal hebt gemaakt en geopend userContent.css in een code-editor is het tijd om je CSS-regels toe te voegen. Om het ontwerp van de Reader-weergave aan te passen, moet u dit doen richten op de tag met de juiste selectors.

U kunt de volgende selectors gebruiken voor de verschillende standaardopties:

 / * Wanneer donkere achtergrond is geselecteerd * /: root [hasbrowserhandlers = "true"] body.dark  / * Als lichte achtergrond is geselecteerd * /: root [hasbrowserhandlers = "true"] body.light  / * When sepia achtergrond is geselecteerd * /: root [hasbrowserhandlers = "true"] body.sepia  / * Wanneer serif-lettertype is geselecteerd * /: root [hasbrowserhandlers = "true"] body.serif  / * Wanneer schreefloos lettertype is geselecteerd * /: root [hasbrowserhandlers = "true"] body.sans-serif

U kunt de klassen ook combineren om een specifieke combinatie van instellingen te targeten.

 / * Wanneer donkere achtergrond en serif-lettertype zijn geselecteerd * /: root [hasbrowserhandlers = "true"] body.dark.serif  / * Wanneer sepia-achtergrond en schreefloos lettertype zijn geselecteerd * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia

Gebruik niet de gemeenschappelijke selector : root [hasbrowserhandlers = "true"] body om alle instellingen tegelijk te targeten. Het zal werken, maar het zal ook van invloed op andere browserpagina's, zoals about: newtab, aangezien hun wortelelementen ook de hasbrowserhandlers attribuut (dat wordt gebruikt om de gebeurtenishandlers van interne Firefox-pagina's te markeren, zoals wat betreft: pagina's).

Hier is de code die ik aan mijn heb toegevoegd userContent.css. Ik heb de lettertypefamilie, lettertypestijl, kleuren gewijzigd en de tekstcontainer verbreed. U kunt andere stijlregels gebruiken naar eigen smaak.

 / ** userContent.css *********************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domein font-family: "koerier nieuw"! belangrijk; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important; kleur: # BAE3DB! belangrijk; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domein 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 color: # 06FEB0! important; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;

Merk op dat het noodzakelijk is om de !belangrijk zoekwoord in userContent.css voor alle CSS-regels. De browser voegt door de gebruiker opgegeven eigenschapswaarden toe vóór de waarden gespecificeerd door de auteur (de ontwikkelaar van de gegeven webpagina, hier de Reader-weergave). Vandaar dat elke door de gebruiker opgegeven eigenschapswaarde zonder de !belangrijk trefwoord werkt niet als een door de auteur opgegeven stijlblad ook op dezelfde eigenschap is gericht, omdat deze wordt onderdrukt.

Eindresultaat

U kunt de wijzigingen in mijn Reader View-thema hieronder bekijken. Gebruik uw eigen CSS-regels om het ontwerp van uw eigen gepersonaliseerde Firefox Reader-weergave aan te passen.

Voor

Als je dieper wilt duiken in de thema-aanpassing van Firefox-tools, bekijk dan mijn vorige tutorial over het aanpassen van het Firefox-thema voor ontwikkelaarstools.