O Css Circles

Css Cirlces(inaczej zwane przeze mnie techniką planet) to po prostu stosowanie okręgów/kół zamiast standardowych czworokątów( z mniej lub bardziej zaokrąglonymi rogami) w roli pojemników na treść.

Technika Css Circles opiera się głównie o właściwość CSS 3 jaką jest border-radius. Tak naprawdę pojemnikami są nadal zwykłe kwadratowe divy, paragrafy czy inne HTMLowe obiekty, tyle że ich rogi zaokrąglone są do maksimum. Dokładniej do połowy długości boku i należy uwzględnić border-width. Zaokrąglając każdy róg w ten sposób otrzymujemy okrąg :).

Zacznijmy od przykładu, po lewej gotowe kółko, po prawej dowód, że wcześniej był to kwadratowy div:

Tak to wygląda w Firefoxie:

Kod CSS:

.circle{
 border: 5px solid #fff;
 width: 200px;
 height: 200px;
 -moz-border-radius: 105px;
 -webkit-border-radius: 105px;
 border-radius: 105px;
}

Jak jest z dostępnością techniki?

Jak działa w Internet Explorer?

Mówiąc krótko: NIE działa. Od wciąż obecnej wersji 6 przeglądarki Internet Explorer po obecną w wersji 8, nie ma żadnych oznak jakiejkolwiek obsługi zaokrąglania rogów. Wypadałoby wierzyć ,że Internet Explorer 9 będzie posiadał jakieś powiązanie z border-radius… ale to dopiero przyszłość. Internet Explorer 9 będzie miał obsługę border-radius, w dodatku w czystym CSS 3. Nareszcie!

Jak działa w Operze?

Tu wielki zawód, ponieważ nie działa. Wcześniejsze wersje opery obsługiwały rozszerzenie -o-border-radius, jednak wersja 9 wycofała obsługę tego rozszerzenia. Obsługa wróci około wersji 10.5(moje spekulacje z października, które okazały się prawdziwe) wraz z Presto 2.4. Co najlepsze, obsługa wróci już w wersji CSS 3 border-radius czyli bez własnych rozszerzeń w stylu o-border-radius.

Jak działa w Google Chrome?

Chrome(wersja 3) obsługuje border-radius w swoim rozszerzeniu -webkit-border-radius, ma jednak dwa zasadnicze problemy. Brak antialiasingu, przez co zaokrąglone rogi są postrzępione, co wygląda dość niezachęcająco. Drugim problemem jest łatwość zepsucia zaokrągleń poprzez przekroczenie maksymalnego możliwego promienia zaokrąglenia, czyli połowy wysokości pojemnika. Z tego co zauważyłem nie występuje to zawsze, albo po prostu zostało naprawione w jakimś cichym update chrome 3.x. Jakkolwiek należy zachować ostrożność. Na szczęście wersja 4 będzie obsługiwać border-radius bez rozszerzenia oraz pojawi się antialiasing!

Jak działa w Safari?

Ponieważ Safari (wersja 4) korzysta z tego samego silnika co chrome(WebKit), więc dostępne jest to samo rozszerzenie -webkit-border-radius. Safari jednak, w odróżnieniu od chrome obsługuje antialiasing i wszystko wygląda estetycznie. Z drugiej strony jednak otrzymuje w spadku łatwość zepsucia efektu okręgu. Również należy zachować ostrożność.

Jak działa w Firefoxie?

Firefox od wersji 3(wersja 2 ma problem z zaokrąglaniem teł) to wzór jeśli chodzi o poprawną obsługę właściwości border-radius, choć wciąż jako własne rozszerzenie -moz-border-radius. Obsługa antialiasingu, oraz brak problemu przekroczenia maksymalnego promienia sprawia, że technika ta jest najbardziej zalecana do stosowania w firefoxie.

Gdzie jeszcze jest dostępne border-radius?

Jest jeszcze obsługa w Konqueror  poprzez użycie -khtml-border-radius. Z tego co mi wiadomo, działa to bez problemu w wersji Linuxowej.

Jak animować border-radius?

Kwestia animacji jest dość istotna ponieważ webkit ma pewne problemy. Weźmy dla przykładu poniższy kod jQuery:

$(this).stop().animate({
 WebkitBorderRadius: '10px',
 MozBorderRadius: '10px',
 BorderRadius: '10px'
 },500);
});

Czyli w ciągu pół sekundy chcieliśmy zaokrąglić wszystkie rogi. I tu psikus, bo webkit(nie wiem jak z KHTML, ale może być podobnie) ma z tym problem, a mianowicie nic nie robi. Aby temu zaradzić musimy wymienić każdy róg oddzielnie:

$(this).stop().animate({
 WebkitBorderTopLeftRadius: '10px',
 WebkitBorderTopRightRadius: '10px',
 WebkitBorderBottomLeftRadius: '10px',
 WebkitBorderBottomRightRadius: '10px',
 MozBorderRadius: '10px',
 BorderRadius: '10px'
 },500);
});

Dopiero teraz wszystko działa jak należy :).

Jest jeszcze jedna istotna sprawa w konwencji zapisu, jeśli chodzi o rogi. Konwencja mozilli jest odmienna od tej przyjętej w CSS 3 i trzeba zwrócić na to uwagę. Poniżej tabelka z właściwościami.

konwencja CSS
-	CSS3	Mozilla	WebKit	KHTML
Wszystkie rogi	border-radius	-moz-border-radius	-webkit-border-radius	-khtml-border-radius
Górny lewy róg	border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius	-khtml-border-top-left-radius
Górny prawy róg	border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius	-khtml-border-top-right-radius
Dolny lewy róg	border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius	-khtml-border-bottom-left-radius
Dolny prawy róg	border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius	-khtml-border-bottom-right-radius
konwencja DOM
-	CSS3	Mozilla	WebKit	KHTML
Wszystkie rogi	BorderRadius	MozBorderRadius	WebkitBorderRadius	KhtmlBorderRadius
Górny lewy róg	BorderTopLeftRadius	MozBorderRadiusTopleft	WebkitBorderTopLeftRadius	KhtmlBorderTopLeftRadius
Górny prawy róg	BorderTopRightRadius	MozBorderRadiusTopright	WebkitBorderTopRightRadius	KhtmlBorderTopRightRadius
Dolny lewy róg	BorderBottomLeftRadius	MozBorderRadiusBottomleft	WebkitBorderBottomLeftRadius	KhtmlBorderBottomLeftRadius
Dolny prawy róg	BorderBottomRightRadius	MozBorderRadiusBottomright	WebkitBorderBottomRightRadius	KhtmlBorderBottomRightRadius

Stronę najlepiej oglądać w rozdzielczości 1024 x 768 w przeglądarce…

Czy zatem jeśli chcemy użyć tej techniki to wracamy do kierowania stron tylko pod konkretne przeglądarki?

Absolutnie nie. Podobnie jak zaokrąglone rogi, tak i same kółka to tylko „fajny bajer”, który zobaczą użytkownicy przeglądarek obsługujących ciut(przyszłości) ponad obecne standardy tworzenia stron WWW.

Czy to dyskryminacja? Raczej przedsmak przyszłych standardów…