Ranyboskie!

Stylowanie Reader View w Firefox

TL;DR

Aby nadpisać domyślne style Reader View :


Firefox Reader View jest funkcją firefoksa, która umożliwia czytanie treści w internecie bez niepotrzebnych rozpraszaczy, takich jak reklamy, czy agresywnie wyskakujące modale.

Reader View może być uruchomiony kliknięciem przycisku przy pasku adresu, lub z poziomu menu: view > Enter Reader View

przycisk otwierający Reader View znajduje się po prawej stronie paska adresu

Domyślnie możemy wybrać spośród 3 wbudowanych motywów kolorystycznych:

domyślne motywy kolorystyczne

Wbudowane motywy same w sobie znacznie poprawiają czytelność większości stron, można je jednak spersonalizować, nadpisując ich style własnymi regułami CSS.

Aby to zrobić należy otworzyć podstronę about:support w Firefox i otworzyć Profile Folder lub Folder profilu klikając w odpowiedni przycisk:

Folder z profilami użytkownika

Następnie, w otwartym folderze trzeba utworzyć katalog chrome, a w nim plik userContent.css

Plik userContent.css będzie zawierał reguły CSS którymi można nadpisać style wszystkich przeglądanych stron, dlatego warto zwrócić uwagę aby nie używać zbyt ogólnych selektorów.

Jak to zrobić?

Aby spersonalizować konkretny motyw, musimy najpierw podejrzeć jakie nazwy klasy są dodawane na stronie otwartej w Reader View.

klasy dark i sans-serif dodane na elemencie body

Możesz zauważyć że w przypadku motywu ciemnego na body jest dodawana klasa dark.
Dodawane są również klasy sans-serif oraz loaded.

Możemy już przejść do stylowania.

Załóżmy że chcemy zmienić kolor tła, oraz domyślny font.
Aby to zrobić odwołajmy się do elementu body, oraz wszystkich jego klas.
Aby style zadziałały, do każdej reguły należy dodać również !important, aby przebić specyficzność danego selektora:

body.sans-serif.loaded.dark {
background-color: #001 !important;
}
body.sans-serif.loaded.dark p {
font-family: "verdana" !important;
}

I to tyle!

Reader View z nadpisanymi stylami

Style motywu ciemnego zostały nadpisane, natomiast pozostałe motywy pozostały niezmienione.

Tym sposobem można nadpisać style na właściwie każdej interesującej nas stronie, trzeba tylko pamiętać aby selektory były możliwie prezyzyjne.

← Wróć