Modernizr – Strona przyjazna dla wszystkich przeglądarek – wstęp

Jak piszą sami twórcy na swojej stronie: Modernizr jest mała biblioteką JavaScript, która wykrywa, które metody css są dostępne dla danej przeglądarki. Sprawdza ponad 40 metod i w zależności od tego czy dana przeglądarka obsługuje konkretną metodę, dodaje do tagu HTML odpowiednią klasę. Umożliwia to nadanie osobnych stylów dla przeglądarek, które obsługują daną metodę, oraz dla tych, które nie obsługują.

Implementacja biblioteki sprowadza się do dołączenia do Twojej strony pliku .js pobranego ze strony biblioteki. Masz możliwość dopasowania skryptu do własnych potrzeb, wybrać tylko te metody, które używasz w swoim projekcie. Co ważne, klasy cssa dodawane są dynamicznie za pomocą JavaScript’u, więc nie widać ich z poziomu źródła strony (ctrl+u) tylko dopiero w firebug’u (PPM->Zbadaj element).

Dla zobrazowania, prosty przykład sprawdzania metody gradient. W przeglądarce obsługującej gradient dodano klasę cssgradients, co widać na poniższym obrazku. Przeglądarki nieobsługujące gradientów, np IE starsze od 10 otrzymają klasę no-cssgradients.
Bez nazwy-2

W css można użyć osobnego stylu dla przeglądarek, które obsługują css oraz osobny dla nieobsługujących.

.cssgradients .gradient-element {
    /* css gradientu */
}
.no-cssgradients .gradient-element {
    /* zdjęcie gradientu */
}