Uprzejmie donoszę, że skrypt, który miał pomóc Internet Explorerowi zaokrąglać rogi, jest mocno niedoskonały. Moim skromnym zdaniem na tyle mocno niedoskonały, że jego używanie ma sens tylko w ściśle określonych przypadkach.

Może nie wszyscy wiedzą, ale podczas gdy wszystkie normalne przeglądarki mają już zaimplementowaną obsługę właściwości border-radius , Internet Explorer skrupulatnie ją olewa (żeby to tylko ją). Jedyną wersją tej wspaniałej przeglądarki, która będzie obsługiwać tę właściwość jest (będzie?) IE 9, który to jak powszechnie wiadomo wszedł właśnie w fazę beta. Mając na uwagę fakt, że migracja z IE 6 na IE 7+ trwa już 4 lata i nie wiadomo kiedy się skończy, spodziewać się można, że migracja do IE 9, kiedy oczywiście pojawi się już wersja ostateczna, skończy się gdzieś tak za 100 lat.

Ustalmy jedno – zaokrąglone robi wyglądają fajnie, a nawet jak się komuś nie podobają, to niekiedy trzeba je zaokrąglić, bo tego wymaga projekt. Kiedyś jedyną dostępną opcją był obrazek ustawiony jako tło albo specjalnie spreparowany div z ustawionymi w odpowiedni sposób innymi divami pozycjonowanymi absolutnie (będzie wpis na ten temat). Pierwsze rozwiązanie było (jest) do dupy, bo wymagało ustawienia rozmiarów kontenera na sztywno, więc wykluczało rozciąganie kontenera wzdłuż jak i wszerz.

Drugie rozwiązanie było (jest) mniej do dupy, ale wymaga znacznie więcej kodowania i odpowiedniego spreparowania obrazków, więc jest z nim znacznie więcej roboty. Poza tym niektóre projekty wymagają zastosowania przeźroczystych png, więc od razu trzeba się bawić pngFixem. Generalnie na tle tych dwóch rozwiązań, border-radius zdaje się być wybawieniem – jedna (no dobra – trzy) linijka kodu w stylach robi całą robotę za nas. Żadnych obrazków, żadnych ograniczeń jeśli chodzi o wymiary kontenera, żadnych… no ale jest jeszcze kIEpski.

Programiści Microsoftu, tłumacząc się tym, że nie istnieje jeszcze oficjalna specyfikacja CSS 3 i woleli się skupić na pełnej obsłudze CSS 2.1, olali obsługę border-radius i wielu innych właściwości CSS 3. Na szczęście znaleźli się tacy, którzy za friko postanowili poprawić dobrze płatnych speców Microsoftu i tak powstał kolejny komplement HTML z dedykacją dla Explorera.

Jak działa border-radius.htc

Sposób działania jest bajecznie prosty – po określeniu właściwości border-radius kolejno dla różnych typów przeglądarek:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

odwołujemy się do komplementu HTML w następujący sposób:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);

That’s it. I teraz zaczynają się schody.

Po pierwsze – ścieżka

Microsoft poszedł własną drogą, jak zwykle mając w dupie standardy. Ścieżkę do pliku należy ustawić relatywnie względem dokumentu głównego. Uff… Po ludzku – jeśli odwołanie behavior siedzi gdzieś w zewnętrznym pliku CSS umieszczonym gdzieś w katalogu o nazwie css, a plik border-radius.htc siedzi załóżmy w katalogu głównym, to nie będziemy się do niego odwoływać w normalny sposób:

behavior: url(../border-radius.htc);

gdzie ../ standardowo oznacza wyjście z katalogu, tylko w sposób nienormalny, czyli tak, jakbyśmy odwoływali się z katalogu głównego:

behavior: url(border-radius.htc);

Po drugie – lokalnie a na serwerze

Nie wiem, czy to tylko ja jestem jakiś dziwny, ale odpalając dokument .html z zaimplementowanym border-radiusem na IE lokalnie, za nic nie mogłem zmusić tego dziadostwa do działania. Pojawiał się błąd o odmowie dostępu (access denied) do pliku .js. Wujek Google nie pomógł, okazało się za to, że na serwerze wszystko elegancko hula. No prawie…

Po trzecie – pozycjonowanie absolutne

Mimo, że autorzy skryptu zapewniają, że border-radius działa również przy pozycjonowaniu absolutnym elementów, to jakoś przy wielopoziomowym menu wykorzystującym tę właśnie właściwość, border-radius wypadł blado. Przyznaję – nie miałem już siły z tym walczyć i po prostu zrezygnowałem z zaokrąglania rogów w tym konkretnym przypadku, więc niewykluczone, że wnioski wyciągnąłem zbyt pochopnie, niemniej w tym konkretnym przypadku, z którym się zetknąłem, to rozwiązanie nie zdało egzaminu.

W miarę możliwości postaram się jeszcze przyjrzeć bliżej tematowi border-radius i pozycjonowania absolutnego.

Po czwarte – background

I tu największe rozczarowanie – niestety, ale skrypt powoduje, że pozycja tła, czyli background-position, jest całkowicie przez kIEpskiego ignorowana i niestety nie udało mi się znaleźć żadnego rozwiązania tego problemu. Dlaczego to tak boli? Ponieważ utrudnia wykorzystanie CSS Sprites – na planszy nie może znaleźć się tło dla zaokrąglonego kontenera, ponieważ nie będziemy mogli go odpowiednio wypozycjonować (chyba, że ma współrzędne 0px 0px).

To jest moim zdaniem największa wada tego rozwiązania.

Reasumując

Nie ma co liczyć na cud – zaokrąglanie rogów w IE bez pomocy z zewnątrz, to póki co marzenia ściętej głowy. Niestety – moim zdaniem, o ile dwa pierwsze punktu mają bardziej charakter informacyjny, o tyle dwa kolejne punkty dyskwalifikują to rozwiązanie w bardziej skomplikowanych projektach. Nie zamierzam rezygnować czy kombinować z CSS Sprites tylko po to, żeby użytkownicy IE mogli oglądać zaokrąglone rogi. Trudno – będą miejscami kanciaste. ;)

Na pocieszenie dodam, że mam już na oku jeszcze inne rozwiązanie, które nazywa się DD_roundies. Nie miałem jeszcze okazji go przetestować, ale pewnie zrobię to jutro i na pewno podzielę się swoimi spostrzeżeniami.

Podobne wpisy: