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, & 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, & 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">&</span> Development 225 </a> 226 </li> 227 228 229 230 <li> 231 <a href="/services/planning/" data-nav="servicesplanning" > 232 Strategy <span class="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">&</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">&</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">&</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">&</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">&</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">&</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><dialog></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">&</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">&</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">&</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">&</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">&</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">&</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’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’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">&</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&id=7c27f7fb9a&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">&</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">&</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–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.