Kulaté rohy pomocí CSS3 v každém prohlížeči

Středa, Září 7, 2011

Kulaté rohy

Kulaté rohy na webových stránkách nešly nikdy přímo vytvořit a vždy bylo nutné nějakým způsobem tento nedostatek obejít. Nejčastější řešení spočívalo ve využití obrázku na pozadí, ve kterém byly kulaté rohy nakreslené. Vhodným nastylováním vznikl efekt, že je sám prvek kulatý. Druhou možností, se kterou jsem se setkal bylo vytvoření kulatých rohů pomocí javascriptu. Ten fungoval na principu, že kolem elementu, který měl mít kulaté rohy, vytvořil tolik dalších div-ů, kolik bylo potřeba a napozicoval je tak, že vytvořily kulatý roh.

V CSS3 nyní existuje vlastnost border-radius, která libovolnému blokovému elementu vytvoří kulaté rohy bez nejrůznějších obezliček. Jehho syntaxe je border-radius:horní-levý horní-pravý dolní-pravý dolní-levý; Případně pokud chcete mít pro všechny rohy stejný poloměr stačí zadat např. border-radius:5px; Problém je v tom, že specifikace CSS3 ještě není dokončena a tak tento příkaz není přímo podporován. Moderní webové prohlížeče jej však umožňují použít díky vendor prefixům.

Tento zápis umožní zaoblit rohy ve všech moderních prohlížečích:

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

Problém však nastává u internet exploreru, který tyto příkazy nepodporuje. Řešením je však PIE. Pomocí knihovny PIE je možné používat určité vlastnosti CSS3 i v IE. Jedná se o htc soubor, který se vloží do CSS stylopisu pomocí příkazu behavior. Kompletní zápis pro všechny prohlížeče pak vypadá následovně.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu.

Tento zápis pak zaoblí rohy v Internet exploreru, Mozille Firefox, Webkitu, Google Chrome a nejnovější Opeře. To znamená, že web používající tento zápis se zobrazí korektně nejméně v 95% prohlížečů. Zbývající prohlížeče zobrazí rohy klasicky hranaté, což kromě estetického dojmu nemá žádný další vliv na funkčnost nebo přístupnost. Proto nemá moc smysl se zbývajícími 5ti procenty příliš zabývat.

Ve specifikaci jsou pak popsány mnohem širší možnosti zápisu, ty však nemusí být ještě podporovány všemi prohlížeči a nejsou podporovány ani knihovnou PIE. Běžně se však používají pouze obyčejné kulaté rohy, kde mají všechny stejný poloměr. Specifikaci si můžete prohlédnout zde.

Dále si také přečtěte článek na co si dát u knihovny PIE pozor nebo další články o knihovně PIE.

Napsat komentář