Daha İyi Okunabilirlik İçin Firefox Reader Görünümünü Özelleştirme
Reader View, Firefox tarayıcısının popüler bir özelliğidir. görünümünü değiştirir bir web sayfasının ve daha okunabilir hale getirir tarafından görsel dağınıklığı gidermek resimler, reklamlar, başlıklar ve kenar çubukları gibi. Reader View, tüm ana sayfalar için mevcut değildir..
Özellik belirli bir sayfa için mevcutsa, etkinleştirmek için simgeyi küçük kitap simgesi adres çubuğunun sağında görüntülenir.
Okuyucuların görünümünüzü özelleştirmesine olanak tanıyan birkaç yerleşik seçenek vardır. Reader Görünümü. Reader Görünümünün görünümünü daha da kişiselleştirmek için neler yapabileceğinizi göstermeden önce bu seçeneklere göz atacağız. Demo amaçlı olarak National Geographic makalesinde bir makale kullanacağım.
Önceden Yapılmış Seçenekler
Firefox Reader View, karanlık, aydınlık ve sepya gibi önceden oluşturulmuş birkaç özelleştirme seçeneğiyle birlikte gelir arka, ayarlanabilir yazı tipi boyutları, ve serif ve sans-serif yazı biçimleri. Temayı özelleştirerek CSS kurallarını geçersiz kılma bu önceden var olan seçeneklerin listesi.
Serif yazı tipli koyu renkli bir cilt kullanıyorum ve bu benim durumumda ait olan CSS sınıflarını geçersiz kılmam gerektiği anlamına geliyor. .karanlık ve .serif.
Başka bir tema varyantı (skin + font) özelleştirmek istiyorsanız, yapmanız gerekenler uygun CSS seçicilerini kullanın. Bunları Firefox Geliştirici Araçları yardımıyla F12'ye basarak kontrol edebilirsiniz..
Özel CSS Dosyası Oluştur
Adlı bir dosya oluşturmanız gerekir. userContent.css içinde krom klasörü Firefox profil klasörünüz Reader'ınız için özelleştirmeleri görüntüleyin. Firefox profil klasörünüzü bulmak için, hakkında: desteği URL çubuğuna girin ve Enter tuşuna basın..
Kendinizi, aşağıdakileri içeren bir sayfada bulacaksınız. Firefox kurulumunuzla ilgili teknik veriler. Klasörü Göster düğmesini tıkladığınızda Profil klasörünüzü açacaktır..
Adlı bir klasör oluşturun. krom Profil Klasörünüzün içinde (eğer henüz yoksa) ve adlı bir dosya userContent.css içinde krom Klasör. Dosya yolu şöyle görünür:
… \ Profiller \\ Krom \ userContent.css
Özel CSS Kurallarını Ekleyin
Bir kere yaratıp açtıktan sonra userContent.css Bir kod düzenleyicide, CSS kurallarınızı eklemenin zamanı geldi. Reader View'un tasarımını kişiselleştirmek için yapmanız gerekenler hedefle uygun seçicilere sahip etiket.
Farklı varsayılan seçenekler için aşağıdaki seçicileri kullanabilirsiniz:
/ * Koyu arka plan seçildiğinde * /: root [hasbrowserhandlers = "true"] body.dark / * Açık renkli seçildiğinde * /: root [hasbrowserhandlers = "true"] body.light / * Sepya arkaplan seçili * /: root [hasbrowserhandlers = "true"] body.sepia / * serif yazı tipi seçildiğinde * /: root [hasbrowserhandlers = "true"] body.serif / * sans-serif yazı tipi olduğunda seçilen * /: root [hasbrowserhandlers = "true"] body.sans-serif
Ayrıca, belirli bir ayar kombinasyonunu hedeflemek için sınıfları birleştirebilirsiniz..
/ * Koyu arka plan ve serif yazı tipi seçildiğinde * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Sepya arka planı ve sans-serif yazı tipi seçildiğinde * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Kullanmayın ortak seçici : root [hasbrowserhandlers = "true"] vücut Tüm ayarları bir kerede hedeflemek için İşe yarayacak, ama çalışacak diğer tarayıcı sayfalarını da etkileyebilir, gibi about: newtab, Kök unsurları da taşıdıkça hasbrowserhandlers öznitelik (örneğin, örneğin Firefox sayfalarının olay işleyicilerini işaretlemek için kullanılır. hakkında: sayfa).
İşte benim eklediğim kod userContent.css. Yazı tipi ailesini, yazı tipi stilini, renkleri değiştirdim ve metin kabını genişlettim. Kendi zevkinize göre diğer stil kurallarını kullanabilirsiniz.
/ ** userContent.css ****************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "kurye yeni"! önemli; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! önemli; renk: # BAE3DB! önemli; : 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 renk: # 06FEB0! önemli; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! önemli; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! önemli;
Kullanmanın gerekli olduğunu unutmayın. !önemli anahtar kelimesi userContent.css tüm CSS kuralları için. Tarayıcı kullanıcı tarafından belirlenen özellik değerlerini ekler yazarın belirttiği değerlerden önce (verilen web sayfasının geliştiricisi, burada Reader Görünümü). Bu nedenle, herhangi bir kullanıcı tanımlı özellik değeri olmadan !önemli Bir yazar tarafından belirtilen stil sayfası, geçersiz kılınacağı gibi aynı özelliği de hedeflerse, anahtar kelime çalışmaz.
Son sonuç
Reader View temamın değişikliklerini aşağıda görebilirsiniz. Kendi kişiselleştirilmiş Firefox Reader View'unuzun tasarımını özelleştirmek için kendi CSS kurallarınızı kullanın.
Önce
Sonra
Firefox araçlarının tema özelleştirmesinde daha derine dalmak istiyorsanız, Firefox Geliştirici Araçları temasının özelleştirilmesiyle ilgili önceki eğitimime göz atın.
