Każda osoba, która chociaż raz musiała wycinać średnio skomplikowany layout, stawała przed dylematem "jak zaokrąglić te przeklęte rogi". Są dwie możliwości - obrazkowa oraz stylowa. W przypadku metody obrazkowej wszystkie zaokrąglenia są zapisywane jako grafika, która następnie jest osadzana w nadmiarowych elementach HTML. Podejście to jest przede wszystkim niezawodne. Każda przeglądarka identycznie wyświetli zamieszczone grafiki. Schody zaczynają się w momencie, gdy zachodzi potrzeba przebudowania wyglądu strony. Zmiana promienia, czy nawet czegoś tak błahego jak kolor obramowania, staje się w tym momencie udręką. Do pracy, w najlepszym wypadku, należy zaprząc jakiś program graficzny, w najgorszym - całego grafika ;), przez co prosta zmiana staje się wyzwaniem na dobrych kilka godzin. Drugie podejście polega na skorzystaniu z dobrodziejstw postępu, czyli z CSS. Kilkanaście znaków w pliku ze stylami może zdziałać cuda.
border-radius: 10px;
Niestety taki zapis zadziała tylko w Operze oraz Google Chrome. Nie oszukujmy się. Ilość osób, która zobaczy, że nasza strona posiada zaokrąglone rogi, jest znikoma. Co z resztą przeglądarek? Ich autorzy wprowadzili prefixy (np znany z Firefoxa -moz). Dzięki temu można wprowadzić "krągłości" w pozostałych przeglądarkach.
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Niestety powyższe rozwiązanie nadal nie spowoduje, że większość odwiedzających naszą stronę nie zobaczy jej tak, jakbyśmy tego chcieli. Pozostaje problem z przeglądarką Internet Explorer. Dopiero wydana niedawno wersja beta oznaczona numerem 9 radzi sobie z czymś tak banalnym. Nie zmienia to jednak faktu, że większość użytkowników ma pecha i korzysta z IE6, 7 lub 8.
I tutaj dochodzimy wreszcie do meritum dzisiejszego wpisu. Niestety nie ma rozwiązania tylko "stylowego". Musimy skorzystać z pomocy Javascript i VML. Nie martwcie się jednak. Nie będziemy nic pisać, skorzystamy po prostu z gotowej biblioteki. Mowa tutaj o DD_roundies, której autorem jest ta sama osoba, która stworzyła jedyny działający fix na obrazki png w przeglądarce IE6.
Jedyne dwie czynności jakie mamy do wykonania, to dołączenie pliku z biblioteką do strony oraz wywołanie metody addRule na obiekcie DD_roundies. Metoda przyjmuje trzy parametry. Pierwszym jest selektor CSS, wskazujący na interesujący nas element (wymagany), drugim wartość zaokrąglenia (wymagana). Ostatnim (opcjonalnym) parametrem jest informacja, czy zaokrąglenie ma zostać wykonane tylko w przeglądarce IE (domyślne ustawienie).
Cały kod wygląda następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#some-id {
/* przykładowe wartości */
width: 200px;
height: 200px;
border: 1px solid #cccccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
window.onload = function() {
DD_roundies.addRule("#some-id", "10px");
}
</script>
</head>
<body>
<div id="some-id"></div>
</body>
</html>
Jeśli chcecie zobaczyć na żywo jak to wygląda, zapraszam do obejrzenia dema.
Na koniec dodam jedynie, że nie jest to "ultimate solution" i na pewno znajdą się sytuacje, w których znacznie lepiej będzie zastosować obrazki. Niemniej we wszystkich moich ostatnich próbach (wprawdzie nieśmiałych i na niewielką skalę), skrypt ten spisał się na medal.
