CSS Cascading and Inheritance Level 7

1. Introduction and Missing Sections

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.

2. Stylesheet

A stylesheet is a collection of style rules.

These collections may exist as:

1. An instance of file with the CSS Style Sheet Content-Type, embedded within a document.
2. A collection of CSS rules within a document.
3. CSSOM Stylesheet objects.
4. Any of the above may be subdivided into a named stylesheet with the @sheet rule.

A sheet-name is a string identifying inner named stylesheets within a stylesheet.

Syntactically, a named stylesheet must include an explicit sheet-name, and is represented by the <sheet-name> in @sheet and @import rules, which is a single <ident> token:

<sheet-name> = <ident>

2.1. Named Stylesheets: the `@sheet` block at-rule

This sheet-assignment syntax is:

@sheet <sheet-name> {
  <rule-list>
}

Such @sheet block rules have the same restrictions and processing as a conditional group rule [CSS-CONDITIONAL-3] with a false condition.

Note: This means that rules within an @sheet block are not applied until their named stylesheet is explicitly imported into another context.

<style>
@sheet framework {
  h1 { color: maroon; }
}
</style>
<h1>Sample text</h1>

@sheet block at-rules may not be nested within any other CSS rules.

2.2. Importing Specific Named Stylesheets: the from Keyword

<url-string> = [ <url> | <string> ]
<sheet-name-list> = [ <string> ][ ,<string> ]*

@import [ <sheet-name-list> from ]?
        [ <url-string> ]        
        [ layer | layer(<layer-name>) ]?
        <import-conditions> ;

<import-conditions> = [ supports( [ <supports-condition> | <declaration> ] ) ]?
                     <media-query-list>?

where:

• the optional <sheet-name-list> imports only the stylesheet(s) with names matching named stylesheets from the provided URL in the order they are listed.

• the <url-string> gives the URL of the stylesheet to be imported.

• the optional layer keyword or layer() function assigns the contents of the stylesheet 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 <import-conditions> states the import conditions under which it applies.

@sheet framework {
  h1 { color: maroon; }
}

<style>
@import framework from url(foo.css);
</style>
<h1>Sample text</h1>

@import foo from url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

@import foo, bar from url("tabs.css") layer(framework.component);
@import foo, bar from url("override.css") layer;

If a <url-string> is provided, it must be interpreted as a <url> with the same value.

@import "mystyle.css";
@import url("mystyle.css");

3. Sheet APIs

3.1. The CSSSheetRule interface

The CSSSheetRule interface represents the @sheet block rule:

[Exposed=Window]
interface CSSSheetRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
};

Its name attribute represents the <sheet-name> declared by the @sheet block at-rule.

3.2. The SheetNameList Interface

An object that implements the SheetNameList interface defines a list of stylesheet names.

[Exposed=Window]
interface SheetNameList {
  readonly attribute unsigned long length;
  getter CSSOMString? item(unsigned long index);
};

3.3. Extensions to the CSSImportRule interface

The CSSImportRule interface is extended as follows:

partial interface CSSImportRule {
  [SameObject] readonly attribute SheetNameList sheetNames;
  [SameObject] readonly attribute StyleSheetList namedStyleSheets;
};

Its sheetNames attribute represents a list of <sheet-name> definitions declared by the @sheet block at-rule in the order they are listed.

Its namedStyleSheets attribute represents the list of imported named stylesheets in the order they are imported.

4. Changes

This appendix is informative.

4.1. Additions Since Level 6

The following features have been added since Level 6:

• The definition of a stylesheet.

• The @sheet rule for subdividing stylesheets.

• CSSOM definition for CSSSheetRule.

• CSSOM definition for SheetNameList.

• Extended CSSOM definition for CSSImportRule.

4.2. Additions Since Level 5

The following features have been added since Level 5:

• The definition of a scope, as described by a combination of <scope-start> and <scope-end> 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

4.3. 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.

4.4. 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 Cascading 4 § 3.1 Property Aliasing.

4.5. 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.

5. 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.

6. 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.