Cum de a personaliza vizualizarea Firefox Reader pentru o mai bună citire
Reader View este o caracteristică populară a browserului Firefox, asta schimbă aspectul a unei pagini web și face mai ușor de citit de eliminând aglomerația vizuală cum ar fi imaginile, anunțurile, anteturile și barele laterale. Reader View este, oricum nu este disponibil, pentru toate paginile de start.
Dacă funcția este disponibilă pentru o anumită pagină, veți găsi pictograma pentru ao activa în forma unui mică pictogramă de carte afișat în partea dreaptă a barei de adrese.
Există câteva opțiuni încorporate care permit cititorilor să personalizeze aspectul Vizualizare cititor. Vom analiza aceste opțiuni înainte de a vă arăta ce puteți face pentru a personaliza în continuare aspectul Reader View. Pentru scopuri demonstrative, voi folosi un articol din articolul National Geographic.
Opțiuni pre-construite
Firefox Reader View vine cu câteva opțiuni de personalizare pre-construite, cum ar fi întuneric, lumină și sepia fundaluri, reglabil dimensiunile fontului, și serif și sans serif typeface. Puteți particulariza tema prin suprasarcindu-se regulilor CSS din aceste opțiuni existente.
Folosesc o piele intunecata cu fonturi serif si asta inseamna ca va trebui sa suprascriu clasele CSS apartinand, in cazul meu .întuneric și .serif.
Dacă doriți să personalizați o altă variantă temă (piele + font), va trebui să faceți utilizați selectorii CSS corespunzători. Puteți să le verificați cu ajutorul instrumentelor pentru dezvoltatori Firefox apăsând pe F12.
Creați fișierul Custom CSS
Trebuie să creați un fișier numit userContent.css în interiorul crom dosarul de folderul dvs. de profil Firefox pentru personalizările dvs. din Reader View. Pentru a găsi folderul profilului dvs. Firefox, tastați despre: suport în bara de adrese URL și apăsați Enter.
Veți găsi pe o pagină care conține datele tehnice legate de instalarea Firefox. Faceți clic pe butonul Afișați dosarul și acesta va deschide dosarul Profil.
Creați un dosar numit crom în dosarul de profil (dacă nu îl aveți încă) și un fișier numit userContent.css în interiorul crom pliant. Calea fișierului arată astfel:
... \ Profiles \\ Crom \ userContent.css
Adăugați regulile personalizate CSS
Odată ce ați creat și ați deschis userContent.css într-un editor de coduri, este timpul să adăugați regulile CSS. Pentru a personaliza designul Reader View, trebuie să faceți acest lucru vizați eticheta cu selectorii corespunzători.
Puteți utiliza următorii selectori pentru diferite opțiuni prestabilite:
/ * Când este selectat fundalul întunecat * /: root [isbrowserhandlers = "true"] body.light / * Când sepia este selectat * /: root [isbrowserhandlers = "true"] body.sepia / * Cand fontul serif este selectat * /: root [isbrowserhandlers = "true"] body.serif selectat * /: root [isbrowserhandlers = "true"] body.sans-serif
De asemenea, puteți combina clasele, pentru a viza o combinație specifică de setări.
/ * Cand sunt selectate fontul sepia si fontul sans-serif * /: root [hasbrowserhandlers = "true"] body.dark.serif / ] body.sans-serif.sepia
Nu folosi selectorul comun : rădăcină [hasbrowserhandlers = "true"] corp pentru a direcționa toate setările simultan. Acesta va funcționa, dar va fi afectează și alte pagini ale browserului, precum despre: newtab, deoarece elementele rădăcinii lor poartă și ele hasbrowserhandlers atribut (care este folosit pentru a marca manipulatorii de evenimente ale paginilor interne Firefox, cum ar fi despre: pagini).
Iată codul pe care l-am adăugat la meu userContent.css. Am schimbat familia fontului, stilul fontului, culorile și lărgim containerul de text. Puteți folosi orice alte reguli de stil în funcție de propriul dvs. gust.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: rădăcină [hasbrowserhandlers = "true"] body.dark.serif # cititor-domeniu font-family: "curier nou" important; : rădăcină [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important; culoare: # BAE3DB! important; : rădăcină [hasbrowserhandlers = "true"] body.dark.serif # cititor-domeniu font-style: italic important; : rădăcină [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2, rădăcină [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 culoare: # 06FEB0! important; : rădăcină [hasbrowserhandlers = "true"] body.dark.serif a: link culoare: # 83E7FF important; : rădăcină [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em important;
Rețineți că este necesar să utilizați !important cuvânt cheie în userContent.css pentru toate regulile CSS. Browserul adaugă valorile proprietăților specificate de utilizator înainte de valorile specificate de autor (dezvoltatorul paginii web date, aici Reader View). Prin urmare, orice valoare de proprietate specificată de utilizator fără !important cuvântul cheie nu va funcționa dacă o foaie de stil specificată de autor vizează, de asemenea, aceeași proprietate, deoarece va fi suprascrisă.
Rezultat final
Puteți vedea modificările temei mele Reader de mai jos. Utilizați propriile reguli CSS pentru a personaliza design-ul propriului dvs. Firefox Reader personalizat.
Inainte de
După
Dacă doriți să vă aruncați mai adânc în personalizarea temelor pentru uneltele Firefox, consultați tutorialul meu anterior privind personalizarea temei pentru Instrumente de dezvoltator pentru Firefox.
