Come personalizzare la visualizzazione di Firefox Reader per una migliore leggibilità
Reader View è una caratteristica popolare del browser Firefox cambia l'aspetto di una pagina Web, e lo rende più leggibile di rimuovendo il disordine visivo come immagini, annunci, intestazioni e barre laterali. Reader View è, tuttavia, non disponibile, per tutte le home page.
Se la funzione è disponibile per una determinata pagina, troverai l'icona per attivarla nella forma di a icona del libro piccolo visualizzato a destra della barra degli indirizzi.
Esistono alcune opzioni integrate che consentono ai lettori di personalizzare l'aspetto di Vista Reader. Vedremo queste opzioni prima di mostrarti cosa puoi fare per personalizzare ulteriormente l'aspetto della Vista lettore. Per scopi dimostrativi, userò un articolo dell'articolo del National Geographic.
Opzioni pre-costruite
Firefox Reader View viene fornito con alcune opzioni di personalizzazione predefinite come dark, light e seppia sfondi, regolabile dimensioni dei caratteri, e serif e sans-serif caratteri tipografici. Puoi personalizzare il tema per sovrascrivere le regole CSS di queste opzioni preesistenti.
Uso una skin scura con font serif, e questo significa che dovrò sovrascrivere le classi CSS appartenenti, nel mio caso .buio e .serif.
Se si desidera personalizzare un'altra variante del tema (skin + font), sarà necessario utilizzare i selettori CSS appropriati. Puoi verificarli con l'aiuto di Firefox Developer Tools premendo F12.
Crea il file CSS personalizzato
Devi creare un file chiamato userContent.css dentro il cromo cartella di la tua cartella del profilo di Firefox per il tuo lettore Visualizza le personalizzazioni. Per trovare la cartella del profilo di Firefox, digitare A proposito di: supporto nella barra degli indirizzi e premere Invio.
Ti troverai su una pagina che contiene il dati tecnici relativi alla tua installazione di Firefox. Fai clic sul pulsante Mostra cartella e si aprirà la cartella Profilo.
Crea una cartella chiamata cromo all'interno della cartella del profilo (se non ce l'hai ancora) e un file chiamato userContent.css dentro il cromo cartella. Il percorso del file è simile al seguente:
... \ Profili \\ Chrome \ userContent.css
Aggiungi le regole CSS personalizzate
Una volta creato e aperto userContent.css in un editor di codice, è ora di aggiungere le tue regole CSS. Per personalizzare il design di Reader View, è necessario bersaglio il etichetta con i selettori appropriati.
È possibile utilizzare i seguenti selettori per le diverse opzioni predefinite:
/ * Quando è selezionato lo sfondo scuro * /: root [hasbrowserhandlers = "true"] body.dark / * Quando è selezionato lo sfondo chiaro * /: root [hasbrowserhandlers = "true"] body.light / * Quando seppia background è selezionato * /: root [hasbrowserhandlers = "true"] body.sepia / * Quando il carattere serif è selezionato * /: root [hasbrowserhandlers = "true"] body.serif / * Quando il font sans-serif è selezionato * /: root [hasbrowserhandlers = "true"] body.sans-serif
Puoi anche combinare le classi, per scegliere come target una combinazione specifica di impostazioni.
/ * Quando sono selezionati caratteri di sfondo scuro e caratteri serif * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Quando sono selezionati il carattere seppia di sfondo e il carattere sans-serif * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Non usare il selettore comune : root [hasbrowserhandlers = "true"] corpo per indirizzare tutte le impostazioni contemporaneamente. Funzionerà, ma lo farà influisce anche su altre pagine del browser, ad esempio A proposito di: newtab, come i loro elementi radice portano anche il hasbrowserhandlers attributo (che viene utilizzato per contrassegnare i gestori di eventi delle pagine interne di Firefox, come ad esempio di: pagine).
Ecco il codice che ho aggiunto al mio userContent.css. Ho cambiato la famiglia di caratteri, lo stile del carattere, i colori e ho allargato il contenitore del testo. Puoi utilizzare qualsiasi altra regola di stile in base ai tuoi gusti.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier new"! important; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important; colore: # BAE3DB! importante; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain stile font: 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 larghezza massima: 50em! importante;
Si noti che è necessario utilizzare il !importante parola chiave in userContent.css per tutte le regole CSS. Il browser aggiunge valori di proprietà specificati dall'utente prima dei valori specificati dall'autore (lo sviluppatore della pagina Web fornita, qui la vista Reader). Quindi, qualsiasi valore di proprietà specificato dall'utente senza il !importante la parola chiave non funzionerà se un foglio di stile specificato dall'autore ha come target anche la stessa proprietà, in quanto verrà sovrascritto.
Risultato finale
Puoi vedere i cambiamenti del mio tema Vista Reader qui sotto. Usa le tue regole CSS per personalizzare il design della tua visualizzazione personalizzata di Firefox Reader.
Prima
Dopo
Se vuoi approfondire la personalizzazione del tema degli strumenti di Firefox, consulta il mio precedente tutorial sulla personalizzazione del tema Strumenti per sviluppatori di Firefox.
