Jak dostosować widok przeglądarki Firefox do lepszej czytelności

Widok czytnika to popularna funkcja przeglądarki Firefox zmienia wygląd strony internetowej i czyni go bardziej czytelnym przez usuwanie bałaganu wizualnego takie jak obrazy, reklamy, nagłówki i paski boczne. Widok czytnika jest jednak niedostępny dla wszystkich stron głównych.

Jeśli funkcja jest dostępna dla określonej strony, znajdziesz ikonę, aby ją włączyć w kształcie a ikona małej książki wyświetlany po prawej stronie paska adresu.

Istnieje kilka wbudowanych opcji, które umożliwiają czytelnikom dostosowanie wyglądu Widok czytnika. Przyjrzymy się tym opcjom, zanim pokażemy, co możesz zrobić, aby jeszcze bardziej spersonalizować wygląd widoku czytnika. Do celów demonstracyjnych będę używał artykułu z artykułu National Geographic.

Opcje wbudowane

Przeglądarka Firefox Reader zawiera kilka gotowych opcji dostosowywania, takich jak ciemne, jasne i sepia tła, nastawny rozmiary czcionek, oraz szeryfowe i bezszeryfowe kroje pisma. Możesz dostosować motyw według nadpisywanie reguł CSS tych wcześniej istniejących opcji.

Używam ciemnej skóry z czcionkami szeryfowymi, a to oznacza, że w moim przypadku będę musiał zastąpić przynależne klasy CSS .ciemny i .szeryf.

Jeśli chcesz dostosować inny wariant motywu (karnacja + czcionka), musisz użyj odpowiednich selektorów CSS. Możesz to sprawdzić za pomocą narzędzi programistycznych Firefox, naciskając klawisz F12.

Utwórz niestandardowy plik CSS

Musisz utworzyć plik o nazwie userContent.css w środku chrom folder z Twój folder profilu Firefox dla twojego Reader Zobacz dostosowania. Aby znaleźć folder profilu Firefox, wpisz about: wsparcie w pasku adresu i naciśnij Enter.

Znajdziesz się na stronie zawierającej dane techniczne związane z instalacją Firefoksa. Kliknij przycisk Pokaż folder, aby otworzyć folder Profil.

Utwórz folder o nazwie chrom w twoim folderze profilu (jeśli jeszcze go nie masz) i plik o nazwie userContent.css w środku chrom teczka. Ścieżka do pliku wygląda tak:

… Profilechrome userContent.css

Dodaj niestandardowe reguły CSS

Po utworzeniu i otwarciu userContent.css w edytorze kodu nadszedł czas na dodanie reguł CSS. Aby dostosować wygląd Widoku Czytnika, musisz celuj znacznik z odpowiednimi selektorami.

Możesz użyć następujących selektorów dla różnych opcji domyślnych:

 / * Po wybraniu ciemnego tła * /: root [hasbrowserhandlers = "true"] body.dark  / * Gdy wybrane jest jasne tło * /: root [hasbrowserhandlers = "true"] body.light  / * Kiedy sepia wybrano tło * /: root [hasbrowserhandlers = "true"] body.sepia  / * Gdy wybrano czcionkę szeryfową * /: root [hasbrowserhandlers = "true"] body.serif  / * Gdy czcionka sans-serif jest wybrane * /: root [hasbrowserhandlers = "true"] body.sans-serif

Możesz także łączyć klasy, aby kierować określone kombinacje ustawień.

 / * Gdy zaznaczone jest ciemne tło i czcionka szeryfowa * /: root [hasbrowserhandlers = "true"] body.dark.serif  / * Gdy wybrano tło sepii i czcionkę bezszeryfową * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia

Nie używać wspólny selektor : root [hasbrowserhandlers = "true"] body aby skierować wszystkie ustawienia jednocześnie. To zadziała, ale tak się stanie wpływają również na inne strony przeglądarki, Jak na przykład about: newtab, ponieważ ich elementy korzeniowe również niosą hasbrowserhandlers atrybut (używany do oznaczania procedur obsługi wewnętrznych stron Firefoksa, takich jak o: strony).

Oto kod, który dodałem do mojego userContent.css. Zmieniłem rodzinę czcionek, styl czcionki, kolory i rozszerzyłem kontener tekstowy. Możesz użyć dowolnych innych reguł stylu według własnego gustu.

 / ** 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! ważne; color: # BAE3DB! important; : 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: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;

Pamiętaj, że konieczne jest użycie !ważny słowo kluczowe w userContent.css dla wszystkich reguł CSS. Przeglądarka dodaje wartości właściwości określone przez użytkownika przed wartościami określonymi przez autora (twórca danej strony internetowej, tutaj Widok czytnika). Stąd każda określona przez użytkownika wartość właściwości bez znaku !ważny słowo kluczowe nie będzie działać, jeśli arkusz stylów określony przez autora będzie kierował również do tej samej właściwości, ponieważ zostanie zastąpiony.

Ostateczny wynik

Możesz zobaczyć zmiany mojego motywu widoku Czytnika poniżej. Użyj własnych reguł CSS, aby dostosować projekt własnego spersonalizowanego widoku przeglądarki Firefox.

Przed

Jeśli chcesz głębiej zanurzyć się w personalizację narzędzi Firefoksa, zapoznaj się z moim poprzednim samouczkiem dotyczącym dostosowywania motywu narzędzi programistycznych Firefox.