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.
Fajna, rzecz, pytanie, czy wygląda w każdej przeglądarce tak samo i czy ma jakieś ograniczenia ?
Najprostszy przykład znajdziesz w demo. Użycie skryptu niczym się nie różni od CSS. Dla bardziej skomplikowanych elementów mogą zdarzyć się niewielkie zgrzyty. Listę wszystkich znanych błędów znajdziesz pod adresem http://dillerdesign.com/experiment/DD_roundies/#lacking
Nie sprawdzałem, ale czy to czasem nie tworzy masy divów "inaczej" wypozycjonowanych?
Swoją drogą… 21 wiek technologii IT "Możemy zaokrąglać rogi prostokątów!" – śmiech na sali.
Właśnie nie. Tworzonych jest kilka elementów, które odpowiadają za zaokrąglone rogi. VML można nazwa przodkiem SVG, dlatego metodzie tej daleko do generowania kilkuset/kilku tysięcy divów przesuniętych o piksel.
Co do śmiechu na sali, to nie obawiałbym się nazwać tego bardziej dosadnie
W sumie można stosować przeróżne przekształcenia i to od dłuższego już czasu. Niestety różnorodność przeglądarek spowodowała, że jest to niemożliwe.
Ja się bawiłem jQuery Corner. Też fajne.
http://jquery.malsup.com/corner/
Niby działa w IE7 i IE8. Ale niestety w IE8 tylko w trybie zgodności…
~BartekR
To jest właśnie rozwiązanie o którym pisał wookieb. Setki divów przesuniętych o piksel względem siebie. Na stronie wygląda fajnie, ale wydajnościowo i w kodzie – koszmar.
~askone
IE8 jest na tyle specyficzną przeglądarką, że hacki działające na IE6 i 7 nie zawsze chcą działać. Podobnie rzecz ma się z filtrami css, które w IE8 nie do końca chcą działać.
http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser
opisane wspomniane DD corners i kilka innych sztuczek
Fajny link. Na pewno się przyda.
Potwierdzam działanie na IE7. Dziękuje za podsunięcie rozwiązania.