Weź styl w swoje ręce

Niewielu wie do czego jest plik userContent.css, a jeszcze mniej go używa. Plik ten pozwala zdefiniować użytkownikowi własny styl CSS dla treści wyświetlanej w oknie przeglądarki Firefox. Choć wiedziałem o nim od dawna, to nigdy nic do tego pliku nie wpisałem. Po co miałbym zmieniać kolor odnośnika? Mógłbym zmienić nawet cały układ dowolnej strony, ale czy nie szkoda na to czasu?

Jak się okazuje, nawet możliwość podmiany CSS'a może się kiedyś przydać. Skorzystałem z tej możliwości w kilku sytuacjach. Zanim konkrety, napiszę, że tego pliku należy szukać w katalogu ~/.mozilla/firefox/sa87d6fas.default/

1. Ciekawe są tylko newsy.
Pierwsza dotyczy serwisu dobreprogramy.pl. Strona jak wygląda każdy widzi. Sęk w tym, że jedyną rzeczą, która mnie na niej ciekawi, są newsy. Mógłbym skorzystać z kanałów RSS, ale jakoś do tej pory nie zainstalowałem jeszcze żadnej aplikacji do tego celu. Ale nie o technologię się rozchodzi.

Korzystając ze wspomnianego pliku userContent.css i znajomości CSS. Wyrzuciłem niepotrzebne elementy strony, czyniąc ją zdecydowanie bardziej użyteczną. Oto zmiany, których dokonałem:
Serwis bez zmian:

Serwis ze zmienionymi stylami:

Efekt można oglądać na stronie dobreprogramy.pl/Aktualności
Pozostaje tylko pokazać zawartość userContent.css:

@-moz-document url-prefix(http://www.dobreprogramy.pl/Aktualnosci) {
    div#bigColumn, div#secondColumn, div.toplevelLimiter, #header, #footer {
        display: none !important;  /* najistotniejszy element */
    }

    #content .third {
        width: 90% !important;
        margin:0 !important;
        padding: 50px !important;
    }

    .main {
        background: white !important;
        margin: none !important;
    }

    div.pagination a {
        font-size: 20px !important;
        margin: 1px !important;
        padding: 15px !important;
        border: 1px solid gray !important;
        background: lightGoldenRodYellow !important;
    }

    div.pagination a.active {
        background: chocolate !important;
        color: black !important;
    }
}

2. Zbyt małe odnośniki są irytujące.
Po chwili użytkowania tego serwisu zaczyna doskwierać dość mała czcionka (szczególnie w paginacji), co utrudnia interakcję - np. trafienie w link.

Ale i na to znalazł się sposób (screen jest w oryginalnym rozmiarze :P ):

Istnieje jeszcze jedna możliwość "powiększenia" linka. Skorzystałem z tego przeglądając stronę z przedmiotu Języki formalne.... Odnośniki o jakże długiej nazwie "Tu" z pewnością nie pomagają w wybraniu tego odsyłacza. Nic prostszego!

3. Niechciane elementy po raz kolejny.

Na stronie Formalnych jest jeszcze jeden element, który mi przeszkadzał -- duże zdjęcie. Samo w sobie jest bardzo ładne, ale żeby ponad 2 MB na głównej stronie? Usunąłem :) A link zmieniłem z "Tu" na "Tu jest aktualny ranking". Strona wygląda może nieco dziwnie, ale za to mogę łatwo wykonywać pewne akcje.

@-moz-document url-prefix(http://www.ii.uni.wroc.pl/~jma/kurs.phtml) {
    h1,h2,h3,h4,h5,hr {
        font-size: 10pt;
        padding:0;
        margin:0;
    }
    a[href$="pod_gorke.jpg"] img {    /* ends with pod_gorke.jpg */
        display: none;
    }
    table td:first-child {  /* usuń komórkę z obrazkiem */
        display:none;
    }
    a[href*="ranking"]:after {     /* contains 'ranking' */
        content:'jest aktualny ranking';
    }
    a {
        background-color: lightblue;
        border: 1px solid blue;
        padding: .5em 1em .5em 1em;
        text-decoration: none !important;
    }
}

Podsumowanie
Możliwość definiowania własnego stylu dla strony choć nie jest często wykorzystywana, to jednak czasem potrafi ułatwić życie. Dlatego warto o tej możliwości pamiętać i z niej skorzystać w odpowiednim momencie.

Oprócz pliku userContent.css jest także plik, w którym możemy manipulować wyglądem całego okna - to userChrome.css.