A Firefox Reader nézet testreszabása a jobb olvashatóság érdekében
A Reader View a Firefox böngésző népszerű jellemzője megváltoztatja a megjelenést egy weboldal megnyitása, és olvashatóbbá teszi által a vizuális zavar eltávolítása például képek, hirdetések, fejlécek és oldalsávok. Az Olvasó nézet azonban nem elérhető minden kezdőlapra.
Ha a szolgáltatás elérhető egy bizonyos oldalra, akkor az ikon jelenik meg annak érdekében, hogy az a kis könyv ikonra a címsor jobb oldalán látható.
Van néhány beépített opció, amely lehetővé teszi az olvasók számára, hogy testreszabják a Olvasó nézet. Ezeket az opciókat megvizsgáljuk, mielőtt megmutatjuk, mit tehetsz a Reader View megjelenésének további személyre szabásához. Demo célokra a National Geographic cikk egy cikkét fogom használni.
Előre épített beállítások
A Firefox Reader View néhány előre felépített testreszabási opcióval rendelkezik, mint például sötét, világos és szépia háttérrel, állítható betűméretek, és serif és sans-serif betűtípusok. A témát testreszabhatja felülírja a CSS szabályait ezek közül a meglévő lehetőségek közül.
Sötét bőrt használok, serif betűtípusokkal, és ez azt jelenti, hogy felül kell írnom a hozzá tartozó CSS osztályokat, az én esetemben .sötét és .betűtalp.
Ha szeretne egy másik témaválasztót (bőr + betűtípust) testreszabni, akkor szüksége lesz rá használja a megfelelő CSS szelektorokat. Ezeket a Firefox Fejlesztőeszközök segítségével ellenőrizheti az F12 ütővel.
Hozzon létre egyéni CSS fájlt
Létre kell hoznia egy hívott fájlt userContent.css benne króm mappája a Firefox profil mappáját a Reader View testreszabásokhoz. Adja meg a Firefox profil mappáját about: támogatás az URL sávba, és nyomja meg az Enter billentyűt.
Egy olyan oldalon találja magát, amely a a Firefox telepítésével kapcsolatos technikai adatok. Kattintson a Mappa megjelenítése gombra, és megnyitja a Profil mappát.
Hozzon létre egy nevezett mappát króm a Profil mappa belsejében (ha még nincs), és egy hívott fájl userContent.css benne króm mappát. A fájl elérési útja így néz ki:
… Profilok\ Chrome \ userContent.css
Adja hozzá az egyéni CSS szabályokat
Miután létrehozta és megnyitotta userContent.css egy kódszerkesztőben itt az ideje, hogy hozzáadja a CSS szabályait. Ahhoz, hogy testre szabhassa a Reader nézetét, szükség van rá célozza a címke a megfelelő szelektorokkal.
A következő alapbeállításokat használhatja a különböző alapértelmezett beállításokhoz:
/ * Ha sötét háttér van kiválasztva * /: root [hasbrowserhandlers = "true"] body.dark / * Ha világos háttér van kiválasztva * /: root [hasbrowserhandlers = "true"] body.light / * Amikor szépia háttér van kiválasztva * /: root [hasbrowserhandlers = "true"] body.sepia / * Ha a serif betűkészlet van kiválasztva * /: root [hasbrowserhandlers = "true"] body.serif / * Amikor a sans-serif betűtípus kiválasztott * /: root [hasbrowserhandlers = "true"] body.sans-serif
Az osztályokat is kombinálhatja, hogy beállíthassa a beállítások egy adott kombinációját.
/ * Ha sötét háttér és serif betűtípus van kiválasztva * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Ha szépia háttér és sans-serif betűtípus van kiválasztva * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Ne használja a közös választó : root [hasbrowserhandlers = "true"] test az összes beállítást egyszerre célozhatja meg. Ez működni fog, de meg fog más böngészőoldalakat is érint, mint például about: newtab, mivel a gyökérelemek is hordozzák a hasbrowserhandlers attribútum (amelyet a belső Firefox oldalak eseménykezelőinek jelölésére használnak, mint például ról ről: oldal).
Itt van a kód, amit hozzáadtam a sajáthoz userContent.css. Megváltoztattam a betűtípuscsaládot, a betűtípust, a színeket és kibővítettem a szövegtartályt. Bármely más stílusszabályt saját ízlés szerint használhat.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "futár új"! : root [hasbrowserhandlers = "true"] body.dark.serif háttérszín: # 13131F! fontos; szín: # BAE3DB! fontos; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: dőlt! : 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! fontos; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! fontos; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! fontos;
Ne feledje, hogy szükséges a !fontos kulcsszó a userContent.css minden CSS szabályra. A böngésző hozzáad a felhasználó által megadott tulajdonságértékeket a szerző által megadott értékek előtt (az adott weboldal fejlesztője, itt a Reader nézet). Ennélfogva a felhasználó által megadott tulajdonságok a !fontos A kulcsszó nem fog működni, ha egy szerző által megadott stíluslap ugyanazt a tulajdonságot is célozza, mivel felülírja azt.
Végeredmény
Az alábbiakban láthatod a Reader View témám változásait. Használja saját CSS szabályait, hogy testre szabhassa saját személyre szabott Firefox Reader nézetét.
Előtt
Után
Ha mélyebben szeretne merülni a Firefox eszközök témakörének testreszabásával, nézze meg az előző bemutatóm a Firefox-fejlesztői eszközök témájának testreszabásáról.
