Co jest problemem starym jak internet, użytkownicy chcą korzystać z internetu a nie aktualizować na bieżąco przeglądarki.

W związku z czym webdeveloperzy zmuszeni są zwykle do różnej gimnastyki, aby pod większością przeglądarek strona wyglądała identycznie (zwykle pod złotą piątką: ie8, ie7, firefox, chrome, opera), ie6 na szczęście wypada już z rynku.

Najczęściej stosowaną metodą jest oczywiście browser-targetting, czyli pisanie osobnego stylu pod konkretną przeglądarkę, co jest rozwiązaniem dość ryzykownym. O ile dla internet explorera można to jeszcze jakoś przełknąć (wystarczy załączyć osobny styl dzięki conditional expressions), to w przypadku innych przeglądarek nie jest już tak różowo – trzeba stosować hacki, co oczywiście sprawia że css się nie waliduje, klient ma pretensje itd.

Gdy próbujemy zastosować choć część z mocy CSS3 robi się jeszcze ciekawiej – tylko cześć przeglądarek obsługuje ten standard, z czego każda robi to na swój sposób (CSS3 nie ma jeszcze pełnej specyfikacji).

Ponieważ klienci zwykle chcą, żeby strona wyglądała tak samo pod każdą przeglądarka, a nie miała np. okrągłych buttonów pod firefoxem 3.5, a kwadratowych pod ie7, trzeba niestety stosować albo wyłącznie CSS2, albo mieć sensowny fallback.

Chcąc zapewnić sensowny fallback dla przeglądarek, które nie obsługują np. gradientów CSS nagimnastykujemy się jeszcze bardziej niż zwykle. Wyobraźmy sobie button z gradientem jako tło i obramowaniem 1px:

button{
border:1px solid #000;

// fallback
background:url('gradient.png') repeat-x 0 0;

// dla chrome/safari
background-image:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(0,0,0))
)
// dla firefoxa
background-image:-moz-linear-gradient(
    center top,
    rgb(255,255,255) 0%,
    rgb(0,0,0) 100%
)
}

Jak widać pomieszanie z poplątaniem, prosty biało czarny gradient i border zajmuje nam kilka linijek kodu a i to nie wiadomo czy będzie wszędzie działał na przyszłych wersjach przeglądarek.

Ale nil desperandum – jest dość proste rozwiązanie które pozwala pisać osobny styl dla przeglądarek obsługujących np. gradienty CSS, i dla tych nie obsługujących.

Mówię o małej bibliotece js o nazwie Modernizr (do pobrania tutaj).
Biblioteka ta rozpoznaje wersję i możliwości przeglądarki, a następnie dokleja do taga HTML odpowiednie klasy informujące czy dana przeglądarka obsługuje daną własność czy nie (np border-radius ma odpowiednio klasy: borderradius, no-borderradius).
Dzięki takiemu rozwiązaniu można napisać styl w CSS3, oraz sensowny fallback dla innych przeglądarek, beż żadnych akrobacji.

button{
border:1px solid #000;
}

.no-cssgradients button{
background:url('gradient.png') repeat-x 0 0;
}

.cssgradients button{
//dla chrome/safari
background-image:-webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgb(255,255,255)),
    color-stop(1, rgb(0,0,0))
)
// dla firefoxa
background-image:-moz-linear-gradient(
    center top,
    rgb(255,255,255) 0%,
    rgb(0,0,0) 100%
)
}

Kolejnym przydatnym narzędziem, które pozwala uprościć pisanie styli jest generator CSS3 (tutaj), któremu wystarczy podać parametry np. zaokrąglenia krawędzi, a on sam wygeneruje kod dla przeglądarek aktualnie obsługujących tą własność.