From 34471bd5a82bdc97c963de2b9e7fc798e7a06b4c Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Fri, 21 Mar 2025 16:35:56 -0700 Subject: [PATCH 1/3] Initial commit --- css-cascade-7/Overview.bs | 319 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 319 insertions(+) create mode 100644 css-cascade-7/Overview.bs diff --git a/css-cascade-7/Overview.bs b/css-cascade-7/Overview.bs new file mode 100644 index 00000000000..1ed90aaba05 --- /dev/null +++ b/css-cascade-7/Overview.bs @@ -0,0 +1,319 @@ +
+Title: CSS Cascading and Inheritance Level 7
+Shortname: css-cascade
+Level: 7
+Status: ED
+Prepare for TR: no
+Work Status: Revising
+Group: csswg
+ED: https://drafts.csswg.org/css-cascade-7/
+Previous Version: https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/
+Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
+Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151
+Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
+Editor: Kurt Catti-Schmidt, Microsoft, kschmi@microsoft.com, w3cid 146156
+Abstract: This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.
+Abstract:
+Abstract: New in this level is [[#at-ruledef-sheet]].
+Ignored Terms: auto, flex items, , , scope proximity, encapsulation context
+Informative Classes: ex
+
+ +
+spec:dom; type:dfn;
+	text:shadow tree
+	for:tree; text:root
+	text:shadow root; for:/
+spec:dom; type:dfn; text:parent element
+spec:css-color-4; type:property; text:color
+spec:css-values-3; type: value; text:ex
+spec:css-conditional-3; type:at-rule; text:@media
+spec:mediaqueries-4; type:type; for:@media; text:all
+spec:mediaqueries-4; type:type; text:
+spec:selectors-4; type:dfn; text:subject
+spec:selectors-4; type:dfn; text:selector
+spec:selectors-4; type:dfn; text:combinator
+spec:html; type:element; text:style
+spec:css-scoping-1; type:dfn; text:shadow host
+
+ +
+spec:mediaqueries-5
+spec:css-values-4
+spec:css-fonts-4
+
+ +

+Introduction and Missing Sections

+ + Issue: This is a diff spec over CSS Cascading and Inheritance Level 6. + It is currently an Exploratory Working Draft: + if you are implementing anything, please use Level 6 as a reference. + We will merge the Level 6 text into this draft once it reaches CR. + + + +

+Stylesheet

+ + A stylesheet + is a collection of style rules. + + These collections may exist as: +
    +
  1. An instance of file with a .css extension and/or MIME type of "text/css" embedded within a document. +
  2. Collection of CSS rules within a document. +
  3. CSSOM Stylesheet objects. +
  4. Any of the above may be subdivided into named stylesheets with the ''@sheet'' keyword. +
+ + A sheet-name is a string identifying + inner named sheets within a stylesheet. + + Syntactically, a stylesheet may include an explicit [=sheet-name=], and is represented + by the <> in ''@sheet'' and ''@import'' rules, + which is a single <> token: + + 
+		<> = <>
+
+ +

+Named Stylesheets: the `@sheet` block at-rule

+ + The ''@sheet'' [=block at-rule=] + assigns its child style rules to a particular named [=stylesheet=]. + This sheet-assignment syntax is: + + 
+		@sheet <> {
+			<>
+		}
+
+ + Such ''@sheet'' block rules have the same restrictions and processing + as a [=conditional group rule=] [[CSS-CONDITIONAL-3]] + with a true condition. + +
+ For example, ''@sheet'' and ''@media'' can be mixed: + + 
+		@sheet framework {
+			h1, h2 { color: maroon; background: white;}
+
+			@media (prefers-color-scheme: dark) {
+				h1, h2 { color: red; background: black; }
+			}
+		}
+
+
+ + Note: ''@sheet'' [=block at-rules=] cannot be interleaved with ''@import'' rules. + +

+Declaring Named Stylesheets

+ + Named stylesheets can be declared: + + * using an ''@import'' rule with the ''from'' keyword + assigning the contents of the imported file into that sheet. + * using an [[#at-ruledef-sheet|@sheet block at-rule]], + assigning its child style rules into that sheet. + +

+Subdividing Stylesheets: the `@sheet` block at-rule

+ +
+		@import [ <> from ]?
+				[ <> | <> ]				
+		        [ layer | layer(<>) ]?
+		        <> ;
+
+		<import-conditions> = [ supports( [ <> | <> ] ) ]?
+		                     <>?
+ + where: + * <> ''from'' imports only the named sheet + with name <> from the provided URL. + + * the <> or <> + gives the URL of the style sheet to be imported. + + * the optional ''layer'' keyword or ''layer()'' function + assigns the contents of the style sheet + into its own anonymous [=cascade layer=] + or into the named [=cascade layer=]. + + The layer is added to the layer order + even if the import fails to load the stylesheet, + but is subject to any [=import conditions=] + (just as if declared by an ''@layer'' rule wrapped + in the appropriate [=conditional group rules=]). + + * the optional <> + states the [=import conditions=] under which it applies. + +
+ The following conditional @import rule + only loads the style sheet with a name of ``foo`` from ``narrow.css`` when the UA + supports ''display: flex'', + and only applies the style sheet on a handheld device + with a maximum viewport width of 400px. + + 
@import foo from url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
+
+ +
+ The following layer imports load the style sheets named ``foo`` into + the ''framework.component'' layer, and an un-named layer, respectively: + + 
+		@import foo from url("tabs.css") layer(framework.component);
+		@import foo from url("override.css") layer;
+
+
+ + If a <> is provided, + it must be interpreted as a <> with the same value. + +
+ The following lines are equivalent in meaning + and illustrate both ''@import'' syntaxes + (one with ''url()'' and one with a bare string): + + 
+		@import "mystyle.css";
+		@import url("mystyle.css");
+
+
+ + + +

+Changes

+ +This appendix is informative. + + +

+Additions Since Level 6

+ + The following features have been added since + Level 6: + + * The definition of a [=stylesheet=], + as described by a combination of <> and <> selectors. + * The ''@sheet'' rule for subdividing stylesheets + +

+Additions Since Level 5

+ + The following features have been added since + Level 5: + + * The definition of a [=scope=], + as described by a combination of <> and <> selectors. + * The in-scope ('':in()'') pseudo-class for selecting with lower-boundaries + * The ''@scope'' rule for creating scoped stylesheets + * The definition of [=scope proximity=] in the cascade + + +

+Additions Since Level 4

+ + The following features have been added since + Level 4: + + * Added [=cascade layers=] to the [=cascade=] sort criteria + (and defined style attributes as a distinct step of the [=cascade=] sort criteria + so that they interact appropriately). + * Introduced the ''@layer'' rule for defining cascade layers. + * Added ''layer''/''layer()'' option to ''@import'' definition. + * Introduced the ''revert-layer'' keyword for rolling back values to previous layers. + +

+Additions Since Level 3

+ + The following features have been added since + Level 3: + + * Introduced ''revert'' keyword, for rolling back the cascade. + * Introduced ''supports()'' syntax for supports-conditional ''@import'' rules. + * Added [=encapsulation context=] to the [=cascade=] sort criteria + to accommodate Shadow DOM. [[DOM]] + * Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. See [[css-cascade-4#aliasing]]. + + +

+Additions Since Level 2

+ + The following features have been added since + Level 2: + +
    +
  • The 'all' shorthand +
  • The ''initial'' keyword +
  • The ''unset'' keyword +
  • Incorporation of animations and transitions into the cascade. +
+ +

Acknowledgments

+ + David Baron, + Tantek Çelik, + Keith Grant, + Giuseppe Gurgone, + Theresa O'Connor, + Florian Rivoal, + Noam Rosenthal, + Simon Sapin, + Jen Simmons, + Nicole Sullivan, + Lea Verou, + and Boris Zbarsky + contributed to this specification. + +

+Privacy Considerations

+ + * User preferences and UA defaults expressed via application of style rules + are exposed by the cascade process, + and can be inferred from the computed styles they apply to a document. + +

+Security Considerations

+ + * The cascade process does not distinguish between same-origin and cross-origin stylesheets, + enabling the content of cross-origin stylesheets to be inferred + from the computed styles they apply to a document. + + * The ''@import'' rule does not apply the [=CORS protocol=] to loading cross-origin stylesheets, + instead allowing them to be freely imported and applied. + + * The ''@import'' rule assumes that resources without Content-Type metadata + (or any same-origin file if the host document is in quirks mode) + are text/css, + potentially allowing arbitrary files to be imported into the page + and interpreted as CSS, + potentially allowing sensitive data to be inferred from the computed styles they apply to a document. From 66989d9380842d5717efc08034fa605736f98bb0 Mon Sep 17 00:00:00 2001 From: Kurt Catti-Schmidt Date: Tue, 25 Mar 2025 16:53:56 -0700 Subject: [PATCH 2/3] Adding CSSOM section --- css-cascade-7/Overview.bs | 43 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/css-cascade-7/Overview.bs b/css-cascade-7/Overview.bs index 1ed90aaba05..fa3027ad259 100644 --- a/css-cascade-7/Overview.bs +++ b/css-cascade-7/Overview.bs @@ -197,6 +197,49 @@ Subdividing Stylesheets: the `@sheet` block at-rule + + +

Sheet APIs

+ + Unlike other CSS rules, ''@sheet'' rules do not exist as rules in CSSOM. + The additional stylesheets generated by ''@sheet'' rules are accessible through the + ''CSSStyleSheet'' interface. + +

+Extensions to the CSSStyleSheet interface

+ + 
+	[Exposed=Window]
+	partial interface CSSStyleSheet : StyleSheet {
+	  readonly attribute StyleSheetList nestedStyleSheets;
+	};
+
+ +The nestedStyleSheets attribute must return a ''StyleSheetList'' containing +nested stylesheets defined via ''@sheet''. + +

+Extensions to the StyleSheet interface

+ + 
+	[Exposed=Window]
+	partial interface StyleSheet {
+	  readonly attribute DOMString? name;
+	};
+
+ + +The name attribute must return the name +associated with a nested sheet defined via ''@sheet''. +