Cara Menyesuaikan Tampilan Pembaca Firefox untuk Keterbacaan yang Lebih Baik
Tampilan Pembaca adalah fitur populer dari browser Firefox, yaitu mengubah penampilan dari halaman web, dan membuatnya lebih mudah dibaca oleh menghapus kekacauan visual seperti gambar, iklan, tajuk, dan bilah sisi. Namun, Tampilan Pembaca tidak tersedia untuk semua halaman beranda.
Jika fitur ini tersedia untuk halaman tertentu, Anda akan menemukan ikon untuk mengaktifkannya dalam bentuk a ikon buku kecil ditampilkan di sebelah kanan bilah alamat.
Ada beberapa opsi bawaan yang memungkinkan pembaca untuk menyesuaikan tampilan Tampilan Pembaca. Kami akan melihat opsi-opsi itu sebelum menunjukkan kepada Anda apa yang dapat Anda lakukan untuk lebih mempersonalisasi tampilan Tampilan Pembaca. Untuk keperluan demo, saya akan menggunakan artikel oleh artikel National Geographic.
Opsi Pra-Bangun
Firefox Reader View hadir dengan beberapa opsi penyesuaian yang sudah dibuat sebelumnya seperti gelap, terang, dan sepia latar belakang, disesuaikan ukuran font, dan serif dan sans-serif tipografi. Anda dapat menyesuaikan tema dengan mengesampingkan aturan CSS opsi yang sudah ada sebelumnya.
Saya menggunakan kulit gelap dengan font serif, dan ini berarti bahwa saya perlu mengganti kelas CSS yang ada, dalam kasus saya .gelap dan .serif.
Jika Anda ingin menyesuaikan varian tema lain (skin + font), Anda harus melakukannya gunakan penyeleksi CSS yang sesuai. Anda dapat memeriksanya dengan bantuan Alat Pengembang Firefox dengan menekan F12.
Buat File CSS Khusus
Anda perlu membuat file bernama userContent.css di dalam chrome folder dari folder profil Firefox Anda untuk kustomisasi Tampilan Pembaca Anda. Untuk menemukan folder profil Firefox Anda, ketik tentang: dukungan ke dalam bilah URL dan tekan Enter.
Anda akan menemukan diri Anda pada halaman yang berisi data teknis terkait instalasi Firefox Anda. Klik tombol Tampilkan Folder, dan itu akan membuka folder Profil Anda.
Buat folder bernama chrome di dalam Folder Profil Anda (jika Anda belum memilikinya), dan sebuah file bernama userContent.css di dalam chrome map. Jalur file terlihat seperti ini:
... \ Profil \\ chrome \ userContent.css
Tambahkan Aturan CSS Khusus
Setelah Anda membuat dan membuka userContent.css di editor kode, saatnya menambahkan aturan CSS Anda. Untuk menyesuaikan desain Tampilan Pembaca, Anda harus melakukannya menargetkan tag dengan pemilih yang sesuai.
Anda dapat menggunakan penyeleksi berikut untuk berbagai opsi default:
/ * Ketika latar belakang gelap dipilih * /: root [hasbrowserhandlers = "true"] body.dark / * Ketika latar belakang terang dipilih * /: root [hasbrowserhandlers = "true"] body.light / * Ketika sepia background dipilih * /: root [hasbrowserhandlers = "true"] body.sepia / * Ketika font serif dipilih * /: root [hasbrowserhandlers = "true"] body.serif / * Ketika font sans-serif adalah terpilih * /: root [hasbrowserhandlers = "true"] body.sans-serif
Anda juga dapat menggabungkan kelas-kelas, untuk menargetkan kombinasi pengaturan tertentu.
/ * Ketika latar belakang gelap dan font serif dipilih * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Ketika latar belakang sepia dan font sans-serif dipilih * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Jangan gunakan pemilih umum : root [hasbrowserhandlers = "true"] tubuh untuk menargetkan semua pengaturan sekaligus. Itu akan berhasil, tetapi itu akan berhasil juga mempengaruhi halaman browser lain, seperti tentang: newtab, sebagai elemen root mereka juga membawa hasbrowserhandlers atribut (yang digunakan untuk menandai event handler dari halaman Firefox internal, seperti tentang: halaman).
Berikut kode yang saya tambahkan ke userContent.css. Saya mengubah keluarga font, gaya font, warna, dan memperlebar wadah teks. Anda dapat menggunakan aturan gaya lainnya sesuai dengan selera Anda.
/ ** 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; warna: # BAE3DB! penting; : 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! important; : root [hasbrowserhandlers = "true"] body.dark.serif a: tautan color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Perhatikan bahwa perlu menggunakan !penting kata kunci dalam userContent.css untuk semua aturan CSS. Browser menambahkan nilai properti yang ditentukan pengguna sebelum nilai yang ditentukan oleh penulis (pengembang halaman web yang diberikan, di sini Tampilan Pembaca). Oleh karena itu, nilai properti yang ditentukan pengguna tanpa !penting kata kunci tidak akan berfungsi jika stylesheet yang ditentukan penulis juga menargetkan properti yang sama, karena akan diganti.
Hasil akhir
Anda dapat melihat perubahan tema Tampilan Pembaca saya di bawah ini. Gunakan aturan CSS Anda sendiri untuk menyesuaikan desain Tampilan Pembaca Firefox pribadi Anda.
Sebelum
Setelah
Jika Anda ingin menyelami lebih dalam tentang penyesuaian tema alat Firefox, lihat tutorial saya sebelumnya tentang penyesuaian tema Alat Pengembang Firefox..
