CSS3 Закругление уголков и валидация

С рождением замечательных CSS₃, для того, чтоб на своем сайте закруглить уголки каких-либо блоков уже не обязательно использовать картинки или громадный JavaScript. Достаточно добавить несколько мелких строк в ваш файл css и вуаля - все сделано.

Но каково было мое удивление, когда я на проверку валидности кода выставил свой файл style.css...

Сначала, для тех кто не в теме, закругление уголков с помощью CSS₃ осуществляется с помощью параметра "border-radius" .

Совместимость браузеров и использование "border-radius"

Давайте рассмотрим какие браузеры понимают параметр "border-radius" . Следует отметить самые популярные: Chrome, Firefox, Opera, Internet Explorer. Safari я не рассматриваю (без комментариев), все остальное - вообще браузерами не считаю. Итак, какие популярные браузеры поддерживают параметр "border-radius" в чистом виде?

• До недавнего времени был единственный браузер, поддерживающий эту опцию - Google Chrome, в нем "border-radius" был включен еще с самой первой его версии.
• Opera стала уметь округлять уголки с 10.5-й версии, до этого не умела.
• Само собой, всеми "любимый" Internet Explorer до сих пор этого не умеет делать (в прочем, с проблемами в ie уже давно все свыклись), это обещают исправить в 9-й версии браузера.
• Firefox от Mozilla мы оставив на закуску, объяснив пока нормальный способ использования этой функции...

Использование "border-radius"

Для того, чтоб закруглить уголки в каком-либо блоке, необходимо в css добавить свойство "border-radius" , например:

#block{border-radius:10px;}

Все, элемент "#block" будет с закругленными уголками, но при таком раскладе все 4 угла будут одинаковыми. На случай кастомизирования каждого угла у этого свойства есть возможность выставить параметры для каждого угла в отдельности: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius - соответственно: верхний левый, верхний правый, нижний правый и нижний левый углы. То есть, можно забабахать вот такие настройки:

#block{
border-top-left-radius:10px;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;}

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

#block{border-radius:10px 15px 20px 25px;}

В итоге мы получим то же, что и в предыдущем варианте, только попроще :) . Тут следует лишь запомнить что порядок уголков начинается с левого верхнего - по кругу - к левому нижнему. Еще можно использовать всего 2 и 3 указателя, но там уже несложно догадаться.

Повторюсь: выше показанное будет работать только в Chrome (все версии), Opera (начиная с 10.5 версии) и Internet Explorer (начиная с 9).

А что же с Mozilla Firefox?

C ним сложней. До версии 3.0 он совсем не признавал "border-radius" , а потом начал признать "по-своему", это оригинальный браузер, ему нахрен не нужны стандарты. Вместо "border-radius" он использует свое название: "-moz-border-radius" . Казалось бы, всего 5 добавленных символов, а придется добавлять из-за этого лишние строки кода. Благо, работает и дает он результат такой же, как и с использованием стандартной функции. То есть, если вдолбить такие буковки:

#block{
border-radius:10px 15px 20px 25px;
-moz-border-radius:10px 15px 20px 25px;
}

Получится правильное отображение уже в 3-х браузерах (Chrome, Opera, Firefox), но код становится тяжелей из-за мусора, а такой код у меня вообще вызывает температуру:

#block{
border-top-left-radius:10px;
border-top-right-radius:15px;
border-bottom-right-radius:20px;
border-bottom-left-radius:25px;
-moz-border-radius-topleft10px:;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-bottomleft:25px;
}

И это все лишь для округления уголков! А что будет если добавить еще такой же свой "оригинальный" высер Safari, накшталт: "-webkit-border-bottom-right-radius" ???

Ну да ладно, лишний мусор в коде - это еще фигня, тем более, с выходом версии 4.0 Firefox будет понимать нормальный код (к слову, Safari - c версии 5.0), есть еще одна проблемка.

Валидность кода

Угадайте что выдаст валидатор на проверку вашего css после округления уголков?

Свойство -moz-border-radius не существует ...
Свойство -webkit-border-radius не существует ...

Правильно. Всякие шлаки от "оригинальных" браузеров не проходят проверку валидации. Да, кто-то скажет:

W3C фактически принадлежит компании Майкрософт, а интернет эксплорер - это продукт Майкрософта и им пофиг на вашу мозиллу, сафари и т.д. Если компания Майкрософт говорит, что -webkit-border-radius она не поддерживает, значит этот параметр и не будет валиден.

Мать вашу! С какого перепугу W3C должен подстраиваться под высеры каждого левого продукта??? W3C задает стандарт и на него необходимо равняться! Да, ie не поддерживает эту функцию, но в будущем он будет поддеживать "border-radius" , но никогда он не будет поддерживать чисто Мозилловские заморочки и никогда веб-стандарт не будет подстроен для каждого браузера! "Стандарт" - от англ. standard — норма, образец.

Конечно, многие говорят что валидность - это херня и не нужно ее придерживаться...мол, у них все работает замечательно и без валидности кода, с миллионом ошибок при проверке...и пр. Это выбор каждого. Если не умеете, не можете или не хотите - валидность (то есть, правильный код без ошибок) не нужна. Я думаю иначе. :)