HB's Thinking Usable » Border Radius and Round

В следващата 3^та версия на CSS ще бъде възможно директното управление на закръгляването на ъглите в даден правоъгълник. Съгласно препоръката на W3 ще се използват допълнителни пропъртита от вида: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius.

Идеята е прекрасна и дава един допълнителен фичър, който доста ще обогати начините на визуализация и разпределение на обемите по документите.

До официалното обявяване на 3^та версия на CSS и въвеждането й в енджините на барузърите ще мине още доста време, но първите стъпки вече са направени и част от браузър енджините, вече въведоха собствени емулации и по-конкретно Mozilla Firefox и Safari.

За улеснение в последващото редактиране на файловете със стиловете, при излизане 3^та версия на CSS, двата браузъра добавят пред проъртитата по една кратка абревиатура, съответно: -moz- за Mozilla Firefox и -webkit- за Safari (всъщност при Mozilla Firefox и самото пропърти за разширено представяне е изменено, освен добавената абревиатура), като крайния резултат е:

Mozilla Firefox: -moz-border-radius; -moz-border-radius-topleft; -moz-border-radius-topright; -moz-border-radius-bottomright; -moz-border-radius-bottomleft
Safari: -webkit-border-radius; -webkit-border-top-left-radius; -webkit-border-top-right-radius; -webkit-border-bottom-right-radius; -webkit-border-bottom-left-radius

Седнах и се заиграх с новите фичъри и създадох един параграф (ще записвам вътрешно стиловете, за да можете да следите директно измененията):

След като го създадох, приложих (в примера само за Mozilla Firefox) новите пропъртита.

<p style="width:75px; height:75px; display:block; background:#f0f0f0; -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px">

Изглежда много готино и става адски лесно.

До тук оформих само закръглянето, но исках в крайния резултат да добавя цветно разделение на бордера, който е на дъното на образуваната фигура. Добавянето също е лесно и реших да използвам пропъртито само за дъното (border-bottom:1px solid #333):

<p style="width:75px; height:75px; display:block; background:#f0f0f0; -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px; border-bottom:1px solid #333">

Хубава работа, 'ма циганска. Много грозно. Изобщо не исках така да е орязано, а плавно да следва извивката. Малко се отчаях и реши да драсна едно писмо и на W3 и на Mozilla Firefox, за да погледнат този бъг или можеби да доразширят правилата за определяне на бордерите. Писах им... Получих отговори няколко дена по късно, но няма сега да Ви занимавам с тях, а ще Ви покажа какво стана на другия ден.

Сядайки пред компа първото нещо, което проверих е дали съм получил отговор - нямаше (все още) и пак отвори малкото примерче да си го по джуркам. Искам да уточня, че не съм правил тестове за Safari.

И о боже мой...

Всичко стана, след като измених малко използваното от мен пропърти за бордера на дъното (border-bottom:1px solid #333) с другия му вариант: border-width:0 0 1px 0; border-style:solid; border-color:#333... В крайна сметка праграфа от примера е:

<p style="width:75px; height:75px; display:block; background:#f0f0f0; -moz-border-radius-bottomleft:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-topleft:20px; -moz-border-radius-topright:20px; border-width:0 0 1px 0; border-style:solid; border-color:#333"> 

Това вече е друго нещо, а както забелязвате го използвам и тук в сайтчето.

Много приятно и с много възможности за прилагане. С нетърпение очаквам 3^та версия на CSS и новите неща, които ще навлязат в мрежата.

И всичко това само през стиловете и без картинки. Жестоко...