Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Границы в разных браузерах Категория: Веб-мастерство
Название: Границы в разных браузерах
Дата добавления: 29-06-2012
Раз просмотрено: 371
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Границы в разных браузерах

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

В этой статье вы найдете скриншоты с подробными описаниями и спецификациями видов границ в разных браузерах. Все приведенные скриншоты сделаны в браузерах в операционной системе Windows 7.

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

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

.box {
	width: 50px;
	height: 50px;
	border-width: 5px;
	border-color: #444; /* Изменяется на "pink" для других */
	border-style: dotted; /* Другие значения: dashed, double, groove, ridge, inset, outset */
}

Dotted

Точечная граница в разных браузерах

Наблюдения:
Некоторые похожи на ромбы, другие выглядят, как круги. У Firefox, Chrome и Safari более сильно выраженные углы. Internet Explorer 10 является единственным, у кого точки расположены по всему периметру границы. Опера, скорее всего, отображает точечную границу, как один из самых аккуратных браузеров.

Как это должно выглядеть?
Согласно спецификации, точечная граница должна выглядеть, как «серия круглых точек».

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

Dashed

Пунктирная граница в разных браузерах

Наблюдения:
Благодаря весьма большому расстоянию, Chrome, Safari и Firefox отображают пунктирную границу совершенно иначе, чем другие браузеры. Firefox имеет странный способ отображения углов. И опять, Opera выглядит лучше других браузеров, но и все версии Internet Explorer выглядят довольно хорошо.

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

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

Double

Двойная граница в разных браузерах

Наблюдения:
Как видно из скриншотов, все браузеры отображают двойную границу почти одинаково. Internet Explorer 10 имеет немного более светлую границу, однако, на этом различия заканчиваются.

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

Кто отображает это правильно?
Все браузеры следуют этим спецификациям.

Groove

Резная граница в разных браузерах

Наблюдения:
Есть довольно много различий между различными браузерами. Версия отображения этой резной границы у Internet Explorer самая непривлекательная. И снова, Opera отображает эту границу лучше, чем остальные браузеры.

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

Кто отображает это правильно?
Все браузеры, за исключением WebKit (Chrome и Safari) следуют спецификациям. У этих же браузеров наблюдается тройная граница, в то время, как по спецификации должна быть только сама граница и тень.

Ridge

Выступающая граница в разных браузерах

Наблюдения:
Internet Explorer 10 отображает выступающую границу гораздо сильнее, по сравнению с другими браузерами. Internet Explorer 7 и 8 отображают эту границу серо и не очень приятно. Скорее всего, лучше всех справились Chrome и Safari, у них выступающая граница получилась весьма привлекательной.

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

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

Inset

Вдавленная граница в разных браузерах

Наблюдения:
Все браузеры отображают вдавленную границу очень похоже. Internet Explorer 7 и 8 отображают затемнения в добавок к внутренней тени, которого другие браузеры не имеют.

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

Кто отображает это правильно?
Я думаю, что каждый браузер отображает ее верно, за исключением Internet Explorer 7 и 8. Из-за дополнительной тени, их вариант границы гораздо больше похож на выступающую (ridge) границу.

Outset

Выпуклая граница в разных браузерах

Наблюдения:
Все браузеры отображают выпуклую границу довольно хорошо. Границы у всех версий Internet Explorer темнее чем у других браузеров. Internet Explorer 10 отображает эту границу не слишком красиво. Я думаю, что Safari, Chrome и Opera выглядят лучше других, но и старые версии Internet Explorer не плохи.

Как это должно выглядеть?
Выпуклая граница должна быть противоположной вдавленной. Содержимое контейнера, обрамленной этой границей должно как будто бы поднимается со страницы.

Кто отображает это правильно?
В некоторой степени, все браузеры удовлетворяют требованиям. Но версии Internet Explorer 7 и 8 являются более ярко выраженными, чем остальные. Их варианты выглядят особенно «поднятыми над страницей». Остальные браузеры просто меняют местами тень и основной цвет в противоположность со вдавленным вариантом.

Заключение

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

Это интересно: «Навигация в стиле Apple».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.