Che cosa significa "ordine canonico" per quanto riguarda le proprietà CSS?

Question

Le pagine MDN sulle proprietà CSS (example) e alcune delle specifiche CSSWG (example) fanno riferimento all '"ordine canonico" della proprietà.

Per esempio, MDN dice l'ordine canonico di display è:

l'unico modo non ambiguo definito dalla grammatica formale

e FlexBox spec del CSSWG dice l'ordine canonico di flex è:

per la grammatica

Ogni proprietà CSS sembra essere elencata su MDN come se avesse un ordine canonico; l'ordine canonico è anche menzionato nella divertente specifica CSS Foo Module Level N che CSSWG utilizza come modello per le nuove specifiche di proprietà.

Che cosa significa e dove si intende il significato specificato (se disponibile)? Non sono riuscito a rintracciare una definizione del termine online, né posso pensare a nessuna ipotesi ovvia.

Answer 1

La grammatica di una proprietà fa riferimento alla sintassi per un valore di detta proprietà in una dichiarazione CSS. La maggior parte delle proprietà assume un valore singolo, ma alcune proprietà assumono più valori negli ordini impostati, ad esempio box-shadow e background-repeat, nonché le proprietà abbreviate. Questa grammatica viene solitamente vista direttamente nella riga "Valore:" ma può essere elaborata nella prosa, ad esempio se la proprietà accetta un elenco separato da virgole di tali valori complessi.

Ad esempio, la grammatica del level 3 background shorthand è definito come zero o più <bg-layer> s seguiti da uno <final-bg-layer>, dove

<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'> 

I due <box> valori sono descritti come segue:

Se uno Il valore <box> è presente quindi imposta sia "origine sfondo" che "sfondo-clip" su quel valore. Se sono presenti due valori, il primo imposta "background-origin" e il secondo "background-clip".

E i delimitatori || tra ciascun componente indicano che one or more of those components can occur and in any order. Nel caso di background, notare che background-position e background-size non hanno uno || tra di loro; questo significa the two properties need to appear together (e per background-size da specificare, background-positiondeve essere incluso).

Ad esempio, le seguenti due dichiarazioni sono valide ed equivalenti:

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%; 

---

No specifica sembra definire il termine "ordine canonico", ma CSSOM formula una serie di riferimenti ad essa nel contesto di serializzazione. Per esempio, in section 5.4.3 si dice:

Il nell'ordine specificato per le dichiarazioni è la stessa come specificato, ma con le proprietà scorciatoie espanse in loro proprietà longhand, in ordine canonico.

I valori di questi longhands sono serializzate ai fini della getPropertyValue(), setProperty(), setPropertyValue() e setPropertyPriority(), tutti che si riferiscono al "ordine canonico" pure.

Non tutte le proprietà hanno un ordine canonico, poiché come detto sopra la maggior parte delle proprietà prende comunque un solo valore; la linea "Ordine canonico:" è presente nella tabella propdef solitaria in css-module-bikehed semplicemente perché è un modello. Inoltre, CSSOM sembra implicare che solo le proprietà abbreviate hanno un ordine canonico.

Sulla base della mia comprensione delle specifiche pertinenti, quando l'ordine canonico di una proprietà di stenografia è definito come la grammatica di quel valore, significa semplicemente che le sue longhands devono essere serializzate nell'ordine definito dalla grammatica. Così queste due dichiarazioni abbreviate devono essere serializzati nello stesso ordine come la seguente serie di dichiarazioni longhand:

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; 

(Su una nota interessante, la mappatura esempi stenografia-to-longhand fornite nel modulo di sfondi non lo fanno sembra di seguire questo ordine.)

Answer 2

Credo che si stiano riferendo alla gerarchia ... come nell'ordine in cui verranno applicate le regole CSS. In ogni caso si riferiscono alla grammatica del codice, in altre parole, hanno scritto il codice.