Skip to content

Commit 6c6857c

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#78 from estelle/layers
New files: cascade layers
2 parents 73d4826 + 6c4ac6b commit 6c6857c

File tree

4 files changed

+274
-0
lines changed

4 files changed

+274
-0
lines changed

‎learn/layers/basic-cascade.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cascade Layers: basic cascade origin</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
:where(a.author) {
14+
text-decoration: overline;
15+
color: red;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<section class="preview">
22+
<p><a href="https://example.org">User agent styles</a></p>
23+
<p><a href="https://example.org" class="author">Author styles</a></p>
24+
</section>
25+
26+
<textarea class="playable playable-css" style="height: 120px;">
27+
:where(a.author) {
28+
text-decoration: overline;
29+
color: red;
30+
}
31+
</textarea>
32+
33+
<textarea class="playable playable-html" style="height: 40px;">
34+
<p><a href="https://example.org">User agent styles</a></p>
35+
<p><a href="https://example.org" class="author">Author styles</a></p>
36+
</textarea>
37+
38+
<div class="playable-buttons">
39+
<input id="reset" type="button" value="Reset">
40+
</div>
41+
</body>
42+
<script src="../playable.js"></script>
43+
44+
</html>

‎learn/layers/layer-order.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cascade Layers: layer order</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
@layer page {
14+
h1 {
15+
text-decoration: overline;
16+
color: red;
17+
}
18+
}
19+
20+
@layer site {
21+
h1 {
22+
text-decoration: underline;
23+
color: green;
24+
}
25+
}
26+
/* this does nothing */
27+
@layer site, page;
28+
</style>
29+
</head>
30+
31+
<body>
32+
<section class="preview">
33+
<h1>Is this heading underlined?</h1>
34+
</section>
35+
36+
<textarea class="playable playable-css" style="height: 300px;">
37+
@layer page {
38+
h1 {
39+
text-decoration: overline;
40+
color: red;
41+
}
42+
}
43+
44+
@layer site {
45+
h1 {
46+
text-decoration: underline;
47+
color: green;
48+
}
49+
}
50+
51+
/* this does nothing */
52+
@layer site, page;
53+
</textarea>
54+
55+
<textarea class="playable playable-html" style="height: 40px;">
56+
<h1>Is this heading underlined?</h1>
57+
</textarea>
58+
59+
<div class="playable-buttons">
60+
<input id="reset" type="button" value="Reset">
61+
</div>
62+
</body>
63+
<script src="../playable.js"></script>
64+
65+
</html>

‎learn/layers/layer-precedence.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cascade Layers: layer order</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
@layer A, B;
14+
15+
h1 {
16+
color: orange;
17+
background-color: green;
18+
text-decoration: overline pink !important;
19+
box-shadow: 5px 5px lightgreen !important;
20+
}
21+
22+
@layer A {
23+
h1 {
24+
color: grey;
25+
background-color: black !important;
26+
text-decoration: line-through grey;
27+
box-shadow: -5px -5px lightblue !important;
28+
font-style: normal;
29+
font-weight: normal !important;
30+
}
31+
}
32+
@layer B {
33+
h1 {
34+
color: aqua;
35+
background: yellow !important;
36+
text-decoration: underline aqua;
37+
box-shadow: -5px 5px magenta !important;
38+
font-style: italic;
39+
font-weight: bold !important;
40+
}
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section class="preview">
47+
<div>
48+
<h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
49+
</div>
50+
</section>
51+
52+
<textarea class="playable playable-css" style="height: 300px;">
53+
@layer A, B;
54+
55+
h1 {
56+
color: orange;
57+
background-color: green;
58+
text-decoration: overline pink !important;
59+
box-shadow: 5px 5px lightgreen !important;
60+
}
61+
62+
@layer A {
63+
h1 {
64+
color: grey;
65+
background-color: black !important;
66+
text-decoration: line-through grey;
67+
box-shadow: -5px -5px lightblue !important;
68+
font-style: normal;
69+
font-weight: normal !important;
70+
}
71+
}
72+
@layer B {
73+
h1 {
74+
color: aqua;
75+
background: yellow !important;
76+
text-decoration: underline aqua;
77+
box-shadow: -5px 5px magenta !important;
78+
font-style: italic;
79+
font-weight: bold !important;
80+
}
81+
}
82+
</textarea>
83+
84+
<textarea class="playable playable-html" style="height: 100px;">
85+
<div>
86+
<h1 style="color: yellow; background-color: maroon !important;">Inline styles</h1>
87+
</div>
88+
</textarea>
89+
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset">
92+
</div>
93+
</body>
94+
<script src="../playable.js"></script>
95+
96+
</html>

‎learn/layers/media-order.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Cascade Layers: layer order</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
@media (min-width: 50em) {
14+
@layer site;
15+
}
16+
17+
@layer page {
18+
h1 {
19+
text-decoration: overline;
20+
color: red;
21+
}
22+
}
23+
24+
@layer site {
25+
h1 {
26+
text-decoration: underline;
27+
color: green;
28+
}
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<h1>Is this heading underlined?</h1>
36+
</section>
37+
38+
<textarea class="playable playable-css" style="height: 120px;">
39+
@media (min-width: 50em) {
40+
@layer site;
41+
}
42+
43+
@layer page {
44+
h1 {
45+
text-decoration: overline;
46+
color: red;
47+
}
48+
}
49+
50+
@layer site {
51+
h1 {
52+
text-decoration: underline;
53+
color: green;
54+
}
55+
}
56+
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 40px;">
60+
<h1>Is this heading underlined?</h1>
61+
</textarea>
62+
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset">
65+
</div>
66+
</body>
67+
<script src="../playable.js"></script>
68+
69+
</html>

0 commit comments

Comments
 (0)