Staś Małolepszy

userContent.css dla wybranych stron

Ten post został przeniesiony z mojego starego bloga. Niektóre odnośniki mogą nie działać.

Wydany wczoraj Firefox 1.5 Beta 1 znacząco rozszerza możliwości dostosowywania wyglądu odwiedzanych stron. Do tej pory wszystkie definicje zapisane w pliku chrome/userContent.css (w katalogu profilu) stosowane były na wszystkich stronach, co nierzadko było niepożądane. Dzisiejsza beta wprowadza regułę @-moz-document (błąd 238099), dzięki której możliwe jest tworzenie oddzielnych arkuszy stylów użytkownika dla różnych witryn. Oto jak David Baron wyjaśnia jej działanie (tłumaczenie moje):

@-moz-document

url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org)
{
  /* reguły CSS znajdujące się tutaj dotyczą:
     + strony "http://www.w3.org/",
     + każdej strony, której URL zaczyna się od
       "http://www.w3.org/Style/",
     + każdej strony w domenie "mozilla.org" lub której URL
       kończy się na ".mozilla.org".
   */
}

Możemy zatem na przykład stworzyć następujący plik userContent.css:

@-moz-document domain(jogger.pl) {
  * { color: green !important; }
  }

@-moz-document url-prefix(http://staszyna.jogger.pl/) {
  * { color: red !important; }
  }

Po ponownym uruchomieniu przeglądarki litery na każdej stronie w domenie "jogger.pl" (a więc nie tylko na głównej, ale też na wszystkich jogach) będą koloru zielonego, z wyjątkiem mojego jogu, na którym litery będą czerwone. Oczywiście ważna w tym przypadku jest kolejność tych dwóch reguł - jeśli najpierw zdefiniujemy czerwony kolor na staszyna.jogger.pl, a następnie zielony na wszystkich stronach w domenie "jogger.pl", to na staszyna.jogger.pl też będzie zielono. To w końcu CSS.

Powyższy przykład ma raczej żadne zastosowanie praktyczne, ale mam nadzieję, że wyjaśnia istotę rzeczy. Do tej pory można było w userContent.css napisać co najwyżej tylko * { color: red; }, co pokolorowałoby litery na wszystkich stronach na czerwono.

Czas na przykład nieco bardziej sensowny. Weźmy stronę polskiej Mozilli Planet. Mimo, że uważam ją za bardzo ładną, czasami męczy mnie jej czytanie: za długie wiersze, dużo podkreślonych odnośników. Postanowiłem więc przygotować własny arkusz stylów, który nieco zmieni tę stronę. Rozumiem, że nie każdemu będzie się chciało zapisać go w katalogu <ścieżka do profilu>/chrome/, więc proponuję dwa zrzuty ekranu:

To tylko prosta prezentacja możliwości, a przecież można byłoby zrobić jeszcze więcej, np. zmienić zupełnie kolorystykę. To przypomina mi o skryptozakładce Chcę czytać, o której pisałem w kwietniu i której lepszą wersję przygotował Ludwik (spróbuj; by przywrócić normalny wygląd wystarczy odświeżyć stronę). Od dziś można podobne reguły spisywać w userContent.css i w ten sposób wygodnie czytać te strony, które męczą wzrok, a zostawiać nietknięte te, które są OK.

I na koniec pytanie do przemyślenia: czy taka funkcja może przydać się zwykłym uzytkownikom? Może to tylko zabawka dla webdeveloperów i geeków? A może można już zacząć myśleć o całych bazach arkuszy stylów użytkowników, za pośrednictwem których ci, którzy znają CSS, dzieliliby się swoją wiedzą w najbardziej praktyczny z możliwych sposobów z tymi, dla których jest to magia?

Napisano: 10.09.2005
Permalink: http://informationisart.com/009

Staś Małolepszy

Notatki o Internecie, społeczeństwie informacyjnym, Mozilli i interakcjach człowiek-komputer.

Najnowsze notatki