Firefox Reader Viewin mukauttaminen parempaan luettavuuteen
Reader View on suosittu Firefox-selaimen ominaisuus muuttaa ulkoasua Web-sivun, ja tekee siitä helpommin luettavissa mennessä poistamalla visuaalinen sotku kuten kuvat, mainokset, otsikot ja sivupalkit. Reader View ei kuitenkaan ole käytettävissä kaikissa kotisivuissa.
Jos ominaisuus on käytettävissä tietylle sivulle, sen kuvake on a pieni kirja kuvake osoiterivin oikealla puolella.
On olemassa muutamia sisäänrakennettuja vaihtoehtoja, joiden avulla lukijat voivat muokata ulkoasua Lukijanäkymä. Katsomme näitä vaihtoehtoja, ennen kuin näytämme, mitä voit tehdä, jotta henkilökohtaisemmaksi saat Reader-näkymän ulkoasun. Demokäyttöön käytän National Geographic -artikkelin artikkelia.
Esiasennetut asetukset
Firefox Reader View sisältää muutamia valmiiksi rakennettuja mukautusvaihtoehtoja, kuten tumma, kevyt ja seepia taustat, säädettävä kirjasinkokoja, ja serif ja sans-serif kirjasimia. Voit muokata teemaa CSS-sääntöjä näistä olemassa olevista vaihtoehdoista.
Käytän tummaa ihoa, jossa on serif-fontteja, ja tämä tarkoittaa sitä, että minun on ohitettava kuuluvan CSS-luokat, minun tapauksessani .tumma ja .serif.
Jos haluat muokata toista teemavaihtoehtoa (iho + fontti), sinun täytyy käytä sopivia CSS-valitsimia. Voit tarkistaa nämä Firefoxin kehitystyökalujen avulla valitsemalla F12.
Luo mukautettu CSS-tiedosto
Sinun täytyy luoda tiedosto nimeltä userContent.css sisällä kromi kansio Firefox-profiilikansion Reader-näkymän mukautuksiin. Jos haluat löytää Firefox-profiilikansion, kirjoita Tietoja: tuki URL-osoiteriville ja paina Enter.
Löydät itsesi sivulta, joka sisältää Firefoxin asennukseen liittyvät tekniset tiedot. Napsauta Näytä kansio -painiketta, ja se avaa Profiili-kansion.
Luo nimetty kansio kromi Profiilikansion sisällä (jos sinulla ei ole sitä vielä), ja tiedosto nimeltään userContent.css sisällä kromi kansio. Tiedostopolku näyttää tältä:
… Profiilit\ Kromi \ userContent.css
Lisää mukautetut CSS-säännöt
Kun olet luonut ja avannut userContent.css koodieditorissa on aika lisätä CSS-säännöt. Reader-näkymän suunnittelun mukauttamiseksi sinun täytyy kohdista tunniste asianmukaisilla valinnoilla.
Voit käyttää seuraavia valintoja eri oletusasetuksiin:
/ * Kun on valittu tumma tausta * /: root [hasbrowserhandlers = "true"] body.dark / * Kun valoisa tausta on valittu * /: root [hasbrowserhandlers = "true"] body.light / * Kun seepia tausta on valittu * /: root [hasbrowserhandlers = "true"] body.sepia / * Kun serif-fontti on valittu * /: root [hasbrowserhandlers = "true"] body.serif / * Kun sans-serif-fontti on valittu * /: root [hasbrowserhandlers = "true"] body.sans-serif
Voit myös yhdistää luokat, kohdistaa tietyn asetusten yhdistelmän.
/ * Kun on valittu tumma tausta ja serif-fontti * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Kun seepia-tausta ja sans-serif-fontti on valittu * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Älä käytä yhteinen valitsin : root [hasbrowserhandlers = "true"] runko kohdistaa kaikki asetukset kerralla. Se toimii, mutta se tulee myös muut selaimen sivut, kuten Tietoja: newtab, koska niiden juurielementit kantavat myös hasbrowserhandlers määrite (jota käytetään merkitsemään sisäisten Firefox-sivujen tapahtumakäsittelijät, kuten noin: sivua).
Tässä on koodi, jonka lisäsin userContent.css. Muutin kirjasintyyppiä, kirjasintyyliä, värejä ja laajennin tekstisäiliötä. Voit käyttää muita tyylisääntöjä oman maun mukaan.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "kuriiri uusi"! : root [hasbrowserhandlers = "true"] body.dark.serif taustaväri: # 13131F! väri: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: kursivoitu! : 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 väri: # 06FEB0! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! tärkeää;
Huomaa, että on tarpeen käyttää !tärkeä avainsana vuonna userContent.css kaikkien CSS-sääntöjen osalta. Selain lisää käyttäjän määrittelemät ominaisuusarvot ennen tekijän määrittämiä arvoja (tietyn verkkosivun kehittäjä, tässä lukijanäkymä). Näin ollen mikä tahansa käyttäjän määrittämä ominaisuusarvo ilman !tärkeä avainsana ei toimi, jos kirjoittajakohtainen tyylitaulukko kohdistuu samaan ominaisuuteen, koska se ohitetaan.
Lopullinen tulos
Alla näkyvät Reader View -teeman muutokset. Käytä omia CSS-sääntöjäsi mukauttamaan oman henkilökohtaisen Firefox Reader-näkymän suunnittelua.
Ennen
Jälkeen
Jos haluat sukeltaa syvemmälle Firefox-työkalujen teeman muokkaamiseen, tutustu edelliseen opetusohjelmaani Firefoxin kehittäjätyökalujen teeman mukauttamisesta.
