В соавторстве с Вадимом Макишвили
Для реализации скругленных уголков мы искали максимально легкое решение — отсутствие дополнительной разметки, минимум CSS и JS. Конечно, есть очень мощные средства, например, rocon, но нам они показались избыточными и громоздкими.
Идея была в том, чтобы использовать CSS-свойство border-radius, которое поддерживают некоторые прогрессивные браузеры:
- Firefox начиная с версии 1.0 (~24% пользователей)
- Safari начиная с 3.0 + Chrome (~2%)
- Konquerer (~0,05%)
Итого, для ~25% пользователей уголки можно рисовать средствами браузера — уже неплохо.
Смешно, но свойство border-radius, которое есть в CSS3, пока не поддерживается ни одним браузером. Однако, некоторые браузеры поддерживают аналогичные проприетарные свойства, например, -moz-border-radius в Firefox.
.corners {
/* Возможно какой-нибудь браузер в будущем, будем надеяться IE */
border-radius: 4px;
/* WebKit (Safari/Chrome) */
-webkit-border-radius: 4px;
/* KHTML (Konquerer) */
-khtml-border-radius: 4px;
/* Возможно Opera в будущем */
-opera-border-radius: 4px;
/* Gecko (Firefox) */
-moz-border-radius: 4px;
}
Для остальных браузеров, не поддерживающих border-radius, будем яваскриптом вставлять доп. элементы для реализации уголков.
// Проверяет, поддерживает ли элемент elem CSS-свойство border-radius.
var isBorderRadiusSupported = function (elem) {
var s = elem.style;
return typeof s.borderRadius === "string" ||
typeof s.WebkitBorderRadius === "string" ||
typeof s.KhtmlBorderRadius === "string" ||
typeof s.OperaBorderRadius === "string" ||
typeof s.MozBorderRadius === "string";
};
// Добавляет внутрь элемента elem доп. элементы реализующие уголки.
var wrapInCorners = function (elem) {
// Реализуем уголки любым известным способом
$(elem).prepend('<i class="lt"/><i class="rt"/><i class="lb"/><i class="rb"/>');
};
// Реализует закругленные уголки с помощью доп. элементов
// для браузеров не поддерживающих CSS-свойство border-radius.
var checkCorners = function () {
// Ищем все элементы с классом corners
$('.corners').each(function () {
// Если для данного элемента браузер не поддерживает border-radius
if (!isBorderRadiusSupported(this)) {
// Добавляем внутрь элемента доп. элементы реализующие уголки
wrapInCorners(this);
}
});
};
// DOM загрузился и готов к обходу и манипуляциям
$(function () {
checkCorners();
});
Плюсы решения:
- HTML льется чистый, без доп. элементов, и, соответственно, лишняя разметка не мозолит глаз ни в статической верстке, ни в XSL-шаблонах.
- В прогрессивных браузерах (примерно у четверти пользователей) уголки рисуются средствами браузера (максимально быстро).
- Есть задел на будущее — если IE или Opera надумают реализовать
border-radius, то наше решение готово к этому радостному событию.
UPD: В комментариях указали на слабые стороны этого решения. Также откликнулись мои коллеги и помогли улучшить решение по производительности. Спасибо всем! Для этого мне и нужен блог — поделиться решением, собрать фидбек и найти более удачный вариант.
1. Не нужно проверять поддержку border-radius для каждого элемента. Сделаем эту проверку один раз в теге <head> до загрузки контента и добавим соответствующий класс у элемента <html>.
// Проверяет, поддерживает ли браузер CSS-свойство border-radius.
var isBorderRadiusSupported = function () {
var s = document.documentElement.style;
return typeof s.borderRadius === "string" ||
typeof s.WebkitBorderRadius === "string" ||
typeof s.KhtmlBorderRadius === "string" ||
typeof s.MozBorderRadius === "string";
};
document.documentElement.className += isBorderRadiusSupported() ?
" border-radius" : " no-border-radius";
2. Создавать из строки ноды под каждый уголок недешево, а зааппендить их в DOM еще дороже. Вставка каждого уголка это рефлоу блока, в который он вставляется. Выгоднее просто отдавать доп. разметку сразу в HTML. Задействовать доп. разметку будем в зависимости от класса, который мы выставили у элемента <html>.
.no-border-radius .corners .lt {
// Стили для уголков
}
3. На текущий момент в Опере нет поддержки border-radius. Не стоит гонять балластный код ради неизвестного будущего. Поэтому отрываем -opera-border-radius: 4px; и соответствующую проверку в JS.
UPD2: Opera 10.50 pre-alpha поддерживает border-radius, причем без префикса. Ура!
