Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
Облако пометок
css Google html SEO WordPress Яндекс видео графический дизайн заработок индексация интернет ключевые слова контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт статья хостинг

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

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

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

Сначала, для тех кто не в теме, закругление уголков с помощью CSS3 осуществляется с помощью параметра "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 — норма, образец.

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

Комментировать эту запись запрещено :(