-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (143 loc) · 5.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Layers Polyfill Demo</title>
<link rel="stylesheet" href="https://use.typekit.net/dyv8wex.css" />
<link
id="plain-css"
rel="stylesheet"
type="text/css"
href="./dist/plain.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/themes/prism.css"
/>
</head>
<body>
<div class="status"></div>
<header>
<h1>CSS Cascade Layers <span>Polyfill Demo</span></h1>
</header>
<main>
<div class="primary">
<h2>What are Cascade Layers?</h2>
<figure>
<blockquote>
...a CSS feature that allows us to define explicit contained layers
of specificity, so that we have full control over which styles take
priority in a project without relying on specificity hacks or
<code>!important</code>.
</blockquote>
<figcaption>
Miriam Suzanne,
<a href="https://css-tricks.com/css-cascade-layers/"
>A Complete Guide to CSS Cascade Layers</a
>
</figcaption>
</figure>
<h2>What does the Cascade Layers Polyfill do?</h2>
<p>
It uses <a href="https://postcss.org/">PostCSS</a> to pre-process the
CSS, meaning you can write CSS with Cascade Layers and not worry about
it only being available in some of the latest browsers. The polyfill
is
<a
href="https://www.npmjs.com/package/@csstools/postcss-cascade-layers"
>available as an NPM package</a
>
and you can learn more about it by reading
<a href="https://www.oddbird.net/2022/06/21/cascade-layers-polyfill/"
>Cascade Layers – There’s a Polyfill for That!</a
>
by Sana Javed on the OddBird blog.
</p>
<h2>How to use the Cascade Layers Polyfill</h2>
<p>
Assuming you have two CSS files, one main stylesheet using Layers and
another preprocessed with the
<a
href="https://www.npmjs.com/package/@csstools/postcss-cascade-layers"
>polyfill</a
>, you can test for <code>@layer</code> support and conditionally use
the appropriate stylesheet:
</p>
<pre><code class="language-js"
>/* inspired by: https://codepen.io/miriamsuzanne/pen/poLOYrz */
const varName = '--js-test-layer-support';
// inject a style element with a layered variable
const style = document.createElement('style');
style.textContent = `@layer {:root{${varName}: true;}}`;
document.head.appendChild(style);
// check if the variable is set
const hasSupport = getComputedStyle(document.documentElement)
.getPropertyValue(varName)
.includes('true');
// remove the style element
document.head.removeChild(style);
// (optionally) add a root class
const supportClass = hasSupport ? 'layers' : 'no-layers';
document.documentElement.classList.add(supportClass);
if (hasSupport) {
// load the plain (unpolyfilled) stylesheet
const styles = document.createElement('link');
styles.rel = 'stylesheet';
styles.href = './dist/styles.css';
document.head.appendChild(styles);
} else {
// load the polyfilled stylesheet
const polyfilled = document.createElement('link');
polyfilled.rel = 'stylesheet';
polyfilled.href = './dist/polyfilled.css';
document.head.appendChild(polyfilled);
}</code></pre>
</div>
<div class="secondary">
<fieldset class="controls">
<legend class="h2">Select a stylesheet below!</legend>
<p>
The polyfilled CSS was transformed by the PostCSS plugin, and the
unpolyfilled CSS is unchanged.
</p>
<div>
<input
type="radio"
id="plain"
name="stylesheet"
value="plain"
checked
/>
<label for="plain">Unpolyfilled</label>
</div>
<div>
<input
type="radio"
id="polyfilled"
name="stylesheet"
value="polyfilled"
/>
<label for="polyfilled">Polyfilled</label>
</div>
</fieldset>
<h2>Sample Content for Layers and the Polyfill</h2>
<p>
When layers are supported or if the polyfill is in use, you will see
the default bootstrap button styles. In this demo, the Bootstrap CSS
is imported into the lowest priority layer making any CSS written
outside of the "framework" layer take priority. This means you can
apply your own styles without having to worry about increased
specificity.
</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</main>
<script src="./dist/main.js"></script>
<script src="https://unpkg.com/[email protected]/components/prism-core.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>