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 — норма, образец.

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