Skip to content

Commit 7ef7a02

Browse files
andruudandruud
committed
[css-cascade-6] Verbatim copy of "@import" section from Level 5
1 parent 497074a commit 7ef7a02

1 file changed

Lines changed: 193 additions & 0 deletions

File tree

‎css-cascade-6/Overview.bs‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,199 @@ Introduction and Missing Sections</h2>
5151
if you are implementing anything, please use Level 5 as a reference.
5252
We will merge the Level 5 text into this draft once it reaches CR.
5353

54+
<!--
55+
███████ ████ ██ ██ ████████ ███████ ████████ ████████
56+
██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██
57+
██ ███ ██ ██ ████ ████ ██ ██ ██ ██ ██ ██ ██
58+
██ ███ ██ ██ ██ ███ ██ ████████ ██ ██ ████████ ██
59+
██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██
60+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
61+
███████ ████ ██ ██ ██ ███████ ██ ██ ██
62+
-->
63+
64+
<h2 id="at-import">
65+
Importing Style Sheets: the ''@import'' rule</h2>
66+
67+
The <dfn>@import</dfn> rule allows users to import style rules from other style sheets.
68+
If an ''@import'' rule refers to a valid stylesheet,
69+
user agents must treat the contents of the stylesheet as if they were written in place of the ''@import'' rule,
70+
with two exceptions:
71+
72+
* If a feature
73+
(such as the ''@namespace'' rule)
74+
<em>explicitly</em> defines that it only applies to a particular stylesheet,
75+
and not any imported ones,
76+
then it doesn't apply to the imported stylesheet.
77+
78+
* If a feature relies on the relative ordering of two or more constructs in a stylesheet
79+
(such as the requirement that ''@namespace'' rules must not have any other rules other than
80+
''@import'' preceding it),
81+
it only applies between constructs in the same stylesheet.
82+
83+
<p class='example'>
84+
For example, [=declarations=] in style rules from imported stylesheets interact with the cascade
85+
as if they were written literally into the stylesheet at the point of the ''@import''.
86+
87+
Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet
88+
(ignoring ''@charset'', ''@supports-condition'', and <a href="#layer-empty"><css>@layer</css> statement</a> rules)
89+
and must not have any other valid at-rules or style rules between it and previous ''@import'' rules,
90+
or else the ''@import'' rule is invalid.
91+
The syntax of ''@import'' is:
92+
93+
<pre class='prod'>
94+
@import [ <<url>> | <<string>> ]
95+
[ layer | layer(<<layer-name>>) ]?
96+
<<import-conditions>> ;
97+
98+
<dfn export>&lt;import-conditions></dfn> = [ supports( [ <<supports-condition>> | <<declaration>> ] ) ]?
99+
<<media-query-list>>?</pre>
100+
101+
where:
102+
103+
* the <<url>> or <<string>>
104+
gives the URL of the style sheet to be imported.
105+
106+
* the optional ''layer'' keyword or ''layer()'' function
107+
assigns the contents of the style sheet
108+
into its own anonymous [=cascade layer=]
109+
or into the named [=cascade layer=].
110+
111+
The layer is added to the [[#layer-ordering|layer order]]
112+
even if the import fails to load the stylesheet,
113+
but is subject to any [=import conditions=]
114+
(just as if declared by an ''@layer'' rule wrapped
115+
in the appropriate [=conditional group rules=]).
116+
117+
* the optional <<import-conditions>>
118+
states the [=import conditions=] under which it applies.
119+
120+
<div class="example">
121+
The following <a href="#conditional-import">conditional <css>@import</css> rule</a>
122+
only loads the style sheet when the UA
123+
<a href="https://www.w3.org/TR/css-conditional-3/#support-definition">supports</a> ''display: flex'',
124+
and only applies the style sheet on a <a href="https://www.w3.org/TR/CSS2/media.html#media-types">handheld</a> device
125+
with a <a href="https://www.w3.org/TR/mediaqueries-4/#width">maximum viewport width</a> of 400px.
126+
127+
<pre>@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);</pre>
128+
</div>
129+
130+
<div class="example">
131+
The following layer imports load the style sheets into
132+
the ''framework.component'' layer, and an un-named layer, respectively:
133+
134+
<pre>
135+
@import url("tabs.css") layer(framework.component);
136+
@import url("override.css") layer;
137+
</pre>
138+
</div>
139+
140+
If a <<string>> is provided,
141+
it must be interpreted as a <<url>> with the same value.
142+
143+
<div class="example">
144+
The following lines are equivalent in meaning
145+
and illustrate both ''@import'' syntaxes
146+
(one with ''url()'' and one with a bare string):
147+
148+
<pre class='lang-css'>
149+
@import "mystyle.css";
150+
@import url("mystyle.css");
151+
</pre>
152+
</div>
153+
154+
<h3 id=conditional-import>
155+
Conditional ''@import'' Rules</h3>
156+
157+
<dfn export>Import conditions</dfn> allow the import to be media&ndash; or feature-support&ndash;dependent.
158+
In the absence of any <a>import conditions</a>, the import is unconditional.
159+
(Specifying ''@media/all'' for the <<media-query-list>> has the same effect.)
160+
If the <a>import conditions</a> do not match,
161+
the rules in the imported stylesheet do not apply,
162+
exactly as if the imported stylesheet were wrapped in ''@media'' and/or ''@supports'' blocks with the given conditions.
163+
164+
<div class=example>
165+
The following rules illustrate how ''@import'' rules can be made media-dependent:
166+
167+
<pre class='lang-css'>
168+
@import url("fineprint.css") print;
169+
@import url("bluish.css") projection, tv;
170+
@import url("narrow.css") handheld and (max-width: 400px);
171+
</pre>
172+
</div>
173+
174+
User agents may therefore avoid fetching a conditional import
175+
as long as the <a>import conditions</a> do not match.
176+
Additionally, if a <<supports-condition>> blocks the application of the imported style sheet,
177+
the UA <em>must not</em> fetch the style sheet (unless it is loaded through some other link)
178+
and <em>must</em> return null for the import rule's CSSImportRule.styleSheet value
179+
(even if it is loaded through some other link).
180+
181+
<div class="example">
182+
The following rule illustrates how an author can provide fallback rules for legacy user agents
183+
without impacting network performance on newer user agents:
184+
185+
<pre class='lang-css'>
186+
@import url("fallback-layout.css") supports(not (display: flex));
187+
@supports (display: flex) {
188+
...
189+
}
190+
</pre>
191+
</div>
192+
193+
The [=import conditions=] are given by
194+
<<media-query-list>>, which is parsed and interpreted as a <a>media query list</a>,
195+
and <<supports-condition>>, is parsed and interpreted as a [[supports query]].
196+
If a <<declaration>> is given in place of a <<supports-condition>>,
197+
it must be interpreted as a <<supports-decl>>
198+
(i.e. the extra set of parentheses is implied)
199+
and treated as a <<supports-condition>>.
200+
201+
<div class="example">
202+
For example, the following two lines are equivalent:
203+
<pre class='lang-css'>
204+
@import "mystyle.css" supports(display: flex);
205+
@import "mystyle.css" supports((display: flex));
206+
</pre>
207+
</div>
208+
209+
The evaluation and full syntax of the <a>import conditions</a>
210+
are defined by the <a href="https://www.w3.org/TR/mediaqueries/">Media Queries</a> [[!MEDIAQ]]
211+
and <a href="https://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> [[!CSS-CONDITIONAL-3]] specifications.
212+
213+
<h3 id=import-processing>
214+
Processing Stylesheet Imports</h3>
215+
216+
When the same style sheet is imported or linked to a document in multiple places,
217+
user agents must process (or act as though they do) each link
218+
as though the link were to an independent style sheet.
219+
220+
Note: This does not place any requirements on resource fetching,
221+
only how the style sheet is reflected in the CSSOM and used in specs such as this one.
222+
Assuming appropriate caching,
223+
it is perfectly appropriate for a UA to fetch a style sheet only once,
224+
even though it's linked or imported multiple times.
225+
226+
The [=cascade origin=] of an imported style sheet is the [=cascade origin=] of the style sheet that imported it.
227+
228+
The <a>environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. [[css-syntax-3]]
229+
230+
<h3 id='content-type'>
231+
Content-Type of CSS Style Sheets</h3>
232+
233+
The processing of imported style sheets depends on the actual type of the linked resource:
234+
235+
* If the resource does not have <l spec=html>[=Content-Type metadata=]</l>,
236+
the type is treated as <code>text/css</code>.
237+
* If the host document is in [=quirks mode=],
238+
and the host document's origin is [=same origin=]
239+
with the linked resource [=/response's=] [=response/URL's=] origin,
240+
the type is treated as <code>text/css</code>.
241+
* Otherwise, the type is determined from its <l spec=html>[=Content-Type metadata=]</l>.
242+
243+
If the linked resource's type is <code>text/css</code>,
244+
it must be interpreted as a CSS style sheet.
245+
Otherwise, it must be interpreted as a network error.
246+
54247
<!--
55248
██████ ███ ██████ ██████ ███ ████████ ████████
56249
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██

0 commit comments

Comments
 (0)