1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="generator" content="eleventy" /> 7 <title>Modern CSS Solutions</title> 8 <meta name="description" content="A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years."/> 9 <link rel="author" href="https://moderncss.dev/humans.txt" /> 10 <link 11 rel="icon" 12 href="/favicon.png" 13 /> 14 <link rel="preload" href="/fonts/baloo-2-v1-latin-500.woff2" as="font" type="font/woff2" crossorigin> 15 <link rel="preload" href="/fonts/baloo-2-v1-latin-regular.woff2" as="font" type="font/woff2" crossorigin> 16 <link rel="preload" href="/fonts/kanit-v5-latin-800.woff2" as="font" type="font/woff2" crossorigin> 17 <link 18 href="/css/style.css" 19 rel="stylesheet" 20 /> 21 22 <link rel="preconnect" href="https://cdn.carbonads.com"> 23 <link rel="dns-prefetch" href="https://cdn.carbonads.com"> 24 <link rel="preconnect" href="https://srv.carbonads.net"> 25 <link rel="dns-prefetch" href="https://srv.carbonads.net"> 26 <link rel="preconnect" href="https://cdn4.buysellads.net"> 27 <link rel="dns-prefetch" href="https://cdn4.buysellads.net"> 28 <link rel="preconnect" href="https://static.codepen.io"> 29 <link rel="dns-prefetch" href="https://static.codepen.io"> 30 <link rel="preconnect" href="https://plausible.io"> 31 <link rel="dns-prefetch" href="https://plausible.io"> 32 33
33<script async defer data-domain="moderncss.dev" src="https://plausible.io/js/plausible.outbound-links.js"></script>
33 34
34<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
34 35 36 <meta name="twitter:card" content="summary_large_image" /> 37 <meta name="twitter:creator" content="@5t3ph" /> 38 <meta property="og:url" content="https://moderncss.dev/" /> 39 <meta property="og:title" content="Modern CSS Solutions" /> 40 <meta property="og:description" content="A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years." /> 41 <meta property="og:image" content="https://moderncss.dev/img/social/home.jpeg" /> 42 <meta property="og:type" content="website" /> 43 <meta property="og:site_name" content="Modern CSS Solutions" /> 44 <link rel="canonical" href="https://moderncss.dev/"> 45 <link rel="alternate" type="application/rss+xml" title="RSS Feed for ModernCSS.dev" href="/feed/" /> 46 </head> 47 <body class="page- "> <header class="hero hero--home"> 48 <div class="mx-auto"> 49 <h1 class="color-primary" translate="no">Modern CSS Solutions 50 <em class="color-secondary">for Old CSS Problems</em> 51 </h1> 52 53 <p class="lead"> 54 <span class="row"> 55 <span>A series by <a href="https://thinkdobecreate.com/">Stephanie Eckles</a></span> <a href="https://front-end.social/@5t3ph" class="button button-icon" aria-label="Follow 5t3ph on Mastodon"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-mastodon"></use></svg></a> 56 </span> 57 </p> 58 59 <a href="/topics/" class="button">Browse By Topic</a> 60 </div> 61 </header> 62 <main aria-label="Articles Table of Contents" class="container"> 63 <ul role="list" class="column-container"><li class="card card--episode index1"> 64 <div class="card__content" data-episode="35"> 65 <a href="/providing-type-definitions-for-css-with-at-property/" class="card__title"><span>Providing Type Definitions for CSS with @property</span></a> 66 <p>Write safer CSS using `@property`, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how `@property` features improve the resilience of custom property definitions.</p> 67 </div> 68 </li><li class="card card--episode index2"> 69 <div class="card__content" data-episode="34"> 70 <a href="/12-modern-css-one-line-upgrades/" class="card__title"><span>12 Modern CSS One-Line Upgrades</span></a> 71 <p>Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.</p> 72 </div> 73 </li><li class="card card--episode index3"> 74 <div class="card__content" data-episode="33"> 75 <a href="/how-custom-property-values-are-computed/" class="card__title"><span>How Custom Property Values are Computed</span></a> 76 <p>Review behaviors to be aware of regarding how the browser computes final custom property values. A misunderstanding of this process may lead to an unexpected or missing value and difficulty troubleshooting and resolving the issue.</p> 77 </div> 78 </li><li class="card card--episode index4"> 79 <div class="card__content" data-episode="32"> 80 <a href="/modern-css-for-dynamic-component-based-architecture/" class="card__title"><span>Modern CSS For Dynamic Component-Based Architecture</span></a> 81 <p>Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.</p> 82 </div> 83 </li><li class="card card--episode index5"> 84 <div class="card__content" data-episode="31"> 85 <a href="/testing-feature-support-for-modern-css/" class="card__title"><span>Testing Feature Support for Modern CSS</span></a> 86 <p>How do you know using a new CSS features is "safe" to use? Review how to find information on new features, test for support, determine when to use a feature, and manage support with fallbacks and build tools.</p> 87 </div> 88 </li> 89 <li class="card card--teaser"> 90 <div class="card__content text-align-center"> 91 <div class="carbon-ad"> 92
92<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7I52QE&placement=moderncssdev" id="_carbonads_js"></script>
92 93 </div> 94 </div> 95 </li> 96 <li class="card card--episode index6"> 97 <div class="card__content" data-episode="30"> 98 <a href="/container-query-units-and-fluid-typography/" class="card__title"><span>Container Query Units and Fluid Typography</span></a> 99 <p>To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.</p> 100 </div> 101 </li><li class="card card--episode index7"> 102 <div class="card__content" data-episode="29"> 103 <a href="/contextual-spacing-for-intrinsic-web-design/" class="card__title"><span>Contextual Spacing For Intrinsic Web Design</span></a> 104 <p>Learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques. We'll construct a starter set of custom properties for gap, margin, and padding.</p> 105 </div> 106 </li> 107 <li class="card card--text"> 108 <div class="card__content text-align-center my-auto"> 109 <a href="https://smolcss.dev" class="color-secondary card__title">SmolCSS</a> 110 <p>Check out the ModernCSS companion site <strong>SmolCSS</strong> and demo minimal snippets for modern CSS layouts and components</p> 111 <a href="https://smolcss.dev">Visit SmolCSS.dev</a> 112 </div> 113 </li> 114 <li class="card card--episode index8"> 115 <div class="card__content" data-episode="28"> 116 <a href="/practical-uses-of-css-math-functions-calc-clamp-min-max/" class="card__title"><span>Practical Uses of CSS Math Functions: calc, clamp, min, max</span></a> 117 <p>Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties.</p> 118 </div> 119 </li><li class="card card--episode index9"> 120 <div class="card__content" data-episode="27"> 121 <a href="/modern-css-upgrades-to-improve-accessibility/" class="card__title"><span>Modern CSS Upgrades To Improve Accessibility</span></a> 122 <p>Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.</p> 123 </div> 124 </li><li class="card card--episode index10"> 125 <div class="card__content" data-episode="26"> 126 <a href="/developing-for-imperfect-future-proofing-css-styles/" class="card__title"><span>Developing For Imperfect: Future Proofing CSS Styles</span></a> 127 <p>How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let's explore how things can break and how modern CSS provides solutions.</p> 128 </div> 129 </li><li class="card card--episode index11"> 130 <div class="card__content" data-episode="25"> 131 <a href="/guide-to-advanced-css-selectors-part-two/" class="card__title"><span>Guide to Advanced CSS Selectors - Part Two</span></a> 132 <p>Continuing from part one, this episode will focus on the advanced CSS selectors categorized as pseudo classes and pseudo elements and practical applications for each.</p> 133 </div> 134 </li><li class="card card--episode index12"> 135 <div class="card__content" data-episode="24"> 136 <a href="/guide-to-advanced-css-selectors-part-one/" class="card__title"><span>Guide to Advanced CSS Selectors - Part One</span></a> 137 <p>Whether you choose to completely write your own CSS, or use a framework, understanding selectors, the cascade, and specificity are critical to developing CSS and modifying existing style rules.</p> 138 </div> 139 </li> 140 <li class="card card--text"> 141 <div class="card__content text-align-center my-auto"> 142 <a href="/newsletter/" class="color-secondary card__title">CSS Tips in Your Inbox</a> 143 <p>Join my newsletter for article updates, CSS tips, and front-end resources!</p> 144 <a class="button button--small" href="/newsletter/">Newsletter Signup</a> 145 </div> 146 </li> 147 <li class="card card--episode index13"> 148 <div class="card__content" data-episode="23"> 149 <a href="/the-3-css-methods-for-adding-element-borders/" class="card__title"><span>The 3 CSS Methods for Adding Element Borders</span></a> 150 <p>In CSS, sometimes a `border` is not really a `border`. In this episode, we'll cover the differences between `border`, `outline`, and `box-shadow` and when to choose each.</p> 151 </div> 152 </li> 153 <li class="card card--text"> 154 <div class="card__content text-align-center my-auto"> 155 <a href="https://www.buymeacoffee.com/moderncss" class="color-secondary card__title">Support this Series</a> 156 <p>
156Enjoying the series? I would appreciate a coffee to help me keep writing and coding!</p> 157 <a class="button button-outlined button-outlined--inverse button--small" target="_blank" rel="noopener" href="https://www.buymeacoffee.com/moderncss"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-buymeacoffee"></use></svg> Buy me a coffee</a> 158 </div> 159 </li> 160 <li class="card card--episode index14"> 161 <div class="card__content" data-episode="22"> 162 <a href="/pure-css-shapes-3-ways/" class="card__title"><span>Pure CSS Shapes 3 Ways</span></a> 163 <p>Modern CSS and modern browser support provides us three excellent methods to create pure, basic CSS shapes. We'll look at making CSS triangles with borders, linear gradients, and `clip-path`.</p> 164 </div> 165 </li><li class="card card--episode index15"> 166 <div class="card__content" data-episode="21"> 167 <a href="/custom-css-styles-for-form-inputs-and-textareas/" class="card__title"><span>Custom CSS Styles for Form Inputs and Textareas</span></a> 168 <p>Create custom form input and textarea styles that have a near-identical appearance across the top browsers, and ensure all states meet contrast requirements.</p> 169 </div> 170 </li><li class="card card--episode index16"> 171 <div class="card__content" data-episode="20"> 172 <a href="/custom-select-styles-with-pure-css/" class="card__title"><span>Custom Select Styles with Pure CSS</span></a> 173 <p>Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance. This solution uses CSS grid, `clip-path`, and CSS custom properties.</p> 174 </div> 175 </li><li class="card card--episode index17"> 176 <div class="card__content" data-episode="19"> 177 <a href="/pure-css-custom-checkbox-style/" class="card__title"><span>Pure CSS Custom Checkbox Style</span></a> 178 <p>We'll create custom, cross-browser, theme-able, scalable checkboxes in pure CSS. We'll use `currentColor`, the `em` unit, SVG, and CSS grid layout.</p> 179 </div> 180 </li> 181 <li class="card card--text"> 182 <blockquote class="card__content text-align-center"> 183 <img src="/img/avatars/chris-c.jpg" alt="Chris Coyier" /> 184 <p class="color-secondary">This is a hell of a series by Stephanie Eckles.</p> 185 <footer> 186 <cite>— <a href="https://css-tricks.com/modern-css-solutions-for-old-css-problems/">Chris Coyier</a></cite> 187 </footer> 188 </blockquote> 189 </li> 190 <li class="card card--episode index18"> 191 <div class="card__content" data-episode="18"> 192 <a href="/pure-css-custom-styled-radio-buttons/" class="card__title"><span>Pure CSS Custom Styled Radio Buttons</span></a> 193 <p>Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.</p> 194 </div> 195 </li><li class="card card--episode index19"> 196 <div class="card__content" data-episode="17"> 197 <a href="/announcing-style-stage-a-community-css-showcase/" class="card__title"><span>Announcing Style Stage: A Community CSS Showcase</span></a> 198 <p>Learn about Style Stage - an opportunity to challenge both your CSS and web design skills while learning in public. A CSS playground open to contributors of all skill levels!</p> 199 </div> 200 </li><li class="card card--episode index20"> 201 <div class="card__content" data-episode="16"> 202 <a href="/3-popular-website-heroes-created-with-css-grid-layout/" class="card__title"><span>3 Popular Website Heroes Created With CSS Grid Layout</span></a> 203 <p>This episode explores creating website heroes - aka 'headers' - by using CSS grid and a unique way to apply grid template areas that you can use to replace older methods that used absolute positioning.</p> 204 </div> 205 </li><li class="card card--episode index21"> 206 <div class="card__content" data-episode="15">
207 <a href="/3-css-grid-techniques-to-make-you-a-grid-convert/" class="card__title"><span>3 CSS Grid Techniques to Make You a Grid Convert</span></a> 208 <p>Learn three powerful techniques for using grid that don't involve counting columns, including changing the default axis, centering, and responsive layout without media queries.</p> 209 </div> 210 </li><li class="card card--episode index22"> 211 <div class="card__content" data-episode="14"> 212 <a href="/expanded-use-of-box-shadow-and-border-radius/" class="card__title"><span>Expanded Use of `box-shadow` and `border-radius`</span></a> 213 <p>This episode will explore expanded usage of `box-shadow` and `border-radius` and conclude with a landing page demo using these properties to enhance the image presentation.</p> 214 </div> 215 </li><li class="card card--episode index23"> 216 <div class="card__content" data-episode="13"> 217 <a href="/container-query-solutions-with-css-grid-and-flexbox/" class="card__title"><span>Container Query Solutions with CSS Grid and Flexbox</span></a> 218 <p>Using grid and flexbox, we can create styles that respond to container and content widths and overcome some of the pain points that container queries are proposed to resolve.</p> 219 </div> 220 </li><li class="card card--episode index24"> 221 <div class="card__content" data-episode="12"> 222 <a href="/generating-font-size-css-rules-and-creating-a-fluid-type-scale/" class="card__title"><span>Generating `font-size` CSS Rules and Creating a Fluid Type Scale</span></a> 223 <p>Let's take the mystery out of sizing type. Learn recommended units for `font-size`, how to generate ratio-based fluid sizes with Sass, and how to handle overflow.</p> 224 </div> 225 </li><li class="card card--episode index25"> 226 <div class="card__content" data-episode="11"> 227 <a href="/resource-the-complete-guide-to-centering-in-css/" class="card__title"><span>Resource: The Complete Guide to Centering in CSS</span></a> 228 <p>This resource covers the classic CSS question: "How do I center a div?" You'll learn a solution for every variation of how you may want to center something using grid, flexbox, and block element layout.</p> 229 </div> 230 </li><li class="card card--episode index26"> 231 <div class="card__content" data-episode="10"> 232 <a href="/icon-button-css-styling-guide/" class="card__title"><span>Icon Button CSS Styling Guide</span></a> 233 <p>This guide will build on the previous episode 'CSS Button Styling Guide' to explore the use case of icon buttons. We'll cover icon + text as well as icon-only buttons.</p> 234 </div> 235 </li><li class="card card--episode index27"> 236 <div class="card__content" data-episode="9"> 237 <a href="/css-button-styling-guide/" class="card__title"><span>CSS Button Styling Guide</span></a> 238 <p>This guide will explore the ins and outs of styling an accessible, extensible button appearance for both link and button elements.</p> 239 </div> 240 </li><li class="card card--episode index28"> 241 <div class="card__content" data-episode="8"> 242 <a href="/solutions-to-replace-the-12-column-grid/" class="card__title"><span>Solutions to Replace the 12-Column Grid</span></a> 243 <p>Create simplified responsive grid systems using both CSS grid and flexbox. Using both, we'll create just two classes to handle from 1-4 columns of content that responsively resizes.</p> 244 </div> 245 </li><li class="card card--episode index29"> 246 <div class="card__content" data-episode="7"> 247 <a href="/css-only-accessible-dropdown-navigation-menu/" class="card__title"><span>CSS-Only Accessible Dropdown Navigation Menu</span></a> 248 <p>This technique explores using: animation with CSS `transition` and `transform`, using the `:focus-within` pseudo-class, CSS grid, and accessibility considerations for dropdown menus.</p> 249 </div> 250 </li><li class="card card--episode index30"> 251 <div class="card__content" data-episode="6"> 252 <a href="/responsive-image-gallery-with-animated-captions/" class="card__title"><span>Responsive Image Gallery With Animated Captions</span></a> 253 <p>This technique explores using: `object-fit` for responsive image scaling, `aspect-ratio` for consistent image sizes, a CSS Grid trick to replace absolute positioning, and CSS transforms for animated effects.</p> 254 </div> 255 </li><li class="card card--episode index31"> 256 <div class="card__content" data-episode="5"> 257 <a href="/totally-custom-list-styles/" class="card__title"><span>Totally Custom List Styles</span></a> 258 <p>This tutorial will show how to use CSS grid layout for easy custom list styling. We'll cover CSS counters, CSS custom properties, and responsive multi-column lists, as well as the new `::marker` pseudo selector.</p> 259 </div> 260 </li><li class="card card--episode index32"> 261 <div class="card__content" data-episode="4"> 262 <a href="/pure-css-smooth-scroll-back-to-top/" class="card__title"><span>Pure CSS Smooth-Scroll "Back to Top "</span></a> 263 <p>"Back to top" links may not be in use often these days, but there are two modern CSS features that the technique demonstrates well: `position: sticky` and `scroll-behavior: smooth`.</p> 264 </div> 265 </li><li class="card card--episode index33"> 266 <div class="card__content" data-episode="3"> 267 <a href="/css-only-full-width-responsive-images-2-ways/" class="card__title"><span>
267CSS-Only Full-Width Responsive Images 2 Ways</span></a> 268 <p>Let's look at how to use `background-size` and `object-fit` for similar full-width image effects, and learn when to select one over the other.</p> 269 </div> 270 </li><li class="card card--episode index34"> 271 <div class="card__content" data-episode="2"> 272 <a href="/equal-height-elements-flexbox-vs-grid/" class="card__title"><span>Equal Height Elements: Flexbox vs. Grid</span></a> 273 <p>Review solutions using both Flexbox and CSS grid and learn when you might choose one over the other.</p> 274 </div> 275 </li><li class="card card--episode index35"> 276 <div class="card__content" data-episode="1"> 277 <a href="/keep-the-footer-at-the-bottom-flexbox-vs-grid/" class="card__title"><span>Keep the Footer at the Bottom: Flexbox vs. Grid</span></a> 278 <p>Floating footers can occur for many reasons, but modern CSS methods using either flexbox or CSS grid let us plan a future-proof solution for any size layout.</p> 279 </div> 280 </li></ul> 281 </main> 282 283 <aside aria-labelledby="resources" class="container section mx-auto gradient-border"> 284 <h2 id="resources" class="color-secondary text-align-center">Additional Resources</h2> 285 <ul role="list" class="column-container section equalize-headings" style="--gap: 8vh 5vw; --section-margin: 0;"> 286 <li class="flex-container"> 287 <h3>Frontend Development Videos</h3> 288 <p>Learn more about various frontend development topics such as flexbox, grid, and Sass in 5 minutes or less. If you have 20 minutes available, you can create a whole landing page!</p> 289 <div class="row"> 290 <a href="https://egghead.io/playlists/create-a-landing-page-with-css-grid-and-flexbox-6048?af=2s65ms" class="button button--small">20 Min. Landing Page</a> 291 <a href="https://egghead.io/instructors/stephanie-eckles?af=2s65ms"><small>View All Videos</small></a> 292 </div> 293 </li> 294 <li class="flex-container"> 295 <h3>Learn Web Development</h3> 296 <p>Go from zero to website launch - no prior development experience required! Through this series of 4-14 minute videos, you will learn the essentials of web development.</p> 297 <div class="row"> 298 <a href="https://dev.to/5t3ph/learn-how-to-make-a-website-set-up-your-coding-environment-2oeo" class="button button--small">Start Now</a> 299 <a href="https://learnfromsteph.dev"><small>Course Details</small></a> 300 </div> 301 </li> 302 <li class="flex-container"> 303 <h3>12 Days of Web</h3> 304 <p>Get caught up with all the native web has to offer with 12 articles celebrating web fundamentals: HTML, CSS, and JavaScript.</p> 305 <div class="row"> 306 <a href="https://12DaysOfWeb.dev" class="button button--small">Read the series</a> 307 </div> 308 </li> 309 </ul> 310 </aside> 311
312<script> 313 const randomIndex=Math.floor(4*Math.random())+1,selected=document.querySelector(".index"+randomIndex+" .card__title").classList.add("peekaboo"); 314</script>
314 315 316 <footer id="site-footer" class="background--secondary-alt"> 317 <div class="row container text-align-center mx-auto"> 318 <p> 319 <a href="/">ModernCSS.dev</a> 320 © 2025 <a href="https://thinkdobecreate.com">ThinkDoBeCreate - Stephanie Eckles</a> 321 </p> 322 <span class="row"> 323 <a href="https://front-end.social/@5t3ph" class="button button-icon" aria-label="Mastodon"> 324 <svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-mastodon"></use></svg> 325 </a> 326 <a href="https://github.com/5t3ph/" class="button button-icon" aria-label="Github"> 327 <svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-github"></use></svg> 328 </a> 329 <a href="https://codepen.io/5t3ph/" class="button button-icon" aria-label="CodePen"> 330 <svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-codepen"></use></svg> 331 </a> 332 <a href="https://dev.to/5t3ph" class="button button-icon" aria-label="DEV"> 333 <svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-devto"></use></svg> 334 </a> 335 <a 336 href="https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA" 337 class="button button-icon" 338 aria-label="YouTube" 339 > 340 <svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-youtube"></use></svg> 341 </a> 342 <a class="button button-outlined button-outlined--inverse button--small" target="_blank" rel="noopener" href="https://www.buymeacoffee.com/moderncss"><svg aria-hidden="true" focusable="false" width="24" height="24" fill="currentColor" class="button__icon"><use href="#icon-buymeacoffee"></use></svg> Buy me a coffee</a> 343 </span> 344 </div> 345 </footer> 346 347 348 <svg aria-hidden="true" focusable="false" hidden><defs> 349<symbol viewBox="0 0 24 24" id="icon-mastodon"><path fill="currentColor" d="M20.94 14c-.28 1.41-2.44 2.96-4.97 3.26c-1.31.15-2.6.3-3.97.24c-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42c1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5c-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61C6.95 2.3 9.41 2 11.97 2h.06c2.56 0 5.02.3 6.47.96c0 0 2.83 1.27 2.83 5.61c0 0 .04 3.21-.39 5.43M18 8.91c0-1.08-.3-1.91-.85-2.56c-.56-.63-1.3-.96-2.23-.96c-1.06 0-1.87.41-2.42 1.23l-.5.88l-.5-.88c-.56-.82-1.36-1.23-2.43-1.23c-.92 0-1.66.33-2.23.96C6.29 7 6 7.83 6 8.91v5.26h2.1V9.06c0-1.06.45-1.62 1.36-1.62c1 0 1.5.65 1.5 1.93v2.79h2.07V9.37c0-1.28.5-1.93 1.51-1.93c.9 0 1.35.56 1.35 1.62v5.11H18V8.91Z"></path></symbol> 350<symbol id="icon-buymeacoffee" viewBox="0 0 24 36"><g fill="none" fill-rule="evenodd"><path fill="#FF9100" d="M11.835 7.655l-8.74-.052 4.292 27.113h10.456l4.292-27.113z"/><path fill="#FD0" d="M11.835 7.655l-8.74-.052 4.292 27.113h8.272L19.95 7.603z"/><path fill="#FFF" d="M.599 7.603h22.55v-2.5H.6z"/><path stroke="#000" stroke-width="1.17" d="M.599 7.603h22.55v-2.5H.6z"/><path fill="#FFF" d="M18.78 1.04H4.813l-1.64 3.75H20.419z"/><g stroke-width="1.17"><path stroke="#050505" d="M18.78 1.04H4.813l-1.64 3.75H20.419z"/><path stroke="#000" d="M11.835 7.655l-10.3-.052 4.292 27.113h12.016l4.292-27.113z"/></g><path fill="#FFF" d="M22.447 15.26H1.146l1.922 10.783 8.728-.094 8.728.094z"/><path stroke="#000" stroke-width="1.17" d="M22.447 15.26H1.146l1.922 10.783 8.728-.094 8.728.094z"/></g></symbol><symbol id="icon-github" viewBox="0 0 32 32"> <path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z" ></path> </symbol> <symbol id="icon-codepen" viewBox="0 0 32 32"> <path d="M32 10.909l-0.024-0.116-0.023-0.067c-0.013-0.032-0.024-0.067-0.040-0.1-0.004-0.024-0.020-0.045-0.027-0.067l-0.047-0.089-0.040-0.067-0.059-0.080-0.061-0.060-0.080-0.060-0.061-0.040-0.080-0.059-0.059-0.053-0.020-0.027-14.607-9.772c-0.463-0.309-1.061-0.309-1.523 0l-14.805 9.883-0.051 0.053-0.067 0.075-0.049 0.060-0.067 0.080c-0.027 0.023-0.040 0.040-0.040 0.061l-0.067 0.080-0.027 0.080c-0.027 0.013-0.027 0.053-0.040 0.093l-0.013 0.067c-0.025 0.041-0.025 0.081-0.025 0.12
3501v9.996c0 0.059 0.004 0.12 0.013 0.18l0.013 0.061c0.007 0.040 0.013 0.080 0.027 0.115l0.020 0.067c0.013 0.036 0.021 0.071 0.036 0.1l0.029 0.067c0 0.013 0.020 0.053 0.040 0.080l0.040 0.053c0.020 0.013 0.040 0.053 0.060 0.080l0.040 0.053 0.053 0.053c0.013 0.017 0.013 0.040 0.040 0.040l0.080 0.056 0.053 0.040 0.013 0.019 14.627 9.773c0.219 0.16 0.5 0.217 0.76 0.217s0.52-0.080 0.76-0.24l14.877-9.875 0.069-0.077 0.044-0.060 0.053-0.080 0.040-0.067 0.040-0.093 0.021-0.069 0.040-0.103 0.020-0.060 0.040-0.107v-10c0-0.067 0-0.127-0.021-0.187l-0.019-0.060 0.059 0.004zM16.013 19.283l-4.867-3.253 4.867-3.256 4.867 3.253-4.867 3.253zM14.635 10.384l-5.964 3.987-4.817-3.221 10.781-7.187v6.424zM6.195 16.028l-3.443 2.307v-4.601l3.443 2.301zM8.671 17.695l5.964 3.987v6.427l-10.781-7.188 4.824-3.223v-0.005zM17.387 21.681l5.965-3.973 4.817 3.227-10.783 7.187v-6.427zM25.827 16.041l3.444-2.293v4.608l-3.444-2.307zM23.353 14.388l-5.964-3.988v-6.44l10.78 7.187-4.816 3.224z" ></path> </symbol> <symbol id="icon-devto" viewBox="0 0 512 512"> <path d="M188.437 221.898c-.009-18.484-11.717-46.436-46.525-46.436H95.379v162.505h45.573c36.093.06 47.496-27.934 47.496-46.408l-.011-69.661zm-27.735 69.479c0 5.705-1.907 9.978-5.716 12.826-3.81 2.846-7.632 4.271-11.443 4.271h-17.139V205.87h17.129c3.811 0 7.633 1.424 11.443 4.272 3.801 2.847 5.715 7.13 5.726 12.826v68.409z" /> <path d="M287.328 204.485H235v37.734h31.987v29.041H235v37.724h52.339v29.044h-61.071c-10.959.282-20.074-8.379-20.349-19.339V195.813c-.267-10.951 8.406-20.045 19.357-20.319h62.063l-.011 28.991z" /> <path d="M389.117 317.717c-12.965 30.201-36.191 24.189-46.594 0l-37.84-142.214h31.988l29.18 111.69 29.043-111.69h31.996l-37.773 142.214z" /> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="20" d="M424.401 471H87.599C61.863 471 41 450.137 41 424.401V87.599C41 61.863 61.863 41 87.599 41h336.802C450.137 41 471 61.863 471 87.599v336.802C471 450.137 450.137 471 424.401 471z" /> </symbol> <symbol id="icon-youtube" viewBox="0 0 28 28"> <path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z" ></path> </symbol></defs></svg> 351 </body> 352 </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.