Kako prilagoditi preglednik preglednika Firefox za bolju čitljivost
Reader View je popularna značajka Firefox preglednika mijenja izgled web-stranice i čini čitljivijim po uklanjanjem vizualnog nereda kao što su slike, oglasi, zaglavlja i bočne trake. No Reader View nije dostupan za sve početne stranice.
Ako je značajka dostupna za određenu stranicu, pronaći ćete ikonu da biste je omogućili u obliku a ikona male knjige prikazano desno od adresne trake.
Postoji nekoliko ugrađenih opcija koje čitateljima omogućuju prilagodbu izgleda Prikaz čitača. Proučit ćemo te opcije prije nego što vam pokažemo što možete učiniti kako biste dodatno prilagodili izgled Reader Viewa. U demo svrhe koristit ću članak članka National Geographic.
Pre-Built Opcije
Pregled preglednika Firefox dolazi s nekoliko unaprijed pripremljenih opcija za prilagodbu kao što su tamna, svjetla i sepija pozadine, prilagodljiv veličine fonta, i serif i sans-serif stilovi. Temu možete prilagoditi nadjačati CSS pravila već postojećih opcija.
Koristim tamnu kožu sa serif fontovima, a to znači da ću morati nadjačati pripadajuće CSS klase, u mom slučaju .mrak i .crtica.
Ako želite prilagoditi drugu varijantu teme (skin + font), trebat ćete koristite odgovarajuće CSS selektore. Možete ih provjeriti uz pomoć Firefox Developer Tools tako da pritisnete F12.
Stvorite prilagođenu CSS datoteku
Trebate stvoriti datoteku pod nazivom userContent.css unutar krom u mapi mapu profila za Firefox za prilagodbe Reader Viewa. Da biste pronašli mapu profila za Firefox, upišite o: potpori u traku URL-a i pritisnite Enter.
Naći ćete se na stranici koja sadrži tehničke podatke vezane uz vašu instalaciju za Firefox. Kliknite gumb Prikaži mapu i otvorit će se mapa profila.
Stvorite mapu pod nazivom krom unutar mape profila (ako je još nemate) i naziva se datoteka userContent.css unutar krom mapa. Putanja datoteke izgleda ovako:
Profili \ t\ Krom \ userContent.css
Dodajte Custom CSS Rules
Nakon što ste stvorili i otvorili userContent.css u uređivaču koda, vrijeme je da dodate CSS pravila. Da biste prilagodili dizajn čitačkog prikaza, morate to učiniti ciljati označite odgovarajućim selektorima.
Možete koristiti sljedeće odabire za različite zadane opcije:
/ * Kada je odabrana tamna pozadina * /: root [hasbrowserhandlers = "true"] body.dark / * Kada je odabrana svijetla pozadina * /: root [hasbrowserhandlers = "true"] body.light / * Kada sepia pozadina je odabrana * /: root [hasbrowserhandlers = "true"] body.sepia / * Kada je odabran serif font * /: root [hasbrowserhandlers = "true"] body.serif / * Kada je sans-serif font odabrano * /: root [hasbrowserhandlers = "true"] body.sans-serif
Također možete kombinirati klase kako biste ciljali određenu kombinaciju postavki.
/ * Kada su odabrane tamne pozadine i fontovi serifa * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Kada su odabrani sepia pozadina i sans-serif font * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Nemojte koristiti običan birač : korijen [hasbrowserhandlers = "true"] tijelo za ciljanje svih postavki odjednom. Uspjet će, ali hoće utjecati i na druge stranice preglednika, kao što su o: newtab, kao i njihovi korijenski elementi hasbrowserhandlers atribut (koji se koristi za označavanje rukovatelja događaja na unutarnjim Firefox stranicama, kao što je oko: stranica).
Evo koda koji sam dodao svom userContent.css. Promijenila sam obitelj fonta, stil fonta, boje i proširila tekstualni spremnik. Možete koristiti bilo koja druga pravila stila prema vlastitom ukusu.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! : root [hasbrowserhandlers = "true"] body.dark.serif pozadina-boja: # 13131F! važno; boja: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain 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! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em!
Imajte na umu da je potrebno koristiti !važno ključna riječ u userContent.css za sva pravila CSS-a. Preglednik dodaje korisničke vrijednosti svojstava prije vrijednosti koje je odredio autor (programer određene web stranice, ovdje Reader View). Dakle, bilo koja vrijednost svojstva koju je odredio korisnik bez !važno ključna riječ neće raditi ako autorski zadani stilski stil cilja isto svojstvo, jer će biti poništeno.
Konačni rezultat
U nastavku možete vidjeti izmjene moje teme preglednika Reader. Koristite vlastita pravila za CSS da biste prilagodili dizajn vlastitog prilagođenog pregleda preglednika Firefox.
Prije
Nakon
Ako želite zaroniti dublje u prilagođavanje tema alata za Firefox, pogledajte moj prethodni vodič o prilagodbi teme alata za razvojne alate za Firefox.
