ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

CSS: границы вида groove и ridge, значение initial

Сказанное в этом посте проверялось в браузере «Microsoft Edge» (на движке «Chromium») в операционной системе «Windows 10».

У HTML-элементов в браузере может отображаться граница разного вида. Всего этих видов около десятка, но мне было любопытно рассмотреть виды границ groove и ridge.

Для тестирования я написал такой код:
<!-- в заголовочной части HTML-страницы -->
<style>
  span {
    padding: 3px;
    display: inline-block; /* чтобы элемент не вылезал за пределы родителя */
  }
  #b1 { border: 7px solid black; }
  #b2 { border: 7px groove black; }
  #b3 { border: 7px ridge black; }
</style>
<!-- в теле HTML-страницы -->
<span id="b1">Граница solid</span>
<span id="b2">Граница groove</span>
<span id="b3">Граница ridge</span>

У меня в браузере это выглядит так (картинка):



Тонкая серая линия сверху и слева на рисунке обозначает границу области просмотра HTML-страницы в браузере. Эта линия уже не является частью HTML-страницы, а является частью окна браузера.

Первый вопрос: почему при отображении этого кода в браузере границы трех видов (solid, groove, ridge) в данном случае отображаются одинаково?

Короткий ответ: это произошло из-за цвета black (черный, #000000), прописанного в стилях элементов. Черный цвет в данном случае сгладил разницу между этими тремя видами границы.

А теперь подробнее. Что вообще означают эти названия — solid, groove и ridge? В переводе на русский эти названия звучат как «сплошная» (solid), «углубление» (groove) и «выступ» (ridge). На рисунке выше граница вида solid изображена так, как положено по определению, а другие две границы — нет. Почему? Попробуем использовать в коде вместо цвета black какой-нибудь другой цвет, например red (красный, #ff0000). У меня в браузере получилось следующее (картинка):



Теперь разница между этими тремя видами границы ясно видна. По определению предполагалось, что граница вида groove («углубление») должна создавать у наблюдателя впечатление, будто текст внутри элемента находится в некоем углублении, а граница вида ridge («выступ») должна создавать противоположное впечатление. На мой взгляд, это удалось не совсем. Если граница вида groove действительно создает впечатление, будто текст внутри находится в углублении, то граница вида ridge не создает впечатления, будто текст внутри находится на некоем выступе; скорее кажется, что текст внутри находится на поверхности экрана, а вокруг него выстроена выпуклая граница.

Как создаются эффекты углубления и выступа? Границы вида groove и ridge отображаются не одним, а двумя цветами (один — посветлее, другой — потемнее), хотя в описании стиля задан только один цвет. Граница с каждой стороны элемента разбивается на две части — внутреннюю и внешнюю, при этом одна часть окрашивается в цвет посветлее (заданный в описании стиля), а другая часть — в цвет потемнее (вычисляемый браузером, отталкиваясь от цвета, заданного в описании стиля). Из-за этого создается впечатление, будто граница освещается неким источником света, расположенным в случае границы вида groove снизу справа, а в случае границы вида ridge — сверху слева (то есть с противоположного направления).

Теперь становится понятным, почему при цвете black (черный, #000000) разница между границами вида solid, groove и ridge исчезает: браузер не может найти цвет темнее черного для отображения двухцветных границ вида groove и ridge, ведь черный цвет — это самый темный цвет в палитре.

Второй вопрос: если для двухцветных границ вида groove и ridge при окрашивании граница делится на две части, то как происходит это деление в случае, если ширина границы равна нечетному числу пикселей, ведь такое число не разделишь надвое без остатка? Например, в нашем тестовом коде (см. выше) указана ширина границы в 7px.

Чтобы рассмотреть результат работы браузера подробнее (попиксельно), увеличим изображение из браузера. Можно увеличивать масштаб изображения в самом браузере, но это не даст того, что нам требуется: при увеличении масштаба HTML-страницы в браузере она перерисовывается, а точное попиксельное соотношение деталей не сохраняется (точно так же, к примеру, как при увеличении векторной графики). Поэтому я сделал снимок экрана и увеличил его в графическом редакторе в 8 раз. У меня получилось следующее (картинка):



Это только часть предыдущей иллюстрации, кусочек между HTML-элементами с границами вида groove (слева) и ridge (справа).

На этой иллюстрации видно, что в случае границы вида groove браузер на цвет посветлее (заданный в описании стиля) выделяет из 7 пикселей меньшую часть — 3 пикселя. Остальное (4 пикселя) идет на цвет потемнее. В случае же границы вида ridge на цвет посветлее (заданный в описании стиля) браузер выделяет из 7 пикселей большую часть — 4 пикселя. Остальное (3 пикселя) идет на цвет потемнее.

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

Если ширина границы в стиле будет прописана равной 1 пикселю, то граница вида groove в моем браузере отображается цветом потемнее (то есть не тем, который задан в описании стиля, а вычисленным от заданного), а граница вида ridge отображается цветом посветлее (заданным в описании стиля) и по внешнему виду совпадает с границей вида solid (картинка):



Третий вопрос (который, в принципе, уже выходит за рамки заявленной темы): как отобразятся (если отобразятся) в браузере рамки указанных выше трех видов, если в элементе style нашего кода вообще не указывать цвет рамки? Вот так:
<!-- в заголовочной части HTML-страницы -->
<style>
  span {
    padding: 3px;
    display: inline-block; /* чтобы элемент не вылезал за пределы родителя */
  }
  #b1 { border: 7px solid; }
  #b2 { border: 7px groove; }
  #b3 { border: 7px ridge; }
</style>
<!-- в теле HTML-страницы -->
<span id="b1">Граница solid</span>
<span id="b2">Граница groove</span>
<span id="b3">Граница ridge</span>

У меня в браузере это отображается так (картинка):



Это то же самое, если бы для границы первого элемента был бы указан цвет black, а для границы второго и третьего элементов — цвет #eeeeee (он же — rgb(238, 238, 238), это цвет, близкий к серому).

Откуда взялись эти цвета? Дело в том, что по правилам языка CSS, если в свойстве border не указана какая-либо из трех характеристик границы (толщина границы, вид границы, цвет границы), то вместо не указанной характеристики по умолчанию вписывается значение initial (по-русски «начальное значение»).

Значение initial («начальное значение») — это значение, устанавливаемое в начале работы браузера, до применения стилей автора HTML-страницы. То есть все «начальные значения» — это стилизация по умолчанию от браузера или так называемая «user agent stylesheet» («таблица стилей браузера»), о которой я писал в прошлом посте. Эти значения по умолчанию (в данном случае — цвета по умолчанию) хранятся в браузере и мы не можем их изменить, по крайней мере, я не могу их изменить в моём браузере.

Подробнее:
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments