/
example.html
128 lines (123 loc) · 5.33 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>🌘 CSS Scope Inline Test Page</title>
<!-- ... or add as inline <script> ! -->
<script src="https://cdn.jsdelivr.net/gh/gnat/css-scope-inline/script.js"></script>
<meta http-equiv="cache-control" content="no-cache">
<style>
*,*::before,*::after { margin: 0; box-sizing: border-box; } /* Reset */
html {
font-size: 10px; /* Root size. Usage: 1.8rem = 18px (1rem = 10px) */
text-size-adjust: none; /* Reset auto size. */
background: #222;
color: #ccc;
}
body { font-size: 2rem } /* 2rem = 20px in our setup. */
html button { font-size: 2rem; cursor: pointer; color: #fff; text-shadow: 0 2px #000000AA; padding: 2rem 2.4rem; margin: 2rem; background: hsl(345 100% 47%); border: 0; border-bottom: 0.5rem solid hsl(345 100% 28%); border-radius: 12px; transition: all 0.3s; }
html button:hover { background: hsl(345 100% 60%); transform: translateY(-0.2rem) }
html button:active { transform: translateY(0.2rem) }
</style>
</head>
<body>
<div>💩 No style.</div>
<div>
<style> /* Simple example. */
me { margin: 20px; }
me div { font-size: 5rem; }
</style>
<div>👻</div>
</div>
<div>
<style>
/* Flat, 1 selector style. Really easy. We recommend it! */
me { font-family: 'Noto Sans', sans-serif; background: hsl(264 62% 20%); color: #fff; }
me ol { padding: 5px 0; }
me ol li { list-style: disc; padding: 4px; border-radius: 12px; margin: 4px 20px }
/* ✨ this and self alias me */
this ol li[n1] { background: hsl(264 50% 50%) }
self ol li[n2] { background: hsl(264 80% 50%) }
/* Nested, 1 selector style. Possible! But visually busy. */
me { border:none; border-radius: 12px; box-shadow: 0 2px 5px #00000044; padding: 10px 20px; margin: 20px;
& span { background: hsl(264 90% 90%); color: hsl(264 30% 40%); padding: 16px 20px; border-radius: 8px; box-shadow: 0 0 5px hsl(0 0% 0% / 20%);
&::before { content:'🔮'; padding: 0 1ch 0 0; }
}
}
/* Animations */
me { animation: me 2s ease-in-out infinite }
@keyframes me { /* ♻️ Looped animation @keyframes can be scoped! .. prefix with me- or me_ for more names! */
0% { transform: translateY(0px); }
50% { transform: translateY(20px); }
100% { transform: translateY(0px); }
}
/* Plain CSS works untouched! */
h1, h2, h3 { font-size: 3rem; margin: 20px 0; }
</style>
<h1>🛸 Scoped style using me</h1>
<ol>
<li>Use modern <span>Nested CSS</span>
<li n1>👽 Using this
<li n2>💀 Using self
<li>⚡ Use live editing in the browser inspector to speed up your workflow, again!
</ol>
</div>
<br />
<div>
<style>
/* Scoped CSS variables work fine! */
me { --color: hsl(264 80% 50%); font-family: sans-serif; margin: 20px }
me div { margin: 20px 0 }
me div ul { margin: 0; padding: 0 }
me div ul li { display: inline-block; width: 110px; text-align: center; background: #444; border-radius: 5px; padding: 10px 2px; margin: 10px 10px }
</style>
<h2>Responsive Design 🔛 Resize the window!</h2>
🟢 = No breakpoint. Default.
<div>
<style>
me ul li[n1] { background: var(--color); }
@media sm { me ul li[n2] { background: var(--color); } }
@media md { me ul li[n3] { background: var(--color); } }
@media lg { me ul li[n4] { background: var(--color); } }
@media xl { me ul li[n5] { background: var(--color); } }
@media xx { me ul li[n6] { background: var(--color); } }
</style>
<div>Mobile First (<strong>above</strong> breakpoint)</div>
<ul><li n1><strong>🟢 None</strong><li n2>sm<li n3>md<li n4>lg<li n5>xl<li n6>🏁 xx</ul>
</div>
<div>
<style>
/* You can also nest @media styles! */
me ul li {
&[n1] { background: var(--color); }
@media xl- { &[n2] { background: var(--color); } }
@media lg- { &[n3] { background: var(--color); } }
@media md- { &[n4] { background: var(--color); } }
@media sm- { &[n5] { background: var(--color); } }
@media xs- { &[n6] { background: var(--color); } }
}
</style>
<div>Desktop First (<strong>below</strong> breakpoint)</div>
<ul><li n6>🏁 xs-<li n5>sm-<li n4>md-<li n3>lg-<li n2>xl-<li n1><strong>🟢 None</strong></ul>
</div>
<br />
<h2>HTMX Test</h2>
<script src="https://unpkg.com/htmx.org@1.9.6/dist/htmx.min.js" defer></script>
<div>Swapped DOM elements are styled instantly when they arrive.</div>
<button garlic hx-get="https://gnat.github.io/css-scope-inline/example.html" hx-select="button[garlic]" hx-swap="afterend">
<style>
me { margin: 4px; padding: 10px 30px; min-width: 80px; background: hsl(264 80% 47%); border-bottom: 0.5rem solid hsl(264 80% 20%); }
me:hover { background: hsl(264 80% 60%); }
</style>
🧄
</button>
<button vampire hx-get="https://gnat.github.io/css-scope-inline/example.html" hx-select="button[vampire]" hx-swap="afterend">
<style>
me { margin: 4px; padding: 10px 30px; min-width: 80px; background: hsl(150 80% 47%); border-bottom: 0.5rem solid hsl(150 80% 28%); }
me:hover { background: hsl(150 80% 60%); }
</style>
🧛
</button>
</div>
<button onClick="window.open('https://github.com/gnat/css-scope-inline/blob/main/example.html');" style="font-weight: bold; font-family: sans-serif;">🐱 View code for this page.</button>
</body>
</html>