[css-syntax-3] Descriptor declarations with global substitution value, CSS-wide keyword, !important

[cdoublev]

Within a <style-block> or <declaration-list>, !important is automatically invalid on any descriptors. If the rule accepts properties, the spec for the rule must define whether the properties interact with the cascade, and with what specificity. If they don’t interact with the cascade, properties containing !important are automatically invalid; otherwise using !important is valid and causes the declaration to be important for the purposes of the cascade.

According to #5969 (comment), all declarations in @page are for descriptors. Therefore I assume the above (from CSS Syntax) also applies to descriptors matching a property. If so, the first sentence seems confusing to me.

Declarations in page and margin contexts cascade just like declarations in style rule for elements.

https://w3c.github.io/csswg-drafts/css-page-3/#cascading-and-page-context

[fantasai]

Hmm, this seems to me like terminology just failing to link up correctly. Syntax seems to think the declarations inside @page are properties, and Page thinks they're descriptors.

I'm not sure yet what edits we need, but clearly we need some edits. :)

[cdoublev]

Yeah, imo, descriptors matching a property should be defined as functionnaly equivalent to properties, ie. their declarations cascade if the spec for the rules accepting them defines it, and they should also allow substitution values and CSS-wide keywords, like in keyframe rules (in which declarations do not cascade though), noting that currently @page and margin rules only accept inherit though.

[cdoublev]

Changing the title to broaden the topic because it is also unclear if descriptor declarations accept global substitution values (like var() or attr()) and CSS-wide keywords. Below, Chrome/FF accept them in some cases:

• declarations for font-display are all parsed as invalid
• declarations for size are all parsed as valid
• declarations for color are all parsed as valid

@font-face { 
  font-display: block !important; 
}
@font-face { 
  font-display: initial; 
}
@font-face { 
  font-display: var(--custom); 
}
@page { 
  color: green !important; 
  size: 1px !important; 
}
@page { 
  color: initial; 
  size: initial; 
}
@page { 
  color: var(--custom); 
  size: var(--custom); 
}

The value of a custom property can be substituted into the value of another property with the var() function.

https://drafts.csswg.org/css-variables-1/#using-variables

Several CSS-wide property values are defined below; declaring a property to have these values explicitly specifies a particular defaulting behavior. As specified in CSS Values and Units [css-values-3], all CSS properties can accept these values.

https://drafts.csswg.org/css-cascade-5/#defaulting-keywords

In my opinion:

• all CSS-wide keywords and var() should be valid if declarations cascade, for all types of descriptors, otherwise they are invalid
• substitution values other than var() should be invalid for all type of descriptors