Wychodzimy z doby doszczętnego prymitywizmu, czyli zaokrąglanie rogów w CSS

Nie, nie. Temat nie dotyczy niczyich umiejętności, czy doświadczeń. Bo przecież każdy sam powinien wiedzieć na co go stać, co potrafi, a czego jeszcze nie. Bardziej metaforyzuje stosunek bardziej specyficznych możliwości CSS-a do aktualnych potrzeb. Bo czy niby zwyczajne zaokrąglanie elementów bez używania obiektów graficznych nie jest czymś pozornie zwyczajnym?

To, że moje zdolności graficzne są jak na razie permanentnie rozwojowe tajemnicą nie jest. Dlatego modyfikując ostatnio design serwisu z cytatami chciałem oprzeć się w jak największym stopniu na CSS-ie. I jednym z moich pierwszych zamysłów było stworzenie menu z zmianą kolorystyki tła wraz z zaokrągleniem dla aktywnego linka.

Kolejną moją myślą było – „za nic nie będę tworzył dodatkowych, zbędnych znaczników i bawił się w kreowanie grafiki w celu ładnego utworzenia zaokrąglonego tła”. Dlatego najrozsądniejszym wyjściem, aby osiągnąć podobny do poniższego efekt było użycie arkuszy stylów.

I w tym samym momencie zaczęły się drobne schody. I z obsługą CSS3 w aktualnych przeglądarkach i z arkuszowymi rozszerzeniami w niektórych z nich.

Wraz z najnowszą wersją arkusza stylów pojawia się właściwość border-radius.

border-top-right-radius; /* zaokrąglenie prawego górnego rogu */
border-bottom-right-radius; /* zaokrąglenie prawego dolnego rogu */
border-bottom-left-radius; /* zaokrąglenie lewego dolnego rogu */
border-top-left-radius; /* zaokrąglenie lewego górnego rogu */
border-radius: 5px 6px; /* zaokrąglenie wszystkich rogów ramki o 5px na X i 6px na Y */

Właściwości powyższe pozwalają w każdym elemencie, prócz tabelarycznych których właściwość border-collapse jest ustawione na collapse ustawić zaokrąglenie wszystkich czterech rogów naraz lub każdego z osobna. Wartościami tutaj (maksymalnie dwie) są długości tworzące łuk (np. w pikselach), odpowiednio na osi X i osi Y (podanie jednej wartości spowoduje zastosowanie jej dla obydwu osi).

Proste, co nie? No właśnie, z tymże nieliczne z najnowszych przeglądarek rozpoznają tą właściwość CSS3 poprawnie. I tu z pomocą przynajmniej w przypadku niektórych z powyższych przychodzą ich rozszerzenia arkuszy stylów.

Większość przeglądarek posiada rozszerzenia tworzone w formie -skrót-właściwość zwiększające ich możliwości na stronach. Przechodzą one poprawnie walidację właśnie dzięki zastosowanemu skrótowi. Należy też pamiętać, że różne przeglądarki mogą różnie wyświetlać zaokrąglenia. Najczęściej różnice jednak nie są znaczne, a wręcz są znikome. Poniżej wymieniłem podstawowe formy skrótów wraz z ich odniesieniami do standardowego border-radius.

-webkit-właściwość /* dla WebKit/Safari */
-webkit-border-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-top-right-radius
-webkit-border-top-left-radius

-moz-właściwość /* dla przeglądarek Mozilli */
-moz-border-radius
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
-moz-border-radius-topright
-moz-border-radius-topleft

-khtml-właściwość /* dla Konquerora */
-khtml-border-radius
-khtml-border-bottom-left-radius
-khtml-border-bottom-right-radius
-khtml-border-top-right-radius
-khtml-border-top-left-radius

-icab-właściwość /* dla iCab (MacOS) */
-icab-border-radius
-icab-border-bottom-right-radius
-icab-border-bottom-left-radius
-icab-border-top-right-radius
-icab-border-top-left-radius

-o-właściwość /* dla Opery */
-o-border-radius /* poniższe (włącznie z tą) zostały usunięte z obsługi bodajże od wersji 9.x */
-o-border-bottom-right-radius
-o-border-bottom-left-radius
-o-border-top-left-radius
-o-border-top-right-radius

Właściwości te przyjmują tylko jedną wartość i powodują zaokrąglenie tylko obramowania tworząc łuk. Elementy tła trzeba ustawiać dodatkowo poprzez background. W wypadku elementów typu img zostanie zaokrąglony tylko atrybut border.

I tutaj się pojawiają dwa niszowe problemy. Pierwszy – stały – Internet Explorer. Tutaj i w przenośni i dosłownie nie ma czego komentować. Drugi – niezrozumiałe dla mnie posunięcie programistów Opery, którzy usunęli -o-border-radius z zestawu rozszerzeń tejże przeglądarki. Przez co niestety element aktywny w moim menu jest… kwadratowy (w wersji Opery 9.x, co nie zmienia faktu, że można pożądany efekt uzyskać dzięki SVG, ale to temat o CSS) ;]

Czyli reasumując – jak to powinno wyglądać w przykładzie?

#menu ul li a
{
	/* kolory czcionki i tła */
	color: #fff;
	background-color: #000; 

	/* poszczególne rozszerzenia */
	-moz-border-radius-bottomleft: 3px;
	-moz-border-radius-bottomright: 3px;
	-khtml-border-bottom-left-radius: 3px;
	-khtml-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-icab-border-bottom-right-radius: 3px;
	-icab-border-bottom-left-radius: 3px;
	-o-border-bottom-left-radius: 3px; /* dla starszych wersji przeglądarki */
	-o-border-bottom-right-radius: 3px; /* dla starszych wersji przeglądarki */

	/* wybiórczo dla przeglądarek obsługujących prawidłowo css3 */
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

Może znacie inne kompleksowe rozwiązania na ten temat?