search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.46k stars 657 forks source link

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

Open cdoublev opened 2 years ago

cdoublev commented 2 years ago

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 https://github.com/w3c/csswg-drafts/issues/5969#issuecomment-776373782, 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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: 

@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: