Тип данных

Типы данных свойств

Поля свойства

Поле свойств любого элемента гипертекста содержит наименование и значение одного из типов данных.

В рекомендациях консорциума W3C о единицах измерения значений свойств описаны типы данных, которые используют для задания значений свойств элементов гипертекста. Наиболее распространённым свойством служит длина (length).

Типы данных

Для указания значения свойств допустимы следующие типы данных:

текстовые данные;
цифровые данные;
единицы длины;
единицы угла, длительности, частоты, разрешения;
цвет;
изображение;
позиционирование.

Текстовые данные

Текстовые данные включают ключевые слова, идентификаторы, строки (string), адреса URL (url). Все текстовые типы данных интерполируют как дискретные и не относят к аддитивным.

В нормализации нет необходимости. Все свойства и их значения точно соответствуют Юникоду.

Идентификаторы

Идентификаторы представляют собой последовательности глифов.

Идентификаторы запрещено заключать в кавычки, поскольку в таком случае они будут идентифицированы как строки. Разрешены два класса идентификаторов:

ключевые слова CSS;
идентификаторы автора.

Идентификаторы автора чувствительны к регистру. В качестве идентификатора автора недопустимо использовать ключевые слова.

Ключевые слова

Следующие ключевые слова явно объявляют значения свойств:

initial — сброс свойства в начальное значение;
inherit — наследование значения свойства для всего класса;
unset — удалить все ранее объявленные значения свойства, включая унаследованные;
revert — поведение зависит от каскадного значения:
- user-agent origin — эквивалентно unset;
- user origin — откатывает каскадное значение до уровня браузера;
- author origin — откатывает каскадное значение до уровня пользователя;
default — зарезервировано.

Префиксные идентификаторы

Встроенные идентификаторы CSS однословные и не используют промежуточных знаков разделения слов. Возможность введения префикса и разделения слов идентификатора дефисом зарезервирована для пользователя. Более того, W3C рекомендует идентификаторы пользователя записывать в префиксном виде. Это облегчает типизацию, различения ключевых слов от идентификаторов автора.

Пример идентификатора для свойства пользователя fg-color:

.foo {
  --fg-color: blue;
}

Пример идентификатора для цвета пользователя:

@color-profile --foo { src: url(https://example.com/foo.icc); }
.foo {
  color: color(--foo 1 0 .5 / .2);
}

Строки

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

content: "Это 'одинарные кавычки' внутри двойных кавычек.";
content: "Это экранированные \"двойные кавычки\" в двойных кавычках.";
content: 'Это "двойные кавычки" внутри одинарные кавычек.';
content: 'Это экранированные \'одинарные\' кавычки'.

Для удобства и ясности длинную строку кода можно разбить на несколько строк обратной косой чертой (). Например:

// Длинная строка

a {
title="Какая-то длинная строка" } /* С ещё более длинным комментарием */

// Разбитая на части строка

a {
title="Какая-то \
длинная строка";
}
/* С ещё более длинным комментарием */

При обработке парсером CSS обратная косая черта будет удалена, а строка станет единой. Для явного обозначения переноса вместо обратной косой черты следует использовать экранирующий символ (\A). Это символ Юникода (U+000A) для перевода строки (line feed). Однако внутри CSS он срабатывает как переход (newline).

Абсолютные адреса URL

Тип данных url обозначает адреса URL. Адрес следует заключать в двойные кавычки. Например, вызов фонового изображения:

body { background: url("http://www.example.com/back.webp") }
\\ или
--foo: "http://www.example.com/back.webp";
background: src(var(--foo));

В некоторых контекстах указание на тип данных url можно опустить. Но лучше этого делать для ясности и понятности кода для стороннего читателя. Например, две идентичные строки:

@import url("base-theme.css");
@import "base-theme.css";

Относительные адреса URL

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

Для таблицы стилей CSS базовым URL адресом служит URL самой таблицы, а не URL вебстраницы, в которой объявлена эта таблица стилей.

Если относительный адрес URL указан в типе данных url, то такой адрес будет преобразован в абсолютный.

Например. Пусть в файле по адресу URL http://www.example.org/style/basic.css записана строка

body { background: url("tile.png") }

Если открыть вебстраницу по адресу URL http://www.example.org, то браузер будет искать изображение по адресу http://www.example.org/style/tile.png, а не по адресу http://www.example.org/tile.png.

Фрагментные URL

Для того, чтобы исключить зависимость гиперссылок от базового URL или теневого DOM, используют фрагментные URL.

Если первым символом в строке url служит решётка # (U+0023), то URL дополнительно устанавливает флаг локального URL, действующего только в контексте дерева этого URL.

Цифровые данные

Числовые типы данных используют для представления величин, индексов, позиций. Значения представляют абстрактную величину, не различая синтаксическое представление.

Числовые типы данных включают в себя целое число (integer), число (number), процент (percentage) и различные измерения: длину, угол, время, частоту, разрешение.

Свойства могут ограничивать числовые значения определённым диапазоном. Если значение выходит за пределы допустимого диапазона, то объявление недействительно и будет игнорировано.

Ограничения диапазона могут быть аннотированы в нотации числового типа с помощью нотации CSS в квадратных скобках — [min,max] — в угловых скобках после ключевого слова, указывающего на замкнутый диапазон между min и max (включая их). Например, <integer [0,10]> обозначает целое число от 0 до 10 включительно, а <angle [0,180deg]> обозначает угол от 0 до 180 градусов.

Примечание

Значения CSS не допускают открытых диапазонов. Поэтому используют только запись в квадратных скобках.

Крайние значения диапазона, не имеющего ограничения, обозначают символами бесконечности (−∞) или (∞). Например, запись length [0,∞] указывает на неотрицательную длину.

Целое число

Целочисленные значения обозначают: integer.

Целое число представляет собой одну или несколько десятичных цифр от 0 до 9.

Округление до ближайшего целого производят:

в большую сторону до ближайшего целого числа, если дробная часть 0,5 и выше;
в меньшую сторону, в остальных случаях.

Если не указано иное, вычисляемое значение заданного <целого числа> является заданным абстрактным целым числом.

Числа с единицами измерения

Размерность (dimension) — число с указанной единицей измерения.

Буквально размерность это глиф цифр, за которым непосредственно следует идентификатор единицы измерения, который также служит идентификатором.

Измерение Горизонталь