-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
268 lines (210 loc) · 13.9 KB
/
index.html
File metadata and controls
268 lines (210 loc) · 13.9 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Playground</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h1 id="title">:before and :after pseudo-selectors</h1>
<p id="hello"></p>
<p id="hello-description">The above text is created using CSS's <code>:before</code> and <code>:after</code> pseudo-selectors.</p>
<p>Those letters are not select-able because they literally don't exist in the DOM. Well, they do, and they don't.</p>
<p>I've found <a target="_blank" rel="noopener" href="https://css-tricks.com/almanac/selectors/a/after-and-before/">this</a> to be a really good resource on this topic.</p>
<br>
<p>Basically, <code>:before</code> injects stuff before the actual <b>content</b> of the <b>element</b>, and <code>:after</code> does it after - but both pieces of content are still confined to / bound to the element itself.</p>
<p>These pseudo-selectors take the CSS <code>content</code> property, which can take a string, an image url, nothing, or a <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">counter</a></p>
<br>
<p id="content1">Hello, from p!</p>
<p id="content2">Hello, this is my image:</p>
<p>Notice how the image above isn't selectable either; nor can you right-click -> save</p>
<p id="content3"><code>content: ""</code> can affect the page!</p>
<hr>
<h1>CSS counters</h1>
<p>I did NOT know that this was possible, but here we are... CSS has counter logic. This can help with numbering lists.</p>
<p>In fact, this page is using counters. The "Section #:" parts of the titles use a counter named "section".</p>
<p>To create a counter, first declare/initialize it with a <code>counter-reset</code> property:</p>
<pre>
<code>body {
counter-reset: section;
}</code>
</pre>
<p>Then, for the tags, classes, ids, etc. that rely on the counter, increment it, and display it via <code>content</code>:</p>
<pre>
<code>h1:before {
counter-increment: section;
content: "Section " counter(section) ": '";
}</code>
</pre>
<p>It seems CSS counters are naturally suited for Table of Contents styling: </p>
<ol>
<li>Introduction</li>
<li>Installation</li>
<ol>
<li>Pre-requisites</li>
<li>Troubleshooting</li>
<li>Configuration</li>
<ol>
<li>Configuration File</li>
<li>Environment Variables</li>
<li>Some other topic...</li>
</ol>
<li>Usage</li>
</ol>
<li>Glossary</li>
<li>Terms</li>
</ol>
<p>The code for that: </p>
<pre>
<code>ol {
counter-reset: item;
list-style-type: none;
}
li::before {
counter-increment: item;
content: counters(item, ".") " ";
color:#3aadff;
}</code>
</pre>
<p>If you're a frequent copy-and-paster like me, you'll appreciate pseudo-selectors like <code>:before</code> and <code>:after</code> - try selecting the chapter titles above. 😜</p>
<hr>
<h1>CSS Pseudo-elements vs Pseudo-classes</h1>
<p>I was always confused about the appearance of single colons, and double colons in CSS code... until now.</p>
<p>Double colons were introduced to distinguish pseudo-elements from pseudo-classes which use single colons (for historical and backwards-compatibility.)</p>
<p>According to <a target="_blank" rel="noopener" href="https://www.w3schools.com/css/css_pseudo_elements.asp">W3-Schools</a>:</p>
<blockquote>
"A CSS pseudo-element is used to style specified parts of an element.
<br><br>
For example, it can be used to:
<br>- Style the first letter, or line of an element
<br>- Insert content before, or after, the content of an element"
</blockquote>
<p>Some common pseudo-elements are <code>::first-line</code>, <code>::first-letter</code>, and <code>::selection</code>:</p>
<p id="long-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum varius quam eget hendrerit. Curabitur sit amet laoreet metus. Sed velit sem, luctus nec condimentum sed, consequat id tellus. Fusce posuere, magna eget dignissim hendrerit, diam turpis sagittis odio, ut finibus lorem orci at tellus. Ut lectus tortor, malesuada et dictum nec, suscipit sit amet elit. Nunc iaculis sollicitudin viverra. Duis malesuada hendrerit est, sit amet tempor lorem ornare eget. Mauris non augue id felis blandit efficitur. Maecenas nec orci nec justo molestie viverra quis sit amet enim. Nulla facilisi. Proin ex diam, laoreet vitae diam sed, dignissim finibus massa. Pellentesque egestas eros non lectus pulvinar, eu feugiat dolor faucibus. Maecenas nulla est, viverra vel metus ut, ultricies interdum risus. Praesent convallis augue vitae sapien posuere, id sagittis nulla scelerisque. Duis auctor in ipsum eu finibus. Pellentesque efficitur tincidunt orci, nec varius nunc mollis non.</p>
<p>Pseudo-elements are special elements on the screen that are inaccessible from the DOM / HTML. Pseudo-classes are a way to style elements on the page when they go into a specific state.</p>
<br>
<div class="state-grid">
<code>:active</code>
<code>:checked</code>
<code>:disabled</code>
<code>:empty</code>
<code>:enabled</code>
<code>:first-child</code>
<code>:first-of-type</code>
<code>:focus</code>
<code>:hover</code>
<code>:in-range</code>
<code>:invalid</code>
<code>:lang(language)</code>
<code>:last-child</code>
<code>:last-of-type</code>
<code>:link</code>
<code>:not(selector)</code>
<code>:nth-child(n)</code>
<code>:nth-last-child(n)</code>
<code>:nth-last-of-type(n)</code>
<code>:nth-of-type(n)</code>
<code>:only-of-type</code>
<code>:only-child</code>
<code>:optional</code>
<code>:out-of-range</code>
<code>:read-only</code>
<code>:read-write</code>
<code>:required</code>
<code>:root</code>
<code>:target</code>
<code>:valid</code>
<code>:visited</code>
</div>
<hr>
<h1>A weird/niche distinction in how you clearfix</h1>
<p>I recently read <a target="_blank" rel="noopener" href="http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/">a really interesting article</a> about the secret benefits of the <code>overflow</code> property. I have to say, I truly never knew this.</p>
<p>Without clearing, the floating elements take up the same horizontal space as their successive neighbors</p>
<div class="box fl-left">I'm floating left</div>
<div class="box fl-right">I'm floating right</div>
<div class="big-box no-clear">I'm clearing neither of these floats, see how they overlap me?</div>
<br><br>
<div class="box fl-left">I'm floating left</div>
<div class="box fl-right">I'm floating right</div>
<div class="big-box clearer">I'm using a traditional <code>clear: both;</code> approach. Now I'm resting below the floating elements, as many would expect a <code>display: block;</code> element to do.</div>
<br><br>
<div class="box fl-left">I'm floating left</div>
<div class="box fl-right">I'm floating right</div>
<div class="big-box overflower">I'm clearing these floats using a less obvious <code>overflow: hidden;</code> approach.</div>
<br><br>
<p>The approach above gives a similar effect to using flexbox or grid... the flexbox approach here would be:</p>
<div class="flex-container">
<div class="box">I'm a box</div>
<div class="big-box grower">I'm a big box with <code>flex-grow: 1;</code>; all of us are also using <code>align-self: flex-start;</code></div>
<div class="box">I'm also a box</div>
</div>
<br><br>
<p>A grid approach: </p>
<div class="grid-container">
<div class="box">I'm a box</div>
<div class="big-box">We're inside a grid with <code>grid-template-columns: 200px 1fr 200px;</code> - all of us have <code>align-self: start;</code></div>
<div class="box">I'm also a box</div>
</div>
<h1>flex-basis vs width vs min-width</h1>
<p>I will confess, I've never heard of the <code>flex-basis</code> CSS property until today. Like the rest of the internet, I too was unsure about how it compared to setting <code>width</code> or <code>min-width</code>.</p>
<p>I found <a href="https://mastery.games/post/the-difference-between-width-and-flex-basis/" rel="noopener" target="_blank">this awesome article</a> which explains it succinctly.</p>
<br>
<p>Consider the following box: <code>display: flex; width: 800px; height: 200px;</code></p>
<div class="flex-basis-container">
</div>
<p>We can throw some items in it. Say, 3 items of 600px width...</p>
<div class="flex-basis-container">
<div class="flex-basis-container__item fbci_1">width: 100px;</div>
<div class="flex-basis-container__item fbci_2">width: 100px;</div>
<div class="flex-basis-container__item fbci_3">width: 100px;</div>
</div>
<p>If we use both <code>flex-basis</code> and <code>width</code>, it seems that <code>flex-basis</code> takes precedence.</p>
<div class="flex-basis-container">
<div class="flex-basis-container__item fbci_4">width: 100px; flex-basis: 200px;</div>
<div class="flex-basis-container__item fbci_5">width: 100px; flex-basis: 200px;</div>
<div class="flex-basis-container__item fbci_6">width: 100px; flex-basis: 200px;</div>
</div>
<p>If we use <code>flex-basis</code> and <code>min-width</code>, then <code>min-width</code> takes precedence.</p>
<div class="flex-basis-container">
<div class="flex-basis-container__item fbci_7">flex-basis: 200px; min-width: 250px;</div>
<div class="flex-basis-container__item fbci_8">flex-basis: 200px; min-width: 250px;</div>
<div class="flex-basis-container__item fbci_9">flex-basis: 200px; min-width: 250px;</div>
</div>
<h2>Conclusion 1: calculated width < width < flex-basis < min-width</h2>
<div class="fb-demo-contianer">
<div class="flex-basis-container fbc-vertical">
<div class="flex-basis-container__item fbci_10">height: 100px; flex-basis: 200px;</div>
<div class="flex-basis-container__item fbci_11">height: 100px; flex-basis: 200px;</div>
<div class="flex-basis-container__item fbci_12">height: 100px; flex-basis: 200px;</div>
</div>
<h2>Conclusion 2: <code>flex-basis</code> applies to whatever the main flex axis is (determined by <code>flex-direction</code>)</h2>
</div>
<h2>Conclusion 3: <code>min-width</code> overflows the flex container, <code>width</code> and <code>flex-basis</code> do not.</h2>
<br>
<div class="flex-basis-container">
<div class="flex-basis-container__item fbci_13">min-width: 250px;</div>
<div class="flex-basis-container__item fbci_14">min-width: 250px;</div>
<div class="flex-basis-container__item fbci_15">min-width: 250px;</div>
<div class="flex-basis-container__item fbci_16">min-width: 250px;</div>
<div class="flex-basis-container__item fbci_17">min-width: 250px;</div>
<div class="flex-basis-container__item fbci_18">min-width: 250px;</div>
</div>
<br>
<div class="flex-basis-container">
<div class="flex-basis-container__item fbci_19">width: 250px;</div>
<div class="flex-basis-container__item fbci_20">width: 250px;</div>
<div class="flex-basis-container__item fbci_21">width: 250px;</div>
<div class="flex-basis-container__item fbci_22">width: 250px;</div>
<div class="flex-basis-container__item fbci_23">width: 250px;</div>
<div class="flex-basis-container__item fbci_24">width: 250px;</div>
</div>
<p>Some other noteable mentions:</p>
<p>* <code>flex-basis: auto;</code> essentially just defaults back to the <code>width</code> property. If none given, then the element displays with its calculated width.</p>
<p>* <code>flex-shrink</code> works on the horizontal axis, not the vertical axis. <code>height</code> does not obey <code>flex-shrink</code></p>
</main>
</body>
</html>