PageSourceSearch

https://www.oddbird.net/blog/

html oddbird.net collected 2026-09-24 08:38:25 UTC 104,740 bytes, 1,852 lines download raw bytes

1<!doctype html>
2<html lang="en"
3  data-layout="root"
4  data-ccs="root"
5  data-ccs-theme="oddbird"
6  data-ccs-colors>
7  <head>
8    <meta charset="utf-8" />
9    <meta name="viewport"
10      content="width=device-width, initial-scale=1.0" />
11
12    
13    
14    
15
16    
17    <title>Posts
18
19 | OddBird</title>
20    <meta name="description"
21      content="
22Read, watch, &amp; listen
23" />
24
25    
26    
27      <link href="https://www.oddbird.net/" rel="me">
28    
29      <link href="mailto:[email protected]" rel="me">
30    
31      <link href="https://front-end.social/@OddBird" rel="me">
32    
33      <link href="https://bsky.app/profile/oddbird.dev" rel="me">
34    
35      <link href="https://github.com/oddbird" rel="me">
36    
37
38    
39    <link rel="webmention" href="https://webmention.io/www.oddbird.net/webmention" />
40    <link rel="pingback" href="https://webmention.io/www.oddbird.net/xmlrpc" />
41
42    
43    <link rel="icon" type="image/x-icon" sizes="48x48" href="/favicon.ico">
44    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
45    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
46    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
47    <link rel="manifest" href="/site.webmanifest">
48    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8b3d">
49    <meta name="msapplication-TileColor" content="#ff8b3d">
50
51    
52      <link rel="canonical"
53        href="https://www.oddbird.net/blog/">
54    
55
56    
57
58    
59      <link rel="stylesheet"
60        href="/assets/css/screen.css" />
61    
62      <link rel="stylesheet"
63        href="/assets/css/nav-dropdown.css" />
64    
65
66    
67
68    <meta property="fb:app_id" content="1820980378150914" />
69<meta property="og:locale" content="en_US" />
70<meta property="og:type" content="website" />
71<meta property="og:title" content="Posts
72
73" />
74<meta property="og:image" content="https://www.oddbird.net/assets/images/blog/oddsite-960w.jpeg" />
75<meta property="og:description" content="
76Read, watch, &amp; listen
77" />
78<meta property="og:url" content="https://www.oddbird.net/blog/" />
79<meta property="og:site_name" content="OddBird" />
80<meta name="fediverse:creator" content="@[email protected]" />
81
82    
83
84    
85<link
86  rel="alternate"
87  type="application/atom+xml"
88  title="OddBird"
89  href="https://www.oddbird.net/feed.atom" />
90
91
92
93    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#d9e4e7">
94    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2e393e">
95
96    <!-- Context: production -->
97    
97<script defer data-domain="oddbird.net" src="https://plausible.io/js/plausible.js"></script>
97
98  </head>
99
100  <body data-layout="body">
101    <a href="#title"
102      id="to-content"
103      class="sr-only">
104      Skip to main
105    </a>
106
107    
108    
109
110
111  <aside data-layout="alert" data-ccs-colors="dark" aria-label="">
112    <p><strong><a href="https://courses.oddbird.net/poetic-css/">Poetic <span class="caps">CSS</span> Course</a></strong> –
113Understand <span class="caps">CSS</span> as a system</p>
114
115  </aside>
116
117
118    <header data-layout="banner" aria-label="site">
119  <a href="/"
120    rel="home"
121    id="banner-logo"
122    aria-label="OddBird.Net"
123    >
124    <svg
125  data-logo="oddbird"
126  xmlns="http://www.w3.org/2000/svg"
127  aria-hidden="true"
128  focusable="false"
129  width="200px"
130  height="96px"
131  viewBox="0 0 181.6 86.7"
132>
133  <path class="wordmark" d="M90.7 4.5c1.3.2 1.5.4 1.5.7v11.7c1.8.5 3.5 1.2 5.3 2.1v-3.2H99c3.8 0 6.6 1.7 6.6 5.4 0 1.1-.3 2-.8 2.8.9.8 1.8 1.6 2.7 2.5 2.6-1.1 3.8-3 3.8-5.4 0-3.5-2.9-5.8-7.7-6.3v-.2c3.7-.6 6.8-2.8 6.8-6.2s-2.8-5.6-9.9-5.6H89.3l.1 1.6 1.3.1zm6.8-.1h1.7c3.7 0 5.5 2 5.5 5 0 2.6-1.8 4.6-5 4.7h-2.2V4.4zM116 26l-1.8.2-.1 1.6h3.3c1.7-2.3 3.4-4.4 5.3-5.1V5.2c0-.4.3-.6 1.4-.8l1.9-.2.1-1.6h-12l.1 1.6 1.7.2c1.3.2 1.5.4 1.5.7v20c0 .5-.4.7-1.4.9zM15.3 2.2C7.9 2.2 1.7 7.8 1.7 15.5s5.4 12.9 13.4 12.9c7.4 0 13.6-5.6 13.6-13.3S23.3 2.2 15.3 2.2zm0 24.3c-4.3 0-7.8-4.1-7.8-11.5 0-7.2 3.4-11 7.6-11 4.3 0 7.8 4.1 7.8 11.5 0 7.3-3.4 11-7.6 11zM164.8 2.6l-10.5.2.1 1.6 1.3.2c1.3.2 1.5.4 1.5.7v20c0 .4-.4.6-1.4.8l-1.4.2-.1 1.6h10.5c9.7 0 15.1-6.2 15.1-13.1-.1-7.2-5.9-12.4-15.1-12.2zm.6 23.5l-2.9-.6V4.4h1.3c6.9 0 10.3 4.5 10.3 11.2 0 5.8-3.2 10.4-8.7 10.5zM130.3 4.5c1.3.2 1.5.4 1.5.7v17.7c1.8.5 3.6 1.1 5.3 1.7v-7.7h2.4l4.2 7.7 1.6 3.2h7.7l-.1-1.6-1.1-.2c-.8-.2-1.3-.6-2.2-1.8l-5.2-8.2c3.6-1.3 5.7-3.7 5.7-6.9 0-3.7-3.1-6.2-9.6-6.2h-11.7l.1 1.6h1.4zm6.8 0h1.9c3.4-.1 5.5 1.8 5.5 5.4 0 3.4-2 5.1-4.9 5.4l-2.4-.2V4.5h-.1zM33.4 26l-1.4.1-.1 1.6h5.4c1.2-.8 2.4-1.5 3.6-2.1l-.8-.2v-21h1.3c6.9 0 10.3 4.5 10.3 11.2 0 2.3-.5 4.3-1.4 6 .8-.2 1.7-.3 2.5-.3.9 0 1.7.1 2.5.4 1.4-2.1 2.1-4.5 2.1-7.1 0-7-5.8-12.2-15-12.1l-10.5.2.1 1.6 1.3.2c1.3.2 1.5.4 1.5.7v20c0 .4-.4.6-1.4.8zM62 4.5c1.3.2 1.5.4 1.5.7v20c0 .4-.4.6-1.4.8l-1.3.1c.5.5.9 1.1 1.3 1.6h7.6c.4-.6.7-1.2 1.1-1.8l-2-.4V4.4h1.3c6.9 0 10.3 4.5 10.3 11.2 0 .6 0 1.1-.1 1.7.6-.3 1.3-.5 1.9-.7 1.2-.3 2.5-.5 3.9-.5 0-.5.1-.9.1-1.4 0-7-5.8-12.2-15-12.1l-10.6.1.1 1.6 1.3.2z"/>
134  <path class="logomark" d="M143.1 28.7c-3.8-1.7-14.6-6.6-19.6-4.9-3.4 1.1-7.3 9.4-9.9 11.8-.3.2-.6.5-1 .8-7.1-13.4-20.8-21-29.9-18.5-6.2 1.7-11.9 8.9-14.5 18.1-4.5-2.7-6.8-7.2-10.8-11.3-3.1-3.2-7.3-1.9-10.9-.2-7.2 3.3-16.6 8.2-16.3 15.9 4.2-3 8.3-2.1 9.6 3.4.3 1 2.6-3.6 5.4-4.6 3.2-1.2 6.7 1.7 7.4 4.9.2.6 2.9-3.5 5.7-2.1 2 .9 3.2 5.1 3.9 4.7 2-1.3 3.4-2.8 4.8-4-.5 4.7-.2 9.7 1.2 14.7.1.3.2.6.2.8 1-8.9 5.9-16.2 11.4-17.7 7.7-2.2 20.1 5.8 23.8 18.9 2.7 9.7.8 19.3-4.2 24.6.6-.1 1.2-.2 1.8-.4 13.1-3.7 19.6-21.4 14.5-39.5-.1-.4-.2-.7-.3-1 3.2 1.7 4.7 4.5 4.8 4.1 1.2-5.6 7.9-5.7 12.3-1.7.4.4.6-4.3 2.3-4.9 2.7-1 5.7.5 8.5 2.2.5.3.4-2.2.3-2.5-.2-1.2-.1-2.5 1.3-2.9 2.1-.6 4.5.5 6.4.9-.5-4.5-4.6-8-8.2-9.6z"/>
135</svg>
136
137  </a>
138
139  <div data-layout="menu">
140    <div id="search" data-form="search"></div>
141
142    
143
144<details data-ccs="menu" class="has-dropdown" hidden>
145  <summary data-btn="secondary-menu xsmall summary">
146    Light/Dark
147  </summary>
148  <div data-dropdown="pad rtl">
149    <fieldset data-fieldset="ccs-modes"><legend>Color Mode</legend><div class="fieldset-content"  data-radio="group">
150      
151      
152        
153  <input  type="radio" data-input="radio"  name="ccs-modes" id="light-mode" data-radio="input" data-ccs-input="light-mode" >
154  <label for="light-mode" data-label  data-radio="option" data-ccs-colors="light">light</label>
155
156      
157        
158  <input  type="radio" data-input="radio"  name="ccs-modes" id="dark-mode" data-radio="input" data-ccs-input="dark-mode" >
159  <label for="dark-mode" data-label  data-radio="option" data-ccs-colors="dark">dark</label>
160
161      
162        
163  <input  type="radio" data-input="radio"  name="ccs-modes" id="auto-mode" data-radio="input" data-ccs-input="auto-mode" checked>
164  <label for="auto-mode" data-label  data-radio="option" data-ccs-colors>auto</label>
165
166      
167    
168    </div>
169  </fieldset>
170
171
172    <div  data-field="theme" data-ccs-field="theme">
173    <label for="field-theme" data-label >Theme</label><select   data-select  name="theme" id="field-theme" data-ccs-input="theme unset-values">oddbird,complement,adjacent,triad,monochrome,contrast<option value="oddbird" selected>
174        oddbird
175      </option><option value="complement" >
176        complement
177      </option><option value="adjacent" >
178        adjacent
179      </option><option value="triad" >
180        triad
181      </option><option value="monochrome" >
182        monochrome
183      </option><option value="contrast" >
184        contrast
185      </option></select>
186  </div>
187
188    <div  data-field="hue" data-ccs-field="hue">
189    <label for="field-hue" data-label >Hue</label><input  type="range" data-input="range"  name="hue" id="field-hue" data-ccs-input="hue"  max="360" value="195">
190  </div>
191
192    <div  data-field="saturation" data-ccs-field="saturation">
193    <label for="field-saturation" data-label >Saturation</label><input  type="range" data-input="range"  name="saturation" id="field-saturation" data-ccs-input="saturation"  max="100" value="75">
194  </div>
195
196    <div  data-field="lightness" data-ccs-field="lightness">
197    <label for="field-lightness" data-label >Lightness</label><input  type="range" data-input="range"  name="lightness" id="field-lightness" data-ccs-input="lightness" min="30" max="70" value="50">
198  </div>
199
200    <div  data-field="contrast" data-ccs-field="contrast">
201    <label for="field-contrast" data-label >Contrast</label><input  type="range" data-input="range"  name="contrast" id="field-contrast" data-ccs-input="contrast" min="25" max="100" value="42">
202  </div>
203  </div>
204</details>
205
206  </div>
207
208  
209
210<nav data-layout="nav" aria-label="primary">
211  <ul data-navlist="main">
212    
213      <li dropdown-menu="services">
214        
215          <button popovertarget="popover-services" data-nav data-btn="main-menu parent">
216            Services
217          </button>
218          <ul popover id="popover-services" data-subnavlist>
219            
220              
221              
222              <li>
223                <a href="/services/development/" data-nav="servicesdevelopment" >
224                  Design <span class="amp">&amp;</span> Development
225                </a>
226              </li>
227            
228              
229              
230              <li>
231                <a href="/services/planning/" data-nav="servicesplanning" >
232                  Strategy <span class="amp">&amp;</span> Research
233                </a>
234              </li>
235            
236              
237              
238              <li>
239                <a href="/services/design-systems/" data-nav="servicesdesign-systems" >
240                  Design Systems
241                </a>
242              </li>
243            
244              
245              
246              <li>
247                <a href="/services/architecture/" data-nav="servicesarchitecture" >
248                  Poetic <span class="caps">CSS</span> Architecture
249                </a>
250              </li>
251            
252              
253              
254              <li>
255                <a href="/tools/#featured-funding-goal" data-nav="toolsfeatured-funding-goal" >
256                  Web Standards
257                </a>
258              </li>
259            
260              
261              
262              <li>
263                <a href="/tools/#oddtools" data-nav="toolsoddtools" >
264                  Developer Tools
265                </a>
266              </li>
267            
268          </ul>
269        
270      </li>
271    
272      <li >
273        
274          
275          
276          <a href="/work/" data-nav="work" >
277            Work
278          </a>
279        
280      </li>
281    
282      <li >
283        
284          
285          
286          <a href="/courses/" data-nav="courses" >
287            Courses
288          </a>
289        
290      </li>
291    
292      <li >
293        
294          
295          
296          <a href="/talks/" data-nav="talks" >
297            Events
298          </a>
299        
300      </li>
301    
302      <li >
303        
304          
305          
306          <a href="/blog/" data-nav="blog" aria-current="page">
307            Posts
308
309
310          </a>
311        
312      </li>
313    
314      <li >
315        
316          
317          
318          <a href="/about/" data-nav="about" >
319            About
320          </a>
321        
322      </li>
323    
324      <li >
325        
326          
327          
328          <a href="/contact/" data-nav="contact" >
329            Contact
330          </a>
331        
332      </li>
333    
334  </ul>
335</nav>
336
337</header>
338
339    
340
341<main data-layout="main" aria-labelledby="title" class="h-feed">
342  
343
344
345
346
347
348
349
350
351<header
352  data-layout="header"
353  class="post-header"
354  data-header="hero">
355
356  
357    
358      
359  <h1 id="title" tabindex="-1" class="p-name">
360  Posts by Date
361</h1>
362
363  
364
365
366
367
368
369
370  <div id="meta">
371    
372      
373  
374    <p class="subtitle">
375      
376Read, watch, <span class="amp">&amp;</span> listen
377
378
379    </p>
380  
381
382    
383
384    
385
386    
387    
388  
389
390  </div>
391
392
393  
394
395
396
397  
398  <div id="intro" class="summary p-summary">
399    
400
401    
402    
403
404    
405      <p>Learn how to write resilient <span class="caps">CSS</span>,
406add WebSocket push notifications to a RESTful <span class="caps">API</span>,
407and more with these articles, videos,
408podcasts, and case studies.</p>
409
410    
411
412    
413      <p class="main-action"><a href="/tags/"  >Browse by tag »</a></p>
414
415    
416  </div>
417
418
419
420    
421  
422</header>
423
424
425  <div data-main data-typeset >
426      
427      
428
429
430
431  
432        
433    <header class="cards-header">
434      
435<h2 id="2026-posts" data-section-title="right">2026 Posts</h2>
436
437      
438
439<nav class="pagination" aria-labelledby="title">
440  <span class="pagination-link" >newest</span>
441
442  
443    |
444  
445
446  <a href="/blog/2/" class="pagination-link" >older »</a>
447</nav>
448
449
450    </header>
451  
452
453  <ol data-grid="cards"  reversed>
454  
455
456  <li data-card=""><article
457    data-post="link"
458    aria-labelledby="post-20260813wake-up-excited"
459    class="h-entry">
460    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/brad-mia-aug-480w.webp 480w, /assets/images/blog/elsewhere/brad-mia-aug-960w.webp 960w, /assets/images/blog/elsewhere/brad-mia-aug-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Title card from the podcast with headshots of Brad and Mia" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/brad-mia-aug-480w.jpeg" width="1600" height="897" srcset="/assets/images/blog/elsewhere/brad-mia-aug-480w.jpeg 480w, /assets/images/blog/elsewhere/brad-mia-aug-960w.jpeg 960w, /assets/images/blog/elsewhere/brad-mia-aug-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
461    
462      <div class="type-flag" data-flag="left">
463        Video
464        <span class="sr-only">post type</span>
465      </div>
466    
467    <div class="post-content">
468      <header class="post-header">
469        <h3 class="item-title p-name" id="post-20260813wake-up-excited"><a href="/2026/08/13/wake-up-excited/" class="title-link u-url" >
470  Pottery, Theater, <span class="caps">CSS</span>
470 Collaboration, and the Ethics of <span class="caps">AI</span></a></h3>
471        
472  
473
474        
475  <p class="byline">
476  <i>on</i>
477  <span class="h-card" >Wake Up Excited!</span>
478
479  
480    <i>with</i>
481    
482  
483    <span class="h-card p-author" >Miriam Suzanne</span>
484  
485
486  
487
488    
489      <i>on</i>
490  <time datetime="2026-08-13"  pubdate class="dt-published">Aug 13</time>
491    
492  </p>
493
494      </header>
495      
496        
497        <div class="p-summary">
498          
499            <p>
500              Brad chats with Miriam Suzanne about pottery, theater, <span class="caps">CSS</span>, and why we shouldn’t just accept <span class="caps">AI</span> as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and <span class="caps">CSS</span> standards, arguing process shapes results and that <span class="caps">CSS</span> is inherently collaborative with users, browsers, and devices.
501            </p>
502          
503        </div>
504      
505    </div>
506  </article>
507
508      <a href="/tags/video/" class="type-link" ><svg
509  data-icon="video"
510  xmlns="http://www.w3.org/2000/svg"
511  aria-hidden="true"
512  focusable="false"
513  viewBox="0 0 20 20"
514  width="20px"
515  height="20px"
516>
517  <path d="M19.131 17.053c-0 0-0 0-0 0-0.242-0-0.485-0.097-0.724-0.288l-3.438-2.751c-0.552-0.442-0.969-1.308-0.969-2.015v-3c0-0.707 0.416-1.573 0.969-2.015l3.438-2.751c0.239-0.191 0.482-0.288 0.724-0.288 0.433-0 0.869 0.326 0.869 1.053v11c0 0.278-0.064 0.512-0.19 0.694-0.157 0.228-0.405 0.359-0.679 0.359zM19 5.040l-3.407 2.725c-0.31 0.248-0.593 0.837-0.593 1.234v3c0 0.398 0.283 0.986 0.593 1.234l3.407 2.725v-10.919z"></path>
518  <path d="M11.5 17h-10c-0.827 0-1.5-0.673-1.5-1.5v-10c0-0.827 0.673-1.5 1.5-1.5h10c0.827 0 1.5 0.673 1.5 1.5v10c0 0.827-0.673 1.5-1.5 1.5zM1.5 5c-0.276 0-0.5 0.224-0.5 0.5v10c0 0.276 0.224 0.5 0.5 0.5h10c0.276 0 0.5-0.224 0.5-0.5v-10c0-0.276-0.224-0.5-0.5-0.5h-10z"></path>
519</svg>
520<span class="sr-only">see all Video posts</span></a>
521</li>
522
523  
524
525  <li data-card=""><article
526    data-post="link"
527    aria-labelledby="post-20260723winging-it-34"
528    class="h-entry">
529    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-34-480w.webp 480w, /assets/images/winging-it/winging-it-34-960w.webp 960w, /assets/images/winging-it/winging-it-34-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-34-480w.jpeg" width="1600" height="592" srcset="/assets/images/winging-it/winging-it-34-480w.jpeg 480w, /assets/images/winging-it/winging-it-34-960w.jpeg 960w, /assets/images/winging-it/winging-it-34-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
530    
531      <div class="type-flag" data-flag="left">
532        Winging It
533        <span class="sr-only">post type</span>
534      </div>
535    
536    <div class="post-content">
537      <header class="post-header">
538        <h3 class="item-title p-name" id="post-20260723winging-it-34"><a href="/2026/07/23/winging-it-34/" class="title-link u-url" >
539  Inspecting Inspectors</a></h3>
540        
541  
542
543        
544  <p class="byline">
545  <i>on</i>
546  <span class="h-card" >Winging It</span>
547 episode 34
548  
549    <i>with</i>
550    
551  
552    
553      
554      <span class="h-card p-author" >Stacy</span> <span class="amp">&amp;</span> 
555      
556      <span class="h-card p-author" >Miriam</span>
557  
558
559  
560
561    
562      <i>on</i>
563  <time datetime="2026-07-23"  pubdate class="dt-published">Jul 23</time>
564    
565      | 53 min
566  </p>
567
568      </header>
569      
570        
571        <div class="p-summary">
572          
573            <p>
574              Miriam and Stacy troubleshoot an issue with the dev tools available in each browser, exploring the differences and what each browser’s tools do best.
575            </p>
576          
577        </div>
578      
579    </div>
580  </article>
581
582      <a href="/wingingit/" class="type-link" ><svg
583  data-icon="winging-it"
584  xmlns="http://www.w3.org/2000/svg"
585  aria-hidden="true"
586  focusable="false"
587  viewBox="0 0 435.3 583.17"
588  width="20px"
589  height="20px"
590>
591  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82
591-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
591-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
5911.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
592</svg>
593<span class="sr-only">see all Winging It posts</span></a>
594</li>
595
596  
597
598  <li data-card=""><article
599    data-post="link"
600    aria-labelledby="post-20260618winging-it-33"
601    class="h-entry">
602    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-33-480w.webp 480w, /assets/images/winging-it/winging-it-33-960w.webp 960w, /assets/images/winging-it/winging-it-33-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-33-480w.jpeg" width="1600" height="593" srcset="/assets/images/winging-it/winging-it-33-480w.jpeg 480w, /assets/images/winging-it/winging-it-33-960w.jpeg 960w, /assets/images/winging-it/winging-it-33-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
603    
604      <div class="type-flag" data-flag="left">
605        Winging It
606        <span class="sr-only">post type</span>
607      </div>
608    
609    <div class="post-content">
610      <header class="post-header">
611        <h3 class="item-title p-name" id="post-20260618winging-it-33"><a href="/2026/06/18/winging-it-33/" class="title-link u-url" >
612  Grid Lanes – The Future of Masonry Layout</a></h3>
613        
614  
615
616        
617  <p class="byline">
618  <i>on</i>
619  <span class="h-card" >Winging It</span>
620 episode 33
621  
622    <i>with</i>
623    
624  
625    
626      
627      <span class="h-card p-author" >Stacy</span> <span class="amp">&amp;</span> 
628      
629      <span class="h-card p-author" >Miriam</span>
630  
631
632  
633
634    
635      <i>on</i>
636  <time datetime="2026-06-18"  pubdate class="dt-published">Jun 18</time>
637    
638      | 48 min
639  </p>
640
641      </header>
642      
643        
644        <div class="p-summary">
645          
646            <p>
647              This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.
648            </p>
649          
650        </div>
651      
652    </div>
653  </article>
654
655      <a href="/wingingit/" class="type-link" ><svg
656  data-icon="winging-it"
657  xmlns="http://www.w3.org/2000/svg"
658  aria-hidden="true"
659  focusable="false"
660  viewBox="0 0 435.3 583.17"
661  width="20px"
662  height="20px"
663>
664  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
664-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
6641.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
665</svg>
666<span class="sr-only">see all Winging It posts</span></a>
667</li>
668
669  
670
671  <li data-card=""><article
672    data-post="link"
673    aria-labelledby="post-20260528winging-it-32"
674    class="h-entry">
675    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-32-480w.webp 480w, /assets/images/winging-it/winging-it-32-960w.webp 960w, /assets/images/winging-it/winging-it-32-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-32-480w.jpeg" width="1600" height="592" srcset="/assets/images/winging-it/winging-it-32-480w.jpeg 480w, /assets/images/winging-it/winging-it-32-960w.jpeg 960w, /assets/images/winging-it/winging-it-32-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
676    
677      <div class="type-flag" data-flag="left">
678        Winging It
679        <span class="sr-only">post type</span>
680      </div>
681    
682    <div class="post-content">
683      <header class="post-header">
684        <h3 class="item-title p-name" id="post-20260528winging-it-32"><a href="/2026/05/28/winging-it-32/" class="title-link u-url" >
685  Surprising Effects of <span class="caps">CSS</span> Shorthands</a></h3>
686        
687  
688
689        
690  <p class="byline">
691  <i>on</i>
692  <span class="h-card" >Winging It</span>
693 episode 32
694  
695    <i>with</i>
696    
697  
698    
699      
700      <span class="h-card p-author" >Stacy</span> <span class="amp">&amp;</span> 
701      
702      <span class="h-card p-author" >Miriam</span>
703  
704
705  
706
707    
708      <i>on</i>
709  <time datetime="2026-05-28"  pubdate class="dt-published">May 28</time>
710    
711      | 45 min
712  </p>
713
714      </header>
715      
716        
717        <div class="p-summary">
718          
719            <p>
720              <span class="caps">CSS</span> properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
721            </p>
722          
723        </div>
724      
725    </div>
726  </article>
727
728      <a href="/wingingit/" class="type-link" ><svg
729  data-icon="winging-it"
730  xmlns="http://www.w3.org/2000/svg"
731  aria-hidden="true"
732  focusable="false"
733  viewBox="0 0 435.3 583.17"
734  width="20px"
735  height="20px"
736>
737  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79
737-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
7371.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
738</svg>
739<span class="sr-only">see all Winging It posts</span></a>
740</li>
741
742  
743
744  <li data-card=""><article
745    data-post="link"
746    aria-labelledby="post-20260514baseline-in-action-color-theme"
747    class="h-entry">
748    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/color-theme-demo-480w.webp 480w, /assets/images/blog/elsewhere/color-theme-demo-960w.webp 960w, /assets/images/blog/elsewhere/color-theme-demo-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Baseline Radio the color theme color-mix playlist
749" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/color-theme-demo-480w.jpeg" width="1600" height="634" srcset="/assets/images/blog/elsewhere/color-theme-demo-480w.jpeg 480w, /assets/images/blog/elsewhere/color-theme-demo-960w.jpeg 960w, /assets/images/blog/elsewhere/color-theme-demo-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
750    
751      <div class="type-flag" data-flag="left">
752        Link
753        <span class="sr-only">post type</span>
754      </div>
755    
756    <div class="post-content">
757      <header class="post-header">
758        <h3 class="item-title p-name" id="post-20260514baseline-in-action-color-theme"><a href="/2026/05/14/baseline-in-action-color-theme/" class="title-link u-url" >
759  Color Themes with Baseline <span class="caps">CSS</span> Features
760</a></h3>
761        
762  
763
764        
765  <p class="byline">
766  
767    
768    
769  
770    <span class="h-card p-author" >David A. Herron</span>
771  
772
773  
774
775
776      
777
778      
779  <i>at</i>
780  <span class="h-card" >web.dev</span>
781
782
783      
784    
785      <i>on</i>
786  <time datetime="2026-05-14"  pubdate class="dt-published">May 14</time>
787    
788  </p>
789
790      </header>
791      
792        
793        <div class="p-summary">
794          
795            <p>
796              So, you have a site that you want to build or redesign. Maybe you have a few core colors in mind, and you’re thinking about how to quickly implement a theme based on those colors. Baseline features can help!
797            </p>
798          
799        </div>
800      
801    </div>
802  </article>
803
804      <a href="/tags/link/" class="type-link" ><svg
805  data-icon="link"
806  xmlns="http://www.w3.org/2000/svg"
807  aria-hidden="true"
808  focusable="false"
809  viewBox="0 0 20 20"
810  width="20px"
811  height="20px"
812>
813  <path d="M10.682 12.998c-0.943 0-1.886-0.359-2.604-1.077-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0c1.046 1.046 2.747 1.046 3.793 0l3.636-3.636c1.046-1.046 1.046-2.747 0-3.793s-2.747-1.046-3.793 0l-3.068 3.068c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707l3.068-3.068c1.436-1.436 3.772-1.436 5.207 0s1.436 3.772 0 5.207l-3.636 3.636c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
814  <path d="M4.682 18.998c-0.943 0-1.886-0.359-2.604-1.077-1.436-1.436-1.436-3.772 0-5.207l3.636-3.636c1.436-1.436 3.772-1.436 5.207 0 0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0c-1.046-1.046-2.747-1.046-3.793 0l-3.636 3.636c-1.046 1.046-1.046 2.747 0 3.793s2.747 1.046 3.793 0l3.068-3.068c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.068 3.068c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
815</svg>
816<span class="sr-only">see all Link posts</span></a>
817</li>
818
819  
820
821  <li data-card=""><article
822    data-post="link"
823    aria-labelledby="post-20260416winging-it-31"
824    class="h-entry">
825    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-31-480w.webp 480w, /assets/images/winging-it/winging-it-31-960w.webp 960w, /assets/images/winging-it/winging-it-31-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-31-480w.jpeg" width="1600" height="593" srcset="/assets/images/winging-it/winging-it-31-480w.jpeg 480w, /assets/images/winging-it/winging-it-31-960w.jpeg 960w, /assets/images/winging-it/winging-it-31-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
826    
827      <div class="type-flag" data-flag="left">
828        Winging It
829        <span class="sr-only">post type</span>
830      </div>
831    
832    <div class="post-content">
833      <header class="post-header">
834        <h3 class="item-title p-name" id="post-20260416winging-it-31"><a href="/2026/04/16/winging-it-31/" class="title-link u-url" >
835  Dos <span class="amp">&amp;</span> Don’ts of Anchor Positioning</a></h3>
836        
837  
838
839        
840  <p class="byline">
841  <i>on</i>
842  <span class="h-card" >Winging It</span>
843 episode 31
844  
845    <i>with</i>
846    
847  
848    
849      
850      <span class="h-card p-author" >Stacy</span>, 
851      
852      <span class="h-card p-author" >Miriam</span>, 
853       <span class="amp">&amp;</span> 
854      <span class="h-card p-author" >James</span>
855  
856
857  
858
859    
860      <i>on</i>
861  <time datetime="2026-04-16"  pubdate class="dt-published">Apr 16</time>
862    
863      | 41 min
864  </p>
865
866      </header>
867      
868        
869        <div class="p-summary">
870          
871            <p>
872              <span class="caps">CSS</span> anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…
873            </p>
874          
875        </div>
876      
877    </div>
878  </article>
879
880      <a href="/wingingit/" class="type-link" ><svg
881  data-icon="winging-it"
882  xmlns="http://www.w3.org/2000/svg"
883  aria-hidden="true"
884  focusable="false"
885  viewBox="0 0 435.3 583.17"
886  width="20px"
887  height="20px"
888>
889  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
889-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
8891.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
890</svg>
891<span class="sr-only">see all Winging It posts</span></a>
892</li>
893
894  
895
896  <li data-card=""><article
897    data-post="link"
898    aria-labelledby="post-20260413baseline-in-action-dialog-popover"
899    class="h-entry">
900    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/dialog-popover-480w.webp 480w, /assets/images/blog/elsewhere/dialog-popover-960w.webp 960w, /assets/images/blog/elsewhere/dialog-popover-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Grid of hot air balloon images
901" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/dialog-popover-480w.jpeg" width="1600" height="634" srcset="/assets/images/blog/elsewhere/dialog-popover-480w.jpeg 480w, /assets/images/blog/elsewhere/dialog-popover-960w.jpeg 960w, /assets/images/blog/elsewhere/dialog-popover-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
902    
903      <div class="type-flag" data-flag="left">
904        Link
905        <span class="sr-only">post type</span>
906      </div>
907    
908    <div class="post-content">
909      <header class="post-header">
910        <h3 class="item-title p-name" id="post-20260413baseline-in-action-dialog-popover"><a href="/2026/04/13/baseline-in-action-dialog-popover/" class="title-link u-url" >
911  Baseline Layered <span class="caps">UI</span> Patterns: <code>&lt;dialog&gt;</code> and <code>popover</code>
912</a></h3>
913        
914  
915
916        
917  <p class="byline">
918  
919    
920    
921  
922    <span class="h-card p-author" >David A. Herron</span>
923  
924
925  
926
927
928      
929
930      
931  <i>at</i>
932  <span class="h-card" >web.dev</span>
933
934
935      
936    
937      <i>on</i>
938  <time datetime="2026-04-13"  pubdate class="dt-published">Apr 13</time>
939    
940  </p>
941
942      </header>
943      
944        
945        <div class="p-summary">
946          
947            <p>
948              Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered <span class="caps">UI</span> patterns are used frequently by developers.
949            </p>
950          
951        </div>
952      
953    </div>
954  </article>
955
956      <a href="/tags/link/" class="type-link" ><svg
957  data-icon="link"
958  xmlns="http://www.w3.org/2000/svg"
959  aria-hidden="true"
960  focusable="false"
961  viewBox="0 0 20 20"
962  width="20px"
963  height="20px"
964>
965  <path d="M10.682 12.998c-0.943 0-1.886-0.359-2.604-1.077-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0c1.046 1.046 2.747 1.046 3.793 0l3.636-3.636c1.046-1.046 1.046-2.747 0-3.793s-2.747-1.046-3.793 0l-3.068 3.068c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707l3.068-3.068c1.436-1.436 3.772-1.436 5.207 0s1.436 3.772 0 5.207l-3.636 3.636c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
966  <path d="M4.682 18.998c-0.943 0-1.886-0.359-2.604-1.077-1.436-1.436-1.436-3.772 0-5.207l3.636-3.636c1.436-1.436 3.772-1.436 5.207 0 0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0c-1.046-1.046-2.747-1.046-3.793 0l-3.636 3.636c-1.046 1.046-1.046 2.747 0 3.793s2.747 1.046 3.793 0l3.068-3.068c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.068 3.068c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
967</svg>
968<span class="sr-only">see all Link posts</span></a>
969</li>
970
971  
972
973  <li data-card=""><article
974    data-post="link"
975    aria-labelledby="post-20260409podrocket-sass"
976    class="h-entry">
977    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/podrocket-480w.webp 480w, /assets/images/blog/elsewhere/podrocket-960w.webp 960w, /assets/images/blog/elsewhere/podrocket-1400w.webp 1400w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Grainy art-deco illustration of a rocket launch" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/podrocket-480w.jpeg" width="1400" height="596" srcset="/assets/images/blog/elsewhere/podrocket-480w.jpeg 480w, /assets/images/blog/elsewhere/podrocket-960w.jpeg 960w, /assets/images/blog/elsewhere/podrocket-1400w.jpeg 1400w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
978    
979      <div class="type-flag" data-flag="left">
980        Podcast
981        <span class="sr-only">post type</span>
982      </div>
983    
984    <div class="post-content">
985      <header class="post-header">
986        <h3 class="item-title p-name" id="post-20260409podrocket-sass"><a href="/2026/04/09/podrocket-sass/" class="title-link u-url" >
987  Is Sass dead yet?</a></h3>
988        
989  
990    <p class="subtitle">
991      A web development podcast from LogRocket
992    </p>
993  
994
995        
996  <p class="byline">
997  <i>on</i>
998  <span class="h-card" >PodRocket</span>
999
1000  
1001    <i>with</i>
1002    
1003  
1004    <span class="h-card p-author" >Miriam Suzanne</span>
1005  
1006
1007  
1008
1009    
1010      <i>on</i>
1011  <time datetime="2026-04-09"  pubdate class="dt-published">Apr 9</time>
1012    
1013  </p>
1014
1015      </header>
1016      
1017        
1018        <div class="p-summary">
1019          
1020            <p>
1021              I talk with Noel Minchow about the unique problems that <span class="caps">CSS</span> has to contend with, the internal complexities that can take us by surprise, how to think about debugging, and when to use higher level tools.
1022            </p>
1023          
1024        </div>
1025      
1026    </div>
1027  </article>
1028
1029      <a href="/tags/podcast/" class="type-link" ><svg
1030  data-icon="audio"
1031  xmlns="http://www.w3.org/2000/svg"
1032  aria-hidden="true"
1033  focusable="false"
1034  viewBox="0 0 20 20"
1035  width="20px"
1036  height="20px"
1037>
1038  <path d="M18.5 15.028c-0.276 0-0.5-0.224-0.5-0.5v-3.528c0-5.084-2.916-8-8-8s-8 2.916-8 8v3.528c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-3.528c0-1.514 0.237-2.874 0.704-4.045 0.445-1.116 1.102-2.068 1.953-2.828 1.557-1.392 3.75-2.127 6.344-2.127s4.787 0.736 6.344 2.127c0.85 0.76 1.507 1.712 1.953 2.828 0.467 1.17 0.704 2.531 0.704 4.045v3.528c0 0.276-0.224 0.5-0.5 0.5z"></path>
1039  <path d="M6.5 10c-0.657 0-1.216 0.424-1.418 1.013-1.103 0.068-1.894 0.414-2.409 1.052-0.459 0.57-0.673 1.344-0.673 2.435s0.214 1.865 0.673 2.435c0.515 0.639 1.305 0.984 2.409 1.052 0.203 0.589 0.762 1.013 1.418 1.013 0.827 0 1.5-0.673 1.5-1.5v-6c0-0.827-0.673-1.5-1.5-1.5zM3 14.5c0-1.411 0.35-2.331 2-2.479v4.958c-1.65-0.148-2-1.068-2-2.479zM7 17.5c0 0.276-0.224 0.5-0.5 0.5s-0.5-0.224-0.5-0.5v-6c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v6z"></path>
1040  <path d="M17.327 12.065c-0.515-0.639-1.305-0.984-2.408-1.052-0.203-0.589-0.762-1.013-1.418-1.013-0.827 0-1.5 0.673-1.5 1.5v6c0 0.827 0.673 1.5 1.5 1.5 0.657 0 1.216-0.424 1.418-1.013 1.103-0.068 1.894-0.414 2.408-1.052 0.459-0.57 0.673-1.344 0.673-2.435s-0.214-1.865-0.673-2.435zM13.5 18c-0.276 0-0.5-0.224-0.5-0.5v-6c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v6c0 0.276-0.224 0.5-0.5 0.5zM15 16.979v-4.958c1.65 0.148 2 1.068 2 2.479s-0.35 2.331-2 2.479z"></path>
1041</svg>
1042<span class="sr-only">see all Podcast posts</span></a>
1043</li>
1044
1045  
1046
1047  <li data-card=""><article
1048    data-post="link"
1049    aria-labelledby="post-20260319winging-it-30"
1050    class="h-entry">
1051    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-30-480w.webp 480w, /assets/images/winging-it/winging-it-30-960w.webp 960w, /assets/images/winging-it/winging-it-30-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-30-480w.jpeg" width="1600" height="592" srcset="/assets/images/winging-it/winging-it-30-480w.jpeg 480w, /assets/images/winging-it/winging-it-30-960w.jpeg 960w, /assets/images/winging-it/winging-it-30-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1052    
1053      <div class="type-flag" data-flag="left">
1054        Winging It
1055        <span class="sr-only">post type</span>
1056      </div>
1057    
1058    <div class="post-content">
1059      <header class="post-header">
1060        <h3 class="item-title p-name" id="post-20260319winging-it-30"><a href="/2026/03/19/winging-it-30/" class="title-link u-url" >
1061  Quick <span class="amp">&amp;</span> Easy <span class="caps">UI</span> Wins (for real)</a></h3>
1062        
1063  
1064    <p class="subtitle">
1065      Hidden gems of <span class="caps">UI</span> development
1066    </p>
1067  
1068
1069        
1070  <p class="byline">
1071  <i>on</i>
1072  <span class="h-card" >Winging It</span>
1073 episode 30
1074  
1075    <i>with</i>
1076    
1077  
1078    
1079      
1080      <span class="h-card p-author" >Stacy</span>, 
1081      
1082      <span class="h-card p-author" >Miriam</span>, 
1083       <span class="amp">&amp;</span> 
1084      <span class="h-card p-author" >James</span>
1085  
1086
1087  
1088
1089    
1090      <i>on</i>
1091  <time datetime="2026-03-19"  pubdate class="dt-published">Mar 19</time>
1092    
1093      | 49 min
1094  </p>
1095
1096      </header>
1097      
1098        
1099        <div class="p-summary">
1100          
1101            <p>
1102              Join Stacy, James, and Miriam as we explore some hidden gems of <span class="caps">UI</span> development – from <code>@starting-style</code> for smoother entry transitions to performance boosts with <span class="caps">AVIF</span> images and using the browser’s built-in lazy-loading. We cover a variety of quick wins that you can use to make your life easier and…
1103            </p>
1104          
1105        </div>
1106      
1107    </div>
1108  </article>
1109
1110      <a href="/wingingit/" class="type-link" ><svg
1111  data-icon="winging-it"
1112  xmlns="http://www.w3.org/2000/svg"
1113  aria-hidden="true"
1114  focusable="false"
1115  viewBox="0 0 435.3 583.17"
1116  width="20px"
1117  height="20px"
1118>
1119  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
1119-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
11191.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
1120</svg>
1121<span class="sr-only">see all Winging It posts</span></a>
1122</li>
1123
1124  
1125
1126  <li data-card=""><article
1127    data-post="link"
1128    aria-labelledby="post-20260302baseline-in-action-image-gallery"
1129    class="h-entry">
1130    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/baseline-zoo-480w.webp 480w, /assets/images/blog/elsewhere/baseline-zoo-960w.webp 960w, /assets/images/blog/elsewhere/baseline-zoo-1500w.webp 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Image gallery grid with pictures of dogs and birds.
1131" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/baseline-zoo-480w.jpeg" width="1500" height="571" srcset="/assets/images/blog/elsewhere/baseline-zoo-480w.jpeg 480w, /assets/images/blog/elsewhere/baseline-zoo-960w.jpeg 960w, /assets/images/blog/elsewhere/baseline-zoo-1500w.jpeg 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1132    
1133      <div class="type-flag" data-flag="left">
1134        Link
1135        <span class="sr-only">post type</span>
1136      </div>
1137    
1138    <div class="post-content">
1139      <header class="post-header">
1140        <h3 class="item-title p-name" id="post-20260302baseline-in-action-image-gallery"><a href="/2026/03/02/baseline-in-action-image-gallery/" class="title-link u-url" >
1141  How to Implement an Image Gallery Using Baseline Features</a></h3>
1142        
1143  
1144
1145        
1146  <p class="byline">
1147  
1148    
1149    
1150  
1151    <span class="h-card p-author" >Stacy Kvernmo</span>
1152  
1153
1154  
1155
1156
1157      
1158
1159      
1160  <i>at</i>
1161  <span class="h-card" >web.dev</span>
1162
1163
1164      
1165    
1166      <i>on</i>
1167  <time datetime="2026-03-02"  pubdate class="dt-published">Mar 2</time>
1168    
1169  </p>
1170
1171      </header>
1172      
1173        
1174        <div class="p-summary">
1175          
1176            <p>
1177              From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…
1178            </p>
1179          
1180        </div>
1181      
1182    </div>
1183  </article>
1184
1185      <a href="/tags/link/" class="type-link" ><svg
1186  data-icon="link"
1187  xmlns="http://www.w3.org/2000/svg"
1188  aria-hidden="true"
1189  focusable="false"
1190  viewBox="0 0 20 20"
1191  width="20px"
1192  height="20px"
1193>
1194  <path d="M10.682 12.998c-0.943 0-1.886-0.359-2.604-1.077-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0c1.046 1.046 2.747 1.046 3.793 0l3.636-3.636c1.046-1.046 1.046-2.747 0-3.793s-2.747-1.046-3.793 0l-3.068 3.068c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707l3.068-3.068c1.436-1.436 3.772-1.436 5.207 0s1.436 3.772 0 5.207l-3.636 3.636c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1195  <path d="M4.682 18.998c-0.943 0-1.886-0.359-2.604-1.077-1.436-1.436-1.436-3.772 0-5.207l3.636-3.636c1.436-1.436 3.772-1.436 5.207 0 0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0c-1.046-1.046-2.747-1.046-3.793 0l-3.636 3.636c-1.046 1.046-1.046 2.747 0 3.793s2.747 1.046 3.793 0l3.068-3.068c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.068 3.068c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1196</svg>
1197<span class="sr-only">see all Link posts</span></a>
1198</li>
1199
1200  
1201
1202  <li data-card=""><article
1203    data-post="link"
1204    aria-labelledby="post-20260219winging-it-29"
1205    class="h-entry">
1206    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-29-480w.webp 480w, /assets/images/winging-it/winging-it-29-960w.webp 960w, /assets/images/winging-it/winging-it-29-1500w.webp 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-29-480w.jpeg" width="1500" height="555" srcset="/assets/images/winging-it/winging-it-29-480w.jpeg 480w, /assets/images/winging-it/winging-it-29-960w.jpeg 960w, /assets/images/winging-it/winging-it-29-1500w.jpeg 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1207    
1208      <div class="type-flag" data-flag="left">
1209        Winging It
1210        <span class="sr-only">post type</span>
1211      </div>
1212    
1213    <div class="post-content">
1214      <header class="post-header">
1215        <h3 class="item-title p-name" id="post-20260219winging-it-29"><a href="/2026/02/19/winging-it-29/" class="title-link u-url" >
1216  Responsive Type Doesn’t Have to Be Complicated</a></h3>
1217        
1218  
1219    <p class="subtitle">
1220      Building a type scale for your website
1221    </p>
1222  
1223
1224        
1225  <p class="byline">
1226  <i>on</i>
1227  <span class="h-card" >Winging It</span>
1228 episode 29
1229  
1230    <i>with</i>
1231    
1232  
1233    
1234      
1235      <span class="h-card p-author" >Stacy</span>, 
1236      
1237      <span class="h-card p-author" >Miriam</span>, 
1238       <span class="amp">&amp;</span> 
1239      <span class="h-card p-author" >James</span>
1240  
1241
1242  
1243
1244    
1245      <i>on</i>
1246  <time datetime="2026-02-19"  pubdate class="dt-published">Feb 19</time>
1247    
1248      | 60 min
1249  </p>
1250
1251      </header>
1252      
1253        
1254        <div class="p-summary">
1255          
1256            <p>
1257              Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern <span class="caps">CSS</span> can help us out. There are equations and graphs! But you don’t need anything that complicated to build a type scale for your next site. With the…
1258            </p>
1259          
1260        </div>
1261      
1262    </div>
1263  </article>
1264
1265      <a href="/wingingit/" class="type-link" ><svg
1266  data-icon="winging-it"
1267  xmlns="http://www.w3.org/2000/svg"
1268  aria-hidden="true"
1269  focusable="false"
1270  viewBox="0 0 435.3 583.17"
1271  width="20px"
1272  height="20px"
1273>
1274  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
1274-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
12741.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
1275</svg>
1276<span class="sr-only">see all Winging It posts</span></a>
1277</li>
1278
1279  
1280
1281  <li data-card=""><article
1282    data-post="link"
1283    aria-labelledby="post-20260218queries-units-actions"
1284    class="h-entry">
1285    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/elsewhere/baseline-bakery-480w.webp 480w, /assets/images/blog/elsewhere/baseline-bakery-960w.webp 960w, /assets/images/blog/elsewhere/baseline-bakery-1500w.webp 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="Baseline Bakery: as sweet as Interop. Demo to view donut products as a small grid, large grid, or list with an optional To Go Bag sidebar.
1286" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/elsewhere/baseline-bakery-480w.jpeg" width="1500" height="573" srcset="/assets/images/blog/elsewhere/baseline-bakery-480w.jpeg 480w, /assets/images/blog/elsewhere/baseline-bakery-960w.jpeg 960w, /assets/images/blog/elsewhere/baseline-bakery-1500w.jpeg 1500w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1287    
1288      <div class="type-flag" data-flag="left">
1289        Link
1290        <span class="sr-only">post type</span>
1291      </div>
1292    
1293    <div class="post-content">
1294      <header class="post-header">
1295        <h3 class="item-title p-name" id="post-20260218queries-units-actions"><a href="/2026/02/18/queries-units-actions/" class="title-link u-url" >
1296  Container Queries and Units in Action</a></h3>
1297        
1298  
1299
1300        
1301  <p class="byline">
1302  
1303    
1304    
1305  
1306    <span class="h-card p-author" >Miriam Suzanne</span>
1307  
1308
1309  
1310
1311
1312      
1313
1314      
1315  <i>at</i>
1316  <span class="h-card" >web.dev</span>
1317
1318
1319      
1320    
1321      <i>on</i>
1322  <time datetime="2026-02-18"  pubdate class="dt-published">Feb 18</time>
1323    
1324  </p>
1325
1326      </header>
1327      
1328        
1329        <div class="p-summary">
1330          
1331            <p>
1332              One of the goals when writing <span class="caps">CSS</span> is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a…
1333            </p>
1334          
1335        </div>
1336      
1337    </div>
1338  </article>
1339
1340      <a href="/tags/link/" class="type-link" ><svg
1341  data-icon="link"
1342  xmlns="http://www.w3.org/2000/svg"
1343  aria-hidden="true"
1344  focusable="false"
1345  viewBox="0 0 20 20"
1346  width="20px"
1347  height="20px"
1348>
1349  <path d="M10.682 12.998c-0.943 0-1.886-0.359-2.604-1.077-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0c1.046 1.046 2.747 1.046 3.793 0l3.636-3.636c1.046-1.046 1.046-2.747 0-3.793s-2.747-1.046-3.793 0l-3.068 3.068c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707l3.068-3.068c1.436-1.436 3.772-1.436 5.207 0s1.436 3.772 0 5.207l-3.636 3.636c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1350  <path d="M4.682 18.998c-0.943 0-1.886-0.359-2.604-1.077-1.436-1.436-1.436-3.772 0-5.207l3.636-3.636c1.436-1.436 3.772-1.436 5.207 0 0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0c-1.046-1.046-2.747-1.046-3.793 0l-3.636 3.636c-1.046 1.046-1.046 2.747 0 3.793s2.747 1.046 3.793 0l3.068-3.068c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.068 3.068c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1351</svg>
1352<span class="sr-only">see all Link posts</span></a>
1353</li>
1354
1355  
1356
1357  <li data-card=""><article
1358    data-post="link"
1359    aria-labelledby="post-20260122winging-it-28"
1360    class="h-entry">
1361    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-28-480w.webp 480w, /assets/images/winging-it/winging-it-28-960w.webp 960w, /assets/images/winging-it/winging-it-28-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-28-480w.jpeg" width="1600" height="592" srcset="/assets/images/winging-it/winging-it-28-480w.jpeg 480w, /assets/images/winging-it/winging-it-28-960w.jpeg 960w, /assets/images/winging-it/winging-it-28-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1362    
1363      <div class="type-flag" data-flag="left">
1364        Winging It
1365        <span class="sr-only">post type</span>
1366      </div>
1367    
1368    <div class="post-content">
1369      <header class="post-header">
1370        <h3 class="item-title p-name" id="post-20260122winging-it-28"><a href="/2026/01/22/winging-it-28/" class="title-link u-url" >
1371  <span class="caps">CSS</span> Scope <span class="amp">&amp;</span> Mixins</a></h3>
1372        
1373  
1374    <p class="subtitle">
1375      A chat with Chris Coyier
1376    </p>
1377  
1378
1379        
1380  <p class="byline">
1381  <i>on</i>
1382  <span class="h-card" >Winging It</span>
1383 episode 28
1384  
1385    <i>with</i>
1386    
1387  
1388    
1389      
1390      <span class="h-card p-author" >Stacy</span> <span class="amp">&amp;</span> 
1391      
1392      <span class="h-card p-author" >Miriam</span>
1393  
1394
1395  
1396
1397    
1398      <i>on</i>
1399  <time datetime="2026-01-22"  pubdate class="dt-published">Jan 22</time>
1400    
1401      | 60 min
1402  </p>
1403
1404      </header>
1405      
1406        
1407        <div class="p-summary">
1408          
1409            <p>
1410              At the end of 2025, Firefox added the <span class="caps">CSS</span> <code>@scope</code> rule – making the new feature available across all major browsers! Since Chris Coyier has done a fair amount of writing and speaking on the topic, we wanted to talk with him about what that means. Chris has also been…
1411            </p>
1412          
1413        </div>
1414      
1415    </div>
1416  </article>
1417
1418      <a href="/wingingit/" class="type-link" ><svg
1419  data-icon="winging-it"
1420  xmlns="http://www.w3.org/2000/svg"
1421  aria-hidden="true"
1422  focusable="false"
1423  viewBox="0 0 435.3 583.17"
1424  width="20px"
1425  height="20px"
1426>
1427  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
1427-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
14271.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
1428</svg>
1429<span class="sr-only">see all Winging It posts</span></a>
1430</li>
1431
1432  
1433
1434  <li data-card=""><article
1435    data-post="link"
1436    aria-labelledby="post-20260108typography-baseline-css"
1437    class="h-entry">
1438    <div data-hero="post"><picture><source type="image/webp" srcset="/assets/images/blog/2026/type-zoom-480w.webp 480w, /assets/images/blog/2026/type-zoom-960w.webp 960w, /assets/images/blog/2026/type-zoom-1600w.webp 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"><img alt="A graph showing font size and zoom effectiveness versus viewport width. The font size, calculated as calc(17px + 2.5vw), increases linearly with viewport width. The 500% zoom line, representing the maximum possible zoom, shows that zoom becomes less effective as viewport width increases, failing to provide a 200% font size increase beyond a viewport width of 2040px.
1439" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/blog/2026/type-zoom-480w.jpeg" width="1600" height="1060" srcset="/assets/images/blog/2026/type-zoom-480w.jpeg 480w, /assets/images/blog/2026/type-zoom-960w.jpeg 960w, /assets/images/blog/2026/type-zoom-1600w.jpeg 1600w" sizes="(min-width: 95em) 30vw, (min-width: 56em) 45vw, 100vw"></picture></div>
1440    
1441      <div class="type-flag" data-flag="left">
1442        Link
1443        <span class="sr-only">post type</span>
1444      </div>
1445    
1446    <div class="post-content">
1447      <header class="post-header">
1448        <h3 class="item-title p-name" id="post-20260108typography-baseline-css"><a href="/2026/01/08/typography-baseline-css/" class="title-link u-url" >
1449  Responsive and Fluid Typography with Baseline <span class="caps">CSS</span> Features</a></h3>
1450        
1451  
1452
1453        
1454  <p class="byline">
1455  
1456    
1457    
1458  
1459    <span class="h-card p-author" >Miriam Suzanne</span>
1460  
1461
1462  
1463
1464
1465      
1466
1467      
1468  <i>at</i>
1469  <span class="h-card" >web.dev</span>
1470
1471
1472      
1473    
1474      <i>on</i>
1475  <time datetime="2026-01-08"  pubdate class="dt-published">Jan 8</time>
1476    
1477  </p>
1478
1479      </header>
1480      
1481        
1482        <div class="p-summary">
1483          
1484            <p>
1485              As designers, it makes sense to think about what space is available in the browser, and adjust your typography accordingly. It’s also important to remember that different users will have different <code>font-size</code> needs – and <em>the more a font size is responsive to the viewport, the less responsive it will…</em>
1486            </p>
1487          
1488        </div>
1489      
1490    </div>
1491  </article>
1492
1493      <a href="/tags/link/" class="type-link" ><svg
1494  data-icon="link"
1495  xmlns="http://www.w3.org/2000/svg"
1496  aria-hidden="true"
1497  focusable="false"
1498  viewBox="0 0 20 20"
1499  width="20px"
1500  height="20px"
1501>
1502  <path d="M10.682 12.998c-0.943 0-1.886-0.359-2.604-1.077-0.195-0.195-0.195-0.512 0-0.707s0.512-0.195 0.707 0c1.046 1.046 2.747 1.046 3.793 0l3.636-3.636c1.046-1.046 1.046-2.747 0-3.793s-2.747-1.046-3.793 0l-3.068 3.068c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707l3.068-3.068c1.436-1.436 3.772-1.436 5.207 0s1.436 3.772 0 5.207l-3.636 3.636c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1503  <path d="M4.682 18.998c-0.943 0-1.886-0.359-2.604-1.077-1.436-1.436-1.436-3.772 0-5.207l3.636-3.636c1.436-1.436 3.772-1.436 5.207 0 0.195 0.195 0.195 0.512 0 0.707s-0.512 0.195-0.707 0c-1.046-1.046-2.747-1.046-3.793 0l-3.636 3.636c-1.046 1.046-1.046 2.747 0 3.793s2.747 1.046 3.793 0l3.068-3.068c0.195-0.195 0.512-0.195 0.707 0s0.195 0.512 0 0.707l-3.068 3.068c-0.718 0.718-1.661 1.077-2.604 1.077z"></path>
1504</svg>
1505<span class="sr-only">see all Link posts</span></a>
1506</li>
1507</ol>
1508
1509
1510        
1511    
1512<h2 id="2025" data-section-title="right">2025</h2>
1513
1514  
1515
1516  <ol data-grid="cards"  reversed>
1517  
1518
1519  <li data-card="large"><a href="/wingingit/" class="type-link" ><svg
1520  data-icon="winging-it"
1521  xmlns="http://www.w3.org/2000/svg"
1522  aria-hidden="true"
1523  focusable="false"
1524  viewBox="0 0 435.3 583.17"
1525  width="20px"
1526  height="20px"
1527>
1528  <path d="m210.07,246.25c5.66-2.96,11.32-5.93,16.99-8.92,31.41-16.59,62.64-34.82,92.85-52.44,10.73-6.26,21.83-12.74,32.77-19.04l9.15-5.27c17.27-9.96,35.13-20.25,52.75-30.3,3.05.25,7.02-.94,9.22-2.85,1.42-1.24,1.92-2.52,2.04-3.55l3.83-2.18c2.85-1.61,5.63-3.41,5.64-6.09,0-1.58-.96-2.94-2.86-4.04h0c-1.63-.94-3.95-1.22-6.94-.84-.86-33-.48-63.99,1.17-94.61l.41-.26c2.51-1.64,3.62-3.39,3.28-5.21-.19-1.04-.92-2.35-3.2-3.22,0-.07,0-.15.01-.22.04-.77.08-1.53.13-2.3.13-2.08-1.17-4.6-5.27-4.87-4.14-.27-10.29,1.96-10.55,6.06-.05.82-.1,1.65-.14,2.47-.01.2-.02.4-.03.61-1.7.73-3.27,1.55-4.59,2.41-61.98,40.47-128.28,76.23-192.39,110.82
1528-39.28,21.19-79.89,43.1-119.1,65.87-6.04,3.51-12.08,7.06-18.12,10.61-13.86,8.15-28.18,16.57-42.51,24.43-1.55-1.36-4.09-1.89-7.03-1.36-3.59.64-7.22,2.83-7.24,6.27v2.72c-5.14,2.66-9.91,5.05-14.55,7.28-3.86,1.86-5.7,3.71-5.77,5.84-.04,1.11.42,2.71,2.81,4.06,4.81,2.72,14.22-1.03,17.43-2.46l-.02,4.12c-.16,27.75-.32,56.44.28,84.67-.14.06-.27.12-.41.18-2.09.92-5.61,2.91-5.78,5.92-.06,1.18.37,2.88,2.82,4.29,1.32.76,2.98,1.11,5.02,1.03l408.39,237.31v-136.88l-291.02-161.33,1.12-.67c22.77-13.59,46.49-26.02,69.43-38.04Zm-167.1,95.52l85.99-46.65,287.58,159.42v104.31L42.97,341.77Zm218.08-183.57c-1.15-6.15-2.17-12.33-3.18-18.37-.44-2.62-.87-5.24-1.31-7.84-.15-.89-.85-3.01-4.1-3.35-4.25-.45-12.58,2.72-13.87,5.95-5.97,15-10.38,30.7-14.56,46l-8.96-37.67c-.2-.84-.96-2.66-3.83-3.13,20.86-11.44,41.82-22.98,62.57-34.53l-12.77,52.94Zm-81.34,48.29c-1.23-5.56-2.25-11.14-3.04-16.67-.14-.99-.92-3.28-5.12-3.35-.05,0-.1,0-.15,0-4.12,0-12.14,2.39-12.82,6.29l-4.62,26.77-7.34-22.37c-.23-.71-.45-1.56-.68-2.47-.74-2.9-1.57-6.18-3.73-8.27-1.79-1.74-4.36-2.65-7.36-2.65-.67,0-1.36.05-2.06.14-.83.11-1.66.27-2.47.49,7.86-4.52,15.75-8.98,23.56-13.25l4.13-2.25c12.71-6.94,25.56-13.96,38.47-21.03l-16.78,58.62Zm-59.31-15.42c-1.2,1.98-1.85,4.45-2.42,6.63-.24.91-.46,1.76-.71,2.54l-12.58,39.19-2.52-21.42c-.08-.7-.61-3.02-3.97-3.4-4-.46-12.78,2.44-14.04,5.97-4.49,12.6-8.47,26-11.89,39.93-3.12-11.46-6.18-21.94-9.28-31.85-.33-1.04-1.31-2.59-4.25-2.96,15.78-8.71,31.31-17.8,46.49-26.69,5.42-3.17,10.9-6.38,16.41-9.58-.48.53-.9,1.08-1.25,1.65Zm
1528-78.5,127.59c.03,1.13.67,2.11,1.76,2.7.71.38,1.63.6,2.67.68-3.34,1.71-6.69,3.39-10.05,5.03-.47-26.47-.32-53.32-.17-79.33l.05-10.01c2.9-1.49,5.79-3,8.68-4.52-2.75,28.45-3.75,57.19-2.95,85.45Zm17.98-31.78c1.56,6.16,2.91,11.79,4.14,17.18.29,1.27,1.46,3.38,6.03,3.19,1.48-.06,3.42-.41,5.32-1.02-5.06,2.89-10.16,5.74-15.28,8.53,0,0,0-.01,0-.02-.26-9.26-.33-18.58-.21-27.86Zm22.21,14.01c1.66-11.83,3.97-24.04,6.88-36.42l2.16,18.39c.08.71.63,3.06,4.12,3.4,4.16.4,12.77-2.48,13.91-6.02l22.29-69.44,15.95,48.62c.28.85,1.01,2.07,2.92,2.67-3.04,1.7-6.07,3.42-9.07,5.17-9.43,5.5-18.96,11.22-28.18,16.74-10.51,6.3-21.17,12.69-31.97,18.94.53-.62.89-1.31.99-2.05Zm86.71-64.4c.53,1.53,1.07,3.02,1.62,4.5.44,1.18,1.81,3.15,6.01,2.98,4.19-.16,10.92-2.64,11.92-6.14l16.44-57.43,8.94,37.57c.22.93,1.13,3.1,4.84,3.25,4.15.17,12.02-2.62,13.15-6.1,3.46-10.68,6.46-21.67,9.36-32.29,1.1-4.01,2.21-8.11,3.36-12.2,1.77,8.63,4.1,18.03,7.56,27.24.46,1.22,1.88,3.22,6.38,2.95,4.18-.25,10.71-2.6,11.57-6.18l13.12-54.4c3.02,11.29,6.35,22.4,9.94,33.11.38,1.14,1.57,3.05,5.25,3.1,4.15.07,11.42-2.64,12.66-6.05,5.64-15.52,10.67-31.99,14.99-49.08l7.39,29.66c.45,1.79,1.88,2.98,3.94,3.26,4.33.59,12.33-3.06,13.88-5.76,4.93-8.63,4.7-21.88,4.51-32.52-.04-2.13-.07-4.17-.07-6.06,1.52,3.73,2.99,7.52,4.42,11.33.41,1.1.89,2.26,1.39,3.45,1.46,3.51,3.11,7.48,3.23,10.87.04,1.05.65,3.45,5.5,3.44.27,0,.56-.02.87-.04-15.64,8.98-31.23,17.97-46.51,26.79-17.5,10.1-35.59,20.54-53.41,30.75l-6.51,3.73c-16.01,9.19-32.57,18.68-49.06,27.62-9.59,5.2-19.45,10.26-28.98,15.16-6.81,3.5-13.73,7.05-20.64,10.7l2.97-17.2Zm191.72-164.21l-.36-1.05c-.24-.69-.46-1.35-.66-1.99-1.2-3.69-2.44-7.49-6.52-8.68,2.52-1.45,5.04-2.9,7.56-4.35-.25,5.52-.2,10.96-.01,16.07Zm-22.89,5.51c.03,1.35.06,2.62.04,3.82-.04,3.1-.07,6.19-.09,9.29l-2.95-11.82c-.3-1.21-1.41-3.18-5.45-3.18-.16,0-.33,0-.5,0-1,.04-2.25.22-3.56.54,3.9-2.21,7.72-4.39,11.48-6.53l1.25-.71c-.35,2.84-.28,5.84-.22,8.58Zm-21.04,4.45c-3.38,19.87-8.02,39.81-13.8,59.35-4.14-14.68-7.53-29-10.1-42.66-.21-1.12-.91-2.05-1.98-2.62-.15-.08-.31-.15-.48-.22,9.39-5.25,18.28-10.25,26.8-15.06-.22.38-.37.78-.44,1.2Zm64.79,21.22c3.52,7.32,7.07,13.65,10.86,19.43.68,1.04,1.81,1.69,3.15,2.05-4.22,2.41-8.44,4.82-12.67,7.24.02-.16.03-.32.03-.49.13-9.39-.54-18.89-1.38-28.23Zm28.64-68.61c-2.61-.39-5.59.28-6.41.49-2.09.52-7,2.11-7.49,5.56-1.91,13.41-2.01,27.11-2.11,40.35-.01,1.68-.02,3.37-.04,5.08-4.49-10.62-8.42-2
15281.58-12.25-32.25-.94-2.61-1.87-5.21-2.8-7.79-.07-.2-.17-.41-.29-.62,11.66-6.86,22.1-13.17,31.74-19.19-.13,2.79-.24,5.59-.35,8.38Z"/>
1529</svg>
1530<span class="sr-only">see all Winging It posts</span></a>
1531
1532      <article
1533    data-post="large"
1534    aria-labelledby="post-20251218winging-it-27"
1535    class="h-entry">
1536    <div data-hero="large"><picture><source type="image/webp" srcset="/assets/images/winging-it/winging-it-14-480w.webp 480w, /assets/images/winging-it/winging-it-14-960w.webp 960w, /assets/images/winging-it/winging-it-14-1600w.webp 1600w" sizes="(min-width: 45em) 50vw, 100vw"><img alt="" loading="lazy" decoding="async" style="" class="u-photo" src="/assets/images/winging-it/winging-it-14-480w.jpeg" width="1600" height="593" srcset="/assets/images/winging-it/winging-it-14-480w.jpeg 480w, /assets/images/winging-it/winging-it-14-960w.jpeg 960w, /assets/images/winging-it/winging-it-14-1600w.jpeg 1600w" sizes="(min-width: 45em) 50vw, 100vw"></picture></div>
1537    
1538      <div class="type-flag" data-flag="left">
1539        Winging It
1540        <span class="sr-only">post type</span>
1541      </div>
1542    
1543    <div class="post-content">
1544      <header class="post-header">
1545        <h3 class="item-title p-name" id="post-20251218winging-it-27"><a href="/2025/12/18/winging-it-27/" class="title-link u-url" >
1546  <span class="caps">CSS</span> <span class="caps">IS</span> <span class="caps">AWESOME</span> Game 2</a></h3>
1547        
1548  
1549    <p class="subtitle">
1550      With special guests Adam Argyle, Cassondra Roberts, and Dave Rupert
1551    </p>
1552  
1553
1554        
1555  <p class="byline">
1556  <i>on</i>
1557  <span class="h-card" >Winging It</span>
1558 episode 27
1559  
1560    <i>with</i>
1561    
1562  
1563    
1564      
1565      <span class="h-card p-author" >Miriam</span> <span class="amp">&amp;</span> 
1566      
1567      <span class="h-card p-author" >Stacy</span>
1568  
1569
1570  
1571
1572    
1573      <i>on</i>
1574  <time datetime="2025-12-18"  pubdate class="dt-published">Dec 18</time>
1575    
1576      | 81 mins
1577  </p>
1578
1579      </header>
1580      
1581        
1582        <div class="p-summary">
1583          
1584            <p>The second annual <span class="caps">CSS</span> is Awesome Game was a heated battle
1585between a few of our favorite <span class="caps">CSS</span> professionals including
1586<a href="https://nerdy.dev">Adam Argyle</a>,
1587<a href="https://allons-y.llc">Cassondra Roberts</a>,
1588<a href="https://daverupert.com">Dave Rupert</a>, and
1589<a href="https://www.oddbird.net/authors/miriam/">Miriam Suzanne</a>.
1590If you love <span class="caps">CSS</span> as much as we do,
1591we hope you will play along and enjoy the challenge.</p>
1592
1593          
1594        </div>
1595      
1596    </div>
1597  </article>
1598</li>
1599</ol>
1600
1601
1602
1603
1604<nav class="pagination" aria-labelledby="title">
1605  <span class="pagination-link" >newest</span>
1606
1607  
1608    
1609
1610  <span class="current">
1611    
1612    <strong>1</strong>
1613    <i>of</i>
1614    <strong>16</strong>
1615  </span>
1616
1617
1618  
1619
1620  <a href="/blog/2/" class="pagination-link" >older »</a>
1621</nav>
1622
1623
1624
1625    </div>
1626
1627  
1628
1629  
1630
1631  
1632
1633
1634
1635
1636
1637
1638  
1639    
1640
1641<aside data-layout="cta" aria-labelledby="hire-cta-title" class="hire-us-cta" data-ccs-colors="invert">
1642  <div style  data-media="hire-cta" >
1643    <div  class="media-image"><div data-screen="iphone" style="--device-img-notch:15%;--device-img-fill:#dbd8df;--device-clip-inset:5px;">
1644    <picture><source type="image/webp" srcset="/assets/images/work/adobe/luxury-mobile-480w.webp 480w, /assets/images/work/adobe/luxury-mobile-746w.webp 746w" sizes="(min-width: 80em) 15vw, (min-width: 40em) 30vw, 100vw"><img alt="Mobile view of the luxury font tag question" loading="lazy" decoding="async" src="/assets/images/work/adobe/luxury-mobile-480w.jpeg" width="746" height="1496" srcset="/assets/images/work/adobe/luxury-mobile-480w.jpeg 480w, /assets/images/work/adobe/luxury-mobile-746w.jpeg 746w" sizes="(min-width: 80em) 15vw, (min-width: 40em) 30vw, 100vw"></picture>
1645    <svg
1646	data-device="iphone"
1647  xmlns="http://www.w3.org/2000/svg"
1648  aria-hidden="true"
1649  focusable="false"
1650  width="250px"
1651  height="500px"
1652	viewBox="0 0 250 500"
1653>
1654<path d="M206.9,1.5C206.9,1.5,206.8,1.5,206.9,1.5H43.2C19.6,1.5,0.5,20.6,0.5,44.2c0,0,0,0,0,0.1v411.6c0,23.6,19.1,42.7,42.6,42.7
1655	c0,0,0,0,0.1,0h163.6c23.6,0,42.7-19.1,42.7-42.7c0,0,0,0,0-0.1V44.2C249.5,20.6,230.4,1.5,206.9,1.5z M206.6,484.6h-161
1656	c-17.2,0-31.1-13.9-31.1-31.1V46.7c0-17.2,13.9-31.1,31.1-31.1h16.6v9.2c0,5,4,9,9,9h106.7c4.9,0,8.9-4,9-9v-9.2h19.8
1657	c17.2,0,31.1,13.9,31.1,31.1l0.1,406.7C237.7,470.7,223.8,484.6,206.6,484.6z"/>
1658<path d="M108,20.1h35c0.7,0,1.3,0.6,1.3,1.3v2.8c0,0.7-0.6,1.3-1.3,1.3h-35c-0.7,0-1.3-0.6-1.3-1.3v-2.8
1659	C106.7,20.7,107.3,20.1,108,20.1z"/>
1660</svg>
1661
1662  </div>
1663</div>
1664    <div class="media-content">
1665    <h2 id="hire-cta-title" data-header='stacked hire-cta'>
1666      <span class="title-action">Hire Us to Build</span>
1667      Custom Web Apps
1668      <span class="title-description">That stand the test of time</span>
1669    </h2>
1670
1671    <a href='/contact/' class="section-link highlight-link">Let&#8217;s chat</a>
1672  </div>
1673  </div>
1674
1675</aside>
1676
1677  
1678
1679  <!-- used for webmentions -->
1680  <a href="/blog/" class="u-url" hidden>Posts by Date</a>
1681  
1682</main>
1683
1684    
1685
1686<div data-layout="footer" data-footer="">
1687  
1688    <aside aria-label="contact">
1689        <div class="contact-form-intro">
1690          <h3>Let’s chat about your web project</h3>
1691          <p>Fill out the form,
1692<a href="https://calendly.com/oddbird/discovery">schedule a call</a>, or
1693send us an <a href="mailto:[email protected]">email</a>.</p>
1694  <ul class="social-list"><li><a href="mailto:[email protected]" class="u-email icon-link" ><svg
1695  data-icon="mail"
1696  xmlns="http://www.w3.org/2000/svg"
1697  aria-hidden="true"
1698  focusable="false"
1699  width="20px"
1700  height="20px"
1701  viewBox="0 0 146 114.7"
1702>
1703  <path d="M142.2 3.8C139.6 1.3 136.5 0 133 0H13C9.5 0 6.4 1.3 3.8 3.8 1.3 6.4 0 9.5 0 13v88.6c0 3.6 1.3 6.7 3.8 9.2 2.6 2.6 5.6 3.8 9.2 3.8h120c3.6 0 6.7-1.3 9.2-3.8 2.6-2.6 3.8-5.6 3.8-9.2V13c0-3.5-1.3-6.6-3.8-9.2zm-6.6 97.9c0 .7-.3 1.3-.8 1.8s-1.1.8-1.8.8H13c-.7 0-1.3-.3-1.8-.8s-.8-1.1-.8-1.8V39.1c1.7 2 3.6 3.7 5.6 5.4C30.6 55.7 42.2 64.9 50.8 72c2.8 2.3 5 4.2 6.8 5.5s4.1 2.6 7 4 5.7 2 8.4 2h.1c2.6 0 5.4-.7 8.4-2s5.3-2.6 7-4c1.7-1.3 4-3.1 6.8-5.5 8.6-7.2 20.1-16.3 34.7-27.5 2-1.6 3.9-3.4 5.6-
17035.4v62.6zm0-86.5v.9c0 3.2-1.3 6.8-3.8 10.7-2.5 3.9-5.3 7.1-8.2 9.4C113.1 44.4 102.2 53 90.9 62c-.3.3-1.3 1.1-2.9 2.4-1.6 1.3-2.8 2.4-3.7 3.1-.9.7-2.1 1.6-3.6 2.6s-2.9 1.8-4.1 2.2-2.4.7-3.5.7h-.2c-1.1 0-2.3-.2-3.5-.7-1.2-.5-2.6-1.2-4.1-2.2-1.5-1-2.7-1.9-3.6-2.6-.9-.7-2.2-1.7-3.7-3.1-1.6-1.3-2.5-2.1-2.9-2.4-11.3-9-22.2-17.6-32.7-25.8-8-6.3-12-14-12-23.1 0-.7.3-1.3.8-1.8s1.1-.8 1.8-.8h120c.4.2.8.3 1.1.2.3-.1.6.1.7.6.2.5.3.8.4.7s.2.3.2 1v1.1l.2 1.1z"/>
1704</svg>
1705<span class="link-text">[email protected]<span class="sr-only"> <i>on</i> Email</span></span></a></li><li><a href="https://front-end.social/@oddbird" class="u-url icon-link" ><svg
1706  data-icon="mastodon"
1707  version="1.1"
1708  xmlns="http://www.w3.org/2000/svg"
1709  aria-hidden="true"
1710  focusable="false"
1711  width="20px"
1712  height="20px"
1713  viewBox="0 0 448 512"
1714>
1715  <path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/>
1716</svg>
1717<span class="link-text">@[email protected]<span class="sr-only"> <i>on</i> Mastodon</span></span></a></li><li><a href="https://bsky.app/profile/oddbird.dev/" class="u-url icon-link" ><svg
1718  data-icon="bluesky"
1719  version="1.1"
1720  xmlns="http://www.w3.org/2000/svg"
1721  aria-hidden="true"
1722  focusable="false"
1723  width="20px"
1724  height="20px"
1725  viewBox="0 0 600 530"
1726>
1727  <path d="M135.72 44.03C202.216 93.951 273.74 195.17 300 249.49c26.262-54.316 97.782-155.54 164.28-205.46C512.26 8.009 590-19.862 590 68.825c0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.38-3.69-10.832-3.708-7.896-.017-2.936-1.193.516-3.707 7.896-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.45-163.25-81.433C20.15 217.613 9.997 86.535 9.997 68.825c0-88.687 77.742-60.816 125.72-24.795z" />
1728</svg>
1729<span class="link-text">@oddbird.dev<span class="sr-only"> <i>on</i> Bluesky</span></span></a></li><li><a href="https://github.com/oddbird/" class="u-url icon-link" ><svg
1730  data-icon="github"
1731  version="1.1"
1732  xmlns="http://www.w3.org/2000/svg"
1733  aria-hidden="true"
1734  focusable="false"
1735  width="20px"
1736  height="20px"
1737  viewBox="0 0 16 16"
1738>
1739<path d="M8 0.198c-4.418 0-8 3.582-8 8 0 3.535 2.292 6.533 5.471 7.591 0.4 0.074 0.547-0.174 0.547-0.385 0-0.191-0.008-0.821-0.011-1.489-2.226 0.484-2.695-0.944-2.695-0.944-0.364-0.925-0.888-1.171-0.888-1.171-0.726-0.497 0.055-0.486 0.055-0.486 0.803 0.056 1.226 0.824 1.226 0.824 0.714 1.223 1.872 0.869 2.328 0.665 0.072-0.517 0.279-0.87 0.508-1.070-1.777-0.202-3.645-0.888-3.645-3.954 0-0.873 0.313-1.587 0.824-2.147-0.083-0.202-0.357-1.015 0.077-2.117 0 0 0.672-0.215 2.201 0.82 0.638-0.177 1.322-0.266 2.002-0.269 0.68 0.003 1.365 0.092 2.004 0.269 1.527-1.035 2.198-0.82 2.198-0.82 0.435 1.102 0.162 1.916 0.079 2.117 0.513 0.56 0.823 1.274 0.823 2.147 0 3.073-1.872 3.749-3.653 3.947 0.287 0.248 0.543 0.735 0.543 1.481 0 1.070-0.009 1.932-0.009 2.195 0 0.213 0.144 0.462 0.55 0.384 3.177-1.059 5.466-4.057 5.466-7.59 0-4.418-3.582-8-8-8z"></path>
1740</svg>
1741<span class="link-text">oddbird<span class="sr-only"> <i>on</i> Github</span></span></a></li></ul>
1742        </div>
1743      
1744<form action='/contact/thanks/' data-form='contact-footer' method='POST' name='contact-footer'><input type='hidden' name='form-name' value='contact-footer' />
1745  <div data-fieldgroup="contact-info">
1746
1747    <div  data-field="name">
1748    <label for="field-name" data-label >Name<span aria-hidden="true">*</span>
1749    <span class="sr-only">required</span></label><input  type="text" data-input="text" required name="name" id="field-name">
1750  </div>
1751
1752    <div  data-field="email">
1753    <label for="field-email" data-label >Email<span aria-hidden="true">*</span>
1754    <span class="sr-only">required</span></label><input  type="email" data-input="text email" required name="email" id="field-email">
1755  </div>
1756
1757  </div>
1758
1759  <div  data-field="message">
1760    <label for="field-message" data-label >Message<span aria-hidden="true">*</span>
1761    <span class="sr-only">required</span></label><textarea  type="textarea" data-input="textarea" required name="message" id="field-message"></textarea>
1762  </div>
1763
1764  <label data-honey aria-hidden="true">
1765    <span>Don&#8217;t fill out this field:</span>
1766    <input name="subject" tabindex="-1" />
1767  </label>
1768
1769  <div class="form-actions">
1770    <button
1771      data-btn="submit"
1772      type="submit">
1773      Send
1774    </button>
1775    
1776  </div>
1777</form>
1778
1779    </aside>
1780  
1781
1782  
1783    
1784  <div class="oddnews-signup oddnews-form-footer"><h3>Level Up Your <span class="caps">CSS</span></h3><p><strong>Get free cutting-edge demos in your inbox!</strong> Grid <span class="amp">&amp;</span> layouts with Miriam Suzanne, anchor positioning with James Stuckey Weber, and more! <a href="/oddnews">Peruse archive</a></p><form action="https://oddbird.us19.list-manage.com/subscribe/post?u=80219aa68d7bad77b9fd2eb93&amp;id=7c27f7fb9a&amp;f_id=000a9de4f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
1785      <div id="mc_embed_signup_scroll">
1786        <div class="mc-field-group">
1787          <label data-label for="mce-EMAIL">Email
1788            <span aria-hidden="true">*</span>
1789            <span class="sr-only">required</span>
1790          </label>
1791          <input data-input="text email" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required >
1792          <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
1793        </div>
1794        <div hidden="true"><input type="hidden" name="tags" value=6264369></div>
1795        <div id="mce-responses" class="clear foot">
1796          <div class="response" id="mce-error-response" style="display:none"></div>
1797          <div class="response" id="mce-success-response" style="display:none"></div>
1798        </div>
1799        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
1800        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_80219aa68d7bad77b9fd2eb93_7c27f7fb9a" tabindex="-1" value=""></div>
1801        <div class="optionalParent">
1802          <div class="clear foot form-actions">
1803            <button data-btn="submit" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">Subscribe</button>
1804          </div>
1805        </div>
1806      </div>
1807    </form>
1808  </div>
1809
1810  
1811
1812  <footer role="contentinfo">
1813    <div class="colophon">
1814      
1815      <p>Built with
1816<a href="https://www.11ty.dev/">Eleventy</a>.</p>
1817<p>Styled with
1818<a href="https://sass-lang.com/">Sass</a>,
1819<a href="/accoutrement/">Accoutrement</a>, <span class="amp">&amp;</span>
1820<a href="/cascading-colors/">Cascading Color Systems</a>.</p>
1821<p><a href="/styleguide/">Documented</a> with
1822<a href="/herman/">Herman</a> <span class="amp">&amp;</span> <a href="http://sassdoc.com/">SassDoc</a>.<br>
1823See <a href="/sample/">sample pages</a>
1824for basic usage.</p>
1825
1826    </div>
1827
1828    <div class="legal">
1829      
1830      
1831<p>Established in 2008 by three odd siblings.
1832<a href="/conduct/">Code of Conduct</a>.</p>
1833
1834
1835<p class="h-card p-org">
1836  Copyright © 2009&ndash;2026
1837  <a href="https://www.oddbird.net/" class="p-name u-url u-uid" rel="me">
1838    OddBird
1839  </a>
1840</p>
1841
1842    </div>
1843  </footer>
1844</div>
1845
1846    
1847
1848    
1848<script type="module" src="/assets/js/index.js"></script>
1848
1849
1850    <!-- Current page: /blog/ -->
1851  </body>
1852</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.