Все мы часто пользуемся свойством CSS border-style, и, думаю, что не ошибусь, предположив, что чаще всего мы используем значение solid — сплошная линия. Она и выглядит сплошной линией во всех браузерах, абсолютно одинаково. Остальные значения этого свойства используются веб-мастерами довольно редко, а многие, хоть и знают об их существовании, в жизни никогда их не применяли — как-то незачем. Ну, от силы значения “dashed” или “dotted”, и то не часто. 

Поэтому многие из нас не знают, что border выглядит по-разному в разных браузерах. Предлагаем ознакомиться с материалами статьи Луи Лазариса из IMPRESSIVE WEBS, в которой он проводит любопытное сравнение отображения данного свойства CSS в основных современных браузерах. Скриншоты и тесты проводились на базе Windows 7.

Используемый для теста код

В эксперименте использовался следующий css-код с указанными вариациями цвета и стиля:

.box {
width: 50px;
height: 50px;
border-width: 5px;
border-color: #444; /* в последующих примерах изменен на pink */
border-style: dotted; /* dashed, double, groove, ridge, inset, outset */
}

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

Итак, поехали.

1. Значение dotted (пунктир)

Наблюдения: в одних случаях наши точки выглядят как ромбы, в других — квадраты, в третьих — круги. Firefox, Chrome и Safari рендерят мощные углы за счет слипшихся точек. Один только IE10 отобразил по всему периметру круглые точки. А пунктир Оперы, пожалуй, выглядит аккуратнее всех.

Как должно быть?
В соответствии со спецификацией, граница с этим значением должна быть «последовательностью круглых точек».

Кто прав?
IE10 отображает явно ближе всего к тому, что говорится в спецификации. Из всех остальных браузеров только Firefox хотя бы рендерит «круглые точки».

2. Значение dashed (штриховка)

Наблюдения: опять отличились Chrome, Safari и Firefox — из-за более крупных пробелов их штриховка выглядит явно иначе, чем у остальных. Firefox как-то по-дурацки не окаймляет углы. Снова Опера рендерит красивее других, но варианты IE, в принципе, ничем не хуже.

Как должно быть?
В соответствии со спецификацией, граница с этим значением должна быть «последовательностью штрихов с плоскими/квадратными торцами».

Кто прав?
Если следовать спецификации, правы все. И в то же время, если придраться, то уродливая версия Firefox как раз больше других подходит под описание, так как его штрихи не пересекаются на углах, как у всех остальных.

3. Значение double (двойная черта)

Наблюдения: из того, что мы видим, все браузеры одинаково отобразили двойную линию. Вроде как IE10 сделал ее чуть светлее, но это единственное замеченное отличие.

Как должно быть?
«Две параллельные сплошные линии, имеющие между собой небольшой промежуток», причем общая толшита линий в сумме с промежутком должны быть аккурат равна указанному значению border-width.

Кто прав?
Как по мне, то все.

4. Значение groove (желоб)

Наблюдения: разница в отображении браузерами практически незаметна. Варианты IE наиболее неприглядные. А Опера снова выглядит лучше других.

Как должно быть?
Предполагается, что граница должна быть «вырезана» на странице с помощью теней, которые более темного оттенка, чем указанный цвет границы. Я, честно говоря, не вижу, чтоб хоть одна из них была «вырезана».

Кто прав?
На мой взгляд, никто. Возможно, я слишком придираюсь, но по-моему, они скорее избражают невозможный треуголник Пенроуза http://ru.wikipedia.org/wiki/Треугольник_Пенроуза.

5. Значение ridge (гребень)

Наблюдения: IE10 явно отображает границу массивнее других. IE7 и IE8 выглядят неприятно. Chrome, пожалуй, отобразил симпатичнее всех.

Как должно быть?
Предполагается, что это вариант, противоположный groove. Если groove «врезается» в страницу, то ridge должен «выступать» из ее поверхности.

Кто прав?
В некоторой степени правильно отображают все. Но не все достаточно четко. Firefox, Safari и Chrome, пожалуй, выглядят наиболее аккуратно.

6. Значение inset (вдавленый)

Наблюдения: все выглядят примерно одинаково. Тени в IE7 и IE8 явно слишком темные, да еще и вторая внутренняя тень, которой нет в других вариантах.

Как должно быть?
Граница должна создавать такой эффект, что содержимое контейнера кажется «утопленным» в страницу.

Кто прав?
Думаю, что все, кроме IE7 и IE8. Все выглядят «утопленными», кроме версий старых IE, которые больше смахивают на ridge из-за второй внутренней тени.

7. Значение outset (выступающий)

Наблюдения: все смотрятся замечательно. Все варианты IE чуть темнее. Думаю, что Safari и Chrome выглядят лучше всех, но нравится и вид в IE7 и IE8.

Как должно быть?
Это значение, противоположное inset. Содержимое контейнера должно выглядеть «приподнятым» над поверхностью страницы.

Кто прав?
В определенной степени, все. Но, хотите соглашайтесь, хотите нет, я считаю IE7 и IE8 лучше других отображают «приподнятость». А остальные все просто переносят тени на противоположную сторону по сравнению с inset, из-за чего оба значения кажутся очень похожими. А IE10 вообще как-то безобразно выглядит.

Выводы

Как всегда бывает с графикой, которую рендерит браузер, есть явная разница в отображении разными движками. И как обычно, эти разлисия довольно несущественны, так что можно не заморачиваясь применть все эти значения.

Равно как в ситуации с элементами форм, вы не добьетесь абсолютно идентичного отображения границ всеми браузерами, да и в этом нет никакого смысла. Но, как минимум, стоит знать, в чем разница в отображении различных значений.

По материалам статьи IMPRESSIVE WEBS



Комментарии