Для меня одним из наиболее интересных аспектов CSS3 является возможность исключать изображения из моего кода CSS. Сейчас появилось много новых свойств CSS, которые могут эффективно заменить небольшие нарезанные изображения, которые мы все использовали, чтобы создавать визуально привлекательные дизайны в Интернете. Прошли те времена, когда приходилось тратить время на выравнивание разрозненных фрагментов, включая скругленные углы с тенями и градиентами. Замена этих изображений с помощью CSS имеет несколько преимуществ.

• Снижение накладных расходов по обслуживанию — больше нет необходимости создавать, обновлять и отслеживать эти файлы изображений. Вместо того, чтобы тратить время на вычисление, как логически объединить изображения в графический объект, можно использовать его для следующего проекта.
• Улучшение производительности — без дополнительных HTTP-запросов ваша конструкция (а также вся страница) загружается быстрее.
• Меньше визуальных "ошибок" — опора на изображения для ключевых визуальных объектов вносит риск того, что изображения не смогут загрузиться. Причины этого могут быть самые разные: потеря сетевого соединения, высокий уровень задержки, ошибки сервера и пр. Если большая часть дизайна определяется с помощью CSS, то число уязвимых мест уменьшается, что обеспечивает лучшее качество взаимодействия с пользователями.

Хотя CSS3 не может гарантировать, что вам больше никогда не понадобятся какие-либо изображения, имеется достаточно возможностей, позволяющих исключить много "вспомогательных" изображений, применяемых для создания деталей сегодняшних привлекательных веб-сайтов.

Свойство border-radius

Имя свойства CSS для скругленных углов — border-radius. Указав одно значение, вы можете задать радиус рамки элемента во всех четырех углах. Значения, которые используются для установки горизонтального и вертикального радиуса рамки, могут быть заданы в любых допустимых в CSS единицах измерения, включая em, ex, пункты, пиксели, проценты и др. Например:

border-radius: 15px;

Применение этого указания к элементу задает для каждого угла горизонтальный и вертикальный радиус рамки в 15 пикселей (см. рисунок ниже).

Как и для свойства border, можно задавать одно, два, три или четыре значения для свойства border-radius. В данном случае первое значение предназначено для верхнего левого угла, и каждое следующее значение предназначается для следующего угла по часовой стрелке (т.е. второе значение — для верхнего правого угла и так далее). Если задано только два значения, то первое применяется к верхнему левому и нижнему правому углу, а второе — к правому верхнему и нижнему левому углу. Если задано три значения, то четвертое значение копируется из второго. Несколько примеров:

border-radius: 15px 5px; 
border-radius: 15px 5px 25px; 
border-radius: 15px 5px 25px 0px;

Существует дополнительный ряд значений, который используется свойством border-radius и представляет вертикальные радиусы. Они задаются в значении свойства после косой черты и ведут себя так же, как первый ряд значений, т.е. указывается от одного до четырех значений, которые применяются к углам, начиная с верхнего левого. Если указано только одно дополнительное значение, то оно используется в качестве вертикального радиуса для всех четырех углов; если задано только два значения, то первое применяется к верхнему левому и нижнему правому углу, а второе — к правому верхнему и нижнему левому углу. Например:

border-radius: 15px 5px / 3px; 
border-radius: 15px 5px 25px / 3px 5px; 
border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

Помните, что при установке значения 0 для горизонтального или вертикального радиуса угол станет прямым.

Отдельные радиусы рамки

Кроме краткого свойства border-radius, задающего радиус рамки для всех четырех углов, имеются еще четыре отдельных свойства:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Каждое из них задает радиус рамки конкретного угла и может принимать одно или два значения. Если указано одно значение, то оно используется и для горизонтального, и для вертикального радиуса. Например:

border-top-left-radius: 15px;

Если указано два значения, то первое становится горизонтальным радиусом, а второе — вертикальным:

border-top-left-radius: 15px 5px;

Обратите внимание, что при использовании свойств для конкретных углов не нужно указывать косую черту между значениями.

Поддержка и использование

Браузеры Internet Explorer 9, Opera 10.5, Safari 5, Chrome 4 и Firefox 4 поддерживают свойство border-radius без каких-либо префиксов поставщиков. В предыдущих версиях Safari и Chrome требуется префикс –webkit-, а в предыдущих версиях Firefox — префикс –moz-. В настоящее время в дополнение к стандартным свойствам для оптимального охвата браузеров рекомендуется использовать только свойства, специфичные для Firefox:

-moz-border-radius: 15px;
border-radius: 15px;

Помните, что стандартное объявление должно быть последним при включении вместе с объявлением, специфичным для производителя.

Синтаксис для отдельных радиусов рамки в браузерах Firefox до версии 4 также слегка отличается:

• -moz-border-radius-topleft эквивалентно border-top-left-radius
• -moz-border-radius-topright эквивалентно border-top-right-radius
• -moz-border-radius-bottomleft эквивалентно border-bottom-left-radius
• -moz-border-radius-bottomright эквивалентно border-bottom-right-radius

Если вы используете свойства отдельных радиусов рамки и требуется поддержка в предыдущих версиях Firefox, то необходимо включить их в дополнение к именам стандартных свойств.

Предостережения

Хотя скругленные углы достаточно хорошо поддерживаются всеми основными браузерами, еще существуют некоторые проблемы с совместимостью. Все браузеры работают очень хорошо, когда все четыре рамки имеют одинаковый цвет, одинаковую толщину, одинаковый стиль (сплошной, штриховой и т.п.), а радиусы заданы в целых единицах измерения (не в процентах). Но если границы имеют разные характеристики с разных сторон, и применяются радиусы границ, то браузеры начинают вести себя по-разному. Кроме того, не все браузеры точно поддерживают проценты для радиуса рамки. Следующий пример иллюстрирует некоторые из этих проблем (при просмотре в нескольких разных браузерах):

border-color: black;
border-style: solid dashed;
border-width: 1px 2px 3px;
border-top-color: red;
border-radius: 5%;

Microsoft имеет исчерпывающий набор тестов для свойств border-radius, и рассчитывает, что они будут основой для стандартизации браузеров в менее распространенных случаях использования. Пока браузеры не сошлись в решении для сложных случаев, при использовании border-radius безопаснее всего придерживаться рамок со сторонами одинакового стиля и толщины и не использовать проценты в качестве единиц измерения.

Заключение

Скругленные углы в Интернете теперь легко создаются с помощью свойства CSS3 border-radius. В следующей статье из этой серии я буду рассматривать другую часть CSS3, позволяющую исключать изображения: box-shadow.