Jak přizpůsobit prohlížeč Firefox View pro lepší čitelnost
Aplikace Reader View je populární funkcí prohlížeče Firefox změní vzhled webové stránky a usnadňuje jeho čitelnost podle odstranění vizuálního nepořádku například obrázky, reklamy, záhlaví a postranní panely. Zobrazení aplikace Reader View není pro všechny domovské stránky dostupné.
Pokud je funkce pro určitou stránku k dispozici, najdete ji ve tvaru písmene a ikona malé knihy vpravo od adresního řádku.
Existuje několik vestavěných možností, které čtenářům umožňují přizpůsobit vzhled vzhledu Zobrazení aplikace Reader. Na tyto možnosti se podíváme dříve, než vám ukážeme, co můžete udělat pro další přizpůsobení vzhledu aplikace Reader View. Pro demo účely budu používat článek z článku National Geographic.
Přednastavené možnosti
Firefox Reader View je dodáván s několika přednastavenými možnostmi přizpůsobení, jako jsou tmavé, světlé a sépie pozadí, nastavitelný velikosti písma, a serif a sans-serif písma. Motiv můžete přizpůsobit podle pravidla CSS těchto existujících možností.
Používám tmavou pleť se serif fonty, a to znamená, že budu muset přepsat příslušné CSS třídy, v mém případě .temný a .serif.
Pokud chcete přizpůsobit jinou variantu motivu (skin + font), budete potřebovat použijte vhodné CSS voliče. Tyto nástroje můžete zkontrolovat pomocí vývojářských nástrojů Firefoxu stisknutím klávesy F12.
Vytvořit vlastní soubor CSS
Musíte vytvořit soubor s názvem userContent.css uvnitř chrom složka ve složce profilu Firefoxu pro úpravy aplikace Reader View. Chcete-li najít složku profilu Firefoxu, zadejte ji o: podpora do panelu URL a stiskněte klávesu Enter.
Ocitnete se na stránce, která obsahuje technické údaje týkající se instalace Firefoxu. Klepněte na tlačítko Zobrazit složku a otevře se složka Profil.
Vytvořte složku s názvem chrom ve složce s profilem (pokud ji ještě nemáte) a soubor s názvem userContent.css uvnitř chrom složky. Cesta k souboru vypadá takto:
… Profily \ tchrom userContent.css
Přidejte vlastní pravidla CSS
Jakmile jste vytvořili a otevřeli userContent.css V editoru kódu je čas přidat pravidla CSS. Chcete-li přizpůsobit vzhled aplikace Reader View, musíte cílit s příslušnými voliči.
Pro různé výchozí možnosti můžete použít následující voliče:
/ * Když je vybráno tmavé pozadí * /: root [hasbrowserhandlers = "true"] body.dark / * Pokud je vybráno světlé pozadí * /: root [hasbrowserhandlers = "true"] body.light / * Když sépie pozadí je vybráno * /: root [hasbrowserhandlers = "true"] body.sepia / * Pokud je vybráno písmo serif * /: root [hasbrowserhandlers = "true"] body.serif / * Když je písmo sans-serif vybraný * /: root [hasbrowserhandlers = "true"] body.sans-serif
Třídy můžete také kombinovat, abyste mohli cílit na konkrétní kombinaci nastavení.
/ * Když jsou vybrány tmavé pozadí a patkové písmo * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Jsou-li vybrány sépie pozadí a sans-serif font * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Nepoužívat společný volič : root [hasbrowserhandlers = "true"] tělo pro cílení všech nastavení najednou. Bude to fungovat, ale bude ovlivnit i ostatní stránky prohlíľeče, jako o: newtab, jako jejich kořenové prvky také nést hasbrowserhandlers atribut (který se používá k označení obsluhy událostí interních stránek Firefoxu, například o: stránky).
Tady je kód, který jsem přidal k mému userContent.css. Změnil jsem rodinu fontů, styl písma, barvy a rozšířil textový kontejner. Můžete použít libovolná další pravidla podle vlastního vkusu.
/ ** 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 background-color: # 13131F! důležité; barva: # BAE3DB! důležité; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: kurzíva! : 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 barva: # 06FEB0! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em!
Je nutné použít !Důležité klíčové slovo v userContent.css pro všechna pravidla CSS. Prohlížeč přidává hodnoty vlastností zadané uživatelem před hodnotami určenými autorem (vývojář dané webové stránky, zde View Reader). Z toho důvodu, jakákoli hodnota vlastnosti zadaná uživatelem bez !Důležité klíčové slovo nebude fungovat, pokud autorský styl určený pro daný styl cílí na stejnou vlastnost, protože bude přepsán.
Konečný výsledek
Níže můžete vidět změny v tématu Téma aplikace Reader View. Použijte vlastní pravidla CSS pro přizpůsobení designu vlastního přizpůsobeného prohlížeče Firefox Reader.
Před
Po
Pokud se chcete ponořit hlouběji do přizpůsobení motivu nástrojů Firefoxu, podívejte se na můj předchozí návod k přizpůsobení motivu vývojářských nástrojů Firefoxu.
