Что означает "канонический порядок" в отношении свойств CSS?

Страницы MDN о свойствах CSS (пример) и некоторые спецификации CSSWG (пример) ссылаются на "канонический порядок" свойства.

Например, MDN говорит, что канонический порядок display равен:

уникальный недвойственный порядок, определяемый формальной грамматикой

и спецификация CSSWG flexbox говорит, что канонический порядок flex равен:

на грамматику

Каждое свойство CSS, как представляется, указано в MDN как имеющее канонический порядок; канонический порядок также упоминается в развлекательной спецификации CSS Foo Module N, которую CSSWG использует в качестве шаблона для новых спецификаций свойств.

Что это значит, и где указано значение (если есть)? Мне не удалось найти определение термина онлайн, и я не могу думать о каких-либо очевидных предположениях.

ОТВЕТЫ

Ответ 1

Грамматика свойства относится к синтаксису значения указанного свойства в объявлении CSS. Большинство свойств принимают одно значение, но некоторые свойства принимают несколько значений в заданных порядках, например box-shadow и background-repeat, а также сокращенные свойства. Эта грамматика обычно рассматривается непосредственно в строке "Значение:", но может быть разработана в прозе, например, если свойство принимает список таких сложных значений, разделенных запятыми.

Например, грамматика уровень 3 background сокращенно определяется как ноль или более <bg-layer>, за которой следует один <final-bg-layer>, где

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

Два значения <box> описываются следующим образом:

Если присутствует одно значение <box>, оно устанавливает для этого значения "background-origin" и "background-clip". Если присутствуют два значения, то первый устанавливает фоновое происхождение и второй фоновый клип.

И разделители || между каждым компонентом означают, что один или несколько из этих компонентов могут возникать и в любом порядке. В случае background заметите, что background-position и background-size не имеют || между ними; это означает два свойства должны появиться вместе (и для background-size, которые должны быть указаны, должен быть включен background-position).

Например, следующие два объявления действительны и эквивалентны:

background: url(see-through.png) center / 100% no-repeat fixed padding-box red;
background: red url(see-through.png) fixed padding-box no-repeat center / 100%;

Никакая спецификация не определяет термин "канонический порядок", но CSSOM делает несколько ссылок на него в контексте сериализации. Например, в разделе раздел 5.4.3 говорится:

указанный порядок для объявлений такой же, как указано, но с сокращенными свойствами, расширенными в их свойства longhand, в каноническом порядке.

Значения этих длинных строк сериализуются для getPropertyValue(), setProperty(), setPropertyValue() и setPropertyPriority(), все из которых также относятся к "каноническому порядку".

Не каждое свойство имеет канонический порядок, поскольку, как упоминалось выше, большинство свойств принимают только одно значение; строка "Канонический порядок:" присутствует в одиночной таблице propdef в css-module-bikeshed просто потому, что она является шаблоном. Кроме того, CSSOM, по-видимому, подразумевает, что только сокращенные свойства имеют канонический порядок.

Основываясь на моем понимании соответствующих спецификаций, когда канонический порядок стенографического свойства определяется как грамматика этого значения, он просто означает, что его длинные строки должны быть сериализованы в порядке, определяемом грамматикой. Таким образом, приведенные выше две сокращенные объявления должны быть сериализованы в том же порядке, что и следующий набор деклараций:

background-image: url(see-through.png);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: padding-box;
background-color: red;

(Интересно отметить, что примеры отображения короткошерстных ссылок, приведенные в модуле "Фоны", не соответствуют этому порядку.)

Ответ 2

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