Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(joshwcomeau): add new Routes josh w comeau #18071

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(joshwcomeau): add new Routes josh w comeau #18071

wants to merge 1 commit into from
+179 −0

Conversation

Rjnishant530
Copy link
Contributor

Involved Issue / 该 PR 相关 Issue

Close #

Example for the Proposed Route(s) / 路由地址示例

/joshwcomeau/latest/javascript
/joshwcomeau/latest
/joshwcomeau/popular/false
/joshwcomeau/popular

New RSS Route Checklist / 新 RSS 路由检查表

  • New Route / 新的路由
  • Anti-bot or rate limit / 反爬/频率限制
    • If yes, do your code reflect this sign? / 如果有, 是否有对应的措施?
  • Date and time / 日期和时间
    • Parsed / 可以解析
    • Correct time zone / 时区正确
  • New package added / 添加了新的包
  • Puppeteer

Note / 说明

@github-actions github-actions bot added the Route label Jan 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

Successfully generated as following:

http://localhost:1200/joshwcomeau/latest/javascript - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>JavaScript | Articles and Tutorials | Josh W. Comeau</title>
    <link>https://www.joshwcomeau.com/javascript</link>
    <atom:link href="http://localhost:1200/joshwcomeau/latest/javascript" rel="self" type="application/rss+xml"></atom:link>
    <description>Friendly tutorials for developers. Focus on JavaScript | - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Wed, 08 Jan 2025 07:00:28 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>Promises From The Ground Up</title>
      <description>&lt;div class=&quot;t1ma5bj5&quot;&gt;&lt;nav style=&quot;opacity:0;--x:20px&quot; class=&quot;wt7fu6i&quot;&gt;&lt;h2 class=&quot;th0e8y&quot;&gt;Table of Contents&lt;/h2&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#introduction&quot; style=&quot;color:var(--color-primary);opacity:1;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Introduction&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#why-would-they-design-it-this-way-1&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Why would they design it this way??&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#callbacks-2&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Callbacks&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#introducing-promises-3&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Introducing Promises&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#working-with-promises-4&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Working with Promises&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#creating-our-own-promises-5&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Creating our own Promises&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#chaining-promises-6&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Chaining Promises&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#passing-data-7&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Passing data&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#rejected-promises-8&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Rejected Promises&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#async--await-9&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Async / Await&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/javascript/promises/#more-to-come-10&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;More to come!&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;l1mdfuoz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;a id=&quot;introduction&quot; class=&quot;wcmb8ol&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;p class=&quot;prg881n&quot;&gt;There are a lot of speed bumps and potholes on the road to JavaScript proficiency. One of the biggest and most daunting is &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;Promises.&lt;/em&gt;&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In order to understand Promises, we need a surprisingly deep understanding of how JavaScript works and what its limitations are. Without that context, Promises won’t really make much sense.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;It can be frustrating because the Promises API is &lt;i&gt;so important&lt;/i&gt; nowadays. It’s become the de facto way of working with asynchronous code. Modern web APIs are built on top of Promises. There’s no getting around it: if we want to be productive with JavaScript, it really helps to understand Promises.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;So, in this tutorial, we’re going to learn about Promises, but we’ll start at the beginning. I’ll share all of the critical bits of context that took me years to understand. And by the end, hopefully, you’ll have a much deeper understanding of what Promises are and how to use them effectively. ✨&lt;/p&gt;
        &lt;aside class=&quot;i6el1g6 b1btlj5u&quot;&gt;&lt;div class=&quot;dwkrqh8&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.5&quot; height=&quot;34.5&quot; fill=&quot;none&quot; viewBox=&quot;0 0 57 69&quot; preserveAspectRatio=&quot;none&quot; class=&quot;sl0r50n&quot;&gt;&lt;path fill=&quot;var(--color-page-background)&quot; d=&quot;M54 0V0.716804C54 25.9434 35.0653 47.1517 10 50L0 57V0H54Z&quot; style=&quot;transition:fill var(--color-swap-duration) var(--color-swap-timing-function)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;var(--color-primary)&quot; d=&quot;M56.9961 4.15364C57.0809 2.49896 55.8083 1.08879 54.1536 1.00394C52.499 0.919082 51.0888 2.19168 51.0039 3.84636L56.9961 4.15364ZM9.09704 51.7557L8.49716 48.8163L9.09704 51.7557ZM6 69V59.2227H0V69H6ZM9.69692 54.6951L14.3373 53.7481L13.1375 47.8693L8.49716 48.8163L9.69692 54.6951ZM14.3373 53.7481C38.202 48.8777 55.7486 28.4783 56.9961 4.15364L51.0039 3.84636C49.8967 25.4384 34.3213 43.5461 13.1375 47.8693L14.3373 53.7481ZM6 59.2227C6 57.0268 7.54537 55.1342 9.69692 54.6951L8.49716 48.8163C3.55195 49.8255 0 54.1756 0 59.2227H6Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div class=&quot;f1dj028m&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1m3o2ch&quot;&gt;&lt;/div&gt;&lt;div class=&quot;iohjz9i&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-info&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12 16v-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 8h.01&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;strong id=&quot;aside-intended-audience&quot; class=&quot;t1xqw7pl&quot;&gt;Intended audience&lt;/strong&gt;&lt;div class=&quot;c690lmu&quot;&gt;&lt;p class=&quot;prg881n&quot;&gt;This blog post is intended for beginner-to-intermediate JavaScript developers. Some knowledge of basic JavaScript syntax is assumed.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;
        &lt;h2 id=&quot;why-would-they-design-it-this-way&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;why-would-they-design-it-this-way-1&quot; href=&quot;https://www.joshwcomeau.com/javascript/promises/#why-would-they-design-it-this-way-1&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Why would they design it this way??&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Suppose we wanted to build a &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;Happy New Year!&lt;/em&gt; countdown, something like this:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div class=&quot;w52b1qq&quot;&gt;&lt;p class=&quot;v793fuv&quot;&gt;––&lt;/p&gt;&lt;button data-disabled=&quot;false&quot; class=&quot;b1b5r9ns dj4vswd&quot;&gt;Start Countdown&lt;/button&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;If JavaScript was like most other programming languages, we could solve the problem like this:&lt;/p&gt;
        &lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;true&quot; style=&quot;--max-height:auto&quot; class=&quot;coaxrjn c1qvfy1x ae97emi&quot;&gt;&lt;button class=&quot;wqxmqd2&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1htlkn0&quot;&gt;&lt;span style=&quot;transform:rotate(0deg)&quot; class=&quot;i14jtb2i&quot;&gt;&lt;span style=&quot;width:24px;height:24px;--duration:1422.2222222222222ms;--size:24px&quot; class=&quot;w1gpdsbs&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-loader&quot;&gt;&lt;path d=&quot;M12 2v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 7.8 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 16.2 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 18v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 19.1 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 4.9 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span style=&quot;opacity:0;transform:scale(0)&quot; class=&quot;c6am5ut&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-check&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;haso6lc wlgbkjj&quot;&gt;Copy to clipboard&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;w19zxykk w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-light josh-theme-dark&quot; style=&quot;--shiki-light:#000000;--shiki-dark:#ffffffff;--shiki-light-bg:#f5f6f900;--shiki-dark-bg:#0d0f1200&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#C792EA&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; newYearsCountdown&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; print&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;3&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; sleep&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#BF00B8FF;--shiki-dark:#B88CF2FF&quot;&gt;1000&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; print&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; sleep&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#BF00B8FF;--shiki-dark:#B88CF2FF&quot;&gt;1000&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; print&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;1&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; sleep&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#BF00B8FF;--shiki-dark:#B88CF2FF&quot;&gt;1000&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt; print&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;Happy New Year! 🎉&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&quot;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In this hypothetical code snippet, the program would pause when it hits a &lt;code class=&quot;i165vvr1&quot;&gt;sleep()&lt;/code&gt; call, and then resume after the specified amount of time has passed.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Unfortunately, there is no &lt;code class=&quot;i165vvr1&quot;&gt;sleep&lt;/code&gt; function in JavaScript, because it’s a &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;single-threaded&lt;/em&gt; language.&lt;button class=&quot;t1cz8cv8&quot;&gt;&lt;span class=&quot;a1ni5s6f&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;e2cu4f7&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;span data-use-adaptive-colors=&quot;true&quot; id=&quot;:R1gneiavfelb:&quot; data-direction=&quot;n&quot; role=&quot;tooltip&quot; style=&quot;flex-direction:column&quot; class=&quot;p1lgzcrp l17lpp8k&quot;&gt;&lt;span class=&quot;p833mxt&quot;&gt;&lt;span class=&quot;pj0hw36&quot;&gt;&lt;span class=&quot;cffclov&quot;&gt;Technically, modern JavaScript has access to multiple threads via Web Workers, but those extra threads don&#39;t have access to the DOM, so they can’t really be used in most situations.&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 6&quot; style=&quot;--origin-y:0%&quot; class=&quot;s1vq0yeh s1k9z937&quot;&gt;&lt;path d=&quot;
        M 0 0
        C 6 0
        7.199999999999999 6
        12 6
        C 16.8 6
        18 0
        24 0
        Z
        &quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt; A “thread” is a long-running process that executes code. JavaScript only has one thread, and so it can only do one thing at a time. It can’t multitask. This is a problem because if our lone JavaScript thread is busy managing this countdown timer, it can’t do anything &lt;i&gt;else&lt;/i&gt;.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;When I was first learning about this stuff, it wasn’t immediately obvious to me why this was a problem. If the countdown timer is the only thing happening right now, isn’t it fine if the JS thread was fully occupied during that time??&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Well, even though JavaScript doesn’t have a &lt;code class=&quot;i165vvr1&quot;&gt;sleep&lt;/code&gt; function, it &lt;i&gt;does&lt;/i&gt; have some other functions that occupy the main thread for an extended amount of time. We can use those other methods to get a glimpse into what it would be like if JavaScript had a &lt;code class=&quot;i165vvr1&quot;&gt;sleep&lt;/code&gt; function.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;For example, &lt;code class=&quot;i165vvr1&quot;&gt;window.prompt()&lt;/code&gt;. This function is used to gather information from the user, and it halts execution of our code much like our hypothetical &lt;code class=&quot;i165vvr1&quot;&gt;sleep()&lt;/code&gt; function would.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Click the button in this playground, and then &lt;strong&gt;try to interact with the page&lt;/strong&gt; while the prompt is open:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-stacked=&quot;false&quot; class=&quot;il1gxx9&quot;&gt;&lt;div style=&quot;--color-text:hsl(210deg 10% 90%);--color-background:hsl(210deg 15% 6%);--color-blurred-background:hsl(210deg 15% 6% / 0.75);--color-muted-background:hsl(210deg 38% 15% / 0.85);--color-action:hsl(240deg 95% 62%);--color-primary:hsl(225deg 100% 75%);--color-secondary:hsl(333deg 100% 55%);--color-tertiary:hsl(280deg 100% 85%);--color-decorative:hsl(200deg 50% 60%);--color-info-100:hsl(214deg 40% 15%);--color-info-200:hsl(218deg 32% 20%);--color-info-300:hsl(218deg 30% 25%);--color-info-400:hsl(218deg 45% 40%);--color-info-500:hsl(225deg 100% 60%);--color-info-700:hsl(215deg 100% 72%);--color-warning-100:hsl(30deg 25% 11%);--color-warning-200:hsl(32deg 20% 15%);--color-warning-300:hsl(32deg 25% 20%);--color-warning-400:hsl(35deg 45% 35%);--color-warning-500:hsl(40deg 100% 50%);--color-warning-700:hsl(43deg 100% 72%);--color-success-100:hsl(176deg 35% 10%);--color-success-200:hsl(176deg 26% 14%);--color-success-300:hsl(176deg 28% 20%);--color-success-400:hsl(176deg 45% 30%);--color-success-500:hsl(160deg 100% 40%);--color-success-700:hsl(160deg 80% 65%);--color-cloud-100:hsl(210deg 15% 6%);--color-cloud-300:hsl(212deg 40% 9%);--color-cloud-400:hsl(213deg 40% 10%);--color-cloud-500:hsl(213deg 40% 12%);--color-sky-from:hsl(214deg 40% 11%);--color-sky-to:hsl(200deg 50% 30%);--color-sky-subtle:hsl(210deg 40% 16%);--color-gray-50:hsl(210deg 19% 9%);--color-gray-100:hsl(210deg 15% 12%);--color-gray-200:hsl(210deg 15% 18%);--color-gray-300:hsl(210deg 10% 30%);--color-gray-400:hsl(210deg 9% 40%);--color-gray-500:hsl(210deg 8% 50%);--color-gray-600:hsl(210deg 12% 55%);--color-gray-700:hsl(210deg 14% 66%);--color-gray-800:hsl(210deg 20% 77%);--color-gray-900:hsl(210deg 25% 88%);--color-gray-1000:hsl(210deg 25% 96%);--color-adaptive-white:hsl(210deg 25% 92%);--syntax-bg:hsl(210deg 15% 6%);--syntax-highlight:hsl(210deg 30% 18%);--syntax-txt:hsl(0deg 0% 100%);--syntax-comment:hsl(200deg 18% 51%);--syntax-prop:hsl(326deg 100% 61%);--syntax-bool:hsl(50deg 100% 50%);--syntax-val:hsl(210deg 12% 65%);--syntax-str:hsl(259deg 100% 71%);--syntax-name:hsl(280deg 100% 66%);--syntax-del:hsl(0deg 100% 67%);--syntax-regex:hsl(50deg 100% 50%);--syntax-fn:hsl(195deg 100% 50%);--color-info:hsl(225deg 100% 80%);--color-info-background:hsl(225deg 100% 80% / 0.1);--color-error:hsl(340deg 95% 60%);--color-error-background:hsl(340deg 95% 43% / 0.1);--color-success:hsl(160deg 100% 40%);--color-success-background:hsl(160deg 100% 40% / 0.1);--color-alert:hsl(40deg 100% 50%);--color-alert-background:hsl(40deg 100% 50% / 0.1);--color-page-background:hsl(210deg 15% 6%);--color-page-primary:hsl(225deg 100% 75%);--kbd-background-color:hsl(210deg 9% 40%);--kbd-border-color:hsl(210deg 10% 30%);--color-code-bg:hsl(210deg 15% 12%);--color-content-outline:hsl(210deg 10% 30%)&quot; class=&quot;full-bleed i1j6zvew s1hfctpl d16kq653&quot;&gt;&lt;header class=&quot;w14j10eb&quot;&gt;&lt;p class=&quot;tkoi9ui&quot;&gt;Code Playground&lt;/p&gt;&lt;div class=&quot;au0cxa1&quot;&gt;&lt;button class=&quot;wsn2i55 a6j6o3o&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:16px;height:16px;opacity:0.7;overflow:visible&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;g style=&quot;transform:rotate(-45deg)&quot; class=&quot;w15rf7yg&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;8&quot; width=&quot;24&quot; height=&quot;6&quot; rx=&quot;2&quot; fill=&quot;var(--color-gray-100)&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;18&quot; y1=&quot;8&quot; x2=&quot;18&quot; y2=&quot;14&quot;&gt;&lt;/line&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Format code using Prettier&lt;/span&gt;&lt;/button&gt;&lt;abbr style=&quot;display:inline-block&quot;&gt;&lt;div class=&quot;wy3w6yt&quot;&gt;&lt;button title=&quot;Reset code&quot; class=&quot;a6j6o3o&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:16px;height:16px;opacity:0.7&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;mask id=&quot;skip-icon-mask-:R39h1eiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;9&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;line x1=&quot;5&quot; y1=&quot;19&quot; x2=&quot;5&quot; y2=&quot;5&quot;&gt;&lt;/line&gt;&lt;polygon points=&quot;19 20 9 12 19 4 19 20&quot; mask=&quot;url(#skip-icon-mask-:R39h1eiavfelb:)&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Reset Code&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;pszdhfz&quot;&gt;&lt;span style=&quot;gap:1.5px&quot; class=&quot;w15sqd9b&quot;&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/abbr&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;/div&gt;&lt;div class=&quot;w198elmk&quot;&gt;&lt;div class=&quot;c1jztmaw&quot;&gt;&lt;div style=&quot;flex:547.4&quot; class=&quot;f15xiyga&quot;&gt;&lt;div style=&quot;min-height:100%&quot; class=&quot;whrzwqb&quot;&gt;&lt;div class=&quot;h1nlnw7n&quot;&gt;&lt;p class=&quot;tbdao9h&quot;&gt;HTML&lt;/p&gt;&lt;/div&gt;&lt;div in=&quot;false&quot; style=&quot;--max-height:80vh&quot; class=&quot;w1bgwmtf&quot;&gt;&lt;button class=&quot;f9ibg9h&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Focus the editor. This will trap focus until you press Escape.&lt;/span&gt;&lt;/button&gt;&lt;label&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Code editor:&lt;/span&gt;&lt;div translate=&quot;no&quot; class=&quot;c18okpq0&quot; style=&quot;position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden&quot;&gt;&lt;pre aria-hidden=&quot;true&quot; style=&quot;margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript keyword&quot; style=&quot;color:var(--syntax-str)&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript function&quot; style=&quot;color:var(--syntax-fn)&quot;&gt;askForName&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript keyword&quot; style=&quot;color:var(--syntax-str)&quot;&gt;const&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; name &lt;/span&gt;&lt;span class=&quot;token script language-javascript operator&quot; style=&quot;color:var(--syntax-str)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript dom variable&quot; style=&quot;color:var(--syntax-str)&quot;&gt;window&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token script language-javascript method function property-access&quot; style=&quot;color:var(--syntax-fn)&quot;&gt;prompt&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token script language-javascript string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;&#39;What is your name?&#39;&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript keyword&quot; style=&quot;color:var(--syntax-str)&quot;&gt;const&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; elem &lt;/span&gt;&lt;span class=&quot;token script language-javascript operator&quot; style=&quot;color:var(--syntax-str)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript dom variable&quot; style=&quot;color:var(--syntax-str)&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token script language-javascript method function property-access&quot; style=&quot;color:var(--syntax-fn)&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token script language-javascript string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;&#39;#greeting&#39;&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; elem&lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token script language-javascript property-access&quot;&gt;innerText&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript operator&quot; style=&quot;color:var(--syntax-str)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string template-punctuation string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;Hi &lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string interpolation interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string interpolation&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string interpolation interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;token script language-javascript template-string template-punctuation string&quot; style=&quot;color:var(--syntax-str);font-weight:var(--font-weight-medium)&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token script language-javascript punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token script language-javascript&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;script&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot; style=&quot;display:inline-block&quot;&gt;
        &lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-name&quot; style=&quot;color:var(--syntax-name);font-weight:var(--font-weight-medium)&quot;&gt;onclick&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value punctuation attr-equals&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value value javascript language-javascript function&quot; style=&quot;color:var(--syntax-fn);font-weight:var(--font-weight-medium)&quot;&gt;askForName&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value value javascript language-javascript punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value value javascript language-javascript punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token tag special-attr attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt; Click me&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;button&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token tag attr-name&quot; style=&quot;color:var(--syntax-name);font-weight:var(--font-weight-medium)&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation attr-equals&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag attr-value&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;greeting&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;&lt;/pre&gt;&lt;textarea style=&quot;margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot; class=&quot;npm__react-simple-code-editor__textarea&quot; autocapitalize=&quot;off&quot; autocomplete=&quot;off&quot; autocorrect=&quot;off&quot; spellcheck=&quot;false&quot; data-gramm=&quot;false&quot;&gt;&amp;lt;script&amp;gt;
        function askForName() {
        const name = window.prompt(&#39;What is your name?&#39;);
        const elem = document.querySelector(&#39;#greeting&#39;);
        elem.innerText = `Hi ${name}!`
        }
        &amp;lt;/script&amp;gt;
        &amp;lt;button onclick=&quot;askForName()&quot;&amp;gt;
        Click me
        &amp;lt;/button&amp;gt;
        &amp;lt;div id=&quot;greeting&quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/textarea&gt;&lt;style&gt;
        /**
        * Reset the text fill color so that placeholder is visible
        */
        .npm__react-simple-code-editor__textarea:empty {
        -webkit-text-fill-color: inherit !important;
        }
        /**
        * Hack to apply on some CSS on IE10 and IE11
        */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /**
        * IE doesn&#39;t support &#39;-webkit-text-fill-color&#39;
        * So we use &#39;color: transparent&#39; to make the text transparent on IE
        * Unlike other browsers, it doesn&#39;t affect caret color in IE
        */
        .npm__react-simple-code-editor__textarea {
        color: transparent !important;
        }
        .npm__react-simple-code-editor__textarea::selection {
        background-color: #accef7 !important;
        color: transparent !important;
        }
        }
        &lt;/style&gt;&lt;/div&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;button class=&quot;dijulrw&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Resize editor. Use left/right arrows.&lt;/span&gt;&lt;/button&gt;&lt;div style=&quot;flex:234.60000000000002&quot; class=&quot;s1c0ceq0&quot;&gt;&lt;div style=&quot;height:100%&quot; class=&quot;whrzwqb&quot;&gt;&lt;div class=&quot;h1nlnw7n&quot;&gt;&lt;p class=&quot;tbdao9h&quot;&gt;Result&lt;/p&gt;&lt;abbr title=&quot;Refresh pane&quot;&gt;&lt;button style=&quot;transform:rotate(0deg);opacity:0.7&quot; class=&quot;w11udlg3 ah084m5&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-refresh-cw&quot;&gt;&lt;path d=&quot;M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M21 3v5h-5&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M8 16H3v5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Refresh results pane&lt;/span&gt;&lt;/button&gt;&lt;/abbr&gt;&lt;/div&gt;&lt;div style=&quot;--height:100%;--flex:1&quot; class=&quot;wqqdb70&quot;&gt;&lt;iframe height=&quot;100%&quot; width=&quot;100%&quot; title=&quot;example&quot; frameborder=&quot;0&quot; loading=&quot;lazy&quot; class=&quot;fxdlgbu&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;Notice that while the prompt is open, the page is totally unresponsive?&lt;/strong&gt; You can&#39;t scroll, click any links, or select any text! The JavaScript thread is busy waiting for us to provide a value so that it can finish running that code. While it’s waiting, it can’t do anything &lt;i&gt;else&lt;/i&gt;, and so the browser locks down the UI.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Other languages have multiple threads, and so it&#39;s no big deal if one of them gets preoccupied for a while. In JavaScript, though, we only have the one, and it’s used for everything: handling events, managing network requests, updating the UI, etc.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;If we want to create a countdown, we need to find a way to do it without blocking the thread.&lt;/p&gt;
        &lt;aside class=&quot;i6el1g6 b1btlj5u&quot;&gt;&lt;div class=&quot;dwkrqh8&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.5&quot; height=&quot;34.5&quot; fill=&quot;none&quot; viewBox=&quot;0 0 57 69&quot; preserveAspectRatio=&quot;none&quot; class=&quot;sl0r50n&quot;&gt;&lt;path fill=&quot;var(--color-page-background)&quot; d=&quot;M54 0V0.716804C54 25.9434 35.0653 47.1517 10 50L0 57V0H54Z&quot; style=&quot;transition:fill var(--color-swap-duration) var(--color-swap-timing-function)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;var(--color-primary)&quot; d=&quot;M56.9961 4.15364C57.0809 2.49896 55.8083 1.08879 54.1536 1.00394C52.499 0.919082 51.0888 2.19168 51.0039 3.84636L56.9961 4.15364ZM9.09704 51.7557L8.49716 48.8163L9.09704 51.7557ZM6 69V59.2227H0V69H6ZM9.69692 54.6951L14.3373 53.7481L13.1375 47.8693L8.49716 48.8163L9.69692 54.6951ZM14.3373 53.7481C38.202 48.8777 55.7486 28.4783 56.9961 4.15364L51.0039 3.84636C49.8967 25.4384 34.3213 43.5461 13.1375 47.8693L14.3373 53.7481ZM6 59.2227C6 57.0268 7.54537 55.1342 9.69692 54.6951L8.49716 48.8163C3.55195 49.8255 0 54.1756 0 59.2227H6Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div class=&quot;f1dj028m&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1m3o2ch&quot;&gt;&lt;/div&gt;&lt;div class=&quot;iohjz9i&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-info&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12 16v-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 8h.01&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;strong id=&quot;aside-but-why-is-the-entire-ui-frozen&quot; class=&quot;t1xqw7pl&quot;&gt;But why is the entire UI frozen??&lt;/strong&gt;&lt;div class=&quot;c690lmu&quot;&gt;&lt;p class=&quot;prg881n&quot;&gt;In the example above with &lt;code class=&quot;i165vvr1&quot;&gt;window.prompt()&lt;/code&gt;, the entire UI becomes unresponsive while the browser waits for us to provide a value.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;This is kinda strange… the browser doesn’t rely on JavaScript to scroll the page, or to select text. So why can’t we do any of those things?&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;I think browsers work this way to prevent bugs. Scrolling the page, for example, triggers “scroll” events which can be caught and handled with JavaScript. If the JS thread is occupied while the scroll event happens, that code never runs, which could lead to bugs if the developer assumed that scroll events would always be handled.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;It could also be a UX thing; maybe the browser disables the UI so that the user can’t ignore the prompt. Either way, though, I suspect a native &lt;code class=&quot;i165vvr1&quot;&gt;sleep&lt;/code&gt; function would need to work the same way to prevent bugs.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;
        &lt;h2 id=&quot;callbacks&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;callbacks-2&quot; href=&quot;https://www.joshwcomeau.com/javascript/promises/#callbacks-2&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Callbacks&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The main tool in our toolbox for solving these sorts of problems is &lt;code class=&quot;i165vvr1&quot;&gt;setTimeout&lt;/code&gt;. &lt;code class=&quot;i165vvr1&quot;&gt;setTimeout&lt;/code&gt; is a function which accepts two arguments:&lt;/p&gt;
        &lt;ol class=&quot;oc96fnv&quot;&gt;
        &lt;li class=&quot;wp18jjy&quot;&gt;&lt;div class=&quot;l1n7gg9f&quot;&gt;A chunk of work to do, at some point in the future.&lt;/div&gt;&lt;/li&gt;
        &lt;li class=&quot;wp18jjy&quot;&gt;&lt;div class=&quot;l1n7gg9f&quot;&gt;The amount of time to wait for.&lt;/div&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Here&#39;s an example:&lt;/p&gt;
        &lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;true&quot; style=&quot;--max-height:auto&quot; class=&quot;coaxrjn c1qvfy1x ae97emi&quot;&gt;&lt;button class=&quot;wqxmqd2&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1htlkn0&quot;&gt;&lt;span style=&quot;transform:rotate(0deg)&quot; class=&quot;i14jtb2i&quot;&gt;&lt;span style=&quot;width:24px;height:24px;--duration:1422.2222222222222ms;--size:24px&quot; class=&quot;w1gpdsbs&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-loader&quot;&gt;&lt;path d=&quot;M12 2v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 7.8 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 16.2 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 18v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 19.1 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 4.9 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span style=&quot;opacity:0;transform:scale(0)&quot; class=&quot;c6am5ut&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-check&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;haso6lc wlgbkjj&quot;&gt;Copy to clipboard&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;w19zxykk w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-light josh-theme-dark&quot; style=&quot;--shiki-light:#000000;--shiki-dark:#ffffffff;--shiki-light-bg:#f5f6f900;--shiki-dark-bg:#0d0f1200&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#2A2A2AFF;--shiki-dark:#FFFFFFFF&quot;&gt;console&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;Start&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;setTimeout&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt; ()&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#C792EA&quot;&gt; =&amp;gt;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#2A2A2AFF;--shiki-dark:#FFFFFFFF&quot;&gt; console&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;After one second&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt; },&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#BF00B8FF;--shiki-dark:#B88CF2FF&quot;&gt; 1000&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The chunk of work is passed in through a function. This pattern is known as a &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;callback.&lt;/em&gt;&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The hypothetical &lt;code class=&quot;i165vvr1&quot;&gt;sleep()&lt;/code&gt; function we saw before is like calling a company and waiting on hold for the next available representative. &lt;code class=&quot;i165vvr1&quot;&gt;setTimeout()&lt;/code&gt; is like pressing &lt;i&gt;1&lt;/i&gt; to have them &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;call you back&lt;/em&gt; when the representative is available. You can hang up the phone and get on with your life.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;code class=&quot;i165vvr1&quot;&gt;setTimeout()&lt;/code&gt; is known as an &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;asynchronous&lt;/em&gt; function. This means that it doesn’t block the thread. By contrast, &lt;code class=&quot;i165vvr1&quot;&gt;window.prompt()&lt;/code&gt; is &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;synchronous&lt;/em&gt;, because the JavaScript thread can&#39;t do anything else while it’s waiting.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The big downside with asynchronous code is that it means our code won&#39;t always run in a linear order. Consider the following setup:&lt;/p&gt;
        &lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;true&quot; style=&quot;--max-height:auto&quot; class=&quot;coaxrjn c1qvfy1x ae97emi&quot;&gt;&lt;button class=&quot;wqxmqd2&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1htlkn0&quot;&gt;&lt;span style=&quot;transform:rotate(0deg)&quot; class=&quot;i14jtb2i&quot;&gt;&lt;span style=&quot;width:24px;height:24px;--duration:1422.2222222222222ms;--size:24px&quot; class=&quot;w1gpdsbs&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-loader&quot;&gt;&lt;path d=&quot;M12 2v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 7.8 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 16.2 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 18v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 19.1 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 4.9 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span style=&quot;opacity:0;transform:scale(0)&quot; class=&quot;c6am5ut&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;12&quot; height=&quot;12&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-check&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span class=&quot;haso6lc wlgbkjj&quot;&gt;Copy to clipboard&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;w19zxykk w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-light josh-theme-dark&quot; style=&quot;--shiki-light:#000000;--shiki-dark:#ffffffff;--shiki-light-bg:#f5f6f900;--shiki-dark-bg:#0d0f1200&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#2A2A2AFF;--shiki-dark:#FFFFFFFF&quot;&gt;console&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;1. Before setTimeout&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;setTimeout&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#C792EA&quot;&gt; =&amp;gt;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#2A2A2AFF;--shiki-dark:#FFFFFFFF&quot;&gt; console&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;2. Inside setTimeout&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;},&lt;/span&gt;&lt;span style=&quot;--shiki-light:#BF00B8FF;--shiki-dark:#B88CF2FF&quot;&gt; 500&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;--shiki-light:#2A2A2AFF;--shiki-dark:#FFFFFFFF&quot;&gt;console&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;--shiki-light:#3D5AFEFF;--shiki-dark:#FF38A9FF;--shiki-light-font-style:italic;--shiki-dark-font-style:italic&quot;&gt;log&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#FFD500FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;3. After setTimeout&lt;/span&gt;&lt;span style=&quot;--shiki-light:#651FFFFF;--shiki-dark:#B9C4D0FF;--shiki-light-font-weight:bold;--shiki-dark-font-weight:inherit&quot;&gt;&#39;&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#FFFFFFFF&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;--shiki-light:#000000;--shiki-dark:#B9C4D0FF&quot;&gt;;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;You might expect these logs to fire in order from top to bottom: &lt;code class=&quot;i165vvr1&quot;&gt;1&lt;/code&gt; &amp;gt; &lt;code class=&quot;i165vvr1&quot;&gt;2&lt;/code&gt; &amp;gt; &lt;code class=&quot;i165vvr1&quot;&gt;3&lt;/code&gt;. &lt;strong&gt;But remember, the whole idea with callbacks is that we’re scheduling a call back.&lt;/strong&gt; The JavaScript thread doesn’t sit around and

...

@github-actions github-actions bot added the Auto: Route Test Complete Auto route test has finished on given PR label Jan 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

http://localhost:1200/joshwcomeau/latest - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Articles and Tutorials | Josh W. Comeau</title>
    <link>https://www.joshwcomeau.com</link>
    <atom:link href="http://localhost:1200/joshwcomeau/latest" rel="self" type="application/rss+xml"></atom:link>
    <description>Friendly tutorials for developers. Focus on React, CSS, Animation, and more! - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Wed, 08 Jan 2025 07:00:30 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>Next-level frosted glass with backdrop-filter</title>
      <description>&lt;div class=&quot;t1ma5bj5&quot;&gt;&lt;nav style=&quot;opacity:0;--x:20px&quot; class=&quot;wt7fu6i&quot;&gt;&lt;h2 class=&quot;th0e8y&quot;&gt;Table of Contents&lt;/h2&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#introduction&quot; style=&quot;color:var(--color-primary);opacity:1;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Introduction&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#css-filters-1&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;CSS filters&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#the-issue-2&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;The Issue&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#pointer-events-3&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Pointer events&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#flickering-top-4&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Flickering top&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#thicker-glass-5&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Thicker glass&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#browser-support-6&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Browser support&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#glassy-edge-7&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Glassy edge&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#the-final-code-8&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;The final code&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#continue-learning-9&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Continue learning&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;l1mdfuoz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;a id=&quot;introduction&quot; class=&quot;wcmb8ol&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;p class=&quot;prg881n&quot;&gt;One of my all-time favourite CSS tricks is using &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter: blur()&lt;/code&gt; to create a frosted glass effect. I use it in just about every project I work on, including this blog!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Here’s a quick demo, to show what I’m talking about:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div class=&quot;o11h7o12 w1bd8cgi&quot; style=&quot;overflow:hidden&quot;&gt;&lt;div class=&quot;hduekzx&quot;&gt;&lt;div class=&quot;t1xdhus0&quot;&gt;&lt;div class=&quot;t1vhg4x9&quot;&gt;&lt;div class=&quot;rptyea t8ndwpz&quot;&gt;&lt;/div&gt;&lt;div class=&quot;y1qao05t t8ndwpz&quot;&gt;&lt;/div&gt;&lt;div class=&quot;g1v2ob21 t8ndwpz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;tj6926w&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 16 16&quot; preserveAspectRatio=&quot;none&quot; class=&quot;lep27c6 choiq24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0 16c8.837 0 16-7.163 16-16v16z&quot; style=&quot;transform:rotate(0deg);transform-origin:center center&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span&gt;Some Example Website&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 16 16&quot; preserveAspectRatio=&quot;none&quot; class=&quot;r2mz821 choiq24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0 16c8.837 0 16-7.163 16-16v16z&quot; style=&quot;transform:rotate(90deg);transform-origin:center center&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;a13tcou3&quot;&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-arrow-left&quot;&gt;&lt;path d=&quot;m12 19-7-7 7-7&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M19 12H5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-arrow-right&quot;&gt;&lt;path d=&quot;M5 12h14&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m12 5 7 7-7 7&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-rotate-cw&quot;&gt;&lt;path d=&quot;M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M21 3v5h-5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class=&quot;a1booqr&quot;&gt;&lt;span&gt;https://www.joshwcomeau.com/example-website&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;overflow:clip&quot;&gt;&lt;div class=&quot;wi9xlz4 s1hfctpl d16kq653&quot;&gt;&lt;div class=&quot;hpv2kfm&quot;&gt;&lt;div class=&quot;b1dh7eg0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;bi95upp&quot;&gt;&lt;/div&gt;&lt;p class=&quot;l19j3i1d&quot;&gt;Some Website&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;cufzfud&quot;&gt;&lt;img src=&quot;https://www.joshwcomeau.com/images/backdrop-filter/cupcake.png&quot; style=&quot;animation-play-state:paused&quot; class=&quot;c19tvtvc&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;p&gt;This is an example website showing how I typically use&lt;!-- --&gt; &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt; to create glassy headers.&lt;/p&gt;&lt;p class=&quot;o1fnc03u&quot;&gt;Notice that as the cupcake moves behind the header, it appears blurry, as it would if it was passing behind frosted glass.&lt;/p&gt;&lt;div class=&quot;atopy0n&quot;&gt;&lt;button style=&quot;--background-color:hsl(175deg 60% 25%)&quot; data-discouraged=&quot;false&quot; class=&quot;b1t96eke w19mrn5v&quot;&gt;&lt;span style=&quot;order:1&quot; class=&quot;iwv8n0j c1rpf4ut&quot;&gt;&lt;span style=&quot;--background-color:hsl(168deg 70% 35%)&quot; class=&quot;i1qpbbb9&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1m1cbkp&quot;&gt;&lt;span style=&quot;width:20px;height:20px;--duration:1422.2222222222222ms;--size:20px&quot; class=&quot;w1gpdsbs&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-loader&quot;&gt;&lt;path d=&quot;M12 2v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 7.8 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 16.2 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 18v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 19.1 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 4.9 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;order:2&quot; class=&quot;c7sw782&quot;&gt;Play/Pause Animation&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;This effect helps us add depth and realism to our projects. It’s lovely.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;But when I see this effect in the wild, it’s almost always missing some crucial optimizations.&lt;/strong&gt; A couple of small changes can make our frosted glass &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;so&lt;/em&gt; much more lush and realistic!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In this post, you’ll learn how to make the slickest frosted glass ever ✨. We’ll also learn quite a bit about CSS filters along the way!&lt;/p&gt;
        &lt;aside class=&quot;i6el1g6 b1btlj5u&quot;&gt;&lt;div class=&quot;dwkrqh8&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.5&quot; height=&quot;34.5&quot; fill=&quot;none&quot; viewBox=&quot;0 0 57 69&quot; preserveAspectRatio=&quot;none&quot; class=&quot;sl0r50n&quot;&gt;&lt;path fill=&quot;var(--color-page-background)&quot; d=&quot;M54 0V0.716804C54 25.9434 35.0653 47.1517 10 50L0 57V0H54Z&quot; style=&quot;transition:fill var(--color-swap-duration) var(--color-swap-timing-function)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;var(--color-primary)&quot; d=&quot;M56.9961 4.15364C57.0809 2.49896 55.8083 1.08879 54.1536 1.00394C52.499 0.919082 51.0888 2.19168 51.0039 3.84636L56.9961 4.15364ZM9.09704 51.7557L8.49716 48.8163L9.09704 51.7557ZM6 69V59.2227H0V69H6ZM9.69692 54.6951L14.3373 53.7481L13.1375 47.8693L8.49716 48.8163L9.69692 54.6951ZM14.3373 53.7481C38.202 48.8777 55.7486 28.4783 56.9961 4.15364L51.0039 3.84636C49.8967 25.4384 34.3213 43.5461 13.1375 47.8693L14.3373 53.7481ZM6 59.2227C6 57.0268 7.54537 55.1342 9.69692 54.6951L8.49716 48.8163C3.55195 49.8255 0 54.1756 0 59.2227H6Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div class=&quot;f1dj028m&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1m3o2ch&quot;&gt;&lt;/div&gt;&lt;div class=&quot;iohjz9i&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-info&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12 16v-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 8h.01&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;strong id=&quot;aside-credit-where-credit-is-due&quot; class=&quot;t1xqw7pl&quot;&gt;Credit where credit is due&lt;/strong&gt;&lt;div class=&quot;c690lmu&quot;&gt;&lt;p class=&quot;prg881n&quot;&gt;I learned about this effect from &lt;a rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot; class=&quot;a1tdgj4y s1j91s21&quot; href=&quot;https://expensive.toys/&quot;&gt;Artur&lt;!-- --&gt; &lt;span class=&quot;p7a6phg&quot;&gt;Bien’s&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:0.7em;height:0.7em;opacity:1&quot; class=&quot;s14qet46 s1gvsyfu&quot;&gt;&lt;mask id=&quot;external-icon-mask-:R2qm8deiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;10&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;14&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;15&quot; height=&quot;15&quot; rx=&quot;2&quot; mask=&quot;url(#external-icon-mask-:R2qm8deiavfelb:)&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M 10 14 L 20 4 h -6 h 6 v 6&quot; stroke=&quot;currentColor&quot; class=&quot;amgfren&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;(opens in new tab)&lt;/span&gt;&lt;/span&gt;&lt;/a&gt; incredible demos. He credits &lt;a rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot; class=&quot;a1tdgj4y s1j91s21&quot; href=&quot;https://www.jamiegray.net/&quot;&gt;Jamie&lt;!-- --&gt; &lt;span class=&quot;p7a6phg&quot;&gt;Gray&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:0.7em;height:0.7em;opacity:1&quot; class=&quot;s14qet46 s1gvsyfu&quot;&gt;&lt;mask id=&quot;external-icon-mask-:R2sm8deiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;10&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;14&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;15&quot; height=&quot;15&quot; rx=&quot;2&quot; mask=&quot;url(#external-icon-mask-:R2sm8deiavfelb:)&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M 10 14 L 20 4 h -6 h 6 v 6&quot; stroke=&quot;currentColor&quot; class=&quot;amgfren&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;(opens in new tab)&lt;/span&gt;&lt;/span&gt;&lt;/a&gt; for the original concept.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;
        &lt;h2 id=&quot;css-filters&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;css-filters-1&quot; href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#css-filters-1&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;CSS filters&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;To briefly explain the underlying concept: CSS gives us quick and easy access to SVG filters via the &lt;code class=&quot;i165vvr1&quot;&gt;filter&lt;/code&gt; property.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;For example, we can give elements a Gaussian blur with &lt;code class=&quot;i165vvr1&quot;&gt;filter: blur()&lt;/code&gt;:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;bottom&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div class=&quot;wskxkqa&quot;&gt;&lt;img alt=&quot;My 3D mascot smiling with his tongue out. It’s very blurry, but dragging the slider makes it clearer&quot; src=&quot;https://www.joshwcomeau.com/images/josh-originals/josh-tongue-dark.png&quot; loading=&quot;lazy&quot; style=&quot;filter:blur(16px)&quot; class=&quot;j5sqeuc&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;div class=&quot;c162apj7&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;--template-cols:1fr 1fr;grid-template-columns:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div style=&quot;max-width:400px;width:100%;margin-inline:auto&quot; class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgleiavfelb:_radius&quot; class=&quot;lpsyt9t&quot;&gt;Blur radius&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;16px&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgleiavfelb:_radius&quot; min=&quot;0&quot; max=&quot;16&quot; class=&quot;i1i8zjy7&quot; value=&quot;16&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;There are lots of fun filter options, the sorts of things you’d find in image-editing software. Like, rotating the hue of all the colors:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;bottom&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div class=&quot;w1d4uhch&quot;&gt;&lt;img alt=&quot;My 3D mascot making a puzzled face. Dragging the slider causes him to become unnatural shades of green and pink.&quot; src=&quot;https://www.joshwcomeau.com/images/newsletter/joy-of-react-mascot.png&quot; loading=&quot;lazy&quot; style=&quot;filter:hue-rotate(0deg)&quot; class=&quot;m1wtl9k0&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;div class=&quot;c1kud80y&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;--template-cols:1fr 1fr;grid-template-columns:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div style=&quot;max-width:400px;width:100%;margin-inline:auto&quot; class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgpeiavfelb:_rotation&quot; class=&quot;lpsyt9t&quot;&gt;Hue rotation&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;0deg&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgpeiavfelb:_rotation&quot; min=&quot;0&quot; max=&quot;360&quot; class=&quot;i1i8zjy7&quot; value=&quot;0&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In these examples, I’m applying the filters to an &lt;code class=&quot;i165vvr1&quot;&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag, but we can apply them to standard DOM nodes as well:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;bottom&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div class=&quot;w1icc7dx&quot;&gt;&lt;div style=&quot;filter:blur(0px) sepia(0%)&quot; class=&quot;c1l5p6hh&quot;&gt;&lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;c1koe0ch&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgteiavfelb:_radius&quot; class=&quot;lpsyt9t&quot;&gt;Blur radius&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;0px&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgteiavfelb:_radius&quot; min=&quot;0&quot; max=&quot;16&quot; step=&quot;0.1&quot; class=&quot;i1i8zjy7&quot; value=&quot;0&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgteiavfelb:_sepia&quot; class=&quot;lpsyt9t&quot;&gt;Sepia percentage&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;0%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgteiavfelb:_sepia&quot; min=&quot;0&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;0&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Pretty neat, right?&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Things get even cooler with &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt;. This property lets us apply these same filters to the stuff &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;behind&lt;/em&gt; a given element.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;For example:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;bottom&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div class=&quot;w1qszusq&quot;&gt;&lt;div class=&quot;isvxvbh&quot;&gt;&lt;img src=&quot;https://www.joshwcomeau.com/images/backdrop-filter/tokyo.jpg&quot; loading=&quot;lazy&quot; class=&quot;tvcyp0e&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;div style=&quot;top:80%;left:50%;--scale:2;-webkit-backdrop-filter:sepia(50%) brightness(130%);backdrop-filter:sepia(50%) brightness(130%)&quot; class=&quot;ctfyewy&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;ck6v2m7&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rh5eiavfelb:_sepia&quot; class=&quot;lpsyt9t&quot;&gt;Sepia&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;50%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rh5eiavfelb:_sepia&quot; min=&quot;0&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;50&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rh5eiavfelb:_brightness&quot; class=&quot;lpsyt9t&quot;&gt;Brightness&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;130%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rh5eiavfelb:_brightness&quot; min=&quot;50&quot; max=&quot;300&quot; class=&quot;i1i8zjy7&quot; value=&quot;130&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In this demo, the &lt;code class=&quot;i165vvr1&quot;&gt;.magic-ring&lt;/code&gt; element sits in front of a photo (&lt;a rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot; class=&quot;a1tdgj4y s1j91s21&quot; href=&quot;https://unsplash.com/photos/assorted-signages-on-buildings-nTBW1cOY1qI&quot;&gt; &lt;span class=&quot;p7a6phg&quot;&gt;source&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:0.7em;height:0.7em;opacity:1&quot; class=&quot;s14qet46 s1gvsyfu&quot;&gt;&lt;mask id=&quot;external-icon-mask-:Rn17eiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;10&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;14&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;15&quot; height=&quot;15&quot; rx=&quot;2&quot; mask=&quot;url(#external-icon-mask-:Rn17eiavfelb:)&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M 10 14 L 20 4 h -6 h 6 v 6&quot; stroke=&quot;currentColor&quot; class=&quot;amgfren&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;(opens in new tab)&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;). It uses the &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt; property to apply some filtering to everything behind it, which can be used for some pretty artistic effects.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;In practice, I pretty much only use &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt; for one use case: blurring everything behind an element, usually a header, to create the “frosted glass” effect I mentioned earlier:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div class=&quot;o11h7o12 w1bd8cgi&quot; style=&quot;overflow:hidden&quot;&gt;&lt;div class=&quot;hduekzx&quot;&gt;&lt;div class=&quot;t1xdhus0&quot;&gt;&lt;div class=&quot;t1vhg4x9&quot;&gt;&lt;div class=&quot;rptyea t8ndwpz&quot;&gt;&lt;/div&gt;&lt;div class=&quot;y1qao05t t8ndwpz&quot;&gt;&lt;/div&gt;&lt;div class=&quot;g1v2ob21 t8ndwpz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;tj6926w&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 16 16&quot; preserveAspectRatio=&quot;none&quot; class=&quot;lep27c6 choiq24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0 16c8.837 0 16-7.163 16-16v16z&quot; style=&quot;transform:rotate(0deg);transform-origin:center center&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span&gt;Some Example Website&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 16 16&quot; preserveAspectRatio=&quot;none&quot; class=&quot;r2mz821 choiq24&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0 16c8.837 0 16-7.163 16-16v16z&quot; style=&quot;transform:rotate(90deg);transform-origin:center center&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;a13tcou3&quot;&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-arrow-left&quot;&gt;&lt;path d=&quot;m12 19-7-7 7-7&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M19 12H5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-arrow-right&quot;&gt;&lt;path d=&quot;M5 12h14&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m12 5 7 7-7 7&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div aria-hidden=&quot;true&quot; class=&quot;fn6azp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-rotate-cw&quot;&gt;&lt;path d=&quot;M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M21 3v5h-5&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class=&quot;a1booqr&quot;&gt;&lt;span&gt;https://www.joshwcomeau.com/example-website&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;overflow:clip&quot;&gt;&lt;div class=&quot;wi9xlz4 s1hfctpl d16kq653&quot;&gt;&lt;div class=&quot;hpv2kfm&quot;&gt;&lt;div class=&quot;b1dh7eg0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;bi95upp&quot;&gt;&lt;/div&gt;&lt;p class=&quot;l19j3i1d&quot;&gt;Some Website&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;cufzfud&quot;&gt;&lt;img src=&quot;https://www.joshwcomeau.com/images/backdrop-filter/cupcake.png&quot; style=&quot;animation-play-state:paused&quot; class=&quot;c19tvtvc&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;p&gt;This is an example website showing how I typically use&lt;!-- --&gt; &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt; to create glassy headers.&lt;/p&gt;&lt;p class=&quot;o1fnc03u&quot;&gt;Notice that as the cupcake moves behind the header, it appears blurry, as it would if it was passing behind frosted glass.&lt;/p&gt;&lt;div class=&quot;atopy0n&quot;&gt;&lt;button style=&quot;--background-color:hsl(175deg 60% 25%)&quot; data-discouraged=&quot;false&quot; class=&quot;b1t96eke w19mrn5v&quot;&gt;&lt;span style=&quot;order:1&quot; class=&quot;iwv8n0j c1rpf4ut&quot;&gt;&lt;span style=&quot;--background-color:hsl(168deg 70% 35%)&quot; class=&quot;i1qpbbb9&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1m1cbkp&quot;&gt;&lt;span style=&quot;width:20px;height:20px;--duration:1422.2222222222222ms;--size:20px&quot; class=&quot;w1gpdsbs&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-loader&quot;&gt;&lt;path d=&quot;M12 2v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 7.8 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M18 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m16.2 16.2 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 18v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 19.1 2.9-2.9&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 12h4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m4.9 4.9 2.9 2.9&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;order:2&quot; class=&quot;c7sw782&quot;&gt;Play/Pause Animation&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Alright. Let’s talk about the thing most developers miss.&lt;/p&gt;
        &lt;h2 id=&quot;the-issue&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;the-issue-2&quot; href=&quot;https://www.joshwcomeau.com/css/backdrop-filter/#the-issue-2&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;The Issue&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;Here’s the problem:&lt;/strong&gt; The &lt;code class=&quot;i165vvr1&quot;&gt;backdrop-filter&lt;/code&gt; algorithm only considers the pixels that are &lt;i&gt;directly behind&lt;/i&gt; the element.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;For filters like &lt;code class=&quot;i165vvr1&quot;&gt;brightness&lt;/code&gt; or &lt;code class=&quot;i165vvr1&quot;&gt;hue-rotate&lt;/code&gt;, that makes perfect sense. With blur, though, we actually want to consider pixels that are &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;near&lt;/em&gt; the element too.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;This is one of those things where a demo is worth a thousand words. Check out the difference:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;i1df5wci s360ott&quot;&gt;&lt;div id=&quot;:Rhneiavfelb:_mode&quot; class=&quot;w73h7tw&quot;&gt;&lt;div class=&quot;r1cct0ab&quot;&gt;&lt;button value=&quot;default&quot; style=&quot;opacity:1&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:4px;filter:saturate(100%);opacity:1&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;Default&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;fixed&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;Tweaked&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;wr5us8n s1hfctpl d16kq653&quot;&gt;&lt;div class=&quot;hhqru8&quot;&gt;&lt;div class=&quot;g8qz4zc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;animation-play-state:running&quot; class=&quot;b1uj7lhw&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;awqze7l&quot;&gt;&lt;button style=&quot;--background-color:hsl(175deg 60% 25%)&quot; data-discouraged=&quot;false&quot; class=&quot;b1rsl36b w19mrn5v&quot;&gt;&lt;span style=&quot;order:1&quot; class=&quot;iwv8n0j c1rpf4ut&quot;&gt;&lt;span style=&quot;--background-color:hsl(168deg 70% 35%)&quot; class=&quot;i1qpbbb9&quot;&gt;&lt;span style=&quot;transform:translate(0px, 0px)
        rotate(0deg)
        scale(1);backface-visibility:hidden&quot; class=&quot;i1m1cbkp&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-pause&quot;&gt;&lt;rect x=&quot;14&quot; y=&quot;4&quot; width=&quot;4&quot; height=&quot;16&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;6&quot; y=&quot;4&quot; width=&quot;4&quot; height=&quot;16&quot; rx=&quot;1&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;order:2&quot; class=&quot;c7sw782&quot;&gt;Play/Pause Animation&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;By default, the gaussian blur algorithm is applied to all of the pixels behind the element. This means that if a big colorful element is &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;near&lt;/em&gt; the element, it won’t have any effect.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;That’s not really how frosted glass works in real life though. Light bounces off of objects and then goes through the glass. It looks &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;so much better&lt;/em&gt; when the blurring algorithm includes nearby content.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Unfortunately, this isn’t something we can configure directly. Instead, we need to be a bit crafty.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Here’s the code:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-stacked=&quot;false&quot; class=&quot;il1gxx9&quot;&gt;&lt;div style=&quot;--color-text:hsl(210deg 10% 90%);--color-background:hsl(210deg 15% 6%);--color-blurred-background:hsl(210deg 15% 6% / 0.75);--color-muted-background:hsl(210deg 38% 15% / 0.85);--color-action:hsl(240deg 95% 62%);--color-primary:hsl(225deg 100% 75%);--color-secondary:hsl(333deg 100% 55%);--color-tertiary:hsl(280deg 100% 85%);--color-decorative:hsl(200deg 50% 60%);--color-info-100:hsl(214deg 40% 15%);--color-info-200:hsl(218deg 32% 20%);--color-info-300:hsl(218deg 30% 25%);--color-info-400:hsl(218deg 45% 40%);--color-info-500:hsl(225deg 100% 60%);--color-info-700:hsl(215deg 100% 72%);--color-warning-100:hsl(30deg 25% 11%);--color-warning-200:hsl(32deg 20% 15%);--color-warning-300:hsl(32deg 25% 20%);--color-warning-400:hsl(35deg 45% 35%);--color-warning-500:hsl(40deg 100% 50%);--color-warning-700:hsl(43deg 100% 72%);--color-success-100:hsl(176deg 35% 10%);--color-success-200:hsl(176deg 26% 14%);--color-success-300:hsl(176deg 28% 20%);--color-success-400:hsl(176deg 45% 30%);--color-success-500:hsl(160deg 100% 40%);--color-success-700:hsl(160deg 80% 65%);--color-cloud-100:hsl(210deg 15% 6%);--color-cloud-300:hsl(212deg 40% 9%);--color-cloud-400:hsl(213deg 40% 10%);--color-cloud-500:hsl(213deg 40% 12%);--color-sky-from:hsl(214deg 40% 11%);--color-sky-to:hsl(200deg 50% 30%);--color-sky-subtle:hsl(210deg 40% 16%);--color-gray-50:hsl(210deg 19% 9%);--color-gray-100:hsl(210deg 15% 12%);--color-gray-200:hsl(210deg 15% 18%);--color-gray-300:hsl(210deg 10% 30%);--color-gray-400:hsl(210deg 9% 40%);--color-gray-500:hsl(210deg 8% 50%);--color-gray-600:hsl(210deg 12% 55%);--color-gray-700:hsl(210deg 14% 66%);--color-gray-800:hsl(210deg 20% 77%);--color-gray-900:hsl(210deg 25% 88%);--color-gray-1000:hsl(210deg 25% 96%);--color-adaptive-white:hsl(210deg 25% 92%);--syntax-bg:hsl(210deg 15% 6%);--syntax-highlight:hsl(210deg 30% 18%);--syntax-txt:hsl(0deg 0% 100%);--syntax-comment:hsl(200deg 18% 51%);--syntax-prop:hsl(326deg 100% 61%);--syntax-bool:hsl(50deg 100% 50%);--syntax-val:hsl(210deg 12% 65%);--syntax-str:hsl(259deg 100% 71%);--syntax-name:hsl(280deg 100% 66%);--syntax-del:hsl(0deg 100% 67%);--syntax-regex:hsl(50deg 100% 50%);--syntax-fn:hsl(195deg 100% 50%);--color-info:hsl(225deg 100% 80%);--color-info-background:hsl(225deg 100% 80% / 0.1);--color-error:hsl(340deg 95% 60%);--color-error-background:hsl(340deg 95% 43% / 0.1);--color-success:hsl(160deg 100% 40%);--color-success-background:hsl(160deg 100% 40% / 0.1);--color-alert:hsl(40deg 100% 50%);--color-alert-background:hsl(40deg 100% 50% / 0.1);--color-page-background:hsl(210deg 15% 6%);--color-page-primary:hsl(225deg 100% 75%);--kbd-background-color:hsl(210deg 9% 40%);--kbd-border-color:hsl(210deg 10% 30%);--color-code-bg:hsl(210deg 15% 12%);--color-content-outline:hsl(210deg 10% 30%)&quot; class=&quot;full-bleed i1j6zvew s1hfctpl d16kq653&quot;&gt;&lt;header class=&quot;w14j10eb&quot;&gt;&lt;p class=&quot;tkoi9ui&quot;&gt;Code Playground&lt;/p&gt;&lt;div class=&quot;au0cxa1&quot;&gt;&lt;button class=&quot;wsn2i55 a6j6o3o&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:16px;height:16px;opacity:0.7;overflow:visible&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;g style=&quot;transform:rotate(-45deg)&quot; class=&quot;w15rf7yg&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;8&quot; width=&quot;24&quot; height=&quot;6&quot; rx=&quot;2&quot; fill=&quot;var(--color-gray-100)&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;18&quot; y1=&quot;8&quot; x2=&quot;18&quot; y2=&quot;14&quot;&gt;&lt;/line&gt;&lt;/g&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Format code using Prettier&lt;/span&gt;&lt;/button&gt;&lt;abbr style=&quot;display:inline-block&quot;&gt;&lt;div class=&quot;wy3w6yt&quot;&gt;&lt;button title=&quot;Reset code&quot; class=&quot;a6j6o3o&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:16px;height:16px;opacity:0.7&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;mask id=&quot;skip-icon-mask-:R39i1eiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;9&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;line x1=&quot;5&quot; y1=&quot;19&quot; x2=&quot;5&quot; y2=&quot;5&quot;&gt;&lt;/line&gt;&lt;polygon points=&quot;19 20 9 12 19 4 19 20&quot; mask=&quot;url(#skip-icon-mask-:R39i1eiavfelb:)&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Reset Code&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;pszdhfz&quot;&gt;&lt;span style=&quot;gap:1.5px&quot; class=&quot;w15sqd9b&quot;&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;span data-is-filled=&quot;false&quot; style=&quot;width:3px;height:3px;background-color:var(--color-primary)&quot; class=&quot;dhkb22d&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/abbr&gt;&lt;/div&gt;&lt;/header&gt;&lt;div&gt;&lt;/div&gt;&lt;div class=&quot;w198elmk&quot;&gt;&lt;div class=&quot;c1jztmaw&quot;&gt;&lt;div style=&quot;flex:516.12&quot; class=&quot;f15xiyga&quot;&gt;&lt;div class=&quot;w16o0eiw&quot;&gt;&lt;div class=&quot;tt2ystl&quot;&gt;&lt;button style=&quot;--weight:var(--font-weight-bold);--color:var(--color-text)&quot; class=&quot;ts2dciv&quot;&gt;HTML&lt;/button&gt;&lt;button style=&quot;--weight:var(--font-weight-normal);--color:var(--color-gray-500)&quot; class=&quot;ts2dciv&quot;&gt;CSS&lt;/button&gt;&lt;/div&gt;&lt;div in=&quot;false&quot; style=&quot;--max-height:80vh&quot; class=&quot;w1bgwmtf&quot;&gt;&lt;button class=&quot;f9ibg9h&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Focus the editor. This will trap focus until you press Escape.&lt;/span&gt;&lt;/button&gt;&lt;label&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Code editor:&lt;/span&gt;&lt;div translate=&quot;no&quot; class=&quot;c18okpq0&quot; style=&quot;position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden&quot;&gt;&lt;pre aria-hidden=&quot;true&quot; style=&quot;margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0&quot;&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css selector&quot; style=&quot;color:var(--syntax-name)&quot;&gt;header&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; relative&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css selector class&quot; style=&quot;color:var(--syntax-name)&quot;&gt;.backdrop&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;position&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; absolute&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;inset&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;height&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;200&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;backdrop-filter&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css function&quot; style=&quot;color:var(--syntax-fn)&quot;&gt;blur&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;16&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;px&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css property&quot; style=&quot;color:var(--syntax-prop)&quot;&gt;mask-image&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;:&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css function&quot; style=&quot;color:var(--syntax-fn)&quot;&gt;linear-gradient&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; to bottom&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css color&quot; style=&quot;color:var(--syntax-str)&quot;&gt;black&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;,&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css color&quot; style=&quot;color:var(--syntax-str)&quot;&gt;transparent&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;50&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css number&quot; style=&quot;color:var(--syntax-bool)&quot;&gt;100&lt;/span&gt;&lt;span class=&quot;token style language-css unit&quot; style=&quot;color:var(--syntax-str)&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;;&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token style language-css punctuation&quot; style=&quot;color:var(--syntax-str)&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token style language-css&quot; style=&quot;color:var(--syntax-str)&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot; style=&quot;display:inline-block&quot;&gt;
        &lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;header&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token tag attr-name&quot; style=&quot;color:var(--syntax-name);font-weight:var(--font-weight-medium)&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation attr-equals&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag attr-value&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;backdrop&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;header&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;token-line&quot; style=&quot;color:var(--syntax-txt);padding:0;font-family:var(--font-family-mono)&quot;&gt;&lt;span class=&quot;token plain&quot;&gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;token tag&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt; &lt;/span&gt;&lt;span class=&quot;token tag attr-name&quot; style=&quot;color:var(--syntax-name);font-weight:var(--font-weight-medium)&quot;&gt;class&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation attr-equals&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag attr-value&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;ball&lt;/span&gt;&lt;span class=&quot;token tag attr-value punctuation&quot; style=&quot;color:var(--syntax-val);font-weight:var(--font-weight-medium)&quot;&gt;&quot;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medium)&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;token tag punctuation&quot; style=&quot;color:var(--syntax-prop);font-weight:var(--font-weight-medi

...

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

http://localhost:1200/joshwcomeau/popular/false - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Popular Content | Josh W. Comeau</title>
    <link>https://www.joshwcomeau.com</link>
    <atom:link href="http://localhost:1200/joshwcomeau/popular/false" rel="self" type="application/rss+xml"></atom:link>
    <description>Friendly tutorials for developers. Focus on React, CSS, Animation, and more! - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Wed, 08 Jan 2025 07:00:32 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>How To Center a Div</title>
      <description>&lt;div class=&quot;t1ma5bj5&quot;&gt;&lt;nav style=&quot;opacity:0;--x:20px&quot; class=&quot;wt7fu6i&quot;&gt;&lt;h2 class=&quot;th0e8y&quot;&gt;Table of Contents&lt;/h2&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#introduction&quot; style=&quot;color:var(--color-primary);opacity:1;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Introduction&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-auto-margins-1&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with auto margins&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-flexbox-2&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with Flexbox&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering within the viewport&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-elements-with-unknown-sizes-4&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Centering elements with unknown sizes&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-css-grid-5&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with CSS Grid&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#differences-from-flexbox-6&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Differences from Flexbox&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-a-stack-of-elements-7&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Centering a stack of elements&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-text-8&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering text&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-in-the-future-9&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering in the future&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#going-beyond-the-patterns-10&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Going beyond the patterns&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#when-to-use-which-method-11&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;When to use which method&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;l1mdfuoz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;a id=&quot;introduction&quot; class=&quot;wcmb8ol&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;p class=&quot;prg881n&quot;&gt;For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we&#39;ve been granted more and more tools we can use to solve this problem. These days, we&#39;re spoiled for choice!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to handle centering in all sorts of scenarios.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Honestly, this turned out to be &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;way more interesting&lt;/em&gt; than I initially thought&amp;nbsp;😅. Even if you&#39;ve been using CSS for a while, I bet you&#39;ll learn at least 1 new strategy!&lt;/p&gt;
        &lt;h2 id=&quot;centering-with-auto-margins&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-with-auto-margins-1&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-auto-margins-1&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering with auto margins&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The first strategy we&#39;ll look at is one of the oldest. If we want to center an element horizontally, we can do so using margins set to the special value &lt;code class=&quot;i165vvr1&quot;&gt;auto&lt;/code&gt;:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgbeiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgbeiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-left&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-right&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-left:auto;margin-right:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgbeiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgbeiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;First, we need to constrain the element&#39;s width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can&#39;t really center something that is full-width.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;could&lt;/em&gt; constrain the width with a fixed value (eg. &lt;code class=&quot;i165vvr1&quot;&gt;200px&lt;/code&gt;), but really what I want in this case is for the element to shrinkwrap around its content. &lt;code class=&quot;i165vvr1&quot;&gt;fit-content&lt;/code&gt; is a magical value that does exactly this. Essentially, it makes “width” behave like “height”, so that the element’s size is determined by its contents.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;Why am I setting &lt;code class=&quot;i165vvr1&quot;&gt;max-width&lt;/code&gt; instead of &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt;?&lt;/strong&gt; Well, my goal is to stop the element from expanding horizontally. I want to clamp its maximum size. If I used &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt; instead, it would lock it to that size, and the element would overflow when the container is really narrow. If you drag that “Container Width” slider all the way to the left, you can see that the element shrinks with its container.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Now that our element is constrained, we can center it with &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;auto margins&lt;/em&gt;.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I like to think of auto margins like &lt;i&gt;Hungry Hungry Hippos&lt;/i&gt;. Each auto margin will try to gobble up as much space as possible. For example, check out what happens if we &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;only&lt;/em&gt; set &lt;code class=&quot;i165vvr1&quot;&gt;margin-left: auto&lt;/code&gt;:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgneiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgneiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-left&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-left:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgneiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgneiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;When &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; is the only side with auto margins, &lt;i&gt;all&lt;/i&gt; of the extra space gets applied as margin to that side. When we set both &lt;code class=&quot;i165vvr1&quot;&gt;margin-left: auto&lt;/code&gt; &lt;i&gt;and&lt;/i&gt; &lt;code class=&quot;i165vvr1&quot;&gt;margin-right: auto&lt;/code&gt;, the two hippos each gobble up an equal amount of space. This forces the element to the center.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;Also:&lt;/em&gt; I&#39;ve been using &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; because they&#39;re familiar, but there&#39;s a better, more-modern way to do this:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgteiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgteiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line highlighted&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-inline&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-inline:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgteiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgteiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;code class=&quot;i165vvr1&quot;&gt;margin-inline&lt;/code&gt; will set both &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; to the same value (&lt;code class=&quot;i165vvr1&quot;&gt;auto&lt;/code&gt;). It has &lt;a rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot; class=&quot;a1tdgj4y s1j91s21&quot; href=&quot;https://caniuse.com/mdn-css_properties_margin-inline&quot;&gt;very good browser&lt;!-- --&gt; &lt;span class=&quot;p7a6phg&quot;&gt;support&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:0.7em;height:0.7em;opacity:1&quot; class=&quot;s14qet46 s1gvsyfu&quot;&gt;&lt;mask id=&quot;external-icon-mask-:R1e8veiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;10&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;14&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;15&quot; height=&quot;15&quot; rx=&quot;2&quot; mask=&quot;url(#external-icon-mask-:R1e8veiavfelb:)&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M 10 14 L 20 4 h -6 h 6 v 6&quot; stroke=&quot;currentColor&quot; class=&quot;amgfren&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;(opens in new tab)&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;, having landed in all major browsers several years ago.&lt;/p&gt;
        &lt;aside class=&quot;i6el1g6 b1btlj5u&quot;&gt;&lt;div class=&quot;dwkrqh8&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.5&quot; height=&quot;34.5&quot; fill=&quot;none&quot; viewBox=&quot;0 0 57 69&quot; preserveAspectRatio=&quot;none&quot; class=&quot;sl0r50n&quot;&gt;&lt;path fill=&quot;var(--color-page-background)&quot; d=&quot;M54 0V0.716804C54 25.9434 35.0653 47.1517 10 50L0 57V0H54Z&quot; style=&quot;transition:fill var(--color-swap-duration) var(--color-swap-timing-function)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;var(--color-primary)&quot; d=&quot;M56.9961 4.15364C57.0809 2.49896 55.8083 1.08879 54.1536 1.00394C52.499 0.919082 51.0888 2.19168 51.0039 3.84636L56.9961 4.15364ZM9.09704 51.7557L8.49716 48.8163L9.09704 51.7557ZM6 69V59.2227H0V69H6ZM9.69692 54.6951L14.3373 53.7481L13.1375 47.8693L8.49716 48.8163L9.69692 54.6951ZM14.3373 53.7481C38.202 48.8777 55.7486 28.4783 56.9961 4.15364L51.0039 3.84636C49.8967 25.4384 34.3213 43.5461 13.1375 47.8693L14.3373 53.7481ZM6 59.2227C6 57.0268 7.54537 55.1342 9.69692 54.6951L8.49716 48.8163C3.55195 49.8255 0 54.1756 0 59.2227H6Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div class=&quot;f1dj028m&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1m3o2ch&quot;&gt;&lt;/div&gt;&lt;div class=&quot;iohjz9i&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-info&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12 16v-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 8h.01&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;strong id=&quot;aside-logical-properties&quot; class=&quot;t1xqw7pl&quot;&gt;Logical properties&lt;/strong&gt;&lt;div class=&quot;c690lmu&quot;&gt;&lt;p class=&quot;prg881n&quot;&gt;&lt;code class=&quot;i165vvr1&quot;&gt;margin-inline&lt;/code&gt; is more than just a convenient shorthand for &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; + &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt;. It&#39;s part of a collection of &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;logical properties&lt;/em&gt;, designed to make it easier to internationalize the web.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;In English, characters are written in a horizontal line from left to right. Those characters are composed into words and sentences, and assembled into “blocks” (paragraphs, headings, lists, etc). Blocks are stacked vertically, from top to bottom. We can think of this as the &lt;i&gt;orientation&lt;/i&gt; of English-language websites.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;This isn&#39;t universal, though! Some languages, like Arabic and Hebrew, are written from right to left. Other languages, like Chinese, have historically been written vertically, with characters running from top to bottom, and &lt;i&gt;blocks&lt;/i&gt; running side to side.&lt;button class=&quot;t1cz8cv8&quot;&gt;&lt;span class=&quot;a1ni5s6f&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;e2cu4f7&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;span data-use-adaptive-colors=&quot;true&quot; id=&quot;:Rhm91eiavfelb:&quot; data-direction=&quot;n&quot; role=&quot;tooltip&quot; style=&quot;flex-direction:column&quot; class=&quot;p1lgzcrp l17lpp8k&quot;&gt;&lt;span class=&quot;p833mxt&quot;&gt;&lt;span class=&quot;pj0hw36&quot;&gt;&lt;span class=&quot;cffclov&quot;&gt;Interestingly, this has been changing over the past few decades, and most East Asian languages these days are written horizontally from left to right, especially on the web.&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 6&quot; style=&quot;--origin-y:0%&quot; class=&quot;s1vq0yeh s1k9z937&quot;&gt;&lt;path d=&quot;
        M 0 0
        C 6 0
        7.199999999999999 6
        12 6
        C 16.8 6
        18 0
        24 0
        Z
        &quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;The primary goal of logical properties is to create an abstraction that sits above these differences. Instead of setting &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; for left-to-right languages and flipping it to &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; for right-to-left languages, we can instead use &lt;code class=&quot;i165vvr1&quot;&gt;margin-inline-start&lt;/code&gt;. The margin will automatically be applied to the correct side, depending on the page&#39;s language.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Even though this centering method has been around forever, I still find myself reaching for it on a regular basis! It&#39;s particularly useful when we want to center a single child, without affecting any of its siblings (for example, an image in-between paragraphs in a blog post).&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Let&#39;s continue on our centering journey.&lt;/p&gt;
        &lt;h2 id=&quot;centering-with-flexbox&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-with-flexbox-2&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-flexbox-2&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering with Flexbox&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Flexbox is designed to give us a &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;ton&lt;/em&gt; of control when it comes to distributing a group of items along a primary axis. It offers some &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;really&lt;/em&gt; powerful tools for centering!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Let&#39;s start by centering a single element, both horizontally and vertically:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhdeiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhdeiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhdeiavfelb:_containerHeight&quot; class=&quot;lpsyt9t&quot;&gt;Container Height&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhdeiavfelb:_containerHeight&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;rcwtqfe&quot;&gt;&lt;div class=&quot;c9vkmf2&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;container&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; display&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; flex&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; justify-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; align-items&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;djxxsdm c9vkmf2&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;height:200px&quot; class=&quot;c17eovmj l17lpp8k&quot;&gt;&lt;div class=&quot;f1vkqrq wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The really cool thing about Flexbox centering is that it works &lt;i&gt;even when the children don’t fit in their container!&lt;/i&gt; Try shrinking the width/height, and notice that the element overflows symmetrically.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;It also works for &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;multiple&lt;/em&gt; children. We can control how they stack with the &lt;code class=&quot;i165vvr1&quot;&gt;flex-direction&lt;/code&gt; property:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s360ott&quot;&gt;&lt;span class=&quot;l1fyq1q5&quot;&gt;Flex Direction&lt;!-- --&gt;:&lt;/span&gt;&lt;div id=&quot;:Rhjeiavfelb:_flexDirection&quot; class=&quot;ray0b30 w73h7tw&quot;&gt;&lt;div class=&quot;r1cct0ab&quot;&gt;&lt;button value=&quot;row&quot; style=&quot;opacity:1&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:4px;filter:saturate(100%);opacity:1&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;row&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;column&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;column&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;row-reverse&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;row-reverse&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;column-reverse&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;column-reverse&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;r1xmilea&quot;&gt;&lt;div class=&quot;cgnjx9w c2tip9q&quot;&gt;&lt;div class=&quot;gvjoyup&quot;&gt;&lt;div class=&quot;c132w1ct&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;container&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; display&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; flex&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; flex-direction&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; row&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; justify-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; align-items&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; gap&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 4&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0;pointer-events:none&quot; class=&quot;c132w1ct&quot;&gt;&lt;!--$!--&gt;&lt;template data-dgst=&quot;BAILOUT_TO_CLIENT_SIDE_RENDERING&quot;&gt;&lt;/template&gt;&lt;!--/$--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;d1iw6ryr c2tip9q&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;min-height:212px;flex-direction:row&quot; class=&quot;c1oa8tf1 l17lpp8k&quot;&gt;&lt;div class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;1&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;z-index:2&quot; class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;2&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Out of all the centering patterns we&#39;ll explore in this tutorial, this is probably the one I use the most. It&#39;s a great jack-of-all-trades, a great default option.&lt;/p&gt;
        &lt;h2 id=&quot;centering-within-the-viewport&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-within-the-viewport-3&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering within the viewport&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;So far, we&#39;ve been looking at how to center an element within its parent container. But what if we want to center an element in a different context? Certain elements like dialogs, prompts, and GDPR banners need to be centered within the viewport.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;This is the domain of &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;positioned layout,&lt;/em&gt; a layout mode used when we want to take something out of flow and anchor it to something else.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Here&#39;s what this looks like:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhveiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhveiavfelb:_containerWidth&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhveiavfelb:_containerHeight&quot; class=&quot;lpsyt9t&quot;&gt;Container Height&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhveiavfelb:_containerHeight&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;rd1irhw&quot;&gt;&lt;div class=&quot;c1fq67g4&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; position&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fixed&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; inset&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 12&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; height&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 5&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 100&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;vw&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-height&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 100&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;dvh&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dougf27 c1fq67g4&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;height:17.625rem&quot; class=&quot;c8q6jp9 l17lpp8k&quot;&gt;&lt;div class=&quot;bfhwaun&quot;&gt;&lt;div class=&quot;hiqwc5b&quot;&gt;&lt;span style=&quot;width:3rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;p1pvsarm&quot;&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.75rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;p1pvsarm&quot;&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;hpafenu m148wj37&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;h1b4sgtf m101ijsn&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;p1j9axfr&quot;&gt;.element&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;h1b4sgtf m101ijsn&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;vm87swv m148wj37&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)&quot; class=&quot;v15iwzns m101ijsn&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;p1j9axfr&quot;&gt;.element&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)&quot; class=&quot;v15iwzns m101ijsn&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1b7mso0 p1j9axfr&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Of all the strategies we&#39;ll discuss, this one is probably the most complex. Let&#39;s break it down.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;We&#39;re using &lt;code class=&quot;i165vvr1&quot;&gt;position: fixed&lt;/code&gt;, which anchors this element to the viewport. I like to think of the viewport like a pane of glass that sits in front of the website, like the window of a train that shows the landscape scrolling by. An element with &lt;code class=&quot;i165vvr1&quot;&gt;position: fixed&lt;/code&gt; is like a ladybug that lands on the window.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Next, we&#39;re setting &lt;code class=&quot;i165vvr1&quot;&gt;inset: 0px&lt;/code&gt;, which is a shorthand that sets &lt;code class=&quot;i165vvr1&quot;&gt;top&lt;/code&gt;, &lt;code class=&quot;i165vvr1&quot;&gt;left&lt;/code&gt;, &lt;code class=&quot;i165vvr1&quot;&gt;right&lt;/code&gt;, and &lt;code class=&quot;i165vvr1&quot;&gt;bottom&lt;/code&gt; all to the same value, &lt;code class=&quot;i165vvr1&quot;&gt;0px&lt;/code&gt;.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;With only these two properties, the element would stretch to fill the entire viewport, growing so that it&#39;s 0px from each edge. This can be useful in some contexts, but it&#39;s not what we&#39;re going for here. We need to constrain it.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The exact values we pick will vary on the specifics of each situation, but in general we want to set default values (with &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;height&lt;/code&gt;), as well as max values (&lt;code class=&quot;i165vvr1&quot;&gt;max-width&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;max-height&lt;/code&gt;), so that the element doesn&#39;t overflow on smaller viewports.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;There&#39;s something interesting here:&lt;/strong&gt; we&#39;ve set up an impossible condition. Our element can&#39;t be 0px from the left &lt;i&gt;and&lt;/i&gt; 0px from the right &lt;i&gt;and&lt;/i&gt; only 12rem wide (assuming the viewport is wider than 12rem). We can only pick 2:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s360ott&quot;&gt;&lt;span class=&quot;l1fyq1q5&quot;&gt;Pick two&lt;!-- --&gt;:&lt;/span&gt;&lt;div id=&quot;:Rideiavfelb:_values&quot; class=&quot;w73h7tw&quot;&gt;&lt;div class=&quot;r1cct0ab&quot;&gt;&lt;button value=&quot;left: 0px&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;left: 0px&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;right: 0px&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;right: 0px&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;width: 12rem&quot; tabindex=&quot;-1&quot; style=&quot;opacity:1&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:4px;filter:saturate(100%);opacity:1&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;width: 12rem&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;r3vmhao&quot;&gt;&lt;div class=&quot;c7zul9b&quot;&gt;&lt;div class=&quot;gvjoyup&quot;&gt;&lt;div class=&quot;c132w1ct&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; position&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fixed&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 12&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0;pointer-events:none&quot; class=&quot;c132w1ct&quot;&gt;&lt;!--$!--&gt;&lt;template data-dgst=&quot;BAILOUT_TO_CLIENT_SIDE_RENDERING&quot;&gt;&lt;/template&gt;&lt;!--/$--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;d19iwc1r c7zul9b&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; class=&quot;ctnf89z l17lpp8k&quot;&gt;&lt;div class=&quot;b14ie1by&quot;&gt;&lt;div class=&quot;fujgo4n&quot;&gt;&lt;span style=&quot;width:3rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;f1p79fid&quot;&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.75rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;f1p79fid&quot;&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/sp

...

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025

http://localhost:1200/joshwcomeau/popular - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Popular Content | Josh W. Comeau</title>
    <link>https://www.joshwcomeau.com</link>
    <atom:link href="http://localhost:1200/joshwcomeau/popular" rel="self" type="application/rss+xml"></atom:link>
    <description>Friendly tutorials for developers. Focus on React, CSS, Animation, and more! - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Wed, 08 Jan 2025 07:00:32 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>How To Center a Div</title>
      <description>&lt;div class=&quot;t1ma5bj5&quot;&gt;&lt;nav style=&quot;opacity:0;--x:20px&quot; class=&quot;wt7fu6i&quot;&gt;&lt;h2 class=&quot;th0e8y&quot;&gt;Table of Contents&lt;/h2&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#introduction&quot; style=&quot;color:var(--color-primary);opacity:1;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Introduction&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-auto-margins-1&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with auto margins&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-flexbox-2&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with Flexbox&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering within the viewport&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-elements-with-unknown-sizes-4&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Centering elements with unknown sizes&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-css-grid-5&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering with CSS Grid&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#differences-from-flexbox-6&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Differences from Flexbox&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-a-stack-of-elements-7&quot; style=&quot;margin-top:4px;--font-size-px:14;padding-left:12px&quot; class=&quot;c1kp06zm&quot;&gt;Centering a stack of elements&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-text-8&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering text&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-in-the-future-9&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Centering in the future&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#going-beyond-the-patterns-10&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;Going beyond the patterns&lt;/a&gt;&lt;a href=&quot;https://www.joshwcomeau.com/css/center-a-div/#when-to-use-which-method-11&quot; style=&quot;margin-top:12px;--font-size-px:16&quot; class=&quot;c1kp06zm&quot;&gt;When to use which method&lt;/a&gt;&lt;/nav&gt;&lt;div class=&quot;l1mdfuoz&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;a id=&quot;introduction&quot; class=&quot;wcmb8ol&quot;&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Introduction&lt;/span&gt;&lt;/a&gt;&lt;p class=&quot;prg881n&quot;&gt;For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we&#39;ve been granted more and more tools we can use to solve this problem. These days, we&#39;re spoiled for choice!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to handle centering in all sorts of scenarios.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Honestly, this turned out to be &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;way more interesting&lt;/em&gt; than I initially thought&amp;nbsp;😅. Even if you&#39;ve been using CSS for a while, I bet you&#39;ll learn at least 1 new strategy!&lt;/p&gt;
        &lt;h2 id=&quot;centering-with-auto-margins&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-with-auto-margins-1&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-auto-margins-1&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering with auto margins&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The first strategy we&#39;ll look at is one of the oldest. If we want to center an element horizontally, we can do so using margins set to the special value &lt;code class=&quot;i165vvr1&quot;&gt;auto&lt;/code&gt;:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgbeiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgbeiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-left&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-right&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-left:auto;margin-right:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgbeiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgbeiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;First, we need to constrain the element&#39;s width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can&#39;t really center something that is full-width.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;could&lt;/em&gt; constrain the width with a fixed value (eg. &lt;code class=&quot;i165vvr1&quot;&gt;200px&lt;/code&gt;), but really what I want in this case is for the element to shrinkwrap around its content. &lt;code class=&quot;i165vvr1&quot;&gt;fit-content&lt;/code&gt; is a magical value that does exactly this. Essentially, it makes “width” behave like “height”, so that the element’s size is determined by its contents.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;Why am I setting &lt;code class=&quot;i165vvr1&quot;&gt;max-width&lt;/code&gt; instead of &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt;?&lt;/strong&gt; Well, my goal is to stop the element from expanding horizontally. I want to clamp its maximum size. If I used &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt; instead, it would lock it to that size, and the element would overflow when the container is really narrow. If you drag that “Container Width” slider all the way to the left, you can see that the element shrinks with its container.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Now that our element is constrained, we can center it with &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;auto margins&lt;/em&gt;.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;I like to think of auto margins like &lt;i&gt;Hungry Hungry Hippos&lt;/i&gt;. Each auto margin will try to gobble up as much space as possible. For example, check out what happens if we &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;only&lt;/em&gt; set &lt;code class=&quot;i165vvr1&quot;&gt;margin-left: auto&lt;/code&gt;:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgneiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgneiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-left&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-left:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgneiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgneiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;When &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; is the only side with auto margins, &lt;i&gt;all&lt;/i&gt; of the extra space gets applied as margin to that side. When we set both &lt;code class=&quot;i165vvr1&quot;&gt;margin-left: auto&lt;/code&gt; &lt;i&gt;and&lt;/i&gt; &lt;code class=&quot;i165vvr1&quot;&gt;margin-right: auto&lt;/code&gt;, the two hippos each gobble up an equal amount of space. This forces the element to the center.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;Also:&lt;/em&gt; I&#39;ve been using &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; because they&#39;re familiar, but there&#39;s a better, more-modern way to do this:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rgteiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rgteiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;r1xunlpt&quot;&gt;&lt;div class=&quot;cl7u8o0&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fit-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line highlighted&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin-inline&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dtehhfl cl7u8o0&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%&quot; class=&quot;c1ndpdak l17lpp8k&quot;&gt;&lt;div class=&quot;m10k3fo8&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;m8pozar&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;margin-inline:auto&quot; class=&quot;m1nbct2d wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;f1h8awvy&quot;&gt;&lt;label for=&quot;:R4rgteiavfelb:&quot; class=&quot;wfao701&quot;&gt;&lt;button type=&quot;button&quot; aria-pressed=&quot;false&quot; style=&quot;width:44px;padding:2px;--radius:5px&quot; id=&quot;:R4rgteiavfelb:&quot; class=&quot;w1o3yz26&quot;&gt;&lt;div style=&quot;width:20px;height:20px;transform:translateX(0%);--handle-color:var(--color-gray-400);--handle-focus-color:var(--color-gray-400)&quot; class=&quot;bl5hz2w&quot;&gt;&lt;/div&gt;&lt;/button&gt;&lt;div style=&quot;min-width:16px;min-height:16px&quot;&gt;&lt;/div&gt;Reveal Margin&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;code class=&quot;i165vvr1&quot;&gt;margin-inline&lt;/code&gt; will set both &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; to the same value (&lt;code class=&quot;i165vvr1&quot;&gt;auto&lt;/code&gt;). It has &lt;a rel=&quot;noopener noreferrer&quot; target=&quot;_blank&quot; class=&quot;a1tdgj4y s1j91s21&quot; href=&quot;https://caniuse.com/mdn-css_properties_margin-inline&quot;&gt;very good browser&lt;!-- --&gt; &lt;span class=&quot;p7a6phg&quot;&gt;support&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:0.7em;height:0.7em;opacity:1&quot; class=&quot;s14qet46 s1gvsyfu&quot;&gt;&lt;mask id=&quot;external-icon-mask-:R1e8veiavfelb:&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;24&quot; height=&quot;24&quot; fill=&quot;white&quot;&gt;&lt;/rect&gt;&lt;rect x=&quot;10&quot; y=&quot;0&quot; width=&quot;16&quot; height=&quot;14&quot; fill=&quot;black&quot;&gt;&lt;/rect&gt;&lt;/mask&gt;&lt;rect x=&quot;3&quot; y=&quot;6&quot; width=&quot;15&quot; height=&quot;15&quot; rx=&quot;2&quot; mask=&quot;url(#external-icon-mask-:R1e8veiavfelb:)&quot;&gt;&lt;/rect&gt;&lt;path d=&quot;M 10 14 L 20 4 h -6 h 6 v 6&quot; stroke=&quot;currentColor&quot; class=&quot;amgfren&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;(opens in new tab)&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;, having landed in all major browsers several years ago.&lt;/p&gt;
        &lt;aside class=&quot;i6el1g6 b1btlj5u&quot;&gt;&lt;div class=&quot;dwkrqh8&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28.5&quot; height=&quot;34.5&quot; fill=&quot;none&quot; viewBox=&quot;0 0 57 69&quot; preserveAspectRatio=&quot;none&quot; class=&quot;sl0r50n&quot;&gt;&lt;path fill=&quot;var(--color-page-background)&quot; d=&quot;M54 0V0.716804C54 25.9434 35.0653 47.1517 10 50L0 57V0H54Z&quot; style=&quot;transition:fill var(--color-swap-duration) var(--color-swap-timing-function)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;var(--color-primary)&quot; d=&quot;M56.9961 4.15364C57.0809 2.49896 55.8083 1.08879 54.1536 1.00394C52.499 0.919082 51.0888 2.19168 51.0039 3.84636L56.9961 4.15364ZM9.09704 51.7557L8.49716 48.8163L9.09704 51.7557ZM6 69V59.2227H0V69H6ZM9.69692 54.6951L14.3373 53.7481L13.1375 47.8693L8.49716 48.8163L9.69692 54.6951ZM14.3373 53.7481C38.202 48.8777 55.7486 28.4783 56.9961 4.15364L51.0039 3.84636C49.8967 25.4384 34.3213 43.5461 13.1375 47.8693L14.3373 53.7481ZM6 59.2227C6 57.0268 7.54537 55.1342 9.69692 54.6951L8.49716 48.8163C3.55195 49.8255 0 54.1756 0 59.2227H6Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;div class=&quot;f1dj028m&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1m3o2ch&quot;&gt;&lt;/div&gt;&lt;div class=&quot;iohjz9i&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;32&quot; height=&quot;32&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;lucide lucide-info&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M12 16v-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 8h.01&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;&lt;strong id=&quot;aside-logical-properties&quot; class=&quot;t1xqw7pl&quot;&gt;Logical properties&lt;/strong&gt;&lt;div class=&quot;c690lmu&quot;&gt;&lt;p class=&quot;prg881n&quot;&gt;&lt;code class=&quot;i165vvr1&quot;&gt;margin-inline&lt;/code&gt; is more than just a convenient shorthand for &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; + &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt;. It&#39;s part of a collection of &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;logical properties&lt;/em&gt;, designed to make it easier to internationalize the web.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;In English, characters are written in a horizontal line from left to right. Those characters are composed into words and sentences, and assembled into “blocks” (paragraphs, headings, lists, etc). Blocks are stacked vertically, from top to bottom. We can think of this as the &lt;i&gt;orientation&lt;/i&gt; of English-language websites.&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;This isn&#39;t universal, though! Some languages, like Arabic and Hebrew, are written from right to left. Other languages, like Chinese, have historically been written vertically, with characters running from top to bottom, and &lt;i&gt;blocks&lt;/i&gt; running side to side.&lt;button class=&quot;t1cz8cv8&quot;&gt;&lt;span class=&quot;a1ni5s6f&quot;&gt;*&lt;/span&gt;&lt;span class=&quot;e2cu4f7&quot;&gt;&lt;/span&gt;&lt;/button&gt;&lt;span data-use-adaptive-colors=&quot;true&quot; id=&quot;:Rhm91eiavfelb:&quot; data-direction=&quot;n&quot; role=&quot;tooltip&quot; style=&quot;flex-direction:column&quot; class=&quot;p1lgzcrp l17lpp8k&quot;&gt;&lt;span class=&quot;p833mxt&quot;&gt;&lt;span class=&quot;pj0hw36&quot;&gt;&lt;span class=&quot;cffclov&quot;&gt;Interestingly, this has been changing over the past few decades, and most East Asian languages these days are written horizontally from left to right, especially on the web.&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 6&quot; style=&quot;--origin-y:0%&quot; class=&quot;s1vq0yeh s1k9z937&quot;&gt;&lt;path d=&quot;
        M 0 0
        C 6 0
        7.199999999999999 6
        12 6
        C 16.8 6
        18 0
        24 0
        Z
        &quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/p&gt;&lt;p class=&quot;prg881n&quot;&gt;The primary goal of logical properties is to create an abstraction that sits above these differences. Instead of setting &lt;code class=&quot;i165vvr1&quot;&gt;margin-left&lt;/code&gt; for left-to-right languages and flipping it to &lt;code class=&quot;i165vvr1&quot;&gt;margin-right&lt;/code&gt; for right-to-left languages, we can instead use &lt;code class=&quot;i165vvr1&quot;&gt;margin-inline-start&lt;/code&gt;. The margin will automatically be applied to the correct side, depending on the page&#39;s language.&lt;/p&gt;&lt;/div&gt;&lt;/aside&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Even though this centering method has been around forever, I still find myself reaching for it on a regular basis! It&#39;s particularly useful when we want to center a single child, without affecting any of its siblings (for example, an image in-between paragraphs in a blog post).&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Let&#39;s continue on our centering journey.&lt;/p&gt;
        &lt;h2 id=&quot;centering-with-flexbox&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-with-flexbox-2&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-with-flexbox-2&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering with Flexbox&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Flexbox is designed to give us a &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;ton&lt;/em&gt; of control when it comes to distributing a group of items along a primary axis. It offers some &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;really&lt;/em&gt; powerful tools for centering!&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Let&#39;s start by centering a single element, both horizontally and vertically:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhdeiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhdeiavfelb:_containerWidth&quot; min=&quot;25&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhdeiavfelb:_containerHeight&quot; class=&quot;lpsyt9t&quot;&gt;Container Height&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhdeiavfelb:_containerHeight&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;rcwtqfe&quot;&gt;&lt;div class=&quot;c9vkmf2&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;container&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; display&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; flex&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; justify-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; align-items&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;djxxsdm c9vkmf2&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;height:200px&quot; class=&quot;c17eovmj l17lpp8k&quot;&gt;&lt;div class=&quot;f1vkqrq wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;.element&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The really cool thing about Flexbox centering is that it works &lt;i&gt;even when the children don’t fit in their container!&lt;/i&gt; Try shrinking the width/height, and notice that the element overflows symmetrically.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;It also works for &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;multiple&lt;/em&gt; children. We can control how they stack with the &lt;code class=&quot;i165vvr1&quot;&gt;flex-direction&lt;/code&gt; property:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s360ott&quot;&gt;&lt;span class=&quot;l1fyq1q5&quot;&gt;Flex Direction&lt;!-- --&gt;:&lt;/span&gt;&lt;div id=&quot;:Rhjeiavfelb:_flexDirection&quot; class=&quot;ray0b30 w73h7tw&quot;&gt;&lt;div class=&quot;r1cct0ab&quot;&gt;&lt;button value=&quot;row&quot; style=&quot;opacity:1&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:4px;filter:saturate(100%);opacity:1&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;row&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;column&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;column&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;row-reverse&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;row-reverse&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;column-reverse&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;column-reverse&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;r1xmilea&quot;&gt;&lt;div class=&quot;cgnjx9w c2tip9q&quot;&gt;&lt;div class=&quot;gvjoyup&quot;&gt;&lt;div class=&quot;c132w1ct&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;container&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; display&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; flex&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; flex-direction&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; row&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; justify-content&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; align-items&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; center&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; gap&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 4&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0;pointer-events:none&quot; class=&quot;c132w1ct&quot;&gt;&lt;!--$!--&gt;&lt;template data-dgst=&quot;BAILOUT_TO_CLIENT_SIDE_RENDERING&quot;&gt;&lt;/template&gt;&lt;!--/$--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;d1iw6ryr c2tip9q&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;min-height:212px;flex-direction:row&quot; class=&quot;c1oa8tf1 l17lpp8k&quot;&gt;&lt;div class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;1&lt;/span&gt;&lt;/div&gt;&lt;div style=&quot;z-index:2&quot; class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;2&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;bt1ddka wythvuy&quot;&gt;&lt;span class=&quot;t16m3o3k&quot;&gt;3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Out of all the centering patterns we&#39;ll explore in this tutorial, this is probably the one I use the most. It&#39;s a great jack-of-all-trades, a great default option.&lt;/p&gt;
        &lt;h2 id=&quot;centering-within-the-viewport&quot; data-element-type=&quot;ContentHeading&quot; class=&quot;hrk0sy8&quot;&gt;&lt;a id=&quot;centering-within-the-viewport-3&quot; href=&quot;https://www.joshwcomeau.com/css/center-a-div/#centering-within-the-viewport-3&quot; class=&quot;aax5dne&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; style=&quot;width:21px;height:21px;opacity:1&quot; class=&quot;s1gvsyfu&quot;&gt;&lt;line x1=&quot;2&quot; y1=&quot;8&quot; x2=&quot;22&quot; y2=&quot;8&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;2&quot; y1=&quot;16&quot; x2=&quot;22&quot; y2=&quot;16&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;10&quot; y1=&quot;2&quot; x2=&quot;6&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;18&quot; y1=&quot;2&quot; x2=&quot;14&quot; y2=&quot;22&quot; stroke=&quot;currentColor&quot; class=&quot;l1etwsvd&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;span class=&quot;wlgbkjj&quot;&gt;Link to this heading&lt;/span&gt;&lt;/a&gt;Centering within the viewport&lt;/h2&gt;
        &lt;p class=&quot;prg881n&quot;&gt;So far, we&#39;ve been looking at how to center an element within its parent container. But what if we want to center an element in a different context? Certain elements like dialogs, prompts, and GDPR banners need to be centered within the viewport.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;This is the domain of &lt;em style=&quot;color:inherit&quot; class=&quot;w10oesj0&quot;&gt;positioned layout,&lt;/em&gt; a layout mode used when we want to take something out of flow and anchor it to something else.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Here&#39;s what this looks like:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr 1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhveiavfelb:_containerWidth&quot; class=&quot;lpsyt9t&quot;&gt;Container Width&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhveiavfelb:_containerWidth&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;s4h798d&quot;&gt;&lt;div style=&quot;opacity:1&quot; class=&quot;h1pypve8&quot;&gt;&lt;label for=&quot;:Rhveiavfelb:_containerHeight&quot; class=&quot;lpsyt9t&quot;&gt;Container Height&lt;!-- --&gt;:&lt;/label&gt;&lt;span class=&quot;w1194iyg&quot;&gt;100%&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;cg5mgxb&quot;&gt;&lt;input style=&quot;--handle-color:var(--color-gray-900);--handle-focus-color:radial-gradient(
        hsl(48deg 100% 75% / 1),
        hsl(48deg 100% 75% / 0) 40%
        ),
        conic-gradient(
        from 90deg at 50% 50%,
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 75%),
        hsl(45deg 100% 55%),
        hsl(52deg 100% 95%),
        hsl(45deg 100% 55%)
        );--background-color:var(--color-background);--base-handle-size:16px;--track-size:3px&quot; type=&quot;range&quot; id=&quot;:Rhveiavfelb:_containerHeight&quot; min=&quot;30&quot; max=&quot;100&quot; class=&quot;i1i8zjy7&quot; value=&quot;100&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;div class=&quot;rd1irhw&quot;&gt;&lt;div class=&quot;c1fq67g4&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; position&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fixed&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; inset&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 0&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;px&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 12&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; height&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 5&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 100&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;vw&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; max-height&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 100&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;dvh&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; margin&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; auto&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;dougf27 c1fq67g4&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; style=&quot;width:100%;height:17.625rem&quot; class=&quot;c8q6jp9 l17lpp8k&quot;&gt;&lt;div class=&quot;bfhwaun&quot;&gt;&lt;div class=&quot;hiqwc5b&quot;&gt;&lt;span style=&quot;width:3rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;hktm3y9 bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;p1pvsarm&quot;&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.75rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;p1pvsarm&quot;&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;bx3nfyo&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;hpafenu m148wj37&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)&quot; class=&quot;h1b4sgtf m101ijsn&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;p1j9axfr&quot;&gt;.element&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)&quot; class=&quot;h1b4sgtf m101ijsn&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;vm87swv m148wj37&quot;&gt;&lt;div style=&quot;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)&quot; class=&quot;v15iwzns m101ijsn&quot;&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0&quot; class=&quot;p1j9axfr&quot;&gt;.element&lt;/div&gt;&lt;div style=&quot;clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)&quot; class=&quot;v15iwzns m101ijsn&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;m1b7mso0 p1j9axfr&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Of all the strategies we&#39;ll discuss, this one is probably the most complex. Let&#39;s break it down.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;We&#39;re using &lt;code class=&quot;i165vvr1&quot;&gt;position: fixed&lt;/code&gt;, which anchors this element to the viewport. I like to think of the viewport like a pane of glass that sits in front of the website, like the window of a train that shows the landscape scrolling by. An element with &lt;code class=&quot;i165vvr1&quot;&gt;position: fixed&lt;/code&gt; is like a ladybug that lands on the window.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;Next, we&#39;re setting &lt;code class=&quot;i165vvr1&quot;&gt;inset: 0px&lt;/code&gt;, which is a shorthand that sets &lt;code class=&quot;i165vvr1&quot;&gt;top&lt;/code&gt;, &lt;code class=&quot;i165vvr1&quot;&gt;left&lt;/code&gt;, &lt;code class=&quot;i165vvr1&quot;&gt;right&lt;/code&gt;, and &lt;code class=&quot;i165vvr1&quot;&gt;bottom&lt;/code&gt; all to the same value, &lt;code class=&quot;i165vvr1&quot;&gt;0px&lt;/code&gt;.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;With only these two properties, the element would stretch to fill the entire viewport, growing so that it&#39;s 0px from each edge. This can be useful in some contexts, but it&#39;s not what we&#39;re going for here. We need to constrain it.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;The exact values we pick will vary on the specifics of each situation, but in general we want to set default values (with &lt;code class=&quot;i165vvr1&quot;&gt;width&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;height&lt;/code&gt;), as well as max values (&lt;code class=&quot;i165vvr1&quot;&gt;max-width&lt;/code&gt; and &lt;code class=&quot;i165vvr1&quot;&gt;max-height&lt;/code&gt;), so that the element doesn&#39;t overflow on smaller viewports.&lt;/p&gt;
        &lt;p class=&quot;prg881n&quot;&gt;&lt;strong&gt;There&#39;s something interesting here:&lt;/strong&gt; we&#39;ve set up an impossible condition. Our element can&#39;t be 0px from the left &lt;i&gt;and&lt;/i&gt; 0px from the right &lt;i&gt;and&lt;/i&gt; only 12rem wide (assuming the viewport is wider than 12rem). We can only pick 2:&lt;/p&gt;
        &lt;!-- --&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; data-demo-unit=&quot;true&quot; data-control-position=&quot;top&quot; class=&quot;o1m9cdug d16kq653&quot;&gt;&lt;div class=&quot;w1v90hn6&quot;&gt;&lt;div style=&quot;--template-cols:1fr&quot; class=&quot;c1j2qstn&quot;&gt;&lt;div class=&quot;s360ott&quot;&gt;&lt;span class=&quot;l1fyq1q5&quot;&gt;Pick two&lt;!-- --&gt;:&lt;/span&gt;&lt;div id=&quot;:Rideiavfelb:_values&quot; class=&quot;w73h7tw&quot;&gt;&lt;div class=&quot;r1cct0ab&quot;&gt;&lt;button value=&quot;left: 0px&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;left: 0px&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;right: 0px&quot; tabindex=&quot;-1&quot; style=&quot;opacity:0.65&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:2px;filter:saturate(0%);opacity:0.4&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;right: 0px&lt;/span&gt;&lt;/button&gt;&lt;button value=&quot;width: 12rem&quot; tabindex=&quot;-1&quot; style=&quot;opacity:1&quot; class=&quot;t6358bx&quot;&gt;&lt;span style=&quot;height:4px;filter:saturate(100%);opacity:1&quot; class=&quot;b10n1zbt&quot;&gt;&lt;/span&gt;&lt;span class=&quot;tglc2q3&quot;&gt;width: 12rem&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;r3vmhao&quot;&gt;&lt;div class=&quot;c7zul9b&quot;&gt;&lt;div class=&quot;gvjoyup&quot;&gt;&lt;div class=&quot;c132w1ct&quot;&gt;&lt;div translate=&quot;no&quot; data-less-bottom-margin=&quot;false&quot; style=&quot;--max-height:auto&quot; class=&quot;c1qvfy1x ae97emi&quot;&gt;&lt;div class=&quot;w1ey322x&quot;&gt;&lt;pre class=&quot;shiki shiki-themes josh-theme-dark josh-theme-light&quot; style=&quot;background-color:#0d0f1200;--shiki-light-bg:#f5f6f900;color:#ffffffff;--shiki-light:#000000&quot;&gt;&lt;code&gt;&lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#AA00FFFF&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color:#FFCB6B;--shiki-light:#AA00FFFF&quot;&gt;element&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt; {&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; position&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#2A2A2AFF&quot;&gt; fixed&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#A3FFEA;--shiki-light:#DA0079FF&quot;&gt; width&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#BF00B8FF&quot;&gt; 12&lt;/span&gt;&lt;span style=&quot;color:#B88CF2FF;--shiki-light:#3D5AFEFF&quot;&gt;rem&lt;/span&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;line&quot;&gt;&lt;span style=&quot;color:#B9C4D0FF;--shiki-light:#000000&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;opacity:0;pointer-events:none&quot; class=&quot;c132w1ct&quot;&gt;&lt;!--$!--&gt;&lt;template data-dgst=&quot;BAILOUT_TO_CLIENT_SIDE_RENDERING&quot;&gt;&lt;/template&gt;&lt;!--/$--&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;d19iwc1r c7zul9b&quot;&gt;&lt;div data-use-adaptive-colors=&quot;true&quot; class=&quot;ctnf89z l17lpp8k&quot;&gt;&lt;div class=&quot;b14ie1by&quot;&gt;&lt;div class=&quot;fujgo4n&quot;&gt;&lt;span style=&quot;width:3rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;h1vx44g7 byjv7xx&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;f1p79fid&quot;&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.75rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:7rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:3.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;f1p79fid&quot;&gt;&lt;span style=&quot;width:0.785rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4.2rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:4rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.25rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:0.5rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span style=&quot;width:2.1rem&quot; class=&quot;byjv7xx&quot;&gt;&lt;/span&gt;&lt;span sty

@sk22
Copy link

sk22 commented Jan 8, 2025

note that there's a built-in feed for the latest articles: https://www.joshwcomeau.com/rss.xml

@Rjnishant530
Copy link
Contributor Author

Rjnishant530 commented Jan 10, 2025 •
edited
Loading

note that there's a built-in feed for the latest articles: https://www.joshwcomeau.com/rss.xml

Yes, and its not full feed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
Auto: Route Test Complete Auto route test has finished on given PR Route
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Rjnishant530 @sk22