Skip to content

Commit f897eba

Browse files
fantasaifantasai
committed
[css-cascade-5] Fix indentation. Whitespace-only.
1 parent 1f4fc96 commit f897eba

1 file changed

Lines changed: 120 additions & 120 deletions

File tree

‎css-cascade-5/Overview.bs‎

Lines changed: 120 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,27 +1050,27 @@ Cascade Layers</h3>
10501050
or relying on source-order to resolve conflicts across layers.
10511051

10521052
<div class="example">
1053-
For example, the following generates an explicit ''defaults'' layer,
1054-
with lower cascade weight than any un-layered styles:
1055-
1056-
<pre class='lang-css'>
1057-
audio {
1058-
/* specificity of 0,0,1 - implicit (final) layer */
1059-
display: flex;
1060-
}
1061-
1062-
@layer defaults {
1063-
audio[controls] {
1064-
/* specificity of 0,1,1 - explicit "defaults" layer */
1065-
display: block;
1066-
}
1067-
}
1068-
</pre>
1053+
For example, the following generates an explicit ''defaults'' layer,
1054+
with lower cascade weight than any un-layered styles:
1055+
1056+
<pre class='lang-css'>
1057+
audio {
1058+
/* specificity of 0,0,1 - implicit (final) layer */
1059+
display: flex;
1060+
}
1061+
1062+
@layer defaults {
1063+
audio[controls] {
1064+
/* specificity of 0,1,1 - explicit "defaults" layer */
1065+
display: block;
1066+
}
1067+
}
1068+
</pre>
10691069

1070-
The un-layered declarations on the <{audio}> element take precedence
1071-
over the explicitly layered declarations on ''audio[controls]'' --
1072-
even though the un-layered styles have a lower specificity,
1073-
and come first in the source order.
1070+
The un-layered declarations on the <{audio}> element take precedence
1071+
over the explicitly layered declarations on ''audio[controls]'' --
1072+
even though the un-layered styles have a lower specificity,
1073+
and come first in the source order.
10741074
</div>
10751075

10761076
Issue(w3c/csswg-drafts#5793): Do we need a keyword similar to `revert`, but for cascade layers?
@@ -1122,42 +1122,42 @@ Layer Identifiers</h5>
11221122
to a single layer.
11231123

11241124
<div class="example">
1125-
<pre class='lang-css'>
1126-
@layer default url(headings.css);
1127-
@layer default url(links.css);
1128-
1129-
@layer default {
1130-
audio[controls] {
1131-
display: block;
1132-
}
1133-
}
1134-
</pre>
1125+
<pre class='lang-css'>
1126+
@layer default url(headings.css);
1127+
@layer default url(links.css);
1128+
1129+
@layer default {
1130+
audio[controls] {
1131+
display: block;
1132+
}
1133+
}
1134+
</pre>
11351135
</div>
11361136

11371137
The identifier-only syntax
11381138
also allows authors to establish a layer order in advance,
11391139
regardless of the order in which style rules are added to each layer.
11401140

11411141
<div class="example">
1142-
In this example, the imported ''theme.css'' style will override
1143-
any style rules added to the ''default'',
1144-
since the order of layers has already been established.
1142+
In this example, the imported ''theme.css'' style will override
1143+
any style rules added to the ''default'',
1144+
since the order of layers has already been established.
11451145

1146-
<pre class='lang-css'>
1147-
@layer default;
1148-
@layer theme;
1149-
@layer components;
1146+
<pre class='lang-css'>
1147+
@layer default;
1148+
@layer theme;
1149+
@layer components;
11501150

1151-
@layer theme url(theme.css);
1151+
@layer theme url(theme.css);
11521152

1153-
@layer default {
1154-
audio[controls] {
1155-
display: block;
1156-
}
1157-
}
1158-
</pre>
1153+
@layer default {
1154+
audio[controls] {
1155+
display: block;
1156+
}
1157+
}
1158+
</pre>
11591159

1160-
See also [[#at-layers]]
1160+
See also [[#at-layers]].
11611161
</div>
11621162

11631163
Layer identifiers do not cross the shadow DOM boundary,
@@ -1173,38 +1173,38 @@ Nested Layers</h5>
11731173
internal layer identifiers are scoped to their parent layer.
11741174

11751175
<div class="example">
1176-
In this example,
1177-
the nested "framework default" layer is distinct
1178-
from the top-level "default" layer:
1179-
1180-
<pre class='lang-css'>
1181-
@layer default {
1182-
p { max-width: 70ch; }
1183-
}
1184-
1185-
@layer framework {
1186-
@layer default {
1187-
p { margin-block: 0.75em; }
1188-
}
1176+
In this example,
1177+
the nested "framework default" layer is distinct
1178+
from the top-level "default" layer:
11891179

1190-
@layer theme {
1191-
p { color: #222; }
1192-
}
1193-
}
1194-
</pre>
1180+
<pre class='lang-css'>
1181+
@layer default {
1182+
p { max-width: 70ch; }
1183+
}
1184+
1185+
@layer framework {
1186+
@layer default {
1187+
p { margin-block: 0.75em; }
1188+
}
1189+
1190+
@layer theme {
1191+
p { color: #222; }
1192+
}
1193+
}
1194+
</pre>
11951195

1196-
The resulting layers can be represented as a tree:
1196+
The resulting layers can be represented as a tree:
11971197

1198-
1. default
1199-
2. framework
12001198
1. default
1201-
2. theme
1199+
2. framework
1200+
1. default
1201+
2. theme
12021202

1203-
or as a flat list with nested identifiers:
1203+
or as a flat list with nested identifiers:
12041204

1205-
1. default
1206-
2. framework default
1207-
3. framework theme
1205+
1. default
1206+
2. framework default
1207+
3. framework theme
12081208

12091209
</div>
12101210

@@ -1215,22 +1215,22 @@ Nested Layers</h5>
12151215
by combining identifiers with a full stop (. U+002E) character.
12161216

12171217
<div class="example">
1218-
<pre class='lang-css'>
1219-
@layer framework {
1220-
@layer default {
1221-
p { margin-block: 0.75em; }
1222-
}
1223-
1224-
@layer theme {
1225-
p { color: #222; }
1226-
}
1227-
}
1228-
1229-
@layer framework.theme {
1230-
/* These styles will be added to the theme layer inside the framework layer */
1231-
blockquote { color: rebeccapurple; }
1232-
}
1233-
</pre>
1218+
<pre class='lang-css'>
1219+
@layer framework {
1220+
@layer default {
1221+
p { margin-block: 0.75em; }
1222+
}
1223+
1224+
@layer theme {
1225+
p { color: #222; }
1226+
}
1227+
}
1228+
1229+
@layer framework.theme {
1230+
/* These styles will be added to the theme layer inside the framework layer */
1231+
blockquote { color: rebeccapurple; }
1232+
}
1233+
</pre>
12341234
</div>
12351235

12361236
Issue(w3c/csswg-drafts#5791): What is the appropriate syntax for appending to nested layers?
@@ -1244,28 +1244,28 @@ Un-Named Layers</h5>
12441244

12451245

12461246
<div class="example">
1247-
In most use-cases this would only be syntax-sugar for brevity --
1248-
relying on well-organized source-order rather than any explicit names.
1249-
However, it could be used by teams as a way to "force" an organizing convention
1250-
(all layer code must be defined in one place),
1251-
or by libraries wanting to merge & hide a set of internal "private" layers
1252-
that they don't want exposed to author manipulation:
1253-
1254-
<pre class='lang-css'>
1255-
/* bootstrap-base.css */
1256-
/* unnamed wrapper layers around each sub-file */
1257-
@layer url(base-forms.css);
1258-
@layer url(base-links.css);
1259-
@layer url(base-headings.css);
1260-
1261-
/* bootstrap.css */
1262-
/* the intrnal names are hidden from access, subsumed in "base" */
1263-
@layer base url(bootstrap-base.css);
1264-
1265-
/* author.css */
1266-
/* author has access to bootstrap.base layer, but not into unnamed layers */
1267-
@layer bootstrap url(bootstrap.css);
1268-
</pre>
1247+
In most use-cases this would only be syntax-sugar for brevity --
1248+
relying on well-organized source-order rather than any explicit names.
1249+
However, it could be used by teams as a way to "force" an organizing convention
1250+
(all layer code must be defined in one place),
1251+
or by libraries wanting to merge & hide a set of internal "private" layers
1252+
that they don't want exposed to author manipulation:
1253+
1254+
<pre class='lang-css'>
1255+
/* bootstrap-base.css */
1256+
/* unnamed wrapper layers around each sub-file */
1257+
@layer url(base-forms.css);
1258+
@layer url(base-links.css);
1259+
@layer url(base-headings.css);
1260+
1261+
/* bootstrap.css */
1262+
/* the intrnal names are hidden from access, subsumed in "base" */
1263+
@layer base url(bootstrap-base.css);
1264+
1265+
/* author.css */
1266+
/* author has access to bootstrap.base layer, but not into unnamed layers */
1267+
@layer bootstrap url(bootstrap.css);
1268+
</pre>
12691269
</div>
12701270

12711271
Issue(w3c/csswg-drafts#5792): Should unnamed cascade layers be allowed?
@@ -1285,21 +1285,21 @@ Layer-Ordering Shorthand: the ''@layers'' rule</h3>
12851285
This is provided as a shorthand for establishing the order of named layers:
12861286

12871287
<div class="example">
1288-
The following examples have the same result.
1288+
The following examples have the same result.
12891289

1290-
Using multiple ''@layer'' rules with identifier only:
1290+
Using multiple ''@layer'' rules with identifier only:
12911291

1292-
<pre class='lang-css'>
1293-
@layer default;
1294-
@layer theme;
1295-
@layer components;
1296-
</pre>
1292+
<pre class='lang-css'>
1293+
@layer default;
1294+
@layer theme;
1295+
@layer components;
1296+
</pre>
12971297

1298-
Using the ''@layers'' shorthand syntax:
1298+
Using the ''@layers'' shorthand syntax:
12991299

1300-
<pre class='lang-css'>
1301-
@layers default, theme, components;
1302-
</pre>
1300+
<pre class='lang-css'>
1301+
@layers default, theme, components;
1302+
</pre>
13031303
</div>
13041304

13051305
<h3 id="preshint">

0 commit comments

Comments
 (0)