diff --git a/css-cascade-6/Overview.bs b/css-cascade-6/Overview.bs index 26c2bfa2d2f..5a7dd9cb56e 100644 --- a/css-cascade-6/Overview.bs +++ b/css-cascade-6/Overview.bs @@ -51,6 +51,227 @@ Introduction and Missing Sections if you are implementing anything, please use Level 5 as a reference. We will merge the Level 5 text into this draft once it reaches CR. + + +

+Importing Style Sheets: the ''@import'' rule

+ + The @import rule allows users to import style rules from other style sheets. + If an ''@import'' rule refers to a valid stylesheet, + user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule, + with two exceptions: + + * If a feature + (such as the ''@namespace'' rule) + explicitly defines that it only applies to a particular stylesheet, + and not any imported ones, + then it doesn't apply to the imported stylesheet. + + * If a feature relies on the relative ordering of two or more constructs in a stylesheet + (such as the requirement that ''@namespace'' rules must not have any other rules other than + ''@import'' preceding it), + it only applies between constructs in the same stylesheet. + +

+ For example, [=declarations=] in style rules from imported stylesheets interact with the cascade + as if they were written literally into the stylesheet at the point of the ''@import''. + + Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet + (ignoring ''@charset'' and @layer statement rules) + and must not have any other valid at-rules or style rules between it and previous ''@import'' rules, + or else the ''@import'' rule is invalid. + The syntax of ''@import'' is: + +

+		@import [ <> | <> ]
+		        [[ layer | layer(<>) ]
+		         || [ scope( [ (<>) ]? [ to (<>) ]? | <> ) ]
+		         || <>]?
+		        <>?;
+
+		<supports-import-condition> = [ supports( [ <> | <> ] ) ]
+		<media-import-condition> = <>
+ + where: + + * the <> or <> + gives the URL of the style sheet to be imported. + + and optionally: + + * the ''layer'' keyword or ''layer()'' function, + which 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-ordering|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 ''scope()'' function, + which [=scopes=] the [=style rules=] within the stylesheet, + using the [=scoping roots=] and [=scoping limits=] + as described by [[#scope-limits]]. + + Note: While the [=style rules=] within the imported stylesheet + become [=scoped=], + they do not become [=nested style rule|nested=]. + In particular, + top-level selectors are not re-interpreted as [=relative selectors=], + and the ''&'' pseudo-class maintains its non-nested behavior. + + * the [=import conditions=], + <> and <>, + which state the conditions under which the ''@import'' rule applies. + + Issue(10972): Accept <> at any point + after the URL/string. + +
+ The following conditional @import rule + only loads the style sheet when the UA + supports ''display: flex'', + and only applies the style sheet on a handheld device + with a maximum viewport width of 400px. + + 
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
+
+ +
+ The following layer imports load the style sheets into + the ''framework.component'' layer, and an un-named layer, respectively: + + 
+		@import url("tabs.css") layer(framework.component);
+		@import url("override.css") layer;
+
+
+ +
+ The following imports a stylesheet, and scopes the style rules + to elements matching .card. + + 
+		@import url("card.css") scope(.card);
+
+
+ + 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");
+
+
+ +

+Conditional ''@import'' Rules

+ + Import conditions allow the import to be media– or feature-support–dependent. + In the absence of any import conditions, the import is unconditional. + (Specifying ''@media/all'' for the <> has the same effect.) + If the import conditions do not match, + the rules in the imported stylesheet do not apply, + exactly as if the imported stylesheet were wrapped in ''@media'' and/or ''@supports'' blocks with the given conditions. + +
+ The following rules illustrate how ''@import'' rules can be made media-dependent: + + 
+		@import url("fineprint.css") print;
+		@import url("bluish.css") projection, tv;
+		@import url("narrow.css") handheld and (max-width: 400px);
+
+
+ + User agents may therefore avoid fetching a conditional import + as long as the import conditions do not match. + Additionally, if a <> blocks the application of the imported style sheet, + the UA must not fetch the style sheet (unless it is loaded through some other link) + and must return null for the import rule's CSSImportRule.styleSheet value + (even if it is loaded through some other link). + +
+ The following rule illustrates how an author can provide fallback rules for legacy user agents + without impacting network performance on newer user agents: + + 
+		@import url("fallback-layout.css") supports(not (display: flex));
+		@supports (display: flex) {
+		  ...
+		}
+
+
+ + The [=import conditions=] are given by + <>, which is parsed and interpreted as a media query list, + and <>, is parsed and interpreted as a [[supports query]]. + If a <> is given in place of a <>, + it must be interpreted as a <> + (i.e. the extra set of parentheses is implied) + and treated as a <>. + +
+ For example, the following two lines are equivalent: + 
+		@import "mystyle.css" supports(display: flex);
+		@import "mystyle.css" supports((display: flex));
+
+
+ + The evaluation and full syntax of the import conditions + are defined by the Media Queries [[!MEDIAQ]] + and CSS Conditional Rules [[!CSS-CONDITIONAL-3]] specifications. + +

+Processing Stylesheet Imports

+ + When the same style sheet is imported or linked to a document in multiple places, + user agents must process (or act as though they do) each link + as though the link were to an independent style sheet. + + Note: This does not place any requirements on resource fetching, + only how the style sheet is reflected in the CSSOM and used in specs such as this one. + Assuming appropriate caching, + it is perfectly appropriate for a UA to fetch a style sheet only once, + even though it's linked or imported multiple times. + + The [=cascade origin=] of an imported style sheet is the [=cascade origin=] of the style sheet that imported it. + + The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [[css-syntax-3]] + +

+Content-Type of CSS Style Sheets

+ + The processing of imported style sheets depends on the actual type of the linked resource: + + * If the resource does not have [=Content-Type metadata=], + the type is treated as text/css. + * If the host document is in [=quirks mode=], + and the host document's origin is [=same origin=] + with the linked resource [=/response's=] [=response/URL's=] origin, + the type is treated as text/css. + * Otherwise, the type is determined from its [=Content-Type metadata=]. + + If the linked resource's type is text/css, + it must be interpreted as a CSS style sheet. + Otherwise, it must be interpreted as a network error. +