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(css-tricks): add new routes for css-tricks #18066

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(css-tricks): add new routes for css-tricks #18066

wants to merge 2 commits into from
+315 −1

Conversation

Rjnishant530
Copy link
Contributor

@Rjnishant530 Rjnishant530 commented Jan 7, 2025 •
edited
Loading

Involved Issue / 该 PR 相关 Issue

Close #

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

/css-tricks/articles
/css-tricks/guides
/css-tricks/fresh
/css-tricks/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 7, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

Successfully generated as following:

http://localhost:1200/css-tricks/articles - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Articles - CSS-Tricks</title>
    <link>https://css-tricks.com/category/articles/</link>
    <atom:link href="http://localhost:1200/css-tricks/articles" rel="self" type="application/rss+xml"></atom:link>
    <description>Latest Articles - CSS-Tricks - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Tue, 07 Jan 2025 10:24:37 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>The Importance of Investing in Soft Skills in the Age of AI</title>
      <description>&lt;p&gt;I’ll set out my stall and let you know I am still an AI skeptic. Heck, I still wrap “AI” in quotes a lot of the time I talk about it. I am, however, skeptical of the&amp;nbsp;&lt;em&gt;present&lt;/em&gt;, rather than the future. I wouldn’t say I’m positive or even excited about where AI is going, but there’s an inevitability that in development circles, it will be further engrained in our work.&lt;/p&gt;
        &lt;p&gt;We joke in the industry that the suggestions that AI gives us are more often than not,&amp;nbsp;terrible, but that will only improve in time. A good basis for that theory is how fast generative AI has improved with image and video generation. Sure, generated images still have that “shrink-wrapped” look about them, and generated images of people have extra… um…&amp;nbsp;&lt;em&gt;limbs&lt;/em&gt;, but consider how much generated AI images have improved, even in the last 12 months.&lt;/p&gt;
        &lt;p&gt;There’s also the case that VC money is seemingly exclusively being invested in AI, industry-wide. Pair that with a continuously turbulent tech recruitment situation, with endless major layoffs and even a skeptic like myself can see the writing on the wall with how our jobs as developers are going to be affected.&lt;/p&gt;
        &lt;p&gt;The biggest risk factor I can foresee is that&amp;nbsp;&lt;strong&gt;if your sole responsibility is to write code, your job is almost certainly at risk&lt;/strong&gt;. I don’t think this is an imminent risk in a lot of cases, but as generative AI improves its code output — just like it has for images and video — it’s only a matter of time before it becomes a redundancy risk for actual human developers.&lt;/p&gt;
        &lt;p&gt;Do I think this is right? Absolutely not. Do I think it’s time to panic? Not&amp;nbsp;&lt;em&gt;yet&lt;/em&gt;, but I do see a lot of value in evolving your skillset&amp;nbsp;&lt;em&gt;beyond&lt;/em&gt;&amp;nbsp;writing code. I especially see the value in improving your soft skills.&lt;/p&gt;
        &lt;span id=&quot;more-383383&quot;&gt;&lt;/span&gt;
        &lt;h2 class=&quot;wp-block-heading&quot; id=&quot;what-are-soft-skills&quot;&gt;&lt;a href=&quot;https://css-tricks.com/the-importance-of-investing-in-soft-skills-in-the-age-of-ai/#aa-what-are-soft-skills&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-what-are-soft-skills&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;What are soft skills?&lt;/h2&gt;
        &lt;p&gt;A good way to think of soft skills is that they are&amp;nbsp;&lt;strong&gt;life skills&lt;/strong&gt;. Soft skills include:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;communicating with others,&lt;/li&gt;
        &lt;li&gt;organizing yourself and others,&lt;/li&gt;
        &lt;li&gt;making decisions, and&lt;/li&gt;
        &lt;li&gt;adapting to difficult situations.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;I believe so much in soft skills that I call them&amp;nbsp;&lt;strong&gt;core skills&lt;/strong&gt;&amp;nbsp;and for the rest of this article, I’ll refer to them as&amp;nbsp;&lt;strong&gt;core skills&lt;/strong&gt;, to underline their importance.&lt;/p&gt;
        &lt;p&gt;The path to becoming a truly great developer is down to more than just coding. It comes down to how you approach everything else, like communication, giving and receiving feedback, finding a pragmatic solution, planning — and even&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/videos/169-how-to-think-like-a-front-end-developer/&quot;&gt;thinking like a web developer&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;I’ve been working with CSS for over 15 years at this point and a lot has changed in its capabilities. What hasn’t changed though, is the core skills — often called “soft skills” — that are required to push you to the next level. I’ve spent a large chunk of those 15 years as a consultant, helping organizations — both global corporations and small startups — write better CSS. In almost every single case, an improvement of the organization’s core skills was the overarching difference.&lt;/p&gt;
        &lt;p&gt;The main reason for this is a lot of the time, the organizations I worked with coded themselves into a corner. They’d done that because they just plowed through — Jira ticket after Jira ticket — rather than step back and question, “is our approach actually working?” By focusing on their team’s&amp;nbsp;&lt;strong&gt;core skills&lt;/strong&gt;, we were often — and very quickly — able to identify problem areas and come up with pragmatic solutions that were almost never development solutions. These solutions were instead:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;Improving communication and collaboration between design and development teams&lt;/li&gt;
        &lt;li&gt;Reducing design “hand-off” and instead, making the web-based output the source of truth&lt;/li&gt;
        &lt;li&gt;Moving slowly and methodically to move fast&lt;/li&gt;
        &lt;li&gt;Putting a sharp focus on planning and collaboration between developers and designers,&amp;nbsp;&lt;em&gt;way in advance&lt;/em&gt;&amp;nbsp;of production work being started&lt;/li&gt;
        &lt;li&gt;Changing the mindset of “plow on” to taking a step back, thoroughly evaluating the problem, and then developing a collaborative and by proxy,&amp;nbsp;&lt;strong&gt;much simpler&lt;/strong&gt;&amp;nbsp;solution&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h2 class=&quot;wp-block-heading&quot; id=&quot;will-improving-my-core-skills-actually-help&quot;&gt;&lt;a href=&quot;https://css-tricks.com/the-importance-of-investing-in-soft-skills-in-the-age-of-ai/#aa-will-improving-my-core-skills-actually-help&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-will-improving-my-core-skills-actually-help&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Will improving my core skills actually help?&lt;/h2&gt;
        &lt;p&gt;One thing AI cannot do — and (hopefully) never will be able to do — is&amp;nbsp;&lt;strong&gt;be human&lt;/strong&gt;. Core skills — especially communication skills — are very difficult for AI to recreate&amp;nbsp;&lt;em&gt;well&lt;/em&gt;&amp;nbsp;because the way we communicate is uniquely&amp;nbsp;&lt;strong&gt;human&lt;/strong&gt;.&lt;/p&gt;
        &lt;p&gt;I’ve been doing this job a&amp;nbsp;&lt;em&gt;long time&lt;/em&gt;&amp;nbsp;and something that’s certainly propelled my career is the fact I’ve always been versatile. Having a multifaceted skillset — like in my case, learning CSS and HTML to improve my design work — will only benefit you. It opens up other opportunities for you too, which is especially important with the way the tech industry currently is.&lt;/p&gt;
        &lt;p&gt;If you’re wondering how to get started on improving your core skills, I’ve got you. I produced a course called&amp;nbsp;&lt;a href=&quot;https://piccalil.li/complete-css&quot; rel=&quot;noopener&quot;&gt;Complete CSS&lt;/a&gt;&amp;nbsp;this year but it’s a&amp;nbsp;&lt;em&gt;slight&lt;/em&gt;&amp;nbsp;rug-pull because it’s actually a core skills course that uses CSS as a context. You get to learn some iron-clad CSS skills&amp;nbsp;&lt;em&gt;alongside&lt;/em&gt;&amp;nbsp;those core skills too, as a bonus. It’s definitely worth&amp;nbsp;&lt;a href=&quot;https://piccalil.li/complete-css&quot; rel=&quot;noopener&quot;&gt;checking out&lt;/a&gt;&amp;nbsp;if you are interested in developing your core skills, especially so if you&amp;nbsp;&lt;a href=&quot;https://piccalil.li/blog/we-made-an-email-template-to-help-convince-your-boss-to-pay-for-complete-css/&quot; rel=&quot;noopener&quot;&gt;receive a training budget from your employer&lt;/a&gt;.&lt;/p&gt;
        &lt;h2 class=&quot;wp-block-heading&quot; id=&quot;wrapping-up&quot;&gt;&lt;a href=&quot;https://css-tricks.com/the-importance-of-investing-in-soft-skills-in-the-age-of-ai/#aa-wrapping-up&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-wrapping-up&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Wrapping up&lt;/h2&gt;
        &lt;p&gt;The main message I want to get across is developing your core skills is as important — if not&amp;nbsp;&lt;em&gt;more&lt;/em&gt;&amp;nbsp;important — than keeping up to date with the latest CSS or JavaScript thing. It might be uncomfortable for you to do that, but trust me, being able to stand yourself out over AI is only going to be a good thing, and improving your core skills is a sure-fire way to do exactly that.&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/the-importance-of-investing-in-soft-skills-in-the-age-of-ai/</link>
      <guid isPermaLink="false">https://css-tricks.com/the-importance-of-investing-in-soft-skills-in-the-age-of-ai/</guid>
      <pubDate>Mon, 06 Jan 2025 14:58:46 GMT</pubDate>
      <author>Andy Bell</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2021/11/Untitled_Artwork-scaled.jpg" type="image/jpeg"></enclosure>
      <category>artificial intelligence</category>
      <category>jobs</category>
    </item>
    <item>
      <title>Thank You (2024 Edition)</title>
      <description>&lt;p&gt;I’ll be honest: writing this post feels like a chore some years. Rounding up and reflecting on what’s happened throughout the year is somewhat obligatory for a site like this, especially when &lt;a href=&quot;https://css-tricks.com/thank-you-2007/&quot;&gt;it’s a tradition that goes back as far as 2007&lt;/a&gt;. &lt;em&gt;“Hey, look at all the cool things we did!”&lt;/em&gt;&lt;/p&gt;
        &lt;p&gt;This year is different. Much different. I’m &lt;strong&gt;more&lt;/strong&gt; thankful this time around because, last year, I didn’t even get to write this post. At this time last year, I was a full-time student bent on earning a master’s degree while doing part-time contract work.&lt;/p&gt;
        &lt;p&gt;But now that I’m back, writing this feels so, so, so good. There’s a lot more gusto going into my writing when I say: &lt;em&gt;thank you so very much!&lt;/em&gt; It’s because of you and your support for this site that I’m back at my regular job. I’d be remiss if I didn’t say that, so please accept my sincerest gratitude and appreciation. &lt;em&gt;Thank you!&lt;/em&gt;&lt;/p&gt;
        &lt;p&gt;Let’s tie a bow on this year and round up what happened around here in 2024.&lt;/p&gt;
        &lt;span id=&quot;more-383295&quot;&gt;&lt;/span&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;overall-traffic&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-overall-traffic&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-overall-traffic&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Overall traffic&lt;/h3&gt;
        &lt;p&gt;Is it worth saying anything about traffic? This site’s pageviews had been trending down since 2020 as it has for just about any blog about front-end dev, but it absolutely cratered when the site was on pause for over a year. Things began moving again in late May, but it was probably closer to mid-June when the engine fully turned over and we resumed regular publishing.&lt;/p&gt;
        &lt;p&gt;And, yes. With regular publishing came a fresh influx of pageviews. Funny how much difference it makes just turning on the lights.&lt;/p&gt;
        &lt;p&gt;All said and done, we had &lt;strong&gt;26 million&lt;/strong&gt; unique pageviews in 2024. That’s exactly what we had in 2023 as traffic went into a tailspin, so I call it a win that we stopped the bleeding and broke even this year.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;publishing&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-publishing&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-publishing&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Publishing&lt;/h3&gt;
        &lt;p&gt;A little bit of history when it comes to how many articles we publish each year:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;2020:&lt;/strong&gt;&amp;nbsp;1,183 articles&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;2021:&lt;/strong&gt;&amp;nbsp;890 articles (site acquired by DigitalOcean)&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;2022:&lt;/strong&gt;&amp;nbsp;390 articles&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;2023:&lt;/strong&gt; 0 articles (site paused)&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;2024:&lt;/strong&gt; 153 articles (site resumed in late June)&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;Going from 0 articles to 153 (including this one) in six months was no small task. I was the only writer on the team until about October. There are only three of us right now; even then, we’re all extremely part-time workers. Between us and &lt;strong&gt;19 guest authors&lt;/strong&gt;, I’d say that we outperformed expectations as far as quantity goes — but I’m even more proud of the effort and &lt;em&gt;quality&lt;/em&gt; that goes into each one. It’s easy to imagine publishing upwards of 400 articles in 2025 if we maintain the momentum.&lt;/p&gt;
        &lt;p&gt;Case in point: we published a whopping &lt;strong&gt;three guides&lt;/strong&gt; in six months:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;CSS Anchor Positioning&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-length-units/&quot;&gt;CSS Length Units&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-selectors/&quot;&gt;CSS Selectors&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;That might not sound like a lot, so I’ll put it in context. We published just one guide in 2022 and our goal was to write three in all of 2021. We got three this year alone, and they’re all just plain great. I visit Juan’s Anchor Positioning guide as much as — if not more than — I do the ol’ &lt;a href=&quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&quot;&gt;Flexbox&lt;/a&gt; and &lt;a href=&quot;https://css-tricks.com/snippets/css/complete-guide-grid/&quot;&gt;Grid&lt;/a&gt; guides.&lt;/p&gt;
        &lt;p&gt;On top of that, we garnered &lt;strong&gt;34 new additions&lt;/strong&gt; to the CSS-Tricks Almanac! That includes all of the features for Anchor Positioning and View Transitions, as well as other new features like &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/s/starting-style/&quot;&gt;@starting-style&lt;/a&gt;&lt;/code&gt;. And the reason spent so much time in the Almanac is because we made some significant…&lt;/p&gt;
        &lt;h2 class=&quot;wp-block-heading&quot; id=&quot;site-updates&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-site-updates&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-site-updates&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Site updates&lt;/h2&gt;
        &lt;p&gt;This is where the bulk of the year was spent, so let’s break things out into digestible chunks.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;almanac&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-almanac&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-almanac&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Almanac&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; fetchpriority=&quot;high&quot; decoding=&quot;async&quot; width=&quot;2251&quot; height=&quot;1051&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=2251%2C1051&amp;amp;ssl=1&quot; alt=&quot;Comparing the old Almanac page header with the new one containing links to new sections.&quot; class=&quot;wp-image-380971&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?w=2251&amp;amp;ssl=1 2251w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=300%2C140&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=1024%2C478&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=768%2C359&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=1536%2C717&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/almanac-header-compare.png?resize=2048%2C956&amp;amp;ssl=1 2048w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/re-working-the-css-almanac/&quot;&gt;We refreshed the entire thing!&lt;/a&gt; It used to be just selectors and properties, but now we can write about everything from at-rules and functions to pseudos and everything in between. We still need a lot of help in there, so maybe consider &lt;a href=&quot;https://css-tricks.com/guest-writing/&quot;&gt;guesting writing with us&lt;/a&gt;. 😉&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;table-of-contents&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-table-of-contents&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-table-of-contents&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Table of Contents&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; decoding=&quot;async&quot; width=&quot;2200&quot; height=&quot;1822&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=2200%2C1822&amp;amp;ssl=1&quot; alt=&quot;Showing the table of contents widget in the right sidebar of an article.&quot; class=&quot;wp-image-383314&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?w=2200&amp;amp;ssl=1 2200w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=300%2C248&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=1024%2C848&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=768%2C636&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=1536%2C1272&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/table-of-contents-widget.png?resize=2048%2C1696&amp;amp;ssl=1 2048w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;We’ve been embedding anchor links to section headings in articles for several years, &lt;a href=&quot;https://css-tricks.com/table-of-contents-block-in-wordpress/&quot;&gt;but it required using a WordPress block&lt;/a&gt; and it was fairly limiting as far as placement and customization. Now we generate those links automatically and include a conditional that allows us to toggle it on and off for specific articles. I’m working on an article about how it came together that we’ll publish after the holiday break.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;notes&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-notes&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-notes&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Notes&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;3638&quot; height=&quot;2066&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=3638%2C2066&amp;amp;ssl=1&quot; alt=&quot;The main Notes screen with the first three notecards showing in a row.&quot; class=&quot;wp-image-383317&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?w=3638&amp;amp;ssl=1 3638w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=300%2C170&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=1024%2C582&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=768%2C436&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=1536%2C872&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?resize=2048%2C1163&amp;amp;ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-notes.png?w=3000&amp;amp;ssl=1 3000w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;There’s a &lt;a href=&quot;https://css-tricks.com/category/notes/&quot;&gt;new section&lt;/a&gt; where we take notes on what other people are writing about and share our takeaways with you. The motivation was to lower the barrier to writing more freely. Technical writing takes a lot of care and planning that’s at odds with openly learning and sharing. This way, we have a central spot where you can see what we’re learning and join us along the way — &lt;a href=&quot;https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/&quot;&gt;such as this set of notes&lt;/a&gt; I took from Bramus’ amazing free course on scroll-driven animations.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;links&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-links&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-links&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Links&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2528&quot; height=&quot;2016&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=2528%2C2016&amp;amp;ssl=1&quot; alt=&quot;The main Links page with the first two link articles showing in a vertical list that includes information about the link.&quot; class=&quot;wp-image-383318&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?w=2528&amp;amp;ssl=1 2528w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=300%2C239&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=1024%2C817&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=768%2C612&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=1536%2C1225&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-links.png?resize=2048%2C1633&amp;amp;ssl=1 2048w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/category/links/&quot;&gt;This is another area of the site that got a fresh coat of paint.&lt;/a&gt; Well, more than paint. It used to be that links were in the same stream as the rest of the articles, tutorials, and guides we publish. Links are meant to be snappy, sharable bits — conversation starters if you will. Breaking them out of the main feed into their own distinguished section helps reduce the noise on this site while giving links a brighter spotlight with a quicker path to get to the original article. Like when &lt;a href=&quot;https://css-tricks.com/anchoreum-a-new-game-for-learning-anchor-positioning/&quot;&gt;there’s a new resource for learning Anchor Positioning&lt;/a&gt;, we can shoot that out a lot more easily.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;quick-hits&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-quick-hits&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-quick-hits&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Quick Hits&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2072&quot; height=&quot;1644&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=2072%2C1644&amp;amp;ssl=1&quot; alt=&quot;The main page for CSS-Tricks Quick Hits showing the first two items in a vertical list.&quot; class=&quot;wp-image-383337&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?w=2072&amp;amp;ssl=1 2072w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=300%2C238&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=1024%2C812&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=768%2C609&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=1536%2C1219&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-quick-hits.png?resize=2048%2C1625&amp;amp;ssl=1 2048w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;We introduced another new piece of content in the form of brief one-liners that you might typically find us posting on Mastodon or Bluesky. We still post to those platforms &lt;a href=&quot;https://css-tricks.com/category/quick-hits/&quot;&gt;but now we can write them here on the site&lt;/a&gt; and push them out when needed. There’s a lot more flexibility there, even if we haven’t given it a great deal of love just yet.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;picks&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-picks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-picks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Picks&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-large&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;806&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=1024%2C806&amp;amp;ssl=1&quot; alt=&quot;The main CSS-Tricks Picks page showing the first two picks in a vertical stack.&quot; class=&quot;wp-image-383332&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=1024%2C806&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=300%2C236&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=768%2C605&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=1536%2C1209&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-picks.png?resize=2048%2C1613&amp;amp;ssl=1 2048w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/picks/&quot;&gt;There’s a new feed of the articles we’re reading.&lt;/a&gt; It might seem a lot like Links, but the idea is that we can simply “star” something from our RSS reader and it’ll show up in the feed. They’re simply interesting articles that catch our attention that we want to spotlight and share, even if we don’t have any commentary to contribute. &lt;a href=&quot;https://css-tricks.com/pages-for-likes/&quot;&gt;This was Chris’ brainchild a few years ago&lt;/a&gt; and it feels so good to bring it to fruition. I’ll write something up about it after the break, but you can already head over there.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;baseline-status&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-baseline-status&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-baseline-status&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Baseline Status&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2528&quot; height=&quot;1676&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=2528%2C1676&amp;amp;ssl=1&quot; alt=&quot;Showing the Baseline Status plugin in the WordPress Plugin Directory.&quot; class=&quot;wp-image-383323&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?w=2528&amp;amp;ssl=1 2528w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=300%2C199&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=1024%2C679&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=768%2C509&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=1536%2C1018&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/wordpress-baseline-status.png?resize=2048%2C1358&amp;amp;ssl=1 2048w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Ooo, this one’s fun! I saw that &lt;a href=&quot;https://web.dev/blog/show-baseline-status&quot; rel=&quot;noopener&quot;&gt;the Chrome team put out a new web component&lt;/a&gt; for embedding web platform browser support information on a page so I set out to make it into a WordPress block we can use throughout the Almanac, which we’re already starting to roll out as content is published or refreshed (such as here in the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/#aa-browser-support&quot;&gt;anchor-name&lt;/a&gt;&lt;/code&gt; property). I’m still working on a write-up about it, but it’s I’ve already &lt;a href=&quot;https://wordpress.org/plugins/baseline-status/&quot; rel=&quot;noopener&quot;&gt;made it available in the WordPress Plugin Directory&lt;/a&gt; if you want to grab it for your WordPress site.&lt;/p&gt;
        &lt;p&gt;Or, here… I can simply drop it in and show you.&lt;/p&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;anchor-positioning&quot;&gt;&lt;/baseline-status&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;post-slider&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-post-slider&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-post-slider&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;strong&gt;Post Slider&lt;/strong&gt;&lt;/h4&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;2788&quot; height=&quot;1062&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=2788%2C1062&amp;amp;ssl=1&quot; alt=&quot;Post slider for the latest almanac articles, showing the first five cards in a row.&quot; class=&quot;wp-image-383326&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?w=2788&amp;amp;ssl=1 2788w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=300%2C114&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=1024%2C390&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=768%2C293&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=1536%2C585&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/css-tricks-post-slider.png?resize=2048%2C780&amp;amp;ssl=1 2048w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;This was one of the first things I made when re-joining the team. We wanted to surface a greater number of articles on &lt;a href=&quot;https://css-tricks.com/&quot;&gt;the homepage&lt;/a&gt; so that it’s easier to find specific types of content, whether it’s the latest five articles, the 10 most recently updated Almanac items or guides, classic CSS tricks from ages ago… that sort of thing. So, we got away from merely showing the 10 most recent articles and developed a series of post sliders that pull from different areas of the site. Converting our existing post slider component into a WordPress block made it more portable and a heckuva lot easier to update the homepage — and any other page or post where we might need a post slider. In fact, that’s another one I can demo for you right here…&lt;/p&gt;
        &lt;div class=&quot;post-slider&quot; style=&quot;background:
        rgb(38 38 38);&quot;&gt;
        &lt;div class=&quot;post-slider-header header-card&quot;&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-classic-tricks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-classic-tricks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        Classic Tricks &lt;/h2&gt;
        &lt;p class=&quot;header-card-sponsor&quot;&gt;
        Timeless CSS gems &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;mini-card-grid&quot;&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-313469&quot;&gt;
        &lt;time datetime=&quot;2020-06-22&quot; title=&quot;Originally published Jun 22, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 6, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-scroll-animation&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-scroll-animation&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/scroll-animation/&quot;&gt;
        Scroll Animation &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-303153&quot;&gt;
        &lt;time datetime=&quot;2020-02-17&quot; title=&quot;Originally published Feb 17, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 6, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-yellow-flash&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-yellow-flash&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/the-yellow-flash/&quot;&gt;
        Yellow Flash &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-254582&quot;&gt;
        &lt;time datetime=&quot;2017-05-08&quot; title=&quot;Originally published May 8, 2017&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 6, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-self-drawing-shapes&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-self-drawing-shapes&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/make-shape-draw/&quot;&gt;
        Self-Drawing Shapes &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-305914&quot;&gt;
        &lt;time datetime=&quot;2020-03-30&quot; title=&quot;Originally published Mar 30, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 6, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-scroll-shadows&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-scroll-shadows&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/&quot;&gt;
        Scroll Shadows &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-305930&quot;&gt;
        &lt;time datetime=&quot;2020-03-31&quot; title=&quot;Originally published Mar 31, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        May 20, 2020 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-editable-style-blocks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-editable-style-blocks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/editable-style-blocks/&quot;&gt;
        Editable Style Blocks &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-304986&quot;&gt;
        &lt;time datetime=&quot;2020-03-15&quot; title=&quot;Originally published Mar 15, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 6, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-scroll-indicator&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-scroll-indicator&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/&quot;&gt;
        Scroll Indicator &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-254474&quot;&gt;
        &lt;time datetime=&quot;2017-05-04&quot; title=&quot;Originally published May 4, 2017&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Mar 15, 2020 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-border-triangles&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-border-triangles&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/how-to-make-a-triangle/&quot;&gt;
        Border Triangles &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-311167&quot;&gt;
        &lt;time datetime=&quot;2020-06-04&quot; title=&quot;Originally published Jun 4, 2020&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Oct 3, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-pin-scrolling-to-bottom&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-pin-scrolling-to-bottom&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/&quot;&gt;
        Pin Scrolling to Bottom &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;mini-card module module-article &quot; id=&quot;mini-post-255104&quot;&gt;
        &lt;time datetime=&quot;2017-05-26&quot; title=&quot;Originally published May 26, 2017&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Jul 5, 2021 &lt;/time&gt;
        &lt;h3 class=&quot;mini-card-title&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-infinite-scrolling-background-image&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-infinite-scrolling-background-image&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/books/fundamental-css-tactics/infinite-scrolling-background-image/&quot;&gt;
        Infinite Scrolling Background Image &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;So, yeah. This year was heavier on development than many past years. But everything was done with the mindset of making content easier to find, publish, and share. I hope that this is like a little punch on the gas pedal that accelerates our ability to get fresh content out to you.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;2025-goals&quot;&gt;&lt;a href=&quot;https://css-tricks.com/thank-you-2024-edition/#aa-2025-goals&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-2025-goals&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;2025 Goals&lt;/h3&gt;
        &lt;p&gt;I’m quite reluctant to articulate new goals when there are so many things still in flux, but the planner in me can’t help myself. If I can imagine a day at the end of next year when I’m reflecting on things exactly like this, I’d be happy, nay &lt;em&gt;stoked&lt;/em&gt;, if I was able to say we did these things:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Publish 1-2 new guides.&lt;/strong&gt; We already have two in the works! That said, the bar for quality is set very high on these, so it’s still a journey to get from planning to publishing two stellar and chunky guides.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Fill in the Almanac.&lt;/strong&gt; My oh my, there is SO much work to do in this little corner of the site. We’ve only got a few pages in the at-rules and functions sections that we recently created and could use &lt;a href=&quot;https://css-tricks.com/guest-writing/&quot;&gt;all the help we can get&lt;/a&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Restart the newsletter.&lt;/strong&gt; This is something I’ve been itching to do. I know I miss reading the newsletter (especially when Robin was writing it) and this community feels so much smaller and quieter

...

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

github-actions bot commented Jan 7, 2025

http://localhost:1200/css-tricks/guides - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Latest CSS Guides</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/guides" rel="self" type="application/rss+xml"></atom:link>
    <description>Dive deep into CSS features and concepts - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Tue, 07 Jan 2025 10:24:39 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>CSS Anchor Positioning Guide</title>
      <description>&lt;div class=&quot;wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow&quot; style=&quot;flex-basis:66%&quot;&gt;
        &lt;p&gt;Not long ago, if we wanted a tooltip or popover positioned on top of another element, we would have to set our tooltip’s position to something other than &lt;code&gt;static&lt;/code&gt; and use its inset/transform properties to place it &lt;em&gt;exactly&lt;/em&gt; where we want. This works, but the element’s position is susceptible to user scrolls, zooming, or animations since the tooltip could overflow off of the screen or wind up in an awkward position. The only way to solve this was using JavaScript to check whenever the tooltip goes out of bounds so we can correct it… again in JavaScript.&lt;/p&gt;
        &lt;p&gt; CSS Anchor Positioning gives us a simple interface to attach elements next to others just by saying which sides to connect — directly in CSS. It also lets us set a fallback position so that we can avoid the overflow issues we just described. For example, we might set a tooltip element above its anchor but allow it to fold underneath the anchor when it runs out of room to show it above.&lt;/p&gt;
        &lt;p&gt;Anchor positioning is different from a lot of other features as far as how quickly it’s gained browser support: its &lt;a href=&quot;https://www.w3.org/standards/history/css-anchor-position-1/&quot; rel=&quot;noopener&quot;&gt;first draft was published on June 2023&lt;/a&gt; and, just a year later, it was &lt;a href=&quot;https://caniuse.com/css-anchor-positioning&quot; rel=&quot;noopener&quot;&gt;released on Chrome 125&lt;/a&gt;. To put it into perspective, the first draft specification for CSS variables &lt;a href=&quot;https://www.w3.org/standards/history/css-variables-1/&quot; rel=&quot;noopener&quot;&gt;was published in 2012&lt;/a&gt;, but it took four years for them to gain wide browser support.&lt;/p&gt;
        &lt;p&gt;So, let’s dig in and learn about things like attaching target elements to anchor elements and positioning and sizing them.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top ticss-986972e6 is-layout-flow wp-block-column-is-layout-flow&quot; style=&quot;flex-basis:33%&quot;&gt;&lt;h2 class=&quot;wp-block-heading&quot; id=&quot;quick-reference&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-quick-reference&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-quick-reference&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Quick reference&lt;/h2&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Define an anchor element */
        .anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Anchor a target element */
        .target {
        position: absolute;
        position-anchor: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Position a target element */
        .target {
        position-area: start end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-group sticky-toc&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;details&gt;
        &lt;summary&gt;
        Table of contents &lt;/summary&gt;
        &lt;ol class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-basics-and-terminology&quot;&gt;Basics and terminology&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-attaching-targets-to-anchors&quot;&gt;Attaching targets to anchors&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-positioning-targets&quot;&gt;Positioning targets&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-setting-fallback-positions&quot;&gt;Setting fallback positions&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-custom-position-and-size-fallbacks&quot;&gt;Custom position and size fallbacks&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-multiple-anchors&quot;&gt;Multiple anchors&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-accessibility&quot;&gt;Accessibility&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-browser-support&quot;&gt;Browser support&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-spec-changes&quot;&gt;Spec changes&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-known-bugs&quot;&gt;Known bugs&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-almanac-references&quot;&gt;Almanac references&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-further-reading&quot;&gt;Further reading&lt;/a&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;/details&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div style=&quot;height:var(--wp--preset--spacing--60)&quot; aria-hidden=&quot;true&quot; class=&quot;wp-block-spacer&quot;&gt;&lt;/div&gt;
        &lt;details open=&quot;&quot;&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-basics-and-terminology&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-basics-and-terminology&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Basics and terminology&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p&gt;At its most basic, CSS Anchor Positioning introduces a completely new way of placing elements on the page relative to one another. To make our lives easier, we’re going to use specific names to clarify which element is connecting to which:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Anchor:&lt;/strong&gt; This is the element used as a reference for positioning other elements, hence the &lt;em&gt;anchor&lt;/em&gt;&lt;strong&gt; &lt;/strong&gt;name.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Target:&lt;/strong&gt; This is an absolutely positioned element placed relative to one or more anchors. The &lt;em&gt;target&lt;/em&gt; is the name we will use from now on, but you will often find it as just an “absolutely positioned element” in the spec.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;For the following code examples and demos, you can think of these as just two &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; elements next to one another.&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;CSS Anchor Positioning is all about elements with absolute positioning (i.e., &lt;code&gt;position: absolute&lt;/code&gt;), so there are also some concepts we have to review before diving in.&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Containing Block:&lt;/strong&gt; This is the box that contains the elements. For an absolute element, the containing block is the viewport the closest ancestor with a position other than &lt;code&gt;static&lt;/code&gt; or certain values in properties like &lt;a href=&quot;https://css-tricks.com/almanac/properties/c/contain/&quot;&gt;&lt;code&gt;contain&lt;/code&gt;&lt;/a&gt; or &lt;a href=&quot;https://css-tricks.com/almanac/properties/f/filter/&quot;&gt;&lt;code&gt;filter&lt;/code&gt;&lt;/a&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Inset-Modified Containing Block (IMCB):&lt;/strong&gt; For an absolute element, inset properties (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, etc.) reduce the size of the containing block into which it is sized and positioned, resulting in a new box called the &lt;em&gt;inset-modified containing block&lt;/em&gt;, or IMCB for short. This is a vital concept to know since properties we’re covering in this guide — like &lt;code&gt;position-area&lt;/code&gt; and &lt;code&gt;position-try-order&lt;/code&gt; — rely on this concept.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-attaching-targets-to-anchors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-attaching-targets-to-anchors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Attaching targets to anchors&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;We’ll first look at the two properties that establish anchor positioning. The first, &lt;code&gt;anchor-name&lt;/code&gt;, establishes the anchor element, while the second, &lt;code&gt;position-anchor&lt;/code&gt;, attaches a target element to the anchor element.&lt;/p&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column ticss-30288ed1 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; fetchpriority=&quot;high&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Square labeled as &amp;quot;anchor&amp;quot;&quot; class=&quot;wp-image-381095&quot; style=&quot;width:300px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;anchorname&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-name&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-anchor-name&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;anchor-name&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;A normal element isn’t an anchor by default — we have to explicitly make an element an anchor. The most common way is by giving it a name, which we can do with the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;anchor-name&lt;/a&gt;&lt;/code&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;anchor-name: none | &amp;lt;dashed-ident&amp;gt;#&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The name must be a &lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt;, that is, a custom name prefixed with two dashes (&lt;code&gt;--&lt;/code&gt;), like &lt;code&gt;--my-anchor&lt;/code&gt; or &lt;code&gt;--MyAnchor&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This gives us an anchor element. All it needs is something anchored to it. That’s what we call the “target” element which is set with the &lt;code&gt;position-anchor&lt;/code&gt; property.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column ticss-bd46f479 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Square labeled as &amp;quot;target&amp;quot;&quot; class=&quot;wp-image-381096&quot; style=&quot;width:300px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-anchor-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-anchor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-anchor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The target element is an element with an absolute position linked to an anchor element matching what’s declared on the &lt;code&gt;anchor-name&lt;/code&gt; property. This attaches the target element to the anchor element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-anchor: auto | &amp;lt;anchor-element&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It takes a valid &lt;code&gt;&amp;lt;anchor-element&amp;gt;&lt;/code&gt;. So, if we establish another element as the “anchor” we can set the target with the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;position-anchor&lt;/a&gt;&lt;/code&gt; property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-anchor: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Normally, if a valid anchor element isn’t found, then other anchor properties and functions will be ignored.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-positioning-targets&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-positioning-targets&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Positioning targets&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;Now that we know how to establish an anchor-target relationship, we can work on &lt;strong&gt;positioning&lt;/strong&gt; the target element in relation to the anchor element. The following two properties are used to set which side of the anchor element the target is positioned on (&lt;code&gt;position-area&lt;/code&gt;) and conditions for hiding the target element when it runs out of room (&lt;code&gt;position-visibility&lt;/code&gt;).&lt;/p&gt;
        &lt;div class=&quot;wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top ticss-168d39a5 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Anchor element with target elements spanning around it.&quot; class=&quot;wp-image-380907&quot; style=&quot;width:640px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-area-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-area&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-area&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-area&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The next step is positioning our target relative to its anchor. The easiest way is to use the &lt;code&gt;position-area&lt;/code&gt; property, which creates an imaginary 3×3 grid around the anchor element and lets us place the target in one or more regions of the grid.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-area: auto | &amp;lt;position-area&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It works by setting the row and column of the grid using&amp;nbsp;&lt;strong&gt;logical values&lt;/strong&gt;&amp;nbsp;like&amp;nbsp;&lt;code&gt;start&lt;/code&gt;&amp;nbsp;and&amp;nbsp;&lt;code&gt;end&lt;/code&gt;&amp;nbsp;(dependent on the writing mode);&amp;nbsp;&lt;strong&gt;physical values&lt;/strong&gt;&amp;nbsp;like&amp;nbsp;&lt;code&gt;top&lt;/code&gt;,&amp;nbsp;&lt;code&gt;left&lt;/code&gt;,&amp;nbsp;&lt;code&gt;right&lt;/code&gt;,&amp;nbsp;&lt;code&gt;bottom&lt;/code&gt;&amp;nbsp;and the&amp;nbsp;&lt;code&gt;center&lt;/code&gt;&amp;nbsp;&lt;strong&gt;shared value&lt;/strong&gt;, then it will shrink the target’s IMCB into the region of the grid we chose.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: top right;
        /* or */
        position-area: start end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Logical values refer to the containing block’s writing mode, but if we want to position our target relative to its writing mode we would prefix it with the &lt;code&gt;self&lt;/code&gt; value.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: self-start self-end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;There is also the &lt;code&gt;center&lt;/code&gt; value that can be used in every axis.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: center right;
        /* or */
        position-area: start center;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To place a target across two adjacent grid regions, we can use the prefix &lt;code&gt;span-&lt;/code&gt; on any value (that isn’t &lt;code&gt;center&lt;/code&gt;) a row or column at a time.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: span-top left;
        /* or */
        position-area: span-start start;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Finally, we can span a target across three adjacent grid regions using the &lt;code&gt;span-all&lt;/code&gt; value.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: bottom span-all;
        /* or */
        position-area: end span-all;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;You may have noticed that the &lt;code&gt;position-area&lt;/code&gt; property doesn’t have a strict order for physical values; writing&lt;code&gt; position-area: top left&lt;/code&gt; is the same as &lt;code&gt;position-area: left top&lt;/code&gt;, but the order is important for logical value since &lt;code&gt;position-area: start end&lt;/code&gt; is completely opposite to &lt;code&gt;position-area: end start&lt;/code&gt;.&lt;/p&gt;
        &lt;p&gt;We can make logical values interchangeable by prefixing them with the desired axis using &lt;code&gt;y-&lt;/code&gt;, &lt;code&gt;x-&lt;/code&gt;, &lt;code&gt;inline-&lt;/code&gt; or &lt;code&gt;block-&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: inline-end block-start;
        /* or */
        position-area: y-start x-end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_PormJMG&quot; src=&quot;https://codepen.io/anon/embed/preview/PormJMG?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=PormJMG&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed PormJMG&quot; title=&quot;CodePen Embed PormJMG&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_VwJMxNp&quot; src=&quot;https://codepen.io/anon/embed/preview/VwJMxNp?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=VwJMxNp&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed VwJMxNp&quot; title=&quot;CodePen Embed VwJMxNp&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group ticss-e32e6402&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Examples on each position-visibility value: always showing the target, anchors-visible hiding it when the anchor goes out of screen and no-overflow hiding it when the target overflows&quot; class=&quot;wp-image-380921&quot; style=&quot;width:650px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-visibility-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-visibility&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-visibility&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-visibility&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;It provides certain conditions to hide the target from the viewport.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-visibility: always | anchors-visible | no-overflow&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;always&lt;/code&gt;:&lt;/strong&gt; The target is always displayed without regard for its anchors or its overflowing status.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;no-overflow&lt;/code&gt;:&lt;/strong&gt; If even after applying the position fallbacks, the target element is still overflowing its containing block, then it is strongly hidden.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;anchors-visible&lt;/code&gt;:&lt;/strong&gt; If the &lt;strong&gt;anchor&lt;/strong&gt; (not the target) has completely overflowed its containing block or is completely covered by other elements, then the target is strongly hidden.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-visibility: always | anchors-visible | no-overflow&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_XWLzGVe&quot; src=&quot;https://codepen.io/anon/embed/preview/XWLzGVe?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=XWLzGVe&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed XWLzGVe&quot; title=&quot;CodePen Embed XWLzGVe&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-setting-fallback-positions&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-setting-fallback-positions&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Setting fallback positions&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;Once the target element is positioned against its anchor, we can give the target additional instructions that tell it what to do if it runs out of space. We’ve already looked at the &lt;code&gt;position-visibility&lt;/code&gt; property as one way of doing that — we simply tell the element to hide. The following two properties, however, give us more control to &lt;strong&gt;re-position&lt;/strong&gt; the target by trying other sides of the anchor (&lt;code&gt;position-try-fallbacks&lt;/code&gt;) and the order in which it attempts to re-position itself (&lt;code&gt;position-try-order&lt;/code&gt;).&lt;/p&gt;
        &lt;p&gt;The two properties can be declared together with the &lt;code&gt;position-try&lt;/code&gt; shorthand property — we’ll touch on that after we look at the two constituent properties.&lt;/p&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column ticss-b9b485c1 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Examples on each try-tactic: flip-block flipping the target from the top to the bottom, flip-inline from left to right and flip-start from left to top (single value) and top right to left bottom (two values)&quot; class=&quot;wp-image-380903&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-fallbacks-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-fallbacks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-try-fallbacks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-try-fallbacks&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This property accepts a list of comma-separated &lt;em&gt;position fallbacks&lt;/em&gt; that are tried whenever the target overflows out of space in its containing block. The property attempts to reposition itself using each fallback value until it finds a fit or runs out of options.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try-fallbacks: none | [ [&amp;lt;dashed-ident&amp;gt; || &amp;lt;try-tactic&amp;gt;] | &amp;lt;&#39;inset-area&#39;&amp;gt; ]#&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;none&lt;/code&gt;:&lt;/strong&gt; Leaves the target’s position options list empty.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt;:&lt;/strong&gt; Adds to the options list a custom &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-at-rule&quot;&gt;@position-try&lt;/a&gt;&lt;/code&gt; fallback with the given name. If there isn’t a matching &lt;code&gt;@position-try&lt;/code&gt;, the value is ignored.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt;:&lt;/strong&gt; Creates an option list by flipping the target’s current position on one of three axes, each defined by a distinct keyword. They can also be combined to add up their effects.
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;The &lt;code&gt;flip-block&lt;/code&gt; keyword swaps the values in the block axis.&lt;/li&gt;
        &lt;li&gt;The &lt;code&gt;flip-inline&lt;/code&gt; keyword swaps the values in the inline axis.&lt;/li&gt;
        &lt;li&gt;The &lt;code&gt;flip-start&lt;/code&gt; keyword swaps the values diagonally.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt; || &lt;code&gt;&amp;lt;try-tactic&amp;gt;:&lt;/code&gt;&lt;/strong&gt; Combines a custom &lt;code&gt;@try-option&lt;/code&gt; and a &lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt; to create a single-position fallback. The &lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt; keywords can also be combined to sum up their effects.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;&quot;position-area&quot;&amp;gt;&lt;/code&gt;&lt;/strong&gt; Uses the &lt;code&gt;position-area&lt;/code&gt; syntax to move the anchor to a new position.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try-fallbacks:
        --my-custom-position,
        --my-custom-position flip-inline,
        bottom left;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column ticss-69217be6 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;two targets sorrounding an anchor, positioned where the IMCB is the largest. &quot; class=&quot;wp-image-380914&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-order-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try-order&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-try-order&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-try-order&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This property chooses a new position from the fallback values defined in the &lt;code&gt;position-try-fallbacks&lt;/code&gt; property based on which position gives the target the most space. The rest of the options are reordered with the largest available space coming first.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try-order: normal | most-width | most-height | most-block-size | most-inline-size&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;What exactly does “more space” mean? For each position fallback, it finds the IMCB size for the target. Then it chooses the value that gives the IMCB the widest or tallest size, depending on which option is selected:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;most-width&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-height&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-block-size&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-inline-size&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try-fallbacks: --custom-position, flip-start;
        position-try-order: most-width;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-try&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;position-try&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This is a shorthand property that combines the &lt;code&gt;position-try-fallbacks&lt;/code&gt; and &lt;code&gt;position-try-order&lt;/code&gt; properties into a single declaration. It accepts first the order and then the list of possible position fallbacks.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try: &amp;lt; &quot;position-try-order&quot; &amp;gt;? &amp;lt; &quot;position-try-fallbacks&quot; &amp;gt;;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So, we can combine both properties into a single style rule:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try: most-width --my-custom-position, flip-inline, bottom left;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-custom-position-and-size-fallbacks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-custom-position-and-size-fallbacks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Custom position and size fallbacks&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;&lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-position-try&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-position-try&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;@position-try&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This at-rule defines a custom position fallback for the &lt;code&gt;position-try-fallbacks&lt;/code&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try &amp;lt;dashed-ident&amp;gt; {
        &amp;lt;declaration-list&amp;gt;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It takes various properties for changing a target element’s position and size and grouping them as a new position fallback for the element to try.&lt;/p&gt;
        &lt;p&gt;Imagine a scenario where you’ve established an anchor-target relationship. You want to position the target element against the anchor’s top-right edge, which is easy enough using the &lt;code&gt;position-area&lt;/code&gt; property we saw earlier:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;See how the &lt;code&gt;.target&lt;/code&gt; is sized at &lt;code&gt;100px&lt;/code&gt;? Maybe it runs out of room on some screens and is no longer able to be displayed at anchor’s the top-right edge. We can supply the &lt;code&gt;.target&lt;/code&gt; with the fallbacks we looked at earlier so that it attempts to re-position itself on an edge with more space:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;4,5&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        position-try-fallbacks: top left;
        position-try-order: most-width;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;And since we’re being good CSSer’s who strive for clean code, we may as well combine those two properties with the &lt;code&gt;position-try&lt;/code&gt; shorthand property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;4&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        position-try: most-width, flip-inline, bottom left;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So far, so good. We have an anchored target element that starts at the top-right corner of the anchor at &lt;code&gt;100px&lt;/code&gt;. If it runs out of space there, it will look at the &lt;code&gt;position-try&lt;/code&gt; property and decide whether to reposition the target to the anchor’s top-left corner (declared as &lt;code&gt;flip-inline&lt;/code&gt;) or the anchor’s bottom-left corner — whichever offers the most width.&lt;/p&gt;
        &lt;p&gt;But what if we want to simulataneously &lt;strong&gt;re-size&lt;/strong&gt; the target element when it is re-positioned? Maybe the target is simply too dang big to display at &lt;code&gt;100px&lt;/code&gt; at either fallback position and we need it to be &lt;code&gt;50px&lt;/code&gt; instead. We can use the &lt;code&gt;@position-try&lt;/code&gt; to do exactly that:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try --my-custom-position {
        position-area: top left;
        width: 50px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;With that done, we now have a custom property called &lt;code&gt;--my-custom-position&lt;/code&gt; that we can use on the &lt;code&gt;position-try&lt;/code&gt; shorthand property. In this case, &lt;code&gt;@position-try&lt;/code&gt; can replace the &lt;code&gt;flip-inline&lt;/code&gt; value since it is the equivalent of &lt;code&gt;top left&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;9&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try --my-custom-position {
        position-area: top left;
        width: 50px;
        }
        .target {
        position: absolute;
        position-area: top right;
        position-try: most-width, --my-custom-position, bottom left;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This way, the &lt;code&gt;.target&lt;/code&gt; element’s width is re-sized from &lt;code&gt;100px&lt;/code&gt; to &lt;code&gt;50px&lt;/code&gt; when it attempts to re-position itself to the anchor’s top-right edge. That’s a nice bit of flexibility that gives us a better chance to make things fit together in any layout.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-functions&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-anchor-functions&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Anchor functions&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group ticss-9c54673b&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;&lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-anchor-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-anchor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;anchor()&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;You might think of the CSS &lt;code&gt;anchor()&lt;/code&gt; function as a shortcut for attaching a target element to an anchor element — specify the anchor, the side we want to attach to, and how large we want the target to be in one fell swoop. But, as we’ll see, the function also opens up the possibility of attaching one target element to multiple anchor elements.&lt;/p&gt;
        &lt;p&gt;This is the function’s formal syntax, which takes up to three arguments:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;anchor( &amp;lt;anchor-element&amp;gt;? &amp;amp;&amp;amp; &amp;lt;anchor-side&amp;gt;, &amp;lt;length-percentage&amp;gt;? )&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So, we’re identifying an anchor element, saying which side we want the target to be positioned on, and how big we want it to be. It’s worth noting that &lt;code&gt;anchor()&lt;/code&gt; can only be declared on inset-related properties (e.g. &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;inset-block-end&lt;/code&gt;, etc.)&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        top: anchor(--my-anchor bottom);
        left: anchor(--my-anchor end, 50%);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Let’s break down the function’s arguments.&lt;/p&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;anchor-element&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument specifies which anchor element we want to attach the target to. We can supply it with either the anchor’s name (see &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-attaching-targets-to-anchors&quot;&gt;“Attaching targets to anchors”&lt;/a&gt;).&lt;/p&gt;
        &lt;p&gt;We also have the choice of not supplying an anchor at all. In that case, the target element uses an implicit anchor element defined in &lt;code&gt;position-anchor&lt;/code&gt;. If there isn’t an implicit anchor, the function resolves to its fallback. Otherwise, it is invalid and ignored.&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;anchor-side&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument sets which side of the anchor we want to position the target element to, e.g. the anchor’s &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, etc.&lt;/p&gt;
        &lt;p&gt;But we have more options than that, including logical side keywords (&lt;code&gt;inside&lt;/code&gt;, &lt;code&gt;outside&lt;/code&gt;), logical direction arguments relative to the user’s writing mode (&lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;, &lt;code&gt;self-start&lt;/code&gt;, &lt;code&gt;self-end&lt;/code&gt;) and, of course, &lt;code&gt;center&lt;/code&gt;.&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;&amp;lt;anchor-side&amp;gt;&lt;/code&gt;: Resolves to the &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt; of the corresponding side of the anchor element. It has physical arguments (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt; &lt;code&gt;right&lt;/code&gt;), logical side arguments (&lt;code&gt;inside&lt;/code&gt;, &lt;code&gt;outside&lt;/code&gt;), logical direction arguments relative to the user’s writing mode (&lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;, &lt;code&gt;self-start&lt;/code&gt;, &lt;code&gt;self-end&lt;/code&gt;) and the &lt;code&gt;center&lt;/code&gt; argument.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;&amp;lt;percentage&amp;gt;&lt;/code&gt;: Refers to the position between the &lt;code&gt;start&lt;/code&gt; (&lt;code&gt;0%&lt;/code&gt;) and &lt;code&gt;end&lt;/code&gt; (&lt;code&gt;100%&lt;/code&gt;). Values below &lt;code&gt;0%&lt;/code&gt; and above &lt;code&gt;100%&lt;/code&gt; are allowed.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;length-percentage&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument is totally optional, so you can leave it out if you’d like. Otherwise, use it as a way of re-sizing the target elemenrt whenever it doesn’t have a valid anchor or position. It positions the target to a fixed &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;percentage&amp;gt;&lt;/code&gt; relative to its containing block.&lt;/p&gt;
        &lt;/details&gt;
        &lt;p&gt;Let’s look at examples using different types of arguments because they all do something a &lt;em&gt;little&lt;/em&gt; different.&lt;/p&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using physical arguments&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380924&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;Physical arguments&lt;/strong&gt; (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;) can be used to position the target regardless of the user’s writing mode. For example, we can position the &lt;code&gt;right&lt;/code&gt; and &lt;code&gt;bottom&lt;/code&gt; inset properties of the target at the &lt;code&gt;anchor(top)&lt;/code&gt; and &lt;code&gt;anchor(left)&lt;/code&gt; sides of the anchor, effectively positioning the target at the anchor’s top-left corner:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        bottom: anchor(top);
        right: anchor(left);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using logical side keywords&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-t

...

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

http://localhost:1200/css-tricks/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 this month</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/popular/false" rel="self" type="application/rss+xml"></atom:link>
    <description>Popular CSS articles this month - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Tue, 07 Jan 2025 10:24:40 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>Yet Another Anchor Positioning Quirk</title>
      <description>&lt;p&gt;I strongly believe Anchor Positioning will go down as one of the greatest additions to CSS. It may not be as game-changing as Flexbox or Grid, but it does fill a positioning gap that has been missing for decades. As awesome as I think it is,&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/anchor-positioning-quirks/&quot;&gt;CSS Anchor Positioning has a lot of quirks&lt;/a&gt;, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has&amp;nbsp;bugged me since I first saw it.&lt;/p&gt;
        &lt;span id=&quot;more-382893&quot;&gt;&lt;/span&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-inception&quot;&gt;&lt;a href=&quot;https://css-tricks.com/yet-another-anchor-positioning-quirk/#aa-the-inception&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-inception&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The inception&lt;/h3&gt;
        &lt;p&gt;It all started a month ago when I was reading about what other people have made using Anchor Positioning, specifically this post by &lt;a href=&quot;https://css-tricks.com/author/afiftemani/&quot;&gt;Temani Afif&lt;/a&gt; about &lt;a href=&quot;https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/&quot; rel=&quot;noopener&quot;&gt;“Anchor Positioning &amp;amp; Scroll-Driven Animations.”&lt;/a&gt; I strongly encourage you to read it and find out what caught my eye there. Combining Anchor Positioning and &lt;a href=&quot;https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/&quot;&gt;Scroll-Driven Animation&lt;/a&gt;, he makes a range slider that changes colors while it progresses.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_JjqNEbZ&quot; src=&quot;https://codepen.io/anon/embed/JjqNEbZ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=JjqNEbZ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed JjqNEbZ&quot; title=&quot;CodePen Embed JjqNEbZ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Amazing by itself, but it’s interesting that he is using two target elements with the same anchor name, each attached to its corresponding anchor, just like magic. If this doesn’t seem as interesting as it looks, we should then briefly recap how Anchor Positioning works.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;anchor-positioning-and-the-anchor-scope-property&quot;&gt;&lt;a href=&quot;https://css-tricks.com/yet-another-anchor-positioning-quirk/#aa-css-anchor-positioning-and-the-anchor-scope-property&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-css-anchor-positioning-and-the-anchor-scope-property&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;CSS Anchor Positioning and the &lt;code&gt;anchor-scope&lt;/code&gt; property&lt;/h3&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;See our complete &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;CSS Anchor Positioning Guide&lt;/a&gt; for a comprehensive deep dive.&lt;/p&gt;
        &lt;p&gt;Anchor Positioning brings two new concepts to CSS, an &lt;em&gt;anchor&lt;/em&gt; element and a &lt;em&gt;target&lt;/em&gt; element. The anchor is the element used as a reference for positioning other elements, hence the anchor name. While the target is an absolutely-positioned element placed relative to one or more anchors.&lt;/p&gt;
        &lt;p&gt;An anchor and a target can be almost every element, so you can think of them as just two &lt;code&gt;div&lt;/code&gt; sitting next to each other:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To start, we first have to register the anchor element in CSS using the &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;&lt;code&gt;anchor-name&lt;/code&gt;&lt;/a&gt; property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;And the &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/a&gt; property on an absolutely-positioned element attaches it to an anchor of the same name. However, to move the target around the anchor we need the &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-area/&quot;&gt;&lt;code&gt;position-area&lt;/code&gt;&lt;/a&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-anchor: --my-anchor;
        position-area: top right;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_oNKavLV&quot; src=&quot;https://codepen.io/anon/embed/preview/oNKavLV?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=oNKavLV&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed oNKavLV&quot; title=&quot;CodePen Embed oNKavLV&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;This works great, but things get complicated if we change our markup to include more anchors and targets:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 1&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 1&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 2&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 2&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 3&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 3&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Instead of each target attaching to its closest anchor, they all pile up at the last registered anchor in the DOM.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_BagXMNv&quot; src=&quot;https://codepen.io/anon/embed/preview/BagXMNv?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=BagXMNv&amp;amp;default-tab=html,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed BagXMNv&quot; title=&quot;CodePen Embed BagXMNv&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;The &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-scope/#aa-why-we-need-anchor-scope&quot;&gt;&lt;code&gt;anchor-scope&lt;/code&gt;&lt;/a&gt; property was introduced in Chrome 131 as an answer to this issue. It limits the scope of anchors to a subtree so that each target attaches correctly. However, I don’t want to focus on this property, because what initially caught my attention was that &lt;strong&gt;Temani didn’t use it&lt;/strong&gt;. For some reason, they all attached correctly, again, like magic.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;what-s-happening-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/yet-another-anchor-positioning-quirk/#aa-whats-happening&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-whats-happening&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;What’s happening?&lt;/h3&gt;
        &lt;p&gt;Targets usually attach to the last anchor on the DOM instead of their closest anchor, but in our first example, we saw two anchors with the same &lt;code&gt;anchor-name&lt;/code&gt; and their corresponding targets attached. All this without the &lt;code&gt;anchor-scope&lt;/code&gt; property. What’s happening?&lt;/p&gt;
        &lt;p&gt;Two words: &lt;strong&gt;Containing Block&lt;/strong&gt;.&lt;/p&gt;
        &lt;p&gt;Something to know about Anchor Positioning is that it relies a lot on how an element’s containing block is built. This isn’t something inherently from Anchor Positioning but from absolute positioning. Absolute elements are positioned relative to their containing block, and inset properties like &lt;code&gt;top: 0px&lt;/code&gt;, &lt;code&gt;left: 30px&lt;/code&gt; or &lt;code&gt;inset: 1rem&lt;/code&gt; are just moving an element around its containing block boundaries, creating what’s called the &lt;strong&gt;&lt;a href=&quot;https://www.w3.org/TR/css-position-3/#resolving-insets&quot; rel=&quot;noopener&quot;&gt;inset-modified containing block&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; fetchpriority=&quot;high&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;An element being shrunk by its inset-modified containing block&quot; class=&quot;wp-image-382897&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;A target attached to an anchor isn’t any different, and what the &lt;code&gt;position-area&lt;/code&gt; property does under the table is change the target’s inset-modified containing block so it is right next to the anchor.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;A target element inset-modified containing block shrunk to be in the top left corner of an anchor&quot; class=&quot;wp-image-382898&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Usually, the containing block of an absolutely-positioned element is the whole viewport, but it can be changed by any ancestor with a position other than &lt;code&gt;static&lt;/code&gt; (usually &lt;code&gt;relative&lt;/code&gt;). Temani takes advantage of this fact and creates a new containing block for each slider, so they can only be attached to their corresponding anchors. If you snoop around the code, you can find it at the beginning:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;label {
        position: relative;
        /* No, It&#39;s not useless so don&#39;t remove it (or remove it and see what happens) */
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;If we use this tactic on our previous examples, suddenly they are all correctly attached!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_zxOvNGE&quot; src=&quot;https://codepen.io/anon/embed/preview/zxOvNGE?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=zxOvNGE&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed zxOvNGE&quot; title=&quot;CodePen Embed zxOvNGE&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;yet-another-quirk&quot;&gt;&lt;a href=&quot;https://css-tricks.com/yet-another-anchor-positioning-quirk/#aa-yet-another-quirk&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-yet-another-quirk&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Yet another quirk&lt;/h3&gt;
        &lt;p&gt;We didn’t need to use the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-scope/&quot;&gt;anchor-scope&lt;/a&gt;&lt;/code&gt; property to attach each anchor to its respective target, but instead took advantage of how the containing block of absolute elements is computed. However, there is yet another approach, one that doesn’t need any extra bits of code.&lt;/p&gt;
        &lt;p&gt;This occurred to me when I was also experimenting with &lt;a href=&quot;https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/&quot;&gt;Scroll-Driven Animations and Anchor Positioning&lt;/a&gt; and trying to attach text-bubble footnotes on the side of a post, like the following:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;A blog post body with paragraphs, the paragraphs have footnotes attached on the sides&quot; class=&quot;wp-image-382899&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Logically, each footnote would be a target, but the choice of an anchor is a little more tricky. I initially thought that each paragraph would work as an anchor, but that would mean having more than one anchor with the same &lt;code&gt;anchor-name&lt;/code&gt;. The result: all the targets would pile up at the last anchor:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_jENbBNa&quot; src=&quot;https://codepen.io/anon/embed/preview/jENbBNa?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=jENbBNa&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed jENbBNa&quot; title=&quot;CodePen Embed jENbBNa&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;This could be solved using our prior approach of creating a new containing block for each note. However, there is another route we can take, what I call the reductionist method. The problem comes when there is more than one anchor with the same &lt;code&gt;anchor-name&lt;/code&gt;, so we will reduce the number of anchors to one, using an element that could work as the common anchor for all targets.&lt;/p&gt;
        &lt;p&gt;In this case, we just want to position each target on the sides of the post so we can use the entire body of the post as an anchor, and since each target is naturally aligned on the vertical axis, what’s left is to move them along the horizontal axis:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_oNKqwgy&quot; src=&quot;https://codepen.io/anon/embed/preview/oNKqwgy?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=oNKqwgy&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed oNKqwgy&quot; title=&quot;CodePen Embed oNKqwgy&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;You can better check how it was done on the original post!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;conclusion&quot;&gt;&lt;a href=&quot;https://css-tricks.com/yet-another-anchor-positioning-quirk/#aa-conclusion&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-conclusion&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Conclusion&lt;/h3&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;anchor-positioning&quot;&gt;&lt;/baseline-status&gt;
        &lt;p&gt;The &lt;code&gt;anchor-scope&lt;/code&gt; may be the most recent CSS property to be shipped to a browser (so far, just in Chrome 131+), so we can’t expect its support to be something out of this world. And while I would love to use it every now and there, it will remain bound to short demos for a while. This isn’t a reason to limit the use of other Anchor Positioning properties, which are supported in Chrome 125 onwards (and let’s hope in other browsers in the near future), so I hope these little quirks can help you to keep using Anchor Positioning without any fear.&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/yet-another-anchor-positioning-quirk/</link>
      <guid isPermaLink="false">https://css-tricks.com/yet-another-anchor-positioning-quirk/</guid>
      <pubDate>Mon, 09 Dec 2024 16:54:00 GMT</pubDate>
      <author>Juan Diego Rodríguez</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2024/12/Yet-Another-Anchor-Positioning-Quirk.png" type="image/jpeg"></enclosure>
      <category>anchor positioning</category>
    </item>
    <item>
      <title>Knowing CSS is Mastery to Frontend Development</title>
      <description>&lt;p&gt;&lt;a href=&quot;https://helloanselm.com/writings/knowing-css-is-mastery-to-frontend-development&quot; rel=&quot;noopener&quot;&gt;Anselm Hannemann&lt;/a&gt; on the intersection between frameworks and &lt;a href=&quot;https://thebasics.dev/&quot; rel=&quot;noopener&quot;&gt;learning the basics&lt;/a&gt;:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;Nowadays people can write great React and TypeScript code. Most of the time a component library like MUI, Tailwind and others are used for styling. However, nearly no one is able to judge whether the CSS in the codebase is good or far from optimal. It is magically applied by our toolchain into the HTML and we struggle to understand why the website is getting slower and slower.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;span id=&quot;more-382956&quot;&gt;&lt;/span&gt;
        &lt;p&gt;Related, from &lt;a href=&quot;https://infrequently.org/&quot; rel=&quot;noopener&quot;&gt;Alex Russell&lt;/a&gt;:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;Many need help orienting themselves as to which end of the telescope is better for examining frontend problems. Frameworkism is now the dominant creed of frontend discourse. It insists that all user problems will be solved if teams just framework&amp;nbsp;&lt;em&gt;hard enough&lt;/em&gt;. This is non-sequitur, if not entirely backwards. In practice,&amp;nbsp;&lt;strong&gt;the only thing that makes web experiences good is caring about the user experience&lt;/strong&gt;&amp;nbsp;— specifically, the experience of folks at the margins. Technologies come and go, but what always makes the difference is giving a toss about the user.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;
        &lt;a href=&quot;https://helloanselm.com/writings/knowing-css-is-mastery-to-frontend-development&quot; class=&quot;button&quot;&gt;
        Direct Link →
        &lt;/a&gt;
        &lt;/p&gt;
      </description>
      <link>https://css-tricks.com/knowing-css-is-mastery-to-frontend-development/</link>
      <guid isPermaLink="false">https://css-tricks.com/knowing-css-is-mastery-to-frontend-development/</guid>
      <author>Geoff Graham</author>
      <category>css fundamentals</category>
    </item>
    <item>
      <title>One of Those “Onboarding” UIs, With Anchor Positioning</title>
      <description>&lt;p&gt;Welcome to “Anchor Positioning 101” where we will be exploring this interesting new CSS feature. Our textbook for this class will be the extensive &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;“Anchor Positioning Guide”&lt;/a&gt; that &lt;a href=&quot;https://css-tricks.com/author/monknow/&quot; data-type=&quot;link&quot; data-id=&quot;https://css-tricks.com/author/monknow/&quot;&gt;Juan Diego Rodriguez&lt;/a&gt; published here on CSS-Tricks.&lt;/p&gt;
        &lt;p&gt;I’m excited for this one. Some of you may remember when CSS-Tricks released the &lt;a href=&quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/&quot;&gt;“Flexbox Layout Guide”&lt;/a&gt; or the &lt;a href=&quot;https://css-tricks.com/snippets/css/complete-guide-grid/&quot;&gt;“Grid Layout Guide”&lt;/a&gt; — I certainly do and still have them both bookmarked! I spend a lot of time flipping between tabs to make sure I have the right syntax in my “experimental” CodePens.&lt;/p&gt;
        &lt;p&gt;I’ve been experimenting with CSS anchor positioning like the “good old days” since Juan published his guide, so I figured it’d be fun to share some of the excitement, learn a bit, experiment, and of course: &lt;em&gt;build stuff!&lt;/em&gt;&lt;/p&gt;
        &lt;span id=&quot;more-382731&quot;&gt;&lt;/span&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;css-anchor-positioning-introduction&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-css-anchor-positioning-introduction&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-css-anchor-positioning-introduction&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;CSS Anchor Positioning introduction&lt;/h3&gt;
        &lt;p&gt;Anchor positioning lets us attach — or “anchor” — one element to one or more other elements. More than that, it allows us to define &lt;em&gt;how&lt;/em&gt; a “target” element (that’s what we call the element we’re attaching to an anchor element) is positioned next to the anchor-positioned element, including &lt;em&gt;fallback positioning&lt;/em&gt; in the form of a new &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/p/position-try/&quot;&gt;@position-try&lt;/a&gt;&lt;/code&gt; at-rule.&lt;/p&gt;
        &lt;p&gt;The most hand-wavy way to explain the benefits of anchor positioning is to think of it as a powerful enhancement to &lt;code&gt;position: absolute;&lt;/code&gt; as it helps absolutely-positioned elements &lt;strong&gt;do what you expect&lt;/strong&gt;. Don’t worry, we’ll see how this works as we go.&lt;/p&gt;
        &lt;p&gt;Anchor positioning is currently a &lt;a href=&quot;https://drafts.csswg.org/css-anchor-position/&quot; rel=&quot;noopener&quot;&gt;W3C draft spec&lt;/a&gt;, so you know it’s fresh. It’s marked as “limited availability” in Baseline which at the time of writing means it is limited to Chromium-based browsers (versions 125+). That said, the considerate folks over at &lt;a href=&quot;https://www.oddbird.net/&quot; rel=&quot;noopener&quot;&gt;Oddbird&lt;/a&gt; have a &lt;a href=&quot;https://anchor-polyfill.netlify.app/&quot; rel=&quot;noopener&quot;&gt;polyfill available&lt;/a&gt; that’ll help out other browsers until they ship support.&lt;/p&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;anchor-positioning&quot;&gt;&lt;/baseline-status&gt;
        &lt;div class=&quot;caniuse&quot;&gt;&lt;div class=&quot;caniuse-header&quot;&gt;&lt;p&gt;This browser support data is from &lt;a href=&quot;http://caniuse.com/#feat=css-anchor-positioning&quot; rel=&quot;noopener&quot;&gt;Caniuse&lt;/a&gt;, which has more detail. A number indicates that browser supports the feature at that version and up.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;caniuse-section&quot;&gt;&lt;h4&gt;Desktop&lt;/h4&gt;&lt;table class=&quot;browser-support-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class=&quot;chrome&quot;&gt;&lt;span&gt;Chrome&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;firefox&quot;&gt;&lt;span&gt;Firefox&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;ie&quot;&gt;&lt;span&gt;IE&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;edge&quot;&gt;&lt;span&gt;Edge&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;safari&quot;&gt;&lt;span&gt;Safari&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=&quot;y yep&quot; title=&quot;Chrome - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;125&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;n nope&quot; title=&quot;Firefox - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;No&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;n nope&quot; title=&quot;IE - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;No&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;y yep&quot; title=&quot;Edge - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;125&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;n nope&quot; title=&quot;Safari - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;No&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;div class=&quot;caniuse-section&quot;&gt;&lt;h4&gt;Mobile / Tablet&lt;/h4&gt;&lt;table class=&quot;browser-support-table&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;th class=&quot;and_chr&quot;&gt;&lt;span&gt;Android Chrome&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;and_ff&quot;&gt;&lt;span&gt;Android Firefox&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;android&quot;&gt;&lt;span&gt;Android&lt;/span&gt;&lt;/th&gt;&lt;th class=&quot;ios_saf&quot;&gt;&lt;span&gt;iOS Safari&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=&quot;y yep&quot; title=&quot;Android Chrome - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;131&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;n nope&quot; title=&quot;Android Firefox - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;No&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;y yep&quot; title=&quot;Android - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;131&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;n nope&quot; title=&quot;iOS Safari - &quot;&gt;&lt;span class=&quot;caniuse-agents-version version&quot;&gt;No&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Oddbird contributes polyfills for &lt;em&gt;many&lt;/em&gt; new CSS features and you (yes, you!) can support their work on &lt;a href=&quot;https://github.com/sponsors/oddbird&quot; rel=&quot;noopener&quot;&gt;Github&lt;/a&gt; or &lt;a href=&quot;https://opencollective.com/oddbird-open-source&quot; rel=&quot;noopener&quot;&gt;Open Collective&lt;/a&gt;!&lt;/p&gt;
        &lt;p&gt;&lt;a href=&quot;https://xanthir.com/contact/&quot; rel=&quot;noopener&quot;&gt;Tab Atkins-Bittner&lt;/a&gt;, contributing author to the W3C draft spec on anchor positioning, spoke on the topic at CSS Day 2024. The full conference talk is available on YouTube:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio&quot;&gt;&lt;div class=&quot;wp-block-embed__wrapper&quot;&gt;
        &lt;iframe data-video-id=&quot;p18LhnYNkDQ?feature=oembed&quot; class=&quot;br-lazy&quot; data-breeze=&quot;https://www.youtube.com/embed/p18LhnYNkDQ?feature=oembed&quot; title=&quot;Anchor Positioning | Tab Atkins-Bittner | CSS Day 2024&quot; width=&quot;500&quot; height=&quot;281&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;no-referrer&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
        &lt;/div&gt;&lt;/figure&gt;
        &lt;p&gt;Here at CSS-Tricks, Juan demonstrated how to mix and match &lt;a href=&quot;https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/&quot;&gt;anchor positioning with view-driven animations&lt;/a&gt; for an awesome floating notes effect:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-video&quot;&gt;&lt;video controls=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/plugins/breeze/assets/images/placeholder.mp4&quot; data-breeze=&quot;https://css-tricks.com/wp-content/uploads/2024/11/anchor-view-driven-animation.mov&quot; playsinline=&quot;&quot; class=&quot;br-lazy&quot;&gt;&lt;/video&gt;&lt;/figure&gt;
        &lt;p&gt;Front-end friend &lt;a href=&quot;https://www.kevinpowell.co/&quot; rel=&quot;noopener&quot;&gt;Kevin Powell&lt;/a&gt; recently released a video demonstrating how &lt;a href=&quot;https://www.youtube.com/watch?v=DNXEORSk4GU&quot; rel=&quot;noopener&quot;&gt;“CSS Popover + Anchor Positioning is Magical”&lt;/a&gt;.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio&quot;&gt;&lt;div class=&quot;wp-block-embed__wrapper&quot;&gt;
        &lt;iframe data-video-id=&quot;DNXEORSk4GU?feature=oembed&quot; class=&quot;br-lazy&quot; data-breeze=&quot;https://www.youtube.com/embed/DNXEORSk4GU?feature=oembed&quot; title=&quot;CSS Popover + Anchor Positioning is Magical&quot; width=&quot;500&quot; height=&quot;281&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;no-referrer&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
        &lt;/div&gt;&lt;/figure&gt;
        &lt;p&gt;And finally, in the tradition of “making fun games to learn CSS,” &lt;a href=&quot;https://thomaspark.co/&quot; rel=&quot;noopener&quot;&gt;Thomas Park&lt;/a&gt; released &lt;a href=&quot;https://anchoreum.com/&quot; rel=&quot;noopener&quot;&gt;Anchoreum&lt;/a&gt; (a “&lt;a href=&quot;https://flexboxfroggy.com/&quot; rel=&quot;noopener&quot;&gt;Flexbox Froggy&lt;/a&gt;“-type game) to learn about CSS anchor positioning. Highly recommend checking this out to get the hang of the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-area/&quot;&gt;position-area&lt;/a&gt;&lt;/code&gt; property!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-homework&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-the-homework&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-homework&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The homework&lt;/h3&gt;
        &lt;p&gt;OK, now that we’re caught up on what CSS anchor positioning &lt;em&gt;is&lt;/em&gt; and the excitement surrounding it, let’s talk about what it &lt;em&gt;does&lt;/em&gt;. Tethering an element to another element? That has a &lt;strong&gt;lot&lt;/strong&gt; of potential. Quite a few instances I can remember where I’ve had to fight with &lt;code&gt;absolute&lt;/code&gt; positioning and &lt;code&gt;z-index&lt;/code&gt; in order to get something positioned &lt;em&gt;just right&lt;/em&gt;.&lt;/p&gt;
        &lt;p&gt;Let’s take a quick look at the basic syntax. First, we need two elements, an anchor-positioned element and the target element that will be tethered to it.&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;!-- Anchor element --&amp;gt;
        &amp;lt;div id=&quot;anchor&quot;&amp;gt;
        Anchor
        &amp;lt;/div&amp;gt;
        &amp;lt;!-- Target element --&amp;gt;
        &amp;lt;div id=&quot;target&quot;&amp;gt;
        Target
        &amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We set an element as an anchor-positioned element by providing it with an &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;&lt;code&gt;anchor-name&lt;/code&gt;&lt;/a&gt;. This is a unique name of our choosing, however it needs the double-dash prefix, like &lt;a href=&quot;https://css-tricks.com/a-complete-guide-to-custom-properties/&quot;&gt;CSS custom properties&lt;/a&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;#anchor {
        anchor-name: --anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;As for our target element, we’ll need to set &lt;code&gt;position: absolute;&lt;/code&gt; on it as well as tell the element what anchor to tether to. We do that with a new CSS property, &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/a&gt; using a value that matches the &lt;code&gt;anchor-name&lt;/code&gt; of our anchor-positioned element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;6,7&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;#anchor {
        anchor-name: --anchor;
        }
        #target {
        position: absolute;
        position-anchor: --anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;May not look like it yet, but now our two elements are attached. We can set the &lt;em&gt;actual&lt;/em&gt; positioning on the target element by providing a &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-area/&quot;&gt;&lt;code&gt;position-area&lt;/code&gt;&lt;/a&gt;. To position our target element, &lt;code&gt;position-area&lt;/code&gt; creates an invisible 3×3 grid over the anchor-positioned element. &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-positioning-targets&quot;&gt;Using positioning keywords&lt;/a&gt;, we can designate where the target element appears near the anchor-positioned element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;4&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;#target {
        position: absolute;
        position-anchor: --anchor;
        position-area: top center;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Now we see that our target element is anchored to the top-center of our anchor-positioned element!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_VwooOeO/32f4f325746dfffca524a670c3dd61f0&quot; src=&quot;https://codepen.io/anon/embed/preview/VwooOeO/32f4f325746dfffca524a670c3dd61f0?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=VwooOeO/32f4f325746dfffca524a670c3dd61f0&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed VwooOeO/32f4f325746dfffca524a670c3dd61f0&quot; title=&quot;CodePen Embed VwooOeO/32f4f325746dfffca524a670c3dd61f0&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;705&quot; height=&quot;453&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/basic-anchor.png?resize=705%2C453&amp;amp;ssl=1&quot; alt=&quot;red rectangle labelled &amp;quot;target&amp;quot; attached to the top of a blue square labelled &amp;quot;Anchor&amp;quot;&quot; class=&quot;wp-image-382749&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/basic-anchor.png?w=705&amp;amp;ssl=1 705w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/basic-anchor.png?resize=300%2C193&amp;amp;ssl=1 300w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;anchoring-pseudoelements&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-anchoring-pseudo-elements&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-anchoring-pseudo-elements&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Anchoring pseudo-elements&lt;/h4&gt;
        &lt;p&gt;While playing with anchor positioning, I noticed you can anchor pseudo-elements, just the same as any other element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;#anchor {
        anchor-name: --anchor;
        &amp;amp;::before {
        content: &quot;Target&quot;;
        position: absolute;
        position-anchor: --anchor;
        left: anchor(center);
        bottom: anchor(center);
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_xxvPoNb/7f49823ffe8497f2e9b4e91974beeb61&quot; src=&quot;https://codepen.io/anon/embed/preview/xxvPoNb/7f49823ffe8497f2e9b4e91974beeb61?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=xxvPoNb/7f49823ffe8497f2e9b4e91974beeb61&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed xxvPoNb/7f49823ffe8497f2e9b4e91974beeb61&quot; title=&quot;CodePen Embed xxvPoNb/7f49823ffe8497f2e9b4e91974beeb61&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1470&quot; height=&quot;758&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/anchor-pseudo.png?resize=1470%2C758&amp;amp;ssl=1&quot; alt=&quot;a semi-transparent red square labelled &amp;quot;Target&amp;quot; is attached to the upper corner of a blue square labelled &amp;quot;Anchor&amp;quot;&quot; class=&quot;wp-image-382751&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/anchor-pseudo.png?w=1470&amp;amp;ssl=1 1470w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/anchor-pseudo.png?resize=300%2C155&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/anchor-pseudo.png?resize=1024%2C528&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/anchor-pseudo.png?resize=768%2C396&amp;amp;ssl=1 768w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Might be useful for adding design flourishes to elements or adding functionality as some sort of indicator.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;moving-anchors&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-moving-anchors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-moving-anchors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Moving anchors&lt;/h4&gt;
        &lt;p&gt;Another quick experiment was to see if we can &lt;em&gt;move&lt;/em&gt; anchors. And it turns out this is possible!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_LYwzKep/c5383e79dee9fa01f5c60db011959319&quot; src=&quot;https://codepen.io/anon/embed/LYwzKep/c5383e79dee9fa01f5c60db011959319?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=LYwzKep/c5383e79dee9fa01f5c60db011959319&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed LYwzKep/c5383e79dee9fa01f5c60db011959319&quot; title=&quot;CodePen Embed LYwzKep/c5383e79dee9fa01f5c60db011959319&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;figure class=&quot;wp-block-video&quot;&gt;&lt;video controls=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/plugins/breeze/assets/images/placeholder.mp4&quot; data-breeze=&quot;https://css-tricks.com/wp-content/uploads/2024/11/moving-anchor-hover.mov&quot; class=&quot;br-lazy&quot;&gt;&lt;/video&gt;&lt;/figure&gt;
        &lt;p&gt;Notice the use of &lt;a href=&quot;https://css-tricks.com/almanac/functions/a/anchor/&quot;&gt;&lt;code&gt;anchor()&lt;/code&gt;&lt;/a&gt; functions instead of &lt;code&gt;position-area&lt;/code&gt; to position the target element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;#target {
        position: absolute;
        position-anchor: --anchor-one;
        top: anchor(bottom);
        left: anchor(left);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-functions&quot;&gt;CSS anchor functions&lt;/a&gt; are an alternate way to position target elements based on the computed values of the anchor-positioned element itself. Here we are setting the target element’s top property value to match the anchor-positioned element’s bottom value. Similarly, we can set the target’s &lt;code&gt;left&lt;/code&gt; property value to match the anchor-positioned element’s &lt;code&gt;left&lt;/code&gt; value.&lt;/p&gt;
        &lt;p&gt;Hovering over the container element swaps the &lt;code&gt;position-anchor&lt;/code&gt; from &lt;code&gt;--anchor-one&lt;/code&gt; to &lt;code&gt;--anchor-two&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.container:hover {
        #target {
        position-anchor: --anchor-two;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt; We are also able to set a &lt;code&gt;transition&lt;/code&gt; as we position the target using &lt;code&gt;top&lt;/code&gt; and &lt;code&gt;left&lt;/code&gt;, which makes it swap smoothly between anchors.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;extra-experimental&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-extra-experimental&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-extra-experimental&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Extra experimental&lt;/h4&gt;
        &lt;p&gt;Along with being the first to release CSS anchor-positioning, the Chrome dev team recently released new pseudo-selectors related to the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; elements. The &lt;code&gt;&lt;a href=&quot;https://developer.chrome.com/blog/styling-details&quot; data-type=&quot;link&quot; data-id=&quot;https://developer.chrome.com/blog/styling-details&quot; rel=&quot;noopener&quot;&gt;::details-content&lt;/a&gt;&lt;/code&gt; pseudo-selector allows you to style the “hidden” part of the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; element. &lt;/p&gt;
        &lt;p&gt;With this information, I thought: “&lt;em&gt;can I anchor it?&lt;/em&gt;” and sure enough, you can!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_ZYzzqOJ/676e5968b2726fb2c3383819ffb8d15b&quot; src=&quot;https://codepen.io/anon/embed/ZYzzqOJ/676e5968b2726fb2c3383819ffb8d15b?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=ZYzzqOJ/676e5968b2726fb2c3383819ffb8d15b&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed ZYzzqOJ/676e5968b2726fb2c3383819ffb8d15b&quot; title=&quot;CodePen Embed ZYzzqOJ/676e5968b2726fb2c3383819ffb8d15b&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Again, this is &lt;em&gt;defin&lt;/em&gt;itely&lt;em&gt; not&lt;/em&gt; ready for prime-time, but it’s always fun to experiment!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;practical-examinations&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-practical-examinations&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-practical-examinations&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Practical examinations&lt;/h3&gt;
        &lt;p&gt;Let’s take this a bit further and tackle more practical challenges using CSS anchor positioning. Please keep in mind that all these examples are &lt;strong&gt;Chrome-only&lt;/strong&gt; at the time of writing!&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;tooltips&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-tooltips&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-tooltips&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Tooltips&lt;/h4&gt;
        &lt;p&gt;One of the most straightforward use cases for CSS anchor positioning is possibly a tooltip. Makes a lot of sense: hover over an icon and a label floats nearby to explain what the icon does. I didn’t quite want to make yet another tutorial on how to make a tooltip and luckily for me, Zell Liew recently wrote an article on tooltip best practices, so we can focus purely on anchor positioning and refer to Zell’s work for the semantics.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_zYgXEgo/4937f21370de0a7ebf1fca1d6166d5c8&quot; src=&quot;https://codepen.io/anon/embed/preview/zYgXEgo/4937f21370de0a7ebf1fca1d6166d5c8?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=zYgXEgo/4937f21370de0a7ebf1fca1d6166d5c8&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed zYgXEgo/4937f21370de0a7ebf1fca1d6166d5c8&quot; title=&quot;CodePen Embed zYgXEgo/4937f21370de0a7ebf1fca1d6166d5c8&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;figure class=&quot;wp-block-video&quot;&gt;&lt;video controls=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/plugins/breeze/assets/images/placeholder.mp4&quot; data-breeze=&quot;https://css-tricks.com/wp-content/uploads/2024/11/anchor-tooltip-hover.mov&quot; class=&quot;br-lazy&quot;&gt;&lt;/video&gt;&lt;/figure&gt;
        &lt;p&gt;Now, let’s check out one of these tooltips:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;!-- ... --&amp;gt;;
        &amp;lt;li class=&quot;toolbar-item&quot;&amp;gt;;
        &amp;lt;button type=&quot;button&quot;
        id=&quot;inbox-tool&quot;
        aria-labelledby=&quot;inbox-label&quot;
        class=&quot;tool&quot;&amp;gt;
        &amp;lt;svg id=&quot;inbox-tool-icon&quot;&amp;gt;
        &amp;lt;!-- SVG icon code ... --&amp;gt;
        &amp;lt;/svg&amp;gt;
        &amp;lt;/button&amp;gt;
        &amp;lt;div id=&quot;inbox-label&quot; role=&quot;tooltip&quot;&amp;gt;
        &amp;lt;p&amp;gt;Inbox&amp;lt;/p&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;!-- ... --&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The HTML is structured in a way where the tooltip element is a sibling of our anchor-positioned &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;, notice how it has the &lt;code&gt;[aria-labelledby]&lt;/code&gt; attribute set to match the tooltip’s &lt;code&gt;[id]&lt;/code&gt;. The tooltip itself is a generic &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, semantically enhanced to become a tooltip with the &lt;code&gt;[role=&quot;tooltip&quot;]&lt;/code&gt; attribute. We can also use &lt;code&gt;[role=&quot;tooltip&quot;]&lt;/code&gt; as a &lt;a href=&quot;https://benmyers.dev/blog/semantic-selectors/&quot; rel=&quot;noopener&quot;&gt;semantic selector&lt;/a&gt; to add common styles to tooltips, including the tooltip’s positioning relative to its anchor.&lt;/p&gt;
        &lt;p&gt;First, let’s turn our button into an anchored element by giving it an &lt;code&gt;anchor-name&lt;/code&gt;. Next, we can set the target element’s &lt;code&gt;position-anchor&lt;/code&gt; to match the &lt;code&gt;anchor-name&lt;/code&gt; of the anchored element. By default, we can set the tooltip’s &lt;code&gt;visibility&lt;/code&gt; to &lt;code&gt;hidden&lt;/code&gt;, then using CSS sibling selectors, if the target element receives &lt;code&gt;hover&lt;/code&gt; or &lt;code&gt;focus-visible&lt;/code&gt;, we can then swap the &lt;code&gt;visibility&lt;/code&gt; to &lt;code&gt;visible&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Anchor-positioned Element */
        #inbox-tool {
        anchor-name: --inbox-tool;
        }
        /* Target element */
        [role=&quot;tooltip&quot;]#inbox-label {
        position-anchor: --inbox-tool
        }
        /* Target positioning */
        [role=&quot;tooltip&quot;] {
        position: absolute;
        position-area: end center;
        /* Hidden by default */
        visibility: hidden;
        }
        /* Visible when tool is hovered or receives focus */
        .tool:hover + [role=&quot;tooltip&quot;],
        .tool:focus-visible + [role=&quot;tooltip&quot;] {
        visibility: visible;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;em&gt;Ta-da!&lt;/em&gt; Here we have a working, CSS anchor-positioned tooltip!&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;As users of touch devices aren’t able to hover over elements, you may want to &lt;a href=&quot;https://css-tricks.com/tooltip-best-practices/#aa-tooltip-limitations-and-alternatives&quot;&gt;explore toggletips&lt;/a&gt; instead!&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;floating-disclosures&quot;&gt;&lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/#aa-floating-disclosures&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-floating-disclosures&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Floating disclosures&lt;/h4&gt;
        &lt;p&gt;Disclosures are another common component pattern that might be a perfect use case for anchor positioning. Disclosures are typically a component where interacting with a toggle will open and close a corresponding element. Think of the good ol’ &lt;a href=&quot;https://css-tricks.com/exploring-what-the-details-and-summary-elements-can-do/&quot;&gt;&lt;code&gt;&amp;lt;detail&amp;gt;/&amp;lt;summary&amp;gt;&lt;/code&gt; HTML element duo&lt;/a&gt;, for example.&lt;/p&gt;
        &lt;p&gt;Currently, if you are looking to create a disclosure-like component which floats over other portions of your user interface, you might be in for some JavaScript, &lt;code&gt;absolute&lt;/code&gt; positioning, and &lt;code&gt;z-index&lt;/code&gt; related troubles. Soon enough though, we’ll be able to combine CSS anchor positioning with another newer platform feature &lt;code&gt;[popover]&lt;/code&gt; to create some incredibly straightforward (and semantically accurate) floating disclosure elements.&lt;/p&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/poppin-in/&quot;&gt;The Popover API&lt;/a&gt; provides a non-modal way to elevate elements to the &lt;code&gt;top-layer&lt;/code&gt;, while also baking in some great functionality, such as light dismissals.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Zell also has more information &lt;a href=&quot;https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/&quot;&gt;on popovers, dialogs, and modality&lt;/a&gt;!&lt;/p&gt;
        &lt;p&gt;One of the more common patterns you might consider as a “floating disclosure”-type component is a dropdown menu. Here is the HTML we’ll work with:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;nav&amp;gt;
        &amp;lt;button id=&quot;anchor&quot;&amp;gt;Toggle&amp;lt;/button&amp;gt;
        &amp;lt;ul id=&quot;target&quot;&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Link 1&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Link 2&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Link 3&amp

...

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 7, 2025

http://localhost:1200/css-tricks/fresh - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Fresh From the Almanac</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/fresh" rel="self" type="application/rss+xml"></atom:link>
    <description>Properties, selectors, rules, and functions! - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Tue, 07 Jan 2025 10:24:42 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>prefers-reduced-motion</title>
      <description>&lt;p&gt;The &lt;code&gt;prefers-reduced-motion&lt;/code&gt; feature is used in &lt;a href=&quot;https://css-tricks.com/a-complete-guide-to-css-media-queries/&quot;&gt;CSS media queries&lt;/a&gt; to determine a user’s operating system preferences for animations and transitions on the web. For example, we can determine if the user’s preference is set to “reduced” motion and either eliminate or reduce the movement accordingly.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@media screen and (prefers-reduced-motion: reduce) {
        * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;span id=&quot;more-383264&quot;&gt;&lt;/span&gt;
        &lt;p&gt;If we are using &lt;a href=&quot;https://css-tricks.com/css-cascade-layers/&quot;&gt;Cascade Layers&lt;/a&gt; to prioritize the specificity order of our styles, then we can get rid of those &lt;code&gt;!important&lt;/code&gt; keywords by making sure that the styles are in a high-priority layer:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@layer base, components, animation;
        @layer animation {
        @media screen and (prefers-reduced-motion: reduce) {
        * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        }
        }
        }
        @layer components {
        /* styles */
        }
        @layer base {
        /* styles */
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This is CSS that attempts to obliterate any motion on a website under the condition that the user has specified a preference for reduced motion in the accessibility preferences of their operating system.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; fetchpriority=&quot;high&quot; decoding=&quot;async&quot; width=&quot;1654&quot; height=&quot;1368&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?resize=1654%2C1368&amp;amp;ssl=1&quot; alt=&quot;MacOS settings for reduce motion preferences, set to reduced motion.&quot; class=&quot;wp-image-383265&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?w=1654&amp;amp;ssl=1 1654w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?resize=300%2C248&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?resize=1024%2C847&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?resize=768%2C635&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/Screenshot-2024-12-18-at-8.21.29%E2%80%AFAM.png?resize=1536%2C1270&amp;amp;ssl=1 1536w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;syntax&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-syntax&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-syntax&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Syntax&lt;/h3&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Applies styles when Reduced Motion is enabled */
        @media screen and (prefers-reduced-motion: reduce) { }
        @media screen and (prefers-reduced-motion) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;For:&lt;/strong&gt; &lt;code&gt;@media&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Values:&lt;/strong&gt; &lt;code&gt;no-preference&lt;/code&gt; | &lt;code&gt;reduce&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Type:&lt;/strong&gt; discrete&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;A browser will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled in their operating system preferences.&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;It’s worth noting that&amp;nbsp;&lt;code&gt;(prefers-reduced-motion)&lt;/code&gt;&amp;nbsp;without the&amp;nbsp;&lt;code&gt;reduce&lt;/code&gt;&amp;nbsp;keyword will be evaluated as true. However, it’s better to be explicit in these sorts of circumstances, especially for newer and more obscure features.&lt;/p&gt;
        &lt;p&gt;You can also target the inverse:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Applies styles when the user has made no preference known */
        @media screen and (prefers-reduced-motion: no-preference) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Think of this media query&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/almanac/rules/s/supports/&quot;&gt;like&amp;nbsp;&lt;code&gt;@supports&lt;/code&gt;&lt;/a&gt;: describe the initial appearance, then modify the styles based on capability.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;values&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-values&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-values&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Values&lt;/h3&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Applies styles when the user has made no preference known */
        @media screen and (prefers-reduced-motion: no-preference) { }
        /* Applies styles when Reduced Motion is enabled */
        @media screen and (prefers-reduced-motion: reduce) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;no-preference&lt;/code&gt;:&lt;/strong&gt; Indicates that the user has made no preference known to the system.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;reduce&lt;/code&gt;:&lt;/strong&gt; Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;testing-reduced-motion-preferences&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-testing-reduced-motion-preferences&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-testing-reduced-motion-preferences&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Testing reduced motion preferences&lt;/h3&gt;
        &lt;p&gt;Provided you’re up to date with MacOS, you should be able to check it out in Safari. Go to &lt;strong&gt;System Preferences&lt;/strong&gt;, select the &lt;strong&gt;Accessibility&lt;/strong&gt; category, select the &lt;strong&gt;Display&lt;/strong&gt; tab, and enable the &lt;strong&gt;Reduce Motion&lt;/strong&gt; option. You’ll see that the example animation in the CodePen example below updates when the checkbox is toggled: the pulsing circle is changed to an inert square:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_PWJPrW&quot; src=&quot;https://codepen.io/anon/embed/preview/PWJPrW?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=PWJPrW&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed PWJPrW&quot; title=&quot;CodePen Embed PWJPrW&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Here’s a quick video if you don’t have access to this:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio&quot;&gt;&lt;div class=&quot;wp-block-embed__wrapper&quot;&gt;
        &lt;iframe data-video-id=&quot;uANmA7korfs?feature=oembed&quot; class=&quot;br-lazy&quot; data-breeze=&quot;https://www.youtube.com/embed/uANmA7korfs?feature=oembed&quot; title=&quot;Reduced Motion Media Query Example&quot; width=&quot;500&quot; height=&quot;281&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; referrerpolicy=&quot;no-referrer&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
        &lt;/div&gt;&lt;/figure&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;why-prefers-reduced-motion-matters&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-why-prefers-reduced-motion-matters&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-why-prefers-reduced-motion-matters&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Why &lt;code&gt;prefers-reduced-motion&lt;/code&gt; matters&lt;/h3&gt;
        &lt;p&gt;The reason this setting exists is that on-screen movement is an accessibility concern.&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/introduction-reduced-motion-media-query/&quot;&gt;Here’s Eric Bailey&lt;/a&gt;:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;&lt;a href=&quot;http://a11yproject.com/posts/understanding-vestibular-disorders/&quot; rel=&quot;noopener&quot;&gt;Vestibular disorders&lt;/a&gt;&amp;nbsp;can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system.&lt;/p&gt;
        &lt;p&gt;Vestibular disorders can be caused by both genetic and environmental factors. It’s part of the larger&amp;nbsp;&lt;a href=&quot;http://webaim.org/intro/&quot; rel=&quot;noopener&quot;&gt;spectrum of conditions&lt;/a&gt;&amp;nbsp;that make up accessibility concerns and it affects more than&amp;nbsp;&lt;a href=&quot;http://vestibular.org/understanding-vestibular-disorder&quot; rel=&quot;noopener&quot;&gt;70 million people&lt;/a&gt;.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;Here he is again in&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/&quot;&gt;a follow-up article&lt;/a&gt;:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;If you have a vestibular disorder or have certain kinds of migraine or seizure triggers,&amp;nbsp;&lt;a href=&quot;https://source.opennews.org/articles/motion-sick/&quot; rel=&quot;noopener&quot;&gt;navigating the web can be a lot like walking through a minefield&lt;/a&gt;&amp;nbsp;— you’re perpetually one click away from activating an unannounced animation. And that’s just for casual browsing.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;reduced-motion-vs-nuked-motion&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-reduced-motion-vs-nuked-motion&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-reduced-motion-vs-nuked-motion&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Reduced motion vs. nuked motion&lt;/h3&gt;
        &lt;p&gt;Knowing this, the temptation might be high to go nuclear on the motion and wipe it out entirely when a user has specified a reduced motion preference. The trouble with that is — to quote Eric again — “animation isn’t unnecessary.” Some of it might be, but animation can also&amp;nbsp;&lt;em&gt;help&lt;/em&gt;&amp;nbsp;accessibility. For example, a&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/transitional-interfaces-coded/&quot;&gt;“transitional interface”&lt;/a&gt;&amp;nbsp;(e.g. a list that animates an opening for a new item to slide into it) can be very helpful.&lt;/p&gt;
        &lt;p&gt;In this case, perhaps less, slower, or removed&amp;nbsp;&lt;em&gt;motion&lt;/em&gt;&amp;nbsp;while leaning harder on color and fading transitions.&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;Ban Nadel wrote&amp;nbsp;&lt;a href=&quot;https://www.bennadel.com/blog/4132-applying-multiple-animation-keyframes-to-support-prefers-reduced-motion-in-css.htm&quot; rel=&quot;noopener&quot;&gt;“Applying Multiple Animation @keyframes To Support Prefers-Reduced-Motion In CSS”&lt;/a&gt;&amp;nbsp;and covered a similar example demonstrating a modal entrance animation that uses both a fade-in and scale-in effect by default. Then, in a&amp;nbsp;&lt;code&gt;prefers-reduced-motion&lt;/code&gt;&amp;nbsp;scenario, it uses the fade-in but not the scaling. The scaling causes movement in a way the fading doesn’t.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/*
        By default, we&#39;ll use the REDUCED MOTION version of the animation.
        */
        @keyframes modal-enter {
        from {
        opacity: 0 ;
        }
        to {
        opacity: 1 ;
        }
        }
        /*
        Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
        animation definition to include both the motion and non-motion properties.
        */
        @media ( prefers-reduced-motion: no-preference ) {
        @keyframes modal-enter {
        from {
        opacity: 0 ;
        transform: scale(0.7) ;
        }
        to {
        opacity: 1 ;
        transform: scale(1.0) ;
        }
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;browser-support&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-browser-support&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-browser-support&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Browser support&lt;/h3&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;prefers-reduced-motion&quot;&gt;&lt;/baseline-status&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-people-affected&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-specification&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-specification&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Specification&lt;/h3&gt;
        &lt;p&gt;The &lt;code&gt;prefers-reduced-motion&lt;/code&gt; feature is defined in the &lt;a href=&quot;https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion&quot; rel=&quot;noopener&quot;&gt;Media Queries Module Level 5 specification&lt;/a&gt;. Even it is widely supported by browsers, the specification is in Working Draft status at the time of writing, meaning the information can change between now and when it becomes a formal Candidate Recommendation.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;related-guides&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-related-guides&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-related-guides&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Related guides&lt;/h3&gt;
        &lt;div class=&quot;in-article-cards&quot;&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2020-10-02&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Dec 19, 2024 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-css-media-queries-guide&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-css-media-queries-guide&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/a-complete-guide-to-css-media-queries/&quot;&gt;
        CSS Media Queries Guide &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/agalante/&quot; aria-label=&quot;Author page of Andrés Galante&quot;&gt;
        &lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/Ando1-80x80.jpg?resize=80%2C80&amp;amp;ssl=1&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/agalante/&quot;&gt;
        Andrés Galante &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;related-tricks&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-related-tricks&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-related-tricks&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Related tricks!&lt;/h3&gt;
        &lt;div class=&quot;in-article-cards&quot;&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2020-11-03&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Nov 3, 2020 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-gifs-and-prefers-reduced-motion&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-gifs-and-prefers-reduced-motion&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/gifs-and-prefers-reduced-motion/&quot;&gt;
        GIFS and prefers-reduced-motion &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card links&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2019-05-31&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        May 31, 2019 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-reducing-motion-with-the-picture-element&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-reducing-motion-with-the-picture-element&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/reducing-motion-with-the-picture-element/&quot;&gt;
        Reducing motion with the picture element &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/robinrendle/&quot; aria-label=&quot;Author page of Robin Rendle&quot;&gt;
        &lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/me-black-white-80x80.jpg?resize=80%2C80&amp;amp;ssl=1&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/robinrendle/&quot;&gt;
        Robin Rendle &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2019-06-21&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Jun 21, 2019 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-reduced-motion-picture-technique-take-two&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-reduced-motion-picture-technique-take-two&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/reduced-motion-picture-technique-take-two/&quot;&gt;
        Reduced Motion Picture Technique, Take Two &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2017-04-14&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Apr 14, 2017 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-smooth-scrolling-and-accessibility&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-smooth-scrolling-and-accessibility&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/smooth-scrolling-accessibility/&quot;&gt;
        Smooth Scrolling and Accessibility &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/heathermig/&quot; aria-label=&quot;Author page of Heather Migliorisi&quot;&gt;
        &lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/hmig-80x80.jpg?resize=80%2C80&amp;amp;ssl=1&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/heathermig/&quot;&gt;
        Heather Migliorisi &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2022-02-23&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Feb 23, 2022 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-5-accessibility-quick-wins-you-can-implement-today&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-5-accessibility-quick-wins-you-can-implement-today&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/5-accessibility-quick-wins-you-can-implement-today/&quot;&gt;
        5 Accessibility Quick Wins You Can Implement Today &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/danyuschick/&quot; aria-label=&quot;Author page of Daniel Yuschick&quot;&gt;
        &lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/EF3E5D0F-F08E-4FA2-8490-E9F2A561A0DA-80x80.jpeg?resize=80%2C80&amp;amp;ssl=1&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/danyuschick/&quot;&gt;
        Daniel Yuschick &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;references&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-references&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-references&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;References&lt;/h3&gt;
        &lt;div class=&quot;in-article-cards&quot;&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2017-02-10&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Apr 24, 2019 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-an-introduction-to-the-reduced-motion-media-query&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-an-introduction-to-the-reduced-motion-media-query&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/introduction-reduced-motion-media-query/&quot;&gt;
        An Introduction to the Reduced Motion Media Query &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/ericwbailey/&quot; aria-label=&quot;Author page of Eric Bailey&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/188a9d4deb76ac6e69c7f65358897476&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/188a9d4deb76ac6e69c7f65358897476 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/ericwbailey/&quot;&gt;
        Eric Bailey &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2022-02-08&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Feb 8, 2022 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-no-motion-isnt-always-prefers-reduced-motion&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-no-motion-isnt-always-prefers-reduced-motion&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/nuking-motion-with-prefers-reduced-motion/&quot;&gt;
        No Motion Isn’t Always prefers-reduced-motion &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/chriscoyier/&quot; aria-label=&quot;Author page of Chris Coyier&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/chriscoyier/&quot;&gt;
        Chris Coyier &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card 2021-end-of-year-thoughts&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2021-12-29&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Jan 18, 2022 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-empathetic-animation&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-empathetic-animation&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/empathetic-animation/&quot;&gt;
        Empathetic Animation &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/cassieevans/&quot; aria-label=&quot;Author page of Cassie Evans&quot;&gt;
        &lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/rZKsmX4T_400x400-80x80.jpg?resize=80%2C80&amp;amp;ssl=1&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/cassieevans/&quot;&gt;
        Cassie Evans &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2020-12-16&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Dec 16, 2020 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-slow-movement&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-slow-movement&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/slow-movement/&quot;&gt;
        Slow Movement &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/mmatuzo/&quot; aria-label=&quot;Author page of Manuel Matuzovic&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/fee3aee3642c55f15adfcbeab11e6bb6&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/fee3aee3642c55f15adfcbeab11e6bb6 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/mmatuzo/&quot;&gt;
        Manuel Matuzovic &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card articles&quot; id=&quot;mini-post-383264&quot;&gt;
        &lt;time datetime=&quot;2020-09-22&quot; title=&quot;Originally published Dec 20, 2024&quot;&gt;
        &lt;strong&gt;
        Article
        &lt;/strong&gt;
        on
        Sep 22, 2020 &lt;/time&gt;
        &lt;h3&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/#aa-accessible-web-animation-the-wcag-on-animation-explained&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-accessible-web-animation-the-wcag-on-animation-explained&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;
        &lt;a href=&quot;https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/&quot;&gt;
        Accessible Web Animation: The WCAG on Animation Explained &lt;/a&gt;
        &lt;/h3&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/valhead/&quot; aria-label=&quot;Author page of Val Head&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/48544d7b14d3544427909d5ddb330e76&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/48544d7b14d3544427909d5ddb330e76 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/valhead/&quot;&gt;
        Val Head &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;related-posts&quot;&gt;Related&lt;/h3&gt;
        &lt;div class=&quot;in-article-cards&quot;&gt;
        &lt;article class=&quot;in-article-card &quot; id=&quot;mini-post-13714&quot;&gt;
        &lt;time datetime=&quot;2024-09-09&quot; title=&quot;Originally published Sep 9, 2024&quot;&gt;
        &lt;strong&gt;
        Almanac
        &lt;/strong&gt;
        on
        Sep 19, 2024 &lt;/time&gt;
        &lt;h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/animation/&quot;&gt;
        animation &lt;/a&gt;
        &lt;/h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/animation/&quot; class=&quot;almanac-example&quot;&gt;
        &lt;code class=&quot;language-css&quot;&gt;.element { animation: pulse 5s infinite; }&lt;/code&gt;
        &lt;/a&gt;
        &lt;div class=&quot;tags&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/tag/animation/&quot; rel=&quot;tag&quot;&gt;animation&lt;/a&gt; &lt;/div&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/ryantrimble/&quot; aria-label=&quot;Author page of Ryan Trimble&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7dc839d600a4fd344ca6699b2e06ef69&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7dc839d600a4fd344ca6699b2e06ef69 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/ryantrimble/&quot;&gt;
        Ryan Trimble &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card &quot; id=&quot;mini-post-14125&quot;&gt;
        &lt;time datetime=&quot;2011-09-06&quot; title=&quot;Originally published Sep 6, 2011&quot;&gt;
        &lt;strong&gt;
        Almanac
        &lt;/strong&gt;
        on
        Dec 13, 2024 &lt;/time&gt;
        &lt;h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/t/transition/&quot;&gt;
        transition &lt;/a&gt;
        &lt;/h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/t/transition/&quot; class=&quot;almanac-example&quot;&gt;
        &lt;code class=&quot;language-css&quot;&gt;.element { transition: background-color 0.5s ease; }&lt;/code&gt;
        &lt;/a&gt;
        &lt;div class=&quot;tags&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/tag/animation/&quot; rel=&quot;tag&quot;&gt;animation&lt;/a&gt; &lt;/div&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/saracope/&quot; aria-label=&quot;Author page of Sara Cope&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/84da92f298e5b124d92fb581b82cfdf4&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/84da92f298e5b124d92fb581b82cfdf4 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/saracope/&quot;&gt;
        Sara Cope &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card &quot; id=&quot;mini-post-22467&quot;&gt;
        &lt;time datetime=&quot;2013-07-19&quot; title=&quot;Originally published Jul 19, 2013&quot;&gt;
        &lt;strong&gt;
        Almanac
        &lt;/strong&gt;
        on
        Dec 18, 2024 &lt;/time&gt;
        &lt;h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/t/transition-duration/&quot;&gt;
        transition-duration &lt;/a&gt;
        &lt;/h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/properties/t/transition-duration/&quot; class=&quot;almanac-example&quot;&gt;
        &lt;code class=&quot;language-css&quot;&gt;.element { transition-duration: 3s; }&lt;/code&gt;
        &lt;/a&gt;
        &lt;div class=&quot;tags&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/tag/animation/&quot; rel=&quot;tag&quot;&gt;animation&lt;/a&gt; &lt;/div&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/lazaris/&quot; aria-label=&quot;Author page of Louis Lazaris&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b8eb0184e62e8a6e71a2d1d7be558248&quot; srcset=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/b8eb0184e62e8a6e71a2d1d7be558248 2x&quot; class=&quot;avatar avatar-80 photo&quot; height=&quot;80&quot; width=&quot;80&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/lazaris/&quot;&gt;
        Louis Lazaris &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;article class=&quot;in-article-card &quot; id=&quot;mini-post-381314&quot;&gt;
        &lt;time datetime=&quot;2024-10-01&quot; title=&quot;Originally published Oct 1, 2024&quot;&gt;
        &lt;strong&gt;
        Almanac
        &lt;/strong&gt;
        on
        Dec 13, 2024 &lt;/time&gt;
        &lt;h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/rules/s/supports/&quot;&gt;
        @supports &lt;/a&gt;
        &lt;/h3&gt;
        &lt;a href=&quot;https://css-tricks.com/almanac/rules/s/supports/&quot; class=&quot;almanac-example&quot;&gt;
        &lt;code class=&quot;language-css&quot;&gt;@supports selector(:nth-child(1 of .foo)) { }&lt;/code&gt;
        &lt;/a&gt;
        &lt;div class=&quot;tags&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/tag/supports/&quot; rel=&quot;tag&quot;&gt;@supports&lt;/a&gt; &lt;a href=&quot;https://css-tricks.com/tag/accessibility/&quot; rel=&quot;tag&quot;&gt;accessibility&lt;/a&gt; &lt;/div&gt;
        &lt;div class=&quot;author-row&quot;&gt;
        &lt;a href=&quot;https://css-tricks.com/author/monknow/&quot; aria-label=&quot;Author page of Juan Diego Rodríguez&quot;&gt;
        &lt;img loading=&quot;lazy&quot; alt=&quot;&quot; class=&quot;avatar avatar-80 photo avatar-default&quot; height=&quot;80&quot; src=&quot;https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/juan-diego-rodriguez-80x80.png&quot; width=&quot;80&quot; referrerpolicy=&quot;no-referrer&quot;&gt; &lt;/a&gt;
        &lt;a class=&quot;author-name&quot; href=&quot;https://css-tricks.com/author/monknow/&quot;&gt;
        Juan Diego Rodríguez &lt;/a&gt;
        &lt;/div&gt;
        &lt;/article&gt;
        &lt;/div&gt;
      </description>
      <link>https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/</link>
      <guid isPermaLink="false">https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/</guid>
      <pubDate>Fri, 20 Dec 2024 15:35:21 GMT</pubDate>
      <author>Geoff Graham</author>
    </item>
    <item>
      <title>@media</title>
      <description>&lt;p&gt;The CSS &lt;code&gt;@media&lt;/code&gt; at-rule lets us target browsers by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* When the browser is at least 600px and above */
        @media screen and (min-width: 600px) {
        .element {
        /* Styles! */
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;explanation&quot;&gt;This entry summarizes our &lt;a href=&quot;https://css-tricks.com/a-complete-guide-to-css-media-queries/&quot;&gt;CSS Media Queries Guide&lt;/a&gt; by &lt;a href=&quot;https://css-tricks.com/author/agalante/&quot;&gt;Andrés Galante&lt;/a&gt;.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;syntax&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/#aa-syntax&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-syntax&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Syntax&lt;/h3&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@media [media-type] ([media-feature]) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img loading=&quot;lazy&quot; data-recalc-dims=&quot;1&quot; fetchpriority=&quot;high&quot; decoding=&quot;async&quot; width=&quot;1000&quot; height=&quot;66&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/syntax.png?resize=1000%2C66&amp;amp;ssl=1&quot; alt=&quot;Syntax for CSS media queries&quot; class=&quot;wp-image-383316&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/syntax.png?w=1000&amp;amp;ssl=1 1000w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/syntax.png?resize=300%2C20&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/syntax.png?resize=768%2C51&amp;amp;ssl=1 768w&quot; sizes=&quot;(min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;@media&lt;/code&gt;:&lt;/strong&gt; the starting block of a media query &lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;[media-type]&lt;/code&gt;:&lt;/strong&gt; Users can consume webpages through different kinds of media. This argument defines the type of media we are trying to target&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;[media-feature]&lt;/code&gt;:&lt;/strong&gt; The type of features we are trying to match the media query to.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;operator&lt;/code&gt;:&lt;/strong&gt; &amp;nbsp;Logical operators used to match and combine media types based on certain conditions.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;media-types&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/#aa-media-types&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-media-types&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Media types&lt;/h3&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@media all {}
        @media print {}
        @media screen {}
        @media speech {}&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;What type of media are we trying to target? In many (if not most) cases, you’ll see a screen value used here, which makes sense since many of the media types we’re trying to match are devices with screens attached to them.&lt;/p&gt;
        &lt;p&gt;But screens aren’t the only type of media we can target, of course. We have a few, including:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;all&lt;/code&gt;&lt;/strong&gt;: Matches all devices&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;print&lt;/code&gt;&lt;/strong&gt;: Matches documents that are viewed in a print preview or any media that breaks the content up into pages intended to print.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;screen&lt;/code&gt;&lt;/strong&gt;: Matches devices with a screen&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;speech&lt;/code&gt;&lt;/strong&gt;: Matches devices that read the content audibly, such as a screen reader. This replaces the now deprecated aural type since Media Queries Level 4.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;media-features&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/#aa-media-features&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-media-features&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Media Features&lt;/h3&gt;
        &lt;p&gt;Once we define the type of media we’re trying to match, we can start defining what features we are trying to match it to. We’ve looked at a lot of examples that match screens to width, but there are many, many (many!) more “features” we can match. &lt;a href=&quot;https://www.w3.org/TR/mediaqueries-5/#mf-user-preferences&quot; rel=&quot;noopener&quot;&gt;Media Queries Level 5&lt;/a&gt; groups media features into 6 categories.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;viewport-page-characteristics&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/m/media/#aa-viewport-page-characteristics&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-viewport-page-characteristics&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Viewport/Page Characteristics&lt;/h4&gt;
        &lt;p&gt;Here’s the content of the table converted into a bullet list:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;width&lt;/code&gt;&lt;/strong&gt;: Defines the width of the viewport. This can be a specific number (e.g., 400px) or a range (using min-width and max-width).&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Value: &amp;lt;length&amp;gt; */
        @media screen and (min-width: 600px) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;height&lt;/code&gt;&lt;/strong&gt;: Defines the height of the viewport. This can be a specific number (e.g., 400px) or a range (using min-height and max-height).&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Value: &amp;lt;length&amp;gt; */
        @media screen and (max-height: 600px) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;aspect-ratio&lt;/code&gt;&lt;/strong&gt;: Defines the width-to-height aspect ratio of the viewport.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Value: &amp;lt;ratio&amp;gt; */
        @media screen and (min-aspect-ratio: 3/4) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;orientation&lt;/code&gt;&lt;/strong&gt;: Refers to the way the screen is oriented, such as tall (portrait) or wide (landscape) based on how the device is rotated.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Value: portrait | landscape */
        @media screen and (orientation: landscape) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;overflow-block&lt;/code&gt;&lt;/strong&gt;: Checks how the device treats content that overflows the viewport in the block direction.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Value: none | scroll | paged */
        @media (overflow-block: paged) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;overflow-inline&lt;/code&gt;&lt;/strong&gt;: Checks if content that overflows the viewport along the inline axis

@TonyRL TonyRL requested a review from Copilot January 8, 2025 18:52
Copilot
Copilot AI reviewed Jan 8, 2025
View reviewed changes

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 5 out of 7 changed files in this pull request and generated no comments.

Files not reviewed (2)
  • lib/routes/30secondsofcode/utils.ts: Evaluated as low risk
  • lib/routes/css-tricks/namespace.ts: Evaluated as low risk
@sk22
Copy link
Contributor

sk22 commented Jan 8, 2025

note that css tricks already provides rss feeds: https://css-tricks.com/rss-feeds/

@Rjnishant530
Copy link
Contributor Author

Rjnishant530 commented Jan 10, 2025 •
edited
Loading

note that css tricks already provides rss feeds: https://css-tricks.com/rss-feeds/

yes, but they dont provide for popular this month and Fresh From the Almanac

TonyRL
TonyRL reviewed Jan 12, 2025
View reviewed changes
lib/routes/css-tricks/articles.ts Show resolved Hide resolved
lib/routes/css-tricks/fresh.ts Outdated Show resolved Hide resolved
lib/routes/css-tricks/guides.ts Outdated Show resolved Hide resolved
lib/routes/css-tricks/popular.ts Outdated Show resolved Hide resolved
lib/routes/css-tricks/utils.ts Outdated Show resolved Hide resolved
@Rjnishant530 Rjnishant530 requested a review from TonyRL January 18, 2025 06:12
@github-actions GitHub Actions
Copy link
Contributor

Successfully generated as following:

http://localhost:1200/css-tricks/articles - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Articles - CSS-Tricks</title>
    <link>https://css-tricks.com/category/articles/</link>
    <atom:link href="http://localhost:1200/css-tricks/articles" rel="self" type="application/rss+xml"></atom:link>
    <description>Latest Articles - CSS-Tricks - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Sat, 18 Jan 2025 06:20:25 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>Fancy Menu Navigation Using Anchor Positioning</title>
      <description>&lt;p&gt;You have for sure heard about the new &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;CSS Anchor Positioning&lt;/a&gt;, right? It’s a feature that allows you to link any element from the page to another one, i.e., the anchor. It’s useful &lt;a href=&quot;https://css-tricks.com/the-little-triangle-in-the-tooltip/&quot;&gt;for all the tooltip stuff&lt;/a&gt;, but it can also create a lot of other nice effects.&lt;/p&gt;
        &lt;p&gt;In this article, we will study menu navigation where I rely on anchor positioning to create a nice hover effect on links.&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_ExzEjoQ&quot; src=&quot;https://codepen.io/anon/embed/ExzEjoQ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=ExzEjoQ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed ExzEjoQ&quot; title=&quot;CodePen Embed ExzEjoQ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Cool, right? We have a sliding effect where the blue rectangle adjusts to fit perfectly with the text content over a nice transition. If you are new to anchor positioning, this example is perfect for you because it’s simple and allows you to discover the basics of this new feature. We will also study another example so stay until the end!&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Note that only Chromium-based browsers fully support &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;anchor positioning&lt;/a&gt; at the time I’m writing this. You’ll want to view the demos in a browser like Chrome or Edge until the feature is more widely supported in other browsers.&lt;/p&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;anchor-positioning&quot;&gt;&lt;/baseline-status&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-initial-configuration&quot;&gt;The initial configuration&lt;/h3&gt;
        &lt;p&gt;Let’s start with the HTML structure which is nothing but a &lt;code&gt;nav&lt;/code&gt; element containing an unordered list of links:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;nav&amp;gt;
        &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li class=&quot;active&quot;&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;About&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Projects&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Blog&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Contact&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
        &amp;lt;/nav&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We will not spend too much time explaining this structure because it can be different if your use case is different. Simply ensure the semantic is relevant to what you are trying to do. As for the CSS part, we will start with some basic styling to create a horizontal menu navigation.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        gap: .5rem;
        font-size: 2.2rem;
        }
        ul li a {
        color: #000;
        text-decoration: none;
        font-weight: 900;
        line-height: 1.5;
        padding-inline: .2em;
        display: block;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Nothing fancy so far. We remove some default styling and use Flexbox to align the elements horizontally.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_WbeXzea/76e1215907af780bb1840f1c28c18c52&quot; src=&quot;https://codepen.io/anon/embed/preview/WbeXzea/76e1215907af780bb1840f1c28c18c52?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=WbeXzea/76e1215907af780bb1840f1c28c18c52&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed WbeXzea/76e1215907af780bb1840f1c28c18c52&quot; title=&quot;CodePen Embed WbeXzea/76e1215907af780bb1840f1c28c18c52&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;sliding-effect&quot;&gt;Sliding effect&lt;/h3&gt;
        &lt;p&gt;First off, let’s understand how the effect works. At first glance, it looks like we have one rectangle that shrinks to a small height, moves to the hovered element, and then grows to full height. That’s the visual effect, but in reality, more than one element is involved!&lt;/p&gt;
        &lt;p&gt;Here is the first demo where I am using different colors to better see what is happening.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_ZYzaxbz/39b653e638908bf0e207bdcb8b742dc3&quot; src=&quot;https://codepen.io/anon/embed/preview/ZYzaxbz/39b653e638908bf0e207bdcb8b742dc3?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=ZYzaxbz/39b653e638908bf0e207bdcb8b742dc3&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed ZYzaxbz/39b653e638908bf0e207bdcb8b742dc3&quot; title=&quot;CodePen Embed ZYzaxbz/39b653e638908bf0e207bdcb8b742dc3&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Each menu item has its own “element” that shrinks or grows. Then we have a common “element” (the one in red) that slides between the different menu items. The first effect is done using a background animation and the second one is where anchor positioning comes into play!&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;the-background-animation&quot;&gt;The background animation&lt;/h4&gt;
        &lt;p&gt;We will animate the height of a CSS gradient for this first part:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* 1 */
        ul li {
        background:
        conic-gradient(lightblue 0 0)
        bottom/100% 0% no-repeat;
        transition: .2s;
        }
        /* 2 */
        ul li:is(:hover,.active) {
        background-size: 100% 100%;
        transition: .2s .2s;
        }
        /* 3 */
        ul:has(li:hover) li.active:not(:hover) {
        background-size: 100% 0%;
        transition: .2s;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We’ve defined a gradient with a &lt;code&gt;100%&lt;/code&gt; width and &lt;code&gt;0%&lt;/code&gt; height, placed at the bottom. The gradient syntax may look strange, but it’s the shortest one that allows me to have a single-color gradient.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;&lt;strong&gt;Related:&lt;/strong&gt; &lt;a href=&quot;https://css-tip.com/one-color-gradient/&quot; rel=&quot;noopener&quot;&gt;“How to correctly define a one-color gradient”&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;Then, if the menu item is hovered or has the &lt;code&gt;.active&lt;/code&gt; class, we make the height equal to &lt;code&gt;100%&lt;/code&gt;. Note the use of the delay here to make sure the growing happens after the shrinking.&lt;/p&gt;
        &lt;p&gt;Finally, we need to handle a special case with the &lt;code&gt;.active&lt;/code&gt; item. If we hover any item (that is &lt;em&gt;not&lt;/em&gt; the active one), then the &lt;code&gt;.active&lt;/code&gt; item gets the shirking effect (the gradient height is equal to &lt;code&gt;0%&lt;/code&gt;). That’s the purpose of the third selector in the code.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_GgKOxxX/ce99779f21c7a6c9991f086ccb6ef1f1&quot; src=&quot;https://codepen.io/anon/embed/preview/GgKOxxX/ce99779f21c7a6c9991f086ccb6ef1f1?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=GgKOxxX/ce99779f21c7a6c9991f086ccb6ef1f1&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed GgKOxxX/ce99779f21c7a6c9991f086ccb6ef1f1&quot; title=&quot;CodePen Embed GgKOxxX/ce99779f21c7a6c9991f086ccb6ef1f1&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Our first animation is done! Notice how the growing begins &lt;em&gt;after&lt;/em&gt; the shrinking completes because of the delay we defined in the second selector.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;the-anchor-positioning-animation&quot;&gt;The anchor positioning animation&lt;/h4&gt;
        &lt;p&gt;The first animation was quite easy because each item had its own background animation, meaning we didn’t have to care about the text content since the background automatically fills the whole space.&lt;/p&gt;
        &lt;p&gt;We will use one element for the second animation that slides between all the menu items while adapting its width to fit the text of each item. This is where anchor positioning can help us.&lt;/p&gt;
        &lt;p&gt;Let’s start with the following code:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul:before {
        content:&quot;&quot;;
        position: absolute;
        position-anchor: --li;
        background: red;
        transition: .2s;
        }
        ul li:is(:hover, .active) {
        anchor-name: --li;
        }
        ul:has(li:hover) li.active:not(:hover) {
        anchor-name: none;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To avoid adding an extra element, I will prefer using a pseudo-element on the &lt;code&gt;ul&lt;/code&gt;. It should be absolutely-positioned and we will rely on two properties to activate the anchor positioning.&lt;/p&gt;
        &lt;p&gt;We define the anchor with the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;anchor-name&lt;/a&gt;&lt;/code&gt; property. When a menu item is hovered or has the &lt;code&gt;.active&lt;/code&gt; class, it becomes the anchor element. We also have to remove the anchor from the &lt;code&gt;.active&lt;/code&gt; item if another item is in a hovered state (hence, the last selector in the code). In other words, only one anchor is defined at a time.&lt;/p&gt;
        &lt;p&gt;Then we use the &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/a&gt; property to link the pseudo-element to the anchor. Notice how both use the same notation &lt;code&gt;--li&lt;/code&gt;. It’s similar to how, for example, we define &lt;code&gt;@keyframes&lt;/code&gt; with a specific name and later use it inside an &lt;code&gt;animation&lt;/code&gt; property. Keep in mind that you have to use &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/dashed-ident&quot; rel=&quot;noopener&quot;&gt;the &lt;code&gt;&amp;lt;dashed-indent&amp;gt;&lt;/code&gt; syntax&lt;/a&gt;, meaning the name must always start with two dashes (&lt;code&gt;--&lt;/code&gt;).&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_pvzdVMp/e10fbc3380bf477e5fcc9e8c640f94aa&quot; src=&quot;https://codepen.io/anon/embed/preview/pvzdVMp/e10fbc3380bf477e5fcc9e8c640f94aa?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=pvzdVMp/e10fbc3380bf477e5fcc9e8c640f94aa&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed pvzdVMp/e10fbc3380bf477e5fcc9e8c640f94aa&quot; title=&quot;CodePen Embed pvzdVMp/e10fbc3380bf477e5fcc9e8c640f94aa&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;The pseudo-element is correctly placed but nothing is visible because we didn’t define any dimension! Let’s add the following code:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul:before {
        bottom: anchor(bottom);
        left: anchor(left);
        right: anchor(right);
        height: .2em;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The &lt;code&gt;height&lt;/code&gt; property is trivial but the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/functions/a/anchor/&quot;&gt;anchor()&lt;/a&gt;&lt;/code&gt; is a newcomer. Here’s how Juan Diego describes it in the Almanac:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;The CSS &lt;code&gt;anchor()&lt;/code&gt; function takes an &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;anchor element’s&lt;/a&gt; side and resolves to the &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt; where it is positioned. It can only be used in inset properties (e.g. &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, etc.), normally to place an absolute-positioned element relative to an anchor.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;Let’s check &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/anchor&quot; rel=&quot;noopener&quot;&gt;the MDN page&lt;/a&gt; as well:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;The &lt;code&gt;anchor()&lt;/code&gt; &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS&quot; rel=&quot;noopener&quot;&gt;CSS&lt;/a&gt; &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions&quot; rel=&quot;noopener&quot;&gt;function&lt;/a&gt; can be used within an anchor-positioned element’s &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/anchor#properties_that_accept_anchor_function_values&quot; rel=&quot;noopener&quot;&gt;inset property&lt;/a&gt; values, returning a length value relative to the position of the edges of its associated anchor element.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;Usually, we use &lt;code&gt;left: 0&lt;/code&gt; to place an absolute element at the left edge of its containing block (i.e., the nearest ancestor having &lt;code&gt;position: relative&lt;/code&gt;). The &lt;code&gt;left: anchor(left)&lt;/code&gt; will do the same but instead of the containing block, it will consider the associated anchor element.&lt;/p&gt;
        &lt;p&gt;That’s all — we are done! Hover the menu items in the below demo and see how the pseudo-element slides between them.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_JoPOZNg/83b683c3b8bfcfc845e412a8a46f85c6&quot; src=&quot;https://codepen.io/anon/embed/preview/JoPOZNg/83b683c3b8bfcfc845e412a8a46f85c6?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=JoPOZNg/83b683c3b8bfcfc845e412a8a46f85c6&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed JoPOZNg/83b683c3b8bfcfc845e412a8a46f85c6&quot; title=&quot;CodePen Embed JoPOZNg/83b683c3b8bfcfc845e412a8a46f85c6&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Each time you hover over a menu item it becomes the new anchor for the pseudo-element (the &lt;code&gt;ul:before&lt;/code&gt;). This also means that the &lt;code&gt;anchor(...)&lt;/code&gt; values will change creating the sliding effect! Let’s not forget the use of the transition which is important otherwise, we will have an abrupt change.&lt;/p&gt;
        &lt;p&gt;We can also write the code differently like this:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul:before {
        content:&quot;&quot;;
        position: absolute;
        inset: auto anchor(right, --li) anchor(bottom, --li) anchor(left, --li);
        height: .2em;
        background: red;
        transition: .2s;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;In other words, we can rely on the &lt;code&gt;inset&lt;/code&gt; shorthand instead of using physical properties like &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, and &lt;code&gt;bottom&lt;/code&gt;, and instead of defining &lt;code&gt;position-anchor&lt;/code&gt;, we can include the anchor’s name inside the &lt;code&gt;anchor()&lt;/code&gt; function. We are repeating the same name three times which is probably not optimal here but in some situations, you may want your element to consider multiple anchors, and in such cases, this syntax will make sense.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;combining-both-effects&quot;&gt;Combining both effects&lt;/h4&gt;
        &lt;p&gt;Now, we combine both effects and, &lt;em&gt;tada&lt;/em&gt;, the illusion is perfect!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_ExzEjoQ&quot; src=&quot;https://codepen.io/anon/embed/preview/ExzEjoQ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=ExzEjoQ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed ExzEjoQ&quot; title=&quot;CodePen Embed ExzEjoQ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Pay attention to the transition values where the delay is important:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;2,10&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul:before {
        transition: .2s .2s;
        }
        ul li {
        transition: .2s;
        }
        ul li:is(:hover,.active) {
        transition: .2s .4s;
        }
        ul:has(li:hover) li.active:not(:hover) {
        transition: .2s;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We have a sequence of three animations — shrink the height of the gradient, slide the pseudo-element, and grow the height of the gradient — so we need to have delays between them to pull everything together. That’s why for the sliding of the pseudo-element we have a delay equal to the duration of one animation (&lt;code&gt;transition: .2 .2s&lt;/code&gt;) and for the growing part the delay is equal to twice the duration (&lt;code&gt;transition: .2s .4s&lt;/code&gt;).&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;bouncy-effect-why-not-&quot;&gt;Bouncy effect? Why not?!&lt;/h3&gt;
        &lt;p&gt;Let’s try another fancy animation in which the highlight rectangle morphs into a small circle, jumps to the next item, and transforms back into a rectangle again!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_jOozyLY&quot; src=&quot;https://codepen.io/anon/embed/preview/jOozyLY?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=jOozyLY&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed jOozyLY&quot; title=&quot;CodePen Embed jOozyLY&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;I won’t explain too much for this example as it’s your homework to dissect the code! I’ll offer a few hints so you can unpack what’s happening.&lt;/p&gt;
        &lt;p&gt;Like the previous effect, we have a combination of two animations. For the first one, I will use the pseudo-element of each menu item where I will adjust the dimension and the &lt;code&gt;border-radius&lt;/code&gt; to simulate the morphing. For the second animation, I will use the &lt;code&gt;ul&lt;/code&gt; pseudo-element to create a small circle that I move between the menu items.&lt;/p&gt;
        &lt;p&gt;Here is another version of the demo with different coloration and a slower transition to better visualize each animation:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_dPbZaBO/0eb8245bc557d829240ab836fa4804c3&quot; src=&quot;https://codepen.io/anon/embed/preview/dPbZaBO/0eb8245bc557d829240ab836fa4804c3?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=dPbZaBO/0eb8245bc557d829240ab836fa4804c3&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed dPbZaBO/0eb8245bc557d829240ab836fa4804c3&quot; title=&quot;CodePen Embed dPbZaBO/0eb8245bc557d829240ab836fa4804c3&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;The tricky part is the jumping effect where I am using a strange &lt;code&gt;cubic-bezier()&lt;/code&gt; but I have a detailed article where I explain the technique in my CSS-Tricks article &lt;a href=&quot;https://css-tricks.com/advanced-css-animation-using-cubic-bezier/&quot;&gt;“Advanced CSS Animation Using &lt;code&gt;cubic-bezier()&lt;/code&gt;”&lt;/a&gt;.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
        &lt;p&gt;I hope you enjoyed this little experimentation using the anchor positioning feature. We only looked at three properties/values but it’s enough to prepare you for this new feature. The &lt;code&gt;anchor-name&lt;/code&gt; and &lt;code&gt;position-anchor&lt;/code&gt; properties are the mandatory pieces for linking one element (often called a “target” element in this context) to another element (what we call an “anchor” element in this context). From there, you have the &lt;code&gt;anchor()&lt;/code&gt; function to control the position.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;&lt;strong&gt;Related:&lt;/strong&gt; &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;CSS Anchor Positioning Guide&lt;/a&gt;&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/fancy-menu-navigation-using-anchor-positioning/</link>
      <guid isPermaLink="false">https://css-tricks.com/fancy-menu-navigation-using-anchor-positioning/</guid>
      <pubDate>Fri, 17 Jan 2025 06:57:39 GMT</pubDate>
      <author>Temani Afif</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2025/01/menu-link-hover-effect.gif" type="image/jpeg"></enclosure>
      <category>anchor positioning</category>
      <category>Links &amp;amp; URLs</category>
    </item>
    <item>
      <title>Web-Slinger.css: Across the Swiper-Verse</title>
      <description>&lt;p&gt;My &lt;a href=&quot;https://css-tricks.com/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations/&quot;&gt;previous article&lt;/a&gt; warned that horizontal motion on Tinder has irreversible consequences. I’ll save venting on that topic for a different blog, but at first glance, swipe-based navigation seems like it could be a job for &lt;a href=&quot;https://codepen.io/leemeyer/pen/WNVdoNV&quot; rel=&quot;noopener&quot;&gt;Web-Slinger.css&lt;/a&gt;, your friendly neighborhood experimental pure CSS &lt;a href=&quot;https://wowjs.uk/&quot; rel=&quot;noopener&quot;&gt;Wow.js&lt;/a&gt; replacement for one-way scroll-triggered animations. I haven’t managed to fit that description into a theme song yet, but I’m working on it.&lt;/p&gt;
        &lt;p&gt;In the meantime, can Web-Slinger.css swing a pure CSS Tinder-style swiping interaction to indicate liking or disliking an element? More importantly, will this experiment give me an excuse to use an image of &lt;a href=&quot;https://simpsons.fandom.com/wiki/Spider-Pig_(song&quot; rel=&quot;noopener&quot;&gt;Spider Pig&lt;/a&gt;, in response to popular demand in the bustling comments section of my previous article? Behold the Spider Pig swiper, which I propose as a replacement for captchas because every human with a pulse loves Spider Pig. With that unbiased statement in mind, swipe left or right below (only Chrome and Edge for now) to reveal a counter showing how many people share your stance on Spider Pig.&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_MYgobxe&quot; src=&quot;https://codepen.io/anon/embed/preview/MYgobxe?height=900&amp;amp;theme-id=1&amp;amp;slug-hash=MYgobxe&amp;amp;default-tab=result&quot; height=&quot;900&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed MYgobxe&quot; title=&quot;CodePen Embed MYgobxe&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;broaden-your-horizons&quot;&gt;Broaden your horizons&lt;/h3&gt;
        &lt;p&gt;The crackpot who invented Web-Slinger.css seems not to have considered horizontal scrolling, but we can patch that maniac’s monstrous creation like so:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;[class^=&quot;scroll-trigger-&quot;] {
        view-timeline-axis: x;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This overrides the default behavior for marker elements with class names using the Web-Slinger convention of &lt;code&gt;scroll-trigger-n&lt;/code&gt;, which activates one-way, scroll-triggered animations. By setting the timeline axis to &lt;code&gt;x&lt;/code&gt;, the scroll triggers only run when they are revealed by scrolling horizontally rather than vertically (which is the default). Otherwise, the triggers would run straightaway because although they are out of view due to the container’s width, they will all be above the fold vertically when we implement our swiper.&lt;/p&gt;
        &lt;p&gt;My steps in laying the foundation for the above demo were to &lt;a href=&quot;https://codepen.io/suez/pen/MaeVBy/&quot; rel=&quot;noopener&quot;&gt;fork this awesome JavaScript demo of Tinder-style swiping by Nikolay Talanov&lt;/a&gt;, strip out the JavaScript and all the cards except for one, then import Web-Slinger.css and introduce the horizontal patch explained above. Next, I changed the card’s container to &lt;code&gt;position: fixed&lt;/code&gt;, and introduced three &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type&quot; rel=&quot;noopener&quot;&gt;scroll-snapping&lt;/a&gt; boxes side-by-side, each the height and width of the viewport. I set the middle slide to &lt;code&gt;scroll-align: center&lt;/code&gt; so that the user starts in the middle of the page and has the option to scroll backwards or forwards.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;&lt;strong&gt;Sidenote:&lt;/strong&gt; When unconventionally using scroll-driven animations like this, a good mindset is that the scrollable element needn’t be responsible for conventionally scrolling anything visible on the page. This approach is reminiscent of how the first thing you do when using &lt;a href=&quot;https://css-tricks.com/the-checkbox-hack/&quot;&gt;checkbox hacks&lt;/a&gt; is hide the checkbox and make the label look like something else. We leverage the CSS-driven behaviors of a scrollable element, but we don’t need the default UI behavior.&lt;/p&gt;
        &lt;p&gt;I put a &lt;code&gt;div&lt;/code&gt; marked with &lt;code&gt;scroll-trigger-1&lt;/code&gt; on the third slide and used it to activate a rejection animation on the card like this:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;demo__card on-scroll-trigger-1 reject&quot;&amp;gt;
        &amp;lt;!-- HTML for the card --&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;main&amp;gt;
        &amp;lt;div class=&quot;slide&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div id=&quot;middle&quot; class=&quot;slide&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;slide&quot;&amp;gt;
        &amp;lt;div class=&quot;scroll-trigger-1&quot;&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;/main&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It worked the way I expected! I knew this would be easy! (Narrator: it isn’t, you’ll see why next.)&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;on-scroll-trigger-2 accept&quot;&amp;gt;
        &amp;lt;div class=&quot;demo__card on-scroll-trigger-2 reject&quot;&amp;gt;
        &amp;lt;!-- HTML for the card --&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;main&amp;gt;
        &amp;lt;div class=&quot;slide&quot;&amp;gt;
        &amp;lt;div class=&quot;scroll-trigger-2&quot;&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div id=&quot;middle&quot; class=&quot;slide&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;slide&quot;&amp;gt;
        &amp;lt;div class=&quot;scroll-trigger-1&quot;&amp;gt;&amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;/main&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;After adding this, Spider Pig is automatically ”liked” when the page loads. That would be appropriate for a card that shows a person like myself who everybody automatically likes — after all, a middle-aged guy who spends his days and nights hacking CSS is quite a catch. By contrast, it is possible Spider Pig isn’t everyone’s cup of tea. So, let’s understand why the swipe right implementation would behave differently than the swipe left implementation when we thought we applied the same principles to both implementations.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;take-a-step-back&quot;&gt;Take a step back&lt;/h3&gt;
        &lt;p&gt;This bug drove home to me what &lt;code&gt;view-timeline&lt;/code&gt; does and doesn’t do. The lunatic creator of Web-Slinger.css relied on tech that wasn’t made for animations which run only when the user scrolls &lt;em&gt;backwards&lt;/em&gt;.&lt;/p&gt;
        &lt;p&gt;This &lt;a href=&quot;https://scroll-driven-animations.style/tools/view-timeline/ranges/&quot; rel=&quot;noopener&quot;&gt;visualizer&lt;/a&gt; shows that no matter what options you choose for &lt;code&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range&quot; rel=&quot;noopener&quot;&gt;animation-range&lt;/a&gt;&lt;/code&gt;, the subject wants to complete its animation after it has crossed the viewport in the scrolling direction — which is exactly what we do &lt;em&gt;not&lt;/em&gt; want to happen in this particular case.&lt;/p&gt;
        &lt;p&gt;Fortunately, our friendly neighborhood &lt;a href=&quot;https://www.bram.us/&quot; rel=&quot;noopener&quot;&gt;Bramus&lt;/a&gt; from the Chrome Developer Team &lt;a href=&quot;https://www.bram.us/2023/10/23/css-scroll-detection/&quot; rel=&quot;noopener&quot;&gt;has a cool demo showing how to detect scroll direction in CSS&lt;/a&gt;. Using the clever &lt;code&gt;--scroll-direction&lt;/code&gt; CSS &lt;a href=&quot;https://css-tricks.com/using-property-for-css-custom-properties/&quot;&gt;custom property&lt;/a&gt; Bramus made, we can ensure Spider Pig animates at the right time rather than on load. The trick is to control the appearance of &lt;code&gt;.scroll-trigger-2&lt;/code&gt; using a &lt;a href=&quot;https://css-tricks.com/digging-deeper-into-container-style-queries/&quot;&gt;style query&lt;/a&gt; like this:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;20,21,22,23,24&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;:root {
        animation: adjust-slide-index 3s steps(3, end), adjust-pos 1s;
        animation-timeline: scroll(root x);
        }
        @property --slide-index {
        syntax: &quot;&amp;lt;number&amp;gt;&quot;;
        inherits: true;
        initial-value: 0;
        }
        @keyframes adjust-slide-index {
        to {
        --slide-index: 3;
        }
        }
        .scroll-trigger-2 {
        display: none;
        }
        @container style(--scroll-direction: -1) and style(--slide-index: 0) {
        .scroll-trigger-2 {
        display: block;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;That style query means that the marker with the &lt;code&gt;.scroll-trigger-2&lt;/code&gt; class will not be rendered until we are on the previous slide &lt;strong&gt;and&lt;/strong&gt; reach it by scrolling backward. Notice that we also introduced another variable named &lt;code&gt;--slide-index&lt;/code&gt;, which is controlled by a three-second scroll-driven animation with three steps. It counts the slide we are on, and it is used because we want the user to swipe decisively to activate the dislike animation. We don’t want just any slight breeze to trigger a dislike.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;when-the-swipe-has-been-concluded-one-more-like-i-m-superhuman-&quot;&gt;When the swipe has been concluded, one more like (I’m superhuman)&lt;/h3&gt;
        &lt;p&gt;As mentioned at the outset, measuring how many CSS-Tricks readers dislike Spider Pig versus how many have a soul is important. To capture this crucial stat, I’m using a &lt;a href=&quot;https://www.freecounterstat.com/extensions-browser.php?referer=step_3&quot; rel=&quot;noopener&quot;&gt;third-party counter image&lt;/a&gt; as a background for the card underneath the Spider Pig card. It is third-party, but hopefully, it will always work because the website looks like it has survived since the dawn of the internet. I shouldn’t complain because the price is right. I chose the least 1990s-looking counter and used it like this:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@container style(--scroll-trigger-1: 1) {
        .result {
        background-image: url(&#39;https://counter6.optistats.ovh/private/freecounterstat.php?c=qbgw71kxx1stgsf5shmwrb2aflk5wecz&#39;);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        }
        .counter-description::after {
        content: &#39;who like spider pig&#39;;
        }
        .scroll-trigger-2 {
        display: none;
        }
        }
        @container style(--scroll-trigger-2: 1) {
        .result {
        background-image: url(&#39;https://counter6.optistats.ovh/private/freecounterstat.php?c=abtwsn99snah6wq42nhnsmbp6pxbrwtj&#39;);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        }
        .counter-description::after {
        content: &#39;who dislike spider pig&#39;;
        }
        .scroll-trigger-1 {
        display: none;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;scrolls-of-wisdom-lessons-learned&quot;&gt;Scrolls of wisdom: Lessons learned&lt;/h3&gt;
        &lt;p&gt;This hack turned out more complex than I expected, mostly because of the complexity of using scroll-triggered animations that only run when you meet an element by scrolling backward which goes against assumptions made by the current API. That’s a good thing to know and understand. Still, it’s amazing how much power is hidden in the current spec. We can style things based on extremely specific scrolling behaviors if we believe in ourselves. The current API had to be hacked to unlock that power, but I wish we could do something like:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;[class^=&quot;scroll-trigger-&quot;] {
        view-timeline-axis: x;
        view-timeline-direction: backwards; /* &amp;lt;-- this is speculative. do not use! */
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;With an API like that allowing the swipe-right scroll trigger to behave the way I originally imagined, the Spider Pig swiper would not require hacking.&lt;/p&gt;
        &lt;p&gt;I dream of wider browser support for scroll-driven animations. But I hope to see the spec evolve to give us more flexibility to encourage designers to build nonlinear storytelling into the experiences they create. If not, once animation timelines land in more browsers, it might be time to make Web-Slinger.css more complete and production-ready, to make the more advanced scrolling use cases accessible to the average CSS user.&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/web-slinger-css-across-the-swiper-verse/</link>
      <guid isPermaLink="false">https://css-tricks.com/web-slinger-css-across-the-swiper-verse/</guid>
      <pubDate>Wed, 15 Jan 2025 07:03:25 GMT</pubDate>
      <author>Lee Meyer</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2025/01/swipe-direction.jpg" type="image/jpeg"></enclosure>
      <category>Scroll Driven Animation</category>
    </item>
    <item>
      <title>How to Wait for the sibling-count() and sibling-index() Functions</title>
      <description>&lt;p&gt;New features don’t just pop up in CSS (but I wish they did). Rather, they go through an extensive process of discussions and considerations, defining, writing, prototyping, testing, shipping handling support, and many more verbs that I can’t even begin to imagine. That process is &lt;strong&gt;long&lt;/strong&gt;, and despite how much I want to get my hands on a new feature, as an everyday developer, I can only wait.&lt;/p&gt;
        &lt;p&gt;I can, however, control how I wait: do I avoid all possible interfaces or demos that are possible with that one feature? Or do I push the boundaries of CSS and try to do them anyway?&lt;/p&gt;
        &lt;p&gt;As ambitious and curious developers, many of us choose the latter option. CSS would grow stagnant without that mentality. That’s why, today, I want to look at two upcoming functions: &lt;code&gt;sibling-count()&lt;/code&gt; and &lt;code&gt;sibling-index()&lt;/code&gt;. We’re waiting for them — and have been for several years — so I’m letting my natural curiosity get the best of me so I can get a feel for what to be excited about. Join me!&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-tree-counting-functions&quot;&gt;The tree-counting functions&lt;/h3&gt;
        &lt;p&gt;At some point, you’ve probably wanted to know the position of an element amongst its siblings or how many children an element has to calculate something in CSS, maybe for some staggering animation in which each element has a longer delay, or perhaps for changing an element’s &lt;code&gt;background-color&lt;/code&gt; depending on its number of siblings. This has been a long-awaited deal on my &lt;a href=&quot;https://css-tricks.com/a-css-wishlist-for-2025/&quot;&gt;CSS wishlists&lt;/a&gt;. Take this &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/1026&quot; rel=&quot;noopener&quot;&gt;CSSWG GitHub Issue&lt;/a&gt; from 2017:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;Feature request. It would be nice to be able to use the &lt;code&gt;counter()&lt;/code&gt; function inside of &lt;code&gt;calc()&lt;/code&gt; function. That would enable new possibilities on layouts.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;However, counters work using strings, rendering them useless inside a &lt;code&gt;calc()&lt;/code&gt; function that deals with numbers. We need a set of similar functions that return &lt;strong&gt;as integers&lt;/strong&gt; the index of an element and the count of siblings. This doesn’t seem too much to ask. We can currently query an element by its tree position using the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/&quot;&gt;:nth-child()&lt;/a&gt;&lt;/code&gt; pseudo-selector (and its variants), not to mention query an element based on how many items it has using the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/pseudo-selectors/h/has/&quot;&gt;:has()&lt;/a&gt;&lt;/code&gt; pseudo-selector.&lt;/p&gt;
        &lt;p&gt;Luckily, this year the &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/4559&quot; rel=&quot;noopener&quot;&gt;CSSWG approved implementing the &lt;code&gt;sibling-count()&lt;/code&gt; and &lt;code&gt;sibling-index()&lt;/code&gt; functions&lt;/a&gt;! And we already have something in the spec written down:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;The &lt;code&gt;sibling-count()&lt;/code&gt; functional notation represents, as an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt;, the total number of child elements in the parent of the element on which the notation is used.&lt;/p&gt;
        &lt;p&gt;The &lt;code&gt;sibling-index()&lt;/code&gt; functional notation represents, as an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt;, the index of the element on which the notation is used among the children of its parent. Like &lt;code&gt;:nth-child()&lt;/code&gt;, &lt;code&gt;sibling-index()&lt;/code&gt; is 1-indexed.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;How much time do we have to wait to use them? Earlier this year &lt;a href=&quot;https://x.com/argyleink/status/1800565839214858335&quot;&gt;Adam Argyle said&lt;/a&gt; that “a Chromium engineer mentioned wanting to do it, but we don’t have a flag to try it out with yet. I’ll share when we do!” So, while I am hopeful to get more news in 2025, we probably won’t see them shipped soon. In the meantime, let’s get to what we can do right now!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;rubbing-two-sticks-together&quot;&gt;Rubbing two sticks together&lt;/h3&gt;
        &lt;p&gt;The closest we can get to tree counting functions in terms of syntax and usage is with custom properties. However, the biggest problem is populating them with the correct index and count. The simplest and longest method is hardcoding each using only CSS: we can use the &lt;code&gt;nth-child()&lt;/code&gt; selector to give each element its corresponding index:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(1) {
        --sibling-index: 1;
        }
        li:nth-child(2) {
        --sibling-index: 2;
        }
        li:nth-child(3) {
        --sibling-index: 3;
        }
        /* and so on... */&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Setting the &lt;code&gt;sibling-count()&lt;/code&gt; equivalent has a bit more nuance since we will need to use quantity queries with the &lt;code&gt;:has()&lt;/code&gt; selector. A quantity query has the following syntax:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.container:has(&amp;gt; :last-child:nth-child(m)) { }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;…where &lt;code&gt;m&lt;/code&gt; is the number of elements we want to target. It works by checking if the last element of a container is also the &lt;code&gt;nth&lt;/code&gt; element we are targeting; thus it has only that number of elements. You can create your custom &lt;a href=&quot;https://css-tip.com/quantity-queries/&quot; rel=&quot;noopener&quot;&gt;quantity queries using this tool by Temani Afif&lt;/a&gt;. In this case, our quantity queries would look like the following:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ol:has(&amp;gt; :nth-child(1)) {
        --sibling-count: 1;
        }
        ol:has(&amp;gt; :last-child:nth-child(2)) {
        --sibling-count: 2;
        }
        ol:has(&amp;gt; :last-child:nth-child(3)) {
        --sibling-count: 3;
        }
        /* and so on... */&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This example is intentionally light on the number of elements for brevity, but as the list grows it will become unmanageable. Maybe we could use a preprocessor like Sass to write them for us, but we want to focus on a vanilla CSS solution here. For example, the following demo can support up to 12 elements, and you can already see how ugly it gets in the code.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_gbYWzgR&quot; src=&quot;https://codepen.io/anon/embed/gbYWzgR?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=gbYWzgR&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed gbYWzgR&quot; title=&quot;CodePen Embed gbYWzgR&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;That’s 24 rules to know the index and count of 12 elements for those of you keeping score. It surely feels like we could get that number down to something more manageable, but if we hardcode each index we are bound increase the amount of code we write. The best we can do is rewrite our CSS so we can nest the &lt;code&gt;--sibling-index&lt;/code&gt; and &lt;code&gt;--sibling-count&lt;/code&gt; properties together. Instead of writing each property by itself:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(2) {
        --sibling-index: 2;
        }
        ol:has(&amp;gt; :last-child:nth-child(2)) {
        --sibling-count: 2;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We could instead nest the &lt;code&gt;--sibling-count&lt;/code&gt; rule inside the &lt;code&gt;--sibling-index&lt;/code&gt; rule.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(2) {
        --sibling-index: 2;
        ol:has(&amp;gt; &amp;amp;:last-child) {
        --sibling-count: 2;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;While it may seem wacky to nest a parent inside its children, the following CSS code is completely valid; we are selecting the second &lt;code&gt;li&lt;/code&gt; element, and inside, we are selecting an &lt;code&gt;ol&lt;/code&gt; element if its second &lt;code&gt;li&lt;/code&gt; element is also the last, so the list only has two elements. Which syntax is easier to manage? It’s up to you.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_RNbZYgP&quot; src=&quot;https://codepen.io/anon/embed/RNbZYgP?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=RNbZYgP&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed RNbZYgP&quot; title=&quot;CodePen Embed RNbZYgP&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;But that’s just a slight improvement. If we had, say, 100 elements we would still need to hardcode the &lt;code&gt;--sibling-index&lt;/code&gt; and &lt;code&gt;--sibling-count&lt;/code&gt; properties 100 times. Luckily, the following method will increase rules in a logarithmic way, specifically base-2. So instead of writing 100 rules for 100 elements, we will be writing closer to 10 rules for around 100 elements.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;flint-and-steel&quot;&gt;Flint and steel&lt;/h3&gt;
        &lt;p&gt;This method was first described by &lt;a href=&quot;https://kizu.dev/tree-counting-and-random/#prototyping-with-custom-properties&quot; rel=&quot;noopener&quot;&gt;Roman Komarov in October last year&lt;/a&gt;, in which he prototypes both tree counting functions and the future &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/functions/r/random/&quot;&gt;random()&lt;/a&gt;&lt;/code&gt; function. It’s an amazing post, so I strongly encourage you to read it.&lt;/p&gt;
        &lt;p&gt;This method also uses custom properties, but instead of hardcoding each one, we will be using two custom properties that will build up the &lt;code&gt;--sibling-index&lt;/code&gt; property for each element. Just to be consistent with Roman’s post, we will call them &lt;code&gt;--si1&lt;/code&gt; and &lt;code&gt;--si2&lt;/code&gt;, both starting at &lt;code&gt;0&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li {
        --si1: 0;
        --si2: 0;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The real &lt;code&gt;--sibling-index&lt;/code&gt; will be constructed using both properties and a &lt;strong&gt;factor&lt;/strong&gt; (&lt;code&gt;F&lt;/code&gt;) that represents an integer greater or equal to &lt;code&gt;2&lt;/code&gt; that tells us how many elements we can select according to the formula &lt;code&gt;sqrt(F) - 1&lt;/code&gt;. So…&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;For a factor of &lt;code&gt;2&lt;/code&gt;, we can select &lt;code&gt;3&lt;/code&gt; elements.&lt;/li&gt;
        &lt;li&gt;For a factor of &lt;code&gt;3&lt;/code&gt;, we can select &lt;code&gt;8&lt;/code&gt; elements.&lt;/li&gt;
        &lt;li&gt;For a factor of &lt;code&gt;5&lt;/code&gt;, we can select &lt;code&gt;24&lt;/code&gt; elements.&lt;/li&gt;
        &lt;li&gt;For a factor of &lt;code&gt;10&lt;/code&gt;, we can select &lt;code&gt;99&lt;/code&gt; elements.&lt;/li&gt;
        &lt;li&gt;For a factor of &lt;code&gt;25&lt;/code&gt;, we can select &lt;code&gt;624&lt;/code&gt; elements.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;As you can see, increasing the factor by one will give us exponential gains on how many elements we can select. But how does all this translate to CSS?&lt;/p&gt;
        &lt;p&gt;The first thing to know is that the formula for calculating the &lt;code&gt;--sibling-index&lt;/code&gt; property is &lt;code&gt;calc(F * var(--si2) + var(--si1))&lt;/code&gt;. If we take a factor of &lt;code&gt;3&lt;/code&gt;, it would look like the following:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li {
        --si1: 0;
        --si2: 0;
        /* factor of 3; it&#39;s a harcoded number */
        --sibling-index: calc(3 * var(--si2) + var(--si1));
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The following selectors may be random but stay with me here. For the &lt;code&gt;--si1&lt;/code&gt; property, we will write rules selecting elements that are multiples of the factor and offset them by one &lt;code&gt;1&lt;/code&gt; until we reach &lt;code&gt;F - 1&lt;/code&gt;, then set &lt;code&gt;--si1&lt;/code&gt; to the offset. This translates to the following CSS:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(Fn + 1) { --si1: 1; }
        li:nth-child(Fn + 2) { --si1: 2; }
        /* ... */
        li:nth-child(Fn+(F-1)) { --si1: (F-1) }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So if our factor is &lt;code&gt;3&lt;/code&gt;, we will write the following rules until we reach &lt;code&gt;F-1&lt;/code&gt;, so &lt;code&gt;2&lt;/code&gt; rules:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(3n + 1) { --si1: 1; }
        li:nth-child(3n + 2) { --si1: 2; }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;For the &lt;code&gt;--si2&lt;/code&gt; property, we will write rules selecting elements in batches of the factor (so if our factor is &lt;code&gt;3&lt;/code&gt;, we will select &lt;code&gt;3&lt;/code&gt; elements per rule), going from the last possible index (in this case &lt;code&gt;8&lt;/code&gt;) backward until we simply are unable to select more elements in batches. This is a little more convoluted to write in CSS:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(n + F*1):nth-child(-n + F*1-1){--si2: 1;}
        li:nth-child(n + F*2):nth-child(-n + F*2-1){--si2: 2;}
        /* ... */
        li:nth-child(n+(F*(F-1))):nth-child(-n+(F*F-1)) { --si2: (F-1) }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Again, if our factor is &lt;code&gt;3&lt;/code&gt;, we will write the following two rules:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(n + 3):nth-child(-n + 5) {
        --si2: 1;
        }
        li:nth-child(n + 6):nth-child(-n + 8) {
        --si2: 2;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;And that’s it! By only setting those two values for &lt;code&gt;--si1&lt;/code&gt; and &lt;code&gt;--si2&lt;/code&gt; we can count up to &lt;code&gt;8&lt;/code&gt; total elements. The math behind how it works seems wacky at first, but once you visually get it, it all clicks. I made this interactive demo in which you can see how all elements can be reached using this formula. Hover over the code snippets to see which elements can be selected, and click on each snippet to combine them into a possible index.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_QwLMVom&quot; src=&quot;https://codepen.io/anon/embed/QwLMVom?height=600&amp;amp;theme-id=1&amp;amp;slug-hash=QwLMVom&amp;amp;default-tab=result&quot; height=&quot;600&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed QwLMVom&quot; title=&quot;CodePen Embed QwLMVom&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;If you crank the elements and factor to the max, you can see that we can select 48 elements using only 14 snippets!&lt;/p&gt;
        &lt;p&gt;&lt;strong&gt;Wait, one thing is missing: the &lt;code&gt;sibling-count()&lt;/code&gt; function.&lt;/strong&gt; Luckily, we will be reusing all we have learned from prototyping &lt;code&gt;--sibling-index&lt;/code&gt;. We will start with two custom properties: &lt;code&gt;--sc1&lt;/code&gt; and &lt;code&gt;--sc1&lt;/code&gt; at the container, both starting at &lt;code&gt;0&lt;/code&gt; as well. The formula for calculating &lt;code&gt;--sibling-count&lt;/code&gt; is the same.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ol {
        --sc1: 0;
        --sc2: 0;
        /* factor of 3; also a harcoded number */
        --sibling-count: calc(3 * var(--sc2) + var(--sc1));
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Roman’s post also explains how to write selectors for the &lt;code&gt;--sibling-count&lt;/code&gt; property by themselves, but we will use the &lt;code&gt;:has()&lt;/code&gt; selection method from our first technique so we don’t have to write extra selectors. We can cram those &lt;code&gt;--sc1&lt;/code&gt; and &lt;code&gt;--sc2&lt;/code&gt; properties into the rules where we defined the &lt;code&gt;sibling-index()&lt;/code&gt; properties:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* --si1 and --sc1 */
        li:nth-child(3n + 1) {
        --si1: 1;
        ol:has(&amp;gt; &amp;amp;:last-child) {
        --sc1: 1;
        }
        }
        li:nth-child(3n + 2) {
        --si1: 2;
        ol:has(&amp;gt; &amp;amp;:last-child) {
        --sc1: 2;
        }
        }
        /* --si2 and --sc2 */
        li:nth-child(n + 3):nth-child(-n + 5) {
        --si2: 1;
        ol:has(&amp;gt; &amp;amp;:last-child) {
        --sc2: 1;
        }
        }
        li:nth-child(n + 6):nth-child(-n + 8) {
        --si2: 2;
        ol:has(&amp;gt; &amp;amp;:last-child) {
        --sc2: 2;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This is using a factor of &lt;code&gt;3&lt;/code&gt;, so we can count up to eight elements with only four rules. The following example has a factor of &lt;code&gt;7&lt;/code&gt;, so we can count up to 48 elements with only 14 rules.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_bNbgOMZ&quot; src=&quot;https://codepen.io/anon/embed/bNbgOMZ?height=600&amp;amp;theme-id=1&amp;amp;slug-hash=bNbgOMZ&amp;amp;default-tab=css,result&quot; height=&quot;600&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed bNbgOMZ&quot; title=&quot;CodePen Embed bNbgOMZ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;This method is great, but may not be the best fit for everyone due to the almost magical way of how it works, or simply because you don’t find it aesthetically pleasing. While for avid hands lighting a fire with flint and steel is a breeze, many won’t get their fire started.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;using-a-flamethrower&quot;&gt;Using a flamethrower&lt;/h3&gt;
        &lt;p&gt;For this method, we will use once again custom properties to mimic the tree counting functions, and what’s best, we will write less than 20 lines of code to count up to infinity—or I guess to &lt;code&gt;1.7976931348623157e+308&lt;/code&gt;, which is the double precision floating point limit!&lt;/p&gt;
        &lt;p&gt;We will be using the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver&quot; rel=&quot;noopener&quot;&gt;Mutation Observer API&lt;/a&gt;, so of course it takes JavaScript. I know that’s like admitting defeat for many, but I disagree. If the JavaScript method is simpler (which it is, by far, in this case), then it’s the most appropriate choice. Just as a side note, if performance is your main worry, stick to hard-coding each index in CSS or HTML.&lt;/p&gt;
        &lt;p&gt;First, we will grab our container from the DOM:&lt;/p&gt;
        &lt;pre rel=&quot;JavaScript&quot; class=&quot;wp-block-csstricks-code-block language-javascript&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;const elements = document.querySelector(&quot;ol&quot;);&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Then we’ll create a function that sets the &lt;code&gt;--sibling-index&lt;/code&gt; property in each element and the &lt;code&gt;--sibling-count&lt;/code&gt; in the container (it will be available to its children due to the cascade). For the &lt;code&gt;--sibling-index&lt;/code&gt;, we have to loop through the &lt;code&gt;elements.children&lt;/code&gt;, and we can get the &lt;code&gt;--sibling-count&lt;/code&gt; from &lt;code&gt;elements.children.length&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;JavaScript&quot; class=&quot;wp-block-csstricks-code-block language-javascript&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;const updateCustomProperties = () =&amp;gt; {
        let index = 1;
        for (element of elements.children) {
        element.style.setProperty(&quot;--sibling-index&quot;, index);
        index++;
        }
        elements.style.setProperty(&quot;--sibling-count&quot;, elements.children.length);
        };&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Once we have our function, remember to call it once so we have our initial tree counting properties:&lt;/p&gt;
        &lt;pre rel=&quot;JavaScript&quot; class=&quot;wp-block-csstricks-code-block language-javascript&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;updateCustomProperties();&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Lastly, the Mutation Observer. We need to initiate a new observer using the &lt;code&gt;MutationObserver&lt;/code&gt; constructor. It takes a callback that gets invoked each time the elements change, so we write our &lt;code&gt;updateCustomProperties&lt;/code&gt; function. With the resulting &lt;code&gt;observer&lt;/code&gt; object, we can call its &lt;code&gt;observe()&lt;/code&gt; method which takes two parameters:&lt;/p&gt;
        &lt;ol class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;the element we want to observe, and&lt;/li&gt;
        &lt;li&gt;a &lt;code&gt;config&lt;/code&gt; object

...

@github-actions GitHub Actions
Copy link
Contributor

http://localhost:1200/css-tricks/guides - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Latest CSS Guides</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/guides" rel="self" type="application/rss+xml"></atom:link>
    <description>Dive deep into CSS features and concepts - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Sat, 18 Jan 2025 06:20:29 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>CSS Anchor Positioning Guide</title>
      <description>&lt;div class=&quot;wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow&quot; style=&quot;flex-basis:66%&quot;&gt;
        &lt;p&gt;Not long ago, if we wanted a tooltip or popover positioned on top of another element, we would have to set our tooltip’s position to something other than &lt;code&gt;static&lt;/code&gt; and use its inset/transform properties to place it &lt;em&gt;exactly&lt;/em&gt; where we want. This works, but the element’s position is susceptible to user scrolls, zooming, or animations since the tooltip could overflow off of the screen or wind up in an awkward position. The only way to solve this was using JavaScript to check whenever the tooltip goes out of bounds so we can correct it… again in JavaScript.&lt;/p&gt;
        &lt;p&gt; CSS Anchor Positioning gives us a simple interface to attach elements next to others just by saying which sides to connect — directly in CSS. It also lets us set a fallback position so that we can avoid the overflow issues we just described. For example, we might set a tooltip element above its anchor but allow it to fold underneath the anchor when it runs out of room to show it above.&lt;/p&gt;
        &lt;p&gt;Anchor positioning is different from a lot of other features as far as how quickly it’s gained browser support: its &lt;a href=&quot;https://www.w3.org/standards/history/css-anchor-position-1/&quot; rel=&quot;noopener&quot;&gt;first draft was published on June 2023&lt;/a&gt; and, just a year later, it was &lt;a href=&quot;https://caniuse.com/css-anchor-positioning&quot; rel=&quot;noopener&quot;&gt;released on Chrome 125&lt;/a&gt;. To put it into perspective, the first draft specification for CSS variables &lt;a href=&quot;https://www.w3.org/standards/history/css-variables-1/&quot; rel=&quot;noopener&quot;&gt;was published in 2012&lt;/a&gt;, but it took four years for them to gain wide browser support.&lt;/p&gt;
        &lt;p&gt;So, let’s dig in and learn about things like attaching target elements to anchor elements and positioning and sizing them.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top ticss-986972e6 is-layout-flow wp-block-column-is-layout-flow&quot; style=&quot;flex-basis:33%&quot;&gt;&lt;h2 class=&quot;wp-block-heading&quot; id=&quot;quick-reference&quot;&gt;Quick reference&lt;/h2&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Define an anchor element */
        .anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Anchor a target element */
        .target {
        position: absolute;
        position-anchor: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;/* Position a target element */
        .target {
        position-area: start end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-group sticky-toc&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;details&gt;
        &lt;summary&gt;
        Table of contents &lt;/summary&gt;
        &lt;ol class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-basics-and-terminology&quot;&gt;Basics and terminology&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-attaching-targets-to-anchors&quot;&gt;Attaching targets to anchors&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-positioning-targets&quot;&gt;Positioning targets&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-setting-fallback-positions&quot;&gt;Setting fallback positions&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-custom-position-and-size-fallbacks&quot;&gt;Custom position and size fallbacks&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-multiple-anchors&quot;&gt;Multiple anchors&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-accessibility&quot;&gt;Accessibility&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-browser-support&quot;&gt;Browser support&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-spec-changes&quot;&gt;Spec changes&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-known-bugs&quot;&gt;Known bugs&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-almanac-references&quot;&gt;Almanac references&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-further-reading&quot;&gt;Further reading&lt;/a&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;/details&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div style=&quot;height:var(--wp--preset--spacing--60)&quot; aria-hidden=&quot;true&quot; class=&quot;wp-block-spacer&quot;&gt;&lt;/div&gt;
        &lt;details open=&quot;&quot;&gt;
        &lt;summary&gt;
        &lt;h2&gt;Basics and terminology&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p&gt;At its most basic, CSS Anchor Positioning introduces a completely new way of placing elements on the page relative to one another. To make our lives easier, we’re going to use specific names to clarify which element is connecting to which:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Anchor:&lt;/strong&gt; This is the element used as a reference for positioning other elements, hence the &lt;em&gt;anchor&lt;/em&gt;&lt;strong&gt; &lt;/strong&gt;name.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Target:&lt;/strong&gt; This is an absolutely positioned element placed relative to one or more anchors. The &lt;em&gt;target&lt;/em&gt; is the name we will use from now on, but you will often find it as just an “absolutely positioned element” in the spec.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;For the following code examples and demos, you can think of these as just two &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; elements next to one another.&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;CSS Anchor Positioning is all about elements with absolute positioning (i.e., &lt;code&gt;position: absolute&lt;/code&gt;), so there are also some concepts we have to review before diving in.&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Containing Block:&lt;/strong&gt; This is the box that contains the elements. For an absolute element, the containing block is the viewport the closest ancestor with a position other than &lt;code&gt;static&lt;/code&gt; or certain values in properties like &lt;a href=&quot;https://css-tricks.com/almanac/properties/c/contain/&quot;&gt;&lt;code&gt;contain&lt;/code&gt;&lt;/a&gt; or &lt;a href=&quot;https://css-tricks.com/almanac/properties/f/filter/&quot;&gt;&lt;code&gt;filter&lt;/code&gt;&lt;/a&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Inset-Modified Containing Block (IMCB):&lt;/strong&gt; For an absolute element, inset properties (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, etc.) reduce the size of the containing block into which it is sized and positioned, resulting in a new box called the &lt;em&gt;inset-modified containing block&lt;/em&gt;, or IMCB for short. This is a vital concept to know since properties we’re covering in this guide — like &lt;code&gt;position-area&lt;/code&gt; and &lt;code&gt;position-try-order&lt;/code&gt; — rely on this concept.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;Attaching targets to anchors&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;We’ll first look at the two properties that establish anchor positioning. The first, &lt;code&gt;anchor-name&lt;/code&gt;, establishes the anchor element, while the second, &lt;code&gt;position-anchor&lt;/code&gt;, attaches a target element to the anchor element.&lt;/p&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column ticss-30288ed1 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Square labeled as &amp;quot;anchor&amp;quot;&quot; class=&quot;wp-image-381095&quot; style=&quot;width:300px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-name-7.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;anchorname&quot;&gt;&lt;code&gt;anchor-name&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;A normal element isn’t an anchor by default — we have to explicitly make an element an anchor. The most common way is by giving it a name, which we can do with the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;anchor-name&lt;/a&gt;&lt;/code&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;anchor-name: none | &amp;lt;dashed-ident&amp;gt;#&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The name must be a &lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt;, that is, a custom name prefixed with two dashes (&lt;code&gt;--&lt;/code&gt;), like &lt;code&gt;--my-anchor&lt;/code&gt; or &lt;code&gt;--MyAnchor&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This gives us an anchor element. All it needs is something anchored to it. That’s what we call the “target” element which is set with the &lt;code&gt;position-anchor&lt;/code&gt; property.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column ticss-bd46f479 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Square labeled as &amp;quot;target&amp;quot;&quot; class=&quot;wp-image-381096&quot; style=&quot;width:300px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-anchor-5.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-anchor-&quot;&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The target element is an element with an absolute position linked to an anchor element matching what’s declared on the &lt;code&gt;anchor-name&lt;/code&gt; property. This attaches the target element to the anchor element.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-anchor: auto | &amp;lt;anchor-element&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It takes a valid &lt;code&gt;&amp;lt;anchor-element&amp;gt;&lt;/code&gt;. So, if we establish another element as the “anchor” we can set the target with the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;position-anchor&lt;/a&gt;&lt;/code&gt; property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-anchor: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Normally, if a valid anchor element isn’t found, then other anchor properties and functions will be ignored.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;Positioning targets&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;Now that we know how to establish an anchor-target relationship, we can work on &lt;strong&gt;positioning&lt;/strong&gt; the target element in relation to the anchor element. The following two properties are used to set which side of the anchor element the target is positioned on (&lt;code&gt;position-area&lt;/code&gt;) and conditions for hiding the target element when it runs out of room (&lt;code&gt;position-visibility&lt;/code&gt;).&lt;/p&gt;
        &lt;div class=&quot;wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top ticss-168d39a5 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Anchor element with target elements spanning around it.&quot; class=&quot;wp-image-380907&quot; style=&quot;width:640px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-area-9.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-area-&quot;&gt;&lt;code&gt;position-area&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The next step is positioning our target relative to its anchor. The easiest way is to use the &lt;code&gt;position-area&lt;/code&gt; property, which creates an imaginary 3×3 grid around the anchor element and lets us place the target in one or more regions of the grid.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-area: auto | &amp;lt;position-area&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It works by setting the row and column of the grid using&amp;nbsp;&lt;strong&gt;logical values&lt;/strong&gt;&amp;nbsp;like&amp;nbsp;&lt;code&gt;start&lt;/code&gt;&amp;nbsp;and&amp;nbsp;&lt;code&gt;end&lt;/code&gt;&amp;nbsp;(dependent on the writing mode);&amp;nbsp;&lt;strong&gt;physical values&lt;/strong&gt;&amp;nbsp;like&amp;nbsp;&lt;code&gt;top&lt;/code&gt;,&amp;nbsp;&lt;code&gt;left&lt;/code&gt;,&amp;nbsp;&lt;code&gt;right&lt;/code&gt;,&amp;nbsp;&lt;code&gt;bottom&lt;/code&gt;&amp;nbsp;and the&amp;nbsp;&lt;code&gt;center&lt;/code&gt;&amp;nbsp;&lt;strong&gt;shared value&lt;/strong&gt;, then it will shrink the target’s IMCB into the region of the grid we chose.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: top right;
        /* or */
        position-area: start end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Logical values refer to the containing block’s writing mode, but if we want to position our target relative to its writing mode we would prefix it with the &lt;code&gt;self&lt;/code&gt; value.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: self-start self-end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;There is also the &lt;code&gt;center&lt;/code&gt; value that can be used in every axis.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: center right;
        /* or */
        position-area: start center;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To place a target across two adjacent grid regions, we can use the prefix &lt;code&gt;span-&lt;/code&gt; on any value (that isn’t &lt;code&gt;center&lt;/code&gt;) a row or column at a time.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: span-top left;
        /* or */
        position-area: span-start start;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Finally, we can span a target across three adjacent grid regions using the &lt;code&gt;span-all&lt;/code&gt; value.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: bottom span-all;
        /* or */
        position-area: end span-all;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;You may have noticed that the &lt;code&gt;position-area&lt;/code&gt; property doesn’t have a strict order for physical values; writing&lt;code&gt; position-area: top left&lt;/code&gt; is the same as &lt;code&gt;position-area: left top&lt;/code&gt;, but the order is important for logical value since &lt;code&gt;position-area: start end&lt;/code&gt; is completely opposite to &lt;code&gt;position-area: end start&lt;/code&gt;.&lt;/p&gt;
        &lt;p&gt;We can make logical values interchangeable by prefixing them with the desired axis using &lt;code&gt;y-&lt;/code&gt;, &lt;code&gt;x-&lt;/code&gt;, &lt;code&gt;inline-&lt;/code&gt; or &lt;code&gt;block-&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-area: inline-end block-start;
        /* or */
        position-area: y-start x-end;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_PormJMG&quot; src=&quot;https://codepen.io/anon/embed/preview/PormJMG?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=PormJMG&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed PormJMG&quot; title=&quot;CodePen Embed PormJMG&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_VwJMxNp&quot; src=&quot;https://codepen.io/anon/embed/preview/VwJMxNp?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=VwJMxNp&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed VwJMxNp&quot; title=&quot;CodePen Embed VwJMxNp&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group ticss-e32e6402&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Examples on each position-visibility value: always showing the target, anchors-visible hiding it when the anchor goes out of screen and no-overflow hiding it when the target overflows&quot; class=&quot;wp-image-380921&quot; style=&quot;width:650px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-visibility-3.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-visibility-&quot;&gt;&lt;code&gt;position-visibility&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;It provides certain conditions to hide the target from the viewport.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-visibility: always | anchors-visible | no-overflow&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;always&lt;/code&gt;:&lt;/strong&gt; The target is always displayed without regard for its anchors or its overflowing status.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;no-overflow&lt;/code&gt;:&lt;/strong&gt; If even after applying the position fallbacks, the target element is still overflowing its containing block, then it is strongly hidden.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;anchors-visible&lt;/code&gt;:&lt;/strong&gt; If the &lt;strong&gt;anchor&lt;/strong&gt; (not the target) has completely overflowed its containing block or is completely covered by other elements, then the target is strongly hidden.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-visibility: always | anchors-visible | no-overflow&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_XWLzGVe&quot; src=&quot;https://codepen.io/anon/embed/preview/XWLzGVe?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=XWLzGVe&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed XWLzGVe&quot; title=&quot;CodePen Embed XWLzGVe&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;Setting fallback positions&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;p style=&quot;font-size:22px&quot;&gt;Once the target element is positioned against its anchor, we can give the target additional instructions that tell it what to do if it runs out of space. We’ve already looked at the &lt;code&gt;position-visibility&lt;/code&gt; property as one way of doing that — we simply tell the element to hide. The following two properties, however, give us more control to &lt;strong&gt;re-position&lt;/strong&gt; the target by trying other sides of the anchor (&lt;code&gt;position-try-fallbacks&lt;/code&gt;) and the order in which it attempts to re-position itself (&lt;code&gt;position-try-order&lt;/code&gt;).&lt;/p&gt;
        &lt;p&gt;The two properties can be declared together with the &lt;code&gt;position-try&lt;/code&gt; shorthand property — we’ll touch on that after we look at the two constituent properties.&lt;/p&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column ticss-b9b485c1 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;Examples on each try-tactic: flip-block flipping the target from the top to the bottom, flip-inline from left to right and flip-start from left to top (single value) and top right to left bottom (two values)&quot; class=&quot;wp-image-380903&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-fallbacks.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-fallbacks-&quot;&gt;&lt;code&gt;position-try-fallbacks&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This property accepts a list of comma-separated &lt;em&gt;position fallbacks&lt;/em&gt; that are tried whenever the target overflows out of space in its containing block. The property attempts to reposition itself using each fallback value until it finds a fit or runs out of options.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try-fallbacks: none | [ [&amp;lt;dashed-ident&amp;gt; || &amp;lt;try-tactic&amp;gt;] | &amp;lt;&#39;inset-area&#39;&amp;gt; ]#&lt;/code&gt;&lt;/pre&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;none&lt;/code&gt;:&lt;/strong&gt; Leaves the target’s position options list empty.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt;:&lt;/strong&gt; Adds to the options list a custom &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-anchor-at-rule&quot;&gt;@position-try&lt;/a&gt;&lt;/code&gt; fallback with the given name. If there isn’t a matching &lt;code&gt;@position-try&lt;/code&gt;, the value is ignored.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt;:&lt;/strong&gt; Creates an option list by flipping the target’s current position on one of three axes, each defined by a distinct keyword. They can also be combined to add up their effects.
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;The &lt;code&gt;flip-block&lt;/code&gt; keyword swaps the values in the block axis.&lt;/li&gt;
        &lt;li&gt;The &lt;code&gt;flip-inline&lt;/code&gt; keyword swaps the values in the inline axis.&lt;/li&gt;
        &lt;li&gt;The &lt;code&gt;flip-start&lt;/code&gt; keyword swaps the values diagonally.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;dashed-ident&amp;gt;&lt;/code&gt; || &lt;code&gt;&amp;lt;try-tactic&amp;gt;:&lt;/code&gt;&lt;/strong&gt; Combines a custom &lt;code&gt;@try-option&lt;/code&gt; and a &lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt; to create a single-position fallback. The &lt;code&gt;&amp;lt;try-tactic&amp;gt;&lt;/code&gt; keywords can also be combined to sum up their effects.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;&quot;position-area&quot;&amp;gt;&lt;/code&gt;&lt;/strong&gt; Uses the &lt;code&gt;position-area&lt;/code&gt; syntax to move the anchor to a new position.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try-fallbacks:
        --my-custom-position,
        --my-custom-position flip-inline,
        bottom left;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column ticss-69217be6 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;figure class=&quot;wp-block-image size-large&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;two targets sorrounding an anchor, positioned where the IMCB is the largest. &quot; class=&quot;wp-image-380914&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/position-try-order.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-order-&quot;&gt;&lt;code&gt;position-try-order&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This property chooses a new position from the fallback values defined in the &lt;code&gt;position-try-fallbacks&lt;/code&gt; property based on which position gives the target the most space. The rest of the options are reordered with the largest available space coming first.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try-order: normal | most-width | most-height | most-block-size | most-inline-size&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;What exactly does “more space” mean? For each position fallback, it finds the IMCB size for the target. Then it chooses the value that gives the IMCB the widest or tallest size, depending on which option is selected:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;most-width&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-height&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-block-size&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;most-inline-size&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try-fallbacks: --custom-position, flip-start;
        position-try-order: most-width;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-&quot;&gt;&lt;code&gt;position-try&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This is a shorthand property that combines the &lt;code&gt;position-try-fallbacks&lt;/code&gt; and &lt;code&gt;position-try-order&lt;/code&gt; properties into a single declaration. It accepts first the order and then the list of possible position fallbacks.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;position-try: &amp;lt; &quot;position-try-order&quot; &amp;gt;? &amp;lt; &quot;position-try-fallbacks&quot; &amp;gt;;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So, we can combine both properties into a single style rule:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position-try: most-width --my-custom-position, flip-inline, bottom left;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;Custom position and size fallbacks&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;&lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-position-try-&quot;&gt;&lt;code&gt;@position-try&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;This at-rule defines a custom position fallback for the &lt;code&gt;position-try-fallbacks&lt;/code&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try &amp;lt;dashed-ident&amp;gt; {
        &amp;lt;declaration-list&amp;gt;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;It takes various properties for changing a target element’s position and size and grouping them as a new position fallback for the element to try.&lt;/p&gt;
        &lt;p&gt;Imagine a scenario where you’ve established an anchor-target relationship. You want to position the target element against the anchor’s top-right edge, which is easy enough using the &lt;code&gt;position-area&lt;/code&gt; property we saw earlier:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;See how the &lt;code&gt;.target&lt;/code&gt; is sized at &lt;code&gt;100px&lt;/code&gt;? Maybe it runs out of room on some screens and is no longer able to be displayed at anchor’s the top-right edge. We can supply the &lt;code&gt;.target&lt;/code&gt; with the fallbacks we looked at earlier so that it attempts to re-position itself on an edge with more space:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;4,5&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        position-try-fallbacks: top left;
        position-try-order: most-width;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;And since we’re being good CSSer’s who strive for clean code, we may as well combine those two properties with the &lt;code&gt;position-try&lt;/code&gt; shorthand property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;4&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-area: top right;
        position-try: most-width, flip-inline, bottom left;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So far, so good. We have an anchored target element that starts at the top-right corner of the anchor at &lt;code&gt;100px&lt;/code&gt;. If it runs out of space there, it will look at the &lt;code&gt;position-try&lt;/code&gt; property and decide whether to reposition the target to the anchor’s top-left corner (declared as &lt;code&gt;flip-inline&lt;/code&gt;) or the anchor’s bottom-left corner — whichever offers the most width.&lt;/p&gt;
        &lt;p&gt;But what if we want to simulataneously &lt;strong&gt;re-size&lt;/strong&gt; the target element when it is re-positioned? Maybe the target is simply too dang big to display at &lt;code&gt;100px&lt;/code&gt; at either fallback position and we need it to be &lt;code&gt;50px&lt;/code&gt; instead. We can use the &lt;code&gt;@position-try&lt;/code&gt; to do exactly that:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try --my-custom-position {
        position-area: top left;
        width: 50px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;With that done, we now have a custom property called &lt;code&gt;--my-custom-position&lt;/code&gt; that we can use on the &lt;code&gt;position-try&lt;/code&gt; shorthand property. In this case, &lt;code&gt;@position-try&lt;/code&gt; can replace the &lt;code&gt;flip-inline&lt;/code&gt; value since it is the equivalent of &lt;code&gt;top left&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;9&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@position-try --my-custom-position {
        position-area: top left;
        width: 50px;
        }
        .target {
        position: absolute;
        position-area: top right;
        position-try: most-width, --my-custom-position, bottom left;
        width: 100px;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This way, the &lt;code&gt;.target&lt;/code&gt; element’s width is re-sized from &lt;code&gt;100px&lt;/code&gt; to &lt;code&gt;50px&lt;/code&gt; when it attempts to re-position itself to the anchor’s top-right edge. That’s a nice bit of flexibility that gives us a better chance to make things fit together in any layout.&lt;/p&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
        &lt;summary&gt;
        &lt;h2&gt;Anchor functions&lt;/h2&gt;
        &lt;/summary&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;div class=&quot;wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex&quot;&gt;
        &lt;div class=&quot;wp-block-column is-layout-flow wp-block-column-is-layout-flow&quot;&gt;
        &lt;div class=&quot;wp-block-group ticss-9c54673b&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;&lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-anchor-&quot;&gt;&lt;code&gt;anchor()&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;You might think of the CSS &lt;code&gt;anchor()&lt;/code&gt; function as a shortcut for attaching a target element to an anchor element — specify the anchor, the side we want to attach to, and how large we want the target to be in one fell swoop. But, as we’ll see, the function also opens up the possibility of attaching one target element to multiple anchor elements.&lt;/p&gt;
        &lt;p&gt;This is the function’s formal syntax, which takes up to three arguments:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;anchor( &amp;lt;anchor-element&amp;gt;? &amp;amp;&amp;amp; &amp;lt;anchor-side&amp;gt;, &amp;lt;length-percentage&amp;gt;? )&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;So, we’re identifying an anchor element, saying which side we want the target to be positioned on, and how big we want it to be. It’s worth noting that &lt;code&gt;anchor()&lt;/code&gt; can only be declared on inset-related properties (e.g. &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;inset-block-end&lt;/code&gt;, etc.)&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        top: anchor(--my-anchor bottom);
        left: anchor(--my-anchor end, 50%);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Let’s break down the function’s arguments.&lt;/p&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;anchor-element&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument specifies which anchor element we want to attach the target to. We can supply it with either the anchor’s name (see &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/#aa-attaching-targets-to-anchors&quot;&gt;“Attaching targets to anchors”&lt;/a&gt;).&lt;/p&gt;
        &lt;p&gt;We also have the choice of not supplying an anchor at all. In that case, the target element uses an implicit anchor element defined in &lt;code&gt;position-anchor&lt;/code&gt;. If there isn’t an implicit anchor, the function resolves to its fallback. Otherwise, it is invalid and ignored.&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;anchor-side&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument sets which side of the anchor we want to position the target element to, e.g. the anchor’s &lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, etc.&lt;/p&gt;
        &lt;p&gt;But we have more options than that, including logical side keywords (&lt;code&gt;inside&lt;/code&gt;, &lt;code&gt;outside&lt;/code&gt;), logical direction arguments relative to the user’s writing mode (&lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;, &lt;code&gt;self-start&lt;/code&gt;, &lt;code&gt;self-end&lt;/code&gt;) and, of course, &lt;code&gt;center&lt;/code&gt;.&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;&amp;lt;anchor-side&amp;gt;&lt;/code&gt;: Resolves to the &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt; of the corresponding side of the anchor element. It has physical arguments (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt; &lt;code&gt;right&lt;/code&gt;), logical side arguments (&lt;code&gt;inside&lt;/code&gt;, &lt;code&gt;outside&lt;/code&gt;), logical direction arguments relative to the user’s writing mode (&lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;, &lt;code&gt;self-start&lt;/code&gt;, &lt;code&gt;self-end&lt;/code&gt;) and the &lt;code&gt;center&lt;/code&gt; argument.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;&amp;lt;percentage&amp;gt;&lt;/code&gt;: Refers to the position between the &lt;code&gt;start&lt;/code&gt; (&lt;code&gt;0%&lt;/code&gt;) and &lt;code&gt;end&lt;/code&gt; (&lt;code&gt;100%&lt;/code&gt;). Values below &lt;code&gt;0%&lt;/code&gt; and above &lt;code&gt;100%&lt;/code&gt; are allowed.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;&amp;lt;length-percentage&amp;gt;&lt;/summary&gt;
        &lt;p&gt;This argument is totally optional, so you can leave it out if you’d like. Otherwise, use it as a way of re-sizing the target elemenrt whenever it doesn’t have a valid anchor or position. It positions the target to a fixed &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;percentage&amp;gt;&lt;/code&gt; relative to its containing block.&lt;/p&gt;
        &lt;/details&gt;
        &lt;p&gt;Let’s look at examples using different types of arguments because they all do something a &lt;em&gt;little&lt;/em&gt; different.&lt;/p&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using physical arguments&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380924&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-1.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;Physical arguments&lt;/strong&gt; (&lt;code&gt;top&lt;/code&gt;, &lt;code&gt;right&lt;/code&gt;, &lt;code&gt;bottom&lt;/code&gt;, &lt;code&gt;left&lt;/code&gt;) can be used to position the target regardless of the user’s writing mode. For example, we can position the &lt;code&gt;right&lt;/code&gt; and &lt;code&gt;bottom&lt;/code&gt; inset properties of the target at the &lt;code&gt;anchor(top)&lt;/code&gt; and &lt;code&gt;anchor(left)&lt;/code&gt; sides of the anchor, effectively positioning the target at the anchor’s top-left corner:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        bottom: anchor(top);
        right: anchor(left);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using logical side keywords&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380926&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-2.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;Logical side arguments&lt;/strong&gt;&amp;nbsp;(i.e.,&amp;nbsp;&lt;code&gt;inside&lt;/code&gt;,&amp;nbsp;&lt;code&gt;outside&lt;/code&gt;), are dependent on the inset property they are in. The&amp;nbsp;&lt;code&gt;inside&lt;/code&gt;&amp;nbsp;argument will choose the same side as its inset property, while the&amp;nbsp;&lt;code&gt;outside&lt;/code&gt;&amp;nbsp;argument will choose the opposite. For example:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        left: anchor(outside);
        /* is the same as */
        left: anchor(right);
        top: anchor(inside);
        /* is the same as */
        top: anchor(top);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using logical directions&lt;/summary&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380927&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-3.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;Logical direction arguments &lt;/strong&gt;are dependent on two factors:&lt;/p&gt;
        &lt;ol class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;The user’s writing mode: they can follow the writing mode of the containing block (&lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;) or the target’s own writing mode (&lt;code&gt;self-start&lt;/code&gt;, &lt;code&gt;self-end&lt;/code&gt;).&lt;/li&gt;
        &lt;li&gt;The inset property they are used in: they will choose the same axis of their inset property.&lt;/li&gt;
        &lt;/ol&gt;
        &lt;p&gt;So for example, using physical inset properties in a left-to-right horizontal writing would look like this:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        left: anchor(start);
        /* is the same as */
        left: anchor(left);
        top: anchor(end);
        /* is the same as */
        top: anchor(bottom);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;In a right-to-left writing mode, we’d do this:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        left: anchor(start);
        /* is the same as */
        left: anchor(right);
        top: anchor(end);
        /* is the same as */
        top: anchor(bottom);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;That can quickly get confusing, so we should also use logical arguments with &lt;a href=&quot;https://css-tricks.com/css-logical-properties-and-values/&quot;&gt;logical inset properties&lt;/a&gt; so the writing mode is respected in the first place:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        inset-inline-start: anchor(end);
        inset-block-start: anchor(end);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using percentage values&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380929&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-4-1.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;Percentages &lt;/strong&gt;can be used to position the target from any point between the &lt;code&gt;start&lt;/code&gt; (&lt;code&gt;0%&lt;/code&gt;) and &lt;code&gt;end&lt;/code&gt; (&lt;code&gt;100%&lt;/code&gt; ) sides. Since percentages are relative to the user writing mode, is preferable to use them with logical inset properties.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        inset-inline-start: anchor(100%);
        /* is the same as */
        inset-inline-start: anchor(end);
        inset-block-end: anchor(0%);
        /* is the same as */
        inset-block-end: anchor(start);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Values smaller than &lt;code&gt;0%&lt;/code&gt; and bigger than &lt;code&gt;100%&lt;/code&gt; are accepted, so &lt;code&gt;-100%&lt;/code&gt; will move the target towards the start and &lt;code&gt;200%&lt;/code&gt; towards the end.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        inset-inline-start: anchor(200%);
        inset-block-end: anchor(-100%);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;details class=&quot;wp-block-details is-layout-flow wp-block-details-is-layout-flow&quot;&gt;&lt;summary&gt;Using the center keyword&lt;/summary&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;targets sorrounding the anchor. each with a different position&quot; class=&quot;wp-image-380934&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?resize=1536%2C864&amp;amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-function-5.png?w=1920&amp;amp;ssl=1 1920w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;&lt;strong&gt;The &lt;code&gt;center&lt;/code&gt; argument&lt;/strong&gt; is equivalent to &lt;code&gt;50%&lt;/code&gt;. You could say that it’s “immune” to direction, so there is no problem if we use it with physical or logical inset properties.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-anchor: --my-anchor;
        left: anchor(center);
        bottom: anchor(top);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;/details&gt;
        &lt;/div&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;wp-block-column ticss-f036ecb3 is-layout-flow wp-block-column-is-layout-flow&quot;&gt;&lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-anchor-size-&quot;&gt;&lt;code&gt;anchor-size()&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;anchor-size()&lt;/code&gt; function is unique in that it sizes the target element relative to the size of the anchor element. This can be super useful for ensuring a target scales in size with its anchor, particularly in responsive designs where elements tend to get shifted, re-sized, or obscured from overflowing a container.&lt;/p&gt;
        &lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained&quot;&gt;
        &lt;p&gt;The function takes an anchor’s side and resolves to its &lt;code&gt;&amp;lt;length&amp;gt;&lt;/code&gt;, essentially returning the anchor’s &lt;code&gt;width&lt;/code&gt;, &lt;code&gt;height&lt;/code&gt;, &lt;code&gt;inline-size&lt;/code&gt; or &lt;code&gt;block-size&lt;/code&gt;.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;anchor-size( [ &amp;lt;anchor-element&amp;gt; || &amp;lt;anchor-size&amp;gt; ]? , &amp;lt;length-percentage&amp;gt;? )&lt;/code&gt;&lt;/pre&gt;
        &lt;figure class=&quot;wp-block-image size-large is-resized&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1024&quot; height=&quot;576&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-size-function.png?resize=1024%2C576&amp;amp;ssl=1&quot; alt=&quot;anchor with an anchor-size() function on each side&quot; class=&quot;wp-image-380930&quot; style=&quot;width:550px&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-size-function.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-size-function.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-size-function.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/09/anchor-siz

...

@github-actions GitHub Actions
Copy link
Contributor

http://localhost:1200/css-tricks/fresh - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Fresh From the Almanac</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/fresh" rel="self" type="application/rss+xml"></atom:link>
    <description>Properties, selectors, rules, and functions! - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Sat, 18 Jan 2025 06:20:30 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>@counter-style</title>
      <description>&lt;p&gt;The &lt;code&gt;@counter-style&lt;/code&gt; at-rule lets you create custom list counters that can be used in the &lt;a href=&quot;https://css-tricks.com/list-style-recipes/&quot;&gt;&lt;code&gt;list-style-type&lt;/code&gt;&lt;/a&gt; property and the &lt;code&gt;counter()&lt;/code&gt; and &lt;code&gt;counters()&lt;/code&gt; functions. It also allows for extending existing counter styles.&lt;/p&gt;
        &lt;span id=&quot;more-383552&quot;&gt;&lt;/span&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style apple-counter {
        system: cyclic;
        symbols: &quot;🍎&quot;; /* or &quot;1F34E&quot; */
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_bNbLELb&quot; src=&quot;https://codepen.io/anon/embed/preview/bNbLELb?height=600&amp;amp;theme-id=1&amp;amp;slug-hash=bNbLELb&amp;amp;default-tab=result&quot; height=&quot;600&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed bNbLELb&quot; title=&quot;CodePen Embed bNbLELb&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;The &lt;code&gt;@counter-style&lt;/code&gt; at-rule is defined in the &lt;a href=&quot;https://www.w3.org/TR/css-counter-styles-3/#the-counter-style-rule&quot; rel=&quot;noopener&quot;&gt;CSS Counter Styles Level 3&lt;/a&gt; specification.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;syntax&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-syntax&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-syntax&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Syntax&lt;/h3&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style &amp;lt;counter-style-name&amp;gt; {
        &amp;lt;declaration-list&amp;gt;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;arguments-and-descriptors&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-arguments-and-descriptors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-arguments-and-descriptors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;Arguments and descriptors&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;counter-style-name&amp;gt;&lt;/code&gt;:&lt;/strong&gt; A case-sensitive &lt;code&gt;&amp;lt;custom-ident&amp;gt;&lt;/code&gt; that doesn’t match any of the CSS-wide keywords, &lt;code&gt;none&lt;/code&gt;, &lt;code&gt;inside&lt;/code&gt; and &lt;code&gt;outside&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;&amp;lt;declaration-list&amp;gt;&lt;/code&gt;:&lt;/strong&gt; A list of the descriptors used to define a custom counter
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;system&lt;/code&gt; (Required):&lt;/strong&gt; Specifies which algorithm will be used to construct the counter’s string representation&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;negative&lt;/code&gt;:&lt;/strong&gt; Specifies the counter representation if the counter value is negative&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;prefix&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; that will be attached &lt;strong&gt;before&lt;/strong&gt; the marker representation and any negative sign&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;suffix&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; that will be attached &lt;strong&gt;after&lt;/strong&gt; the marker representation and any negative sign&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;range&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies the range in which the custom counter is used. Counter values outside the range will drop to their &lt;code&gt;fallback&lt;/code&gt; counter style.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;pad&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies a minimum width all representations have to reach. Representations shorter than the minimum are padded with a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;fallback&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies a fallback counter used whenever a counter style can’t represent a counter value&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;symbols&lt;/code&gt;:&lt;/strong&gt; Specifies the symbols used by the construction &lt;code&gt;system&lt;/code&gt; algorithm. It’s required unless the &lt;code&gt;system&lt;/code&gt; is set to &lt;code&gt;additive&lt;/code&gt; or &lt;code&gt;extends&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;additive-symbols&lt;/code&gt;:&lt;/strong&gt; Specifies the symbols used by the construction algorithm when the &lt;code&gt;system&lt;/code&gt; descriptor is set to &lt;code&gt;additive&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;&lt;code&gt;speak-as&lt;/code&gt; (Optional):&lt;/strong&gt; Specifies how screen readers should read the counter style&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/li&gt;
        &lt;/ul&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;a-note-about-naming&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-a-note-about-naming&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-a-note-about-naming&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;A note about naming&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;@counter-style&lt;/code&gt; at-rule has some caveats about its naming:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;&amp;lt;counter-style-name&amp;gt;&lt;/code&gt; can’t be a CSS-wide keyword (i.e., &lt;code&gt;initial&lt;/code&gt;, &lt;code&gt;inherit&lt;/code&gt; and &lt;code&gt;unset&lt;/code&gt;) or &lt;code&gt;none&lt;/code&gt;, as doing so renders the at-rule invalid.&lt;/li&gt;
        &lt;li&gt;Although predefined counter styles (e.g., &lt;code&gt;decimal&lt;/code&gt;, &lt;code&gt;lower-roman&lt;/code&gt;, &lt;code&gt;square&lt;/code&gt;, etc.) are of type &lt;code&gt;&amp;lt;counter-style-name&amp;gt;&lt;/code&gt;, trying to use them as a &lt;code&gt;@counter-style&lt;/code&gt; name is also invalid.&lt;/li&gt;
        &lt;li&gt;Names like &lt;code&gt;inside&lt;/code&gt; or &lt;code&gt;outside&lt;/code&gt; are valid as counter styles names, but conflict with properties like the &lt;a href=&quot;https://css-tricks.com/almanac/properties/l/list-style/&quot;&gt;&lt;code&gt;list-style&lt;/code&gt;&lt;/a&gt; shorthand.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;@counter-style&lt;/code&gt; at-rules are defined for the entire document. If multiple valid &lt;code&gt;@counter-style&lt;/code&gt; are defined, the last one wins and abides by the CSS Cascade. Writing a new &lt;code&gt;@counter-style&lt;/code&gt; with the same name replaces other instances rather than just the changed descriptors.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-system-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-system-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-system-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;system&lt;/code&gt; descriptor&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value: &lt;/strong&gt;&lt;code&gt;cyclic | numeric | alphabetic | symbolic | additive | [fixed &amp;lt;integer&amp;gt;?] | [ extends &amp;lt;counter-style-name&amp;gt; ]&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;symbolic&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;system&lt;/code&gt; descriptor sets the algorithm to construct the counter representation for each counter value. It affects whether @counter-styles uses the symbols or additive-symbols descriptors, and the minimum length of symbols needed.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-cyclic-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-cyclic&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-cyclic&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;cyclic&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;cyclic&lt;/code&gt; system goes through the characters set on the &lt;code&gt;symbols&lt;/code&gt; descriptors repeating them until the list is over or limited by the &lt;code&gt;range&lt;/code&gt; descriptor. We can use just one character in the &lt;code&gt;symbols&lt;/code&gt; to mimic a bullet list:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style bullet-example {
        system: cyclic;
        symbols: &quot;⏵&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or alternate between two or more characters:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style multiple-example {
        system: cyclic;
        symbols: &quot;🔸&quot; &quot;🔹&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_vEBdmQN&quot; src=&quot;https://codepen.io/anon/embed/preview/vEBdmQN?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=vEBdmQN&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed vEBdmQN&quot; title=&quot;CodePen Embed vEBdmQN&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-fixed-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-fixed&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-fixed&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;fixed&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;Instead of cycling through the characters in the &lt;code&gt;symbols&lt;/code&gt; descriptor, we can make those characters appear just one time using the &lt;code&gt;fixed&lt;/code&gt; system. In the last example, only the first two items have a custom counter if set to &lt;code&gt;fixed&lt;/code&gt;, while the others drop to their &lt;code&gt;fallback&lt;/code&gt; symbol.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style multiple-example {
        system: fixed;
        symbols: &quot;🔸&quot; &quot;🔹&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We can set when the custom counters start by appending an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; to the &lt;code&gt;fixed&lt;/code&gt; value. For example, the following custom counter starts at the fourth item:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style bullet-start-example {
        system: fixed 4;
        symbols: &quot;💠&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_JoPpNwQ&quot; src=&quot;https://codepen.io/anon/embed/preview/JoPpNwQ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=JoPpNwQ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed JoPpNwQ&quot; title=&quot;CodePen Embed JoPpNwQ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-numeric-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-numeric&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-numeric&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;numeric&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;numeric&lt;/code&gt; system enumerates list items using a &lt;strong&gt;custom positional system&lt;/strong&gt; (base-2, base-8, base-16, etc.). Positional systems start at &lt;code&gt;0&lt;/code&gt;, so the first character in &lt;code&gt;symbols&lt;/code&gt; will be used as &lt;code&gt;0&lt;/code&gt;, the next as &lt;code&gt;1&lt;/code&gt;, and so on. Knowing this, we can make an ordered list using non-decimal numerical systems like binary:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style binary-example {
        system: numeric;
        symbols: &quot;0&quot; &quot;1&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or hexadecimal:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style hexadecimal-example {
        system: numeric;
        symbols: &quot;0&quot; &quot;1&quot; &quot;2&quot; &quot;3&quot; &quot;4&quot; &quot;5&quot; &quot;6&quot; &quot;7&quot; &quot;8&quot; &quot;9&quot; &quot;A&quot; &quot;B&quot; &quot;C&quot; &quot;D&quot; &quot;E&quot; &quot;F&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_raBJmEo&quot; src=&quot;https://codepen.io/anon/embed/preview/raBJmEo?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=raBJmEo&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed raBJmEo&quot; title=&quot;CodePen Embed raBJmEo&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-alphabetic-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-alphabetic&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-alphabetic&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;alphabetic&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;alphabetic&lt;/code&gt; system enumerates list items using a custom &lt;strong&gt;alphabetical system&lt;/strong&gt;. It’s similar to the &lt;code&gt;numeric&lt;/code&gt; system but with the key difference that it doesn’t have a character for &lt;code&gt;0&lt;/code&gt;, so the proceeding digits are repeated. For example, if our &lt;code&gt;symbols&lt;/code&gt; are &lt;code&gt;A&lt;/code&gt;, &lt;code&gt;B&lt;/code&gt;, and &lt;code&gt;C&lt;/code&gt;, they will wrap to &lt;code&gt;AA&lt;/code&gt;, &lt;code&gt;AB&lt;/code&gt;, and &lt;code&gt;AC&lt;/code&gt;, then &lt;code&gt;BA&lt;/code&gt;, &lt;code&gt;BB&lt;/code&gt;, &lt;code&gt;BC&lt;/code&gt;, and so on.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Since there is no equivalent for &lt;code&gt;0&lt;/code&gt; and negative values, they will drop down to their fallback symbol.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style abc-example {
        system: alphabetic;
        symbols: &quot;A&quot; &quot;B&quot; &quot;C&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;If we try to recreate a decimal numbering system using the &lt;code&gt;alphabetic&lt;/code&gt; algorithm, we will quickly notice two things:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style decimal-example {
        system: alphabetic;
        symbols: &quot;0&quot; &quot;1&quot; &quot;2&quot; &quot;3&quot; &quot;4&quot; &quot;5&quot; &quot;6&quot; &quot;7&quot; &quot;8&quot; &quot;9&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;ol class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;It starts at &lt;code&gt;0&lt;/code&gt; since the &lt;code&gt;alphabetic&lt;/code&gt; system is taking that character as &lt;code&gt;1&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;Instead of going from &lt;code&gt;9&lt;/code&gt; to &lt;code&gt;10&lt;/code&gt;, it goes to &lt;code&gt;00&lt;/code&gt; since the next digits are just repeated, and then proceed as &lt;code&gt;01&lt;/code&gt;, &lt;code&gt;02&lt;/code&gt;, &lt;code&gt;03&lt;/code&gt;, etc.&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_yyBvbWq&quot; src=&quot;https://codepen.io/anon/embed/preview/yyBvbWq?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=yyBvbWq&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed yyBvbWq&quot; title=&quot;CodePen Embed yyBvbWq&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-symbolic-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-symbolic&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-symbolic&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;symbolic&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;symbolic&lt;/code&gt; system goes through the characters in &lt;code&gt;symbols&lt;/code&gt;, repeating them one more time each iteration. For example, if our &lt;code&gt;symbols&lt;/code&gt; are &lt;code&gt;A&lt;/code&gt;, &lt;code&gt;B&lt;/code&gt;, and &lt;code&gt;C&lt;/code&gt;, the first three items will be &lt;code&gt;A&lt;/code&gt;, &lt;code&gt;B&lt;/code&gt;, and &lt;code&gt;C&lt;/code&gt;, respectively, and then they are doubled in the next iteration as &lt;code&gt;AA&lt;/code&gt;, &lt;code&gt;BB&lt;/code&gt;, and &lt;code&gt;CC&lt;/code&gt;, respectively, before getting tripled as &lt;code&gt;AAA&lt;/code&gt;, &lt;code&gt;BBB&lt;/code&gt;, and &lt;code&gt;CCC&lt;/code&gt;, and so on.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Since there is no equivalent for &lt;code&gt;0&lt;/code&gt; and negative values, they will drop down to their fallback symbol.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style symbolic-example {
        system: symbolic;
        symbols: &quot;A&quot; &quot;B&quot; &quot;C&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;In this case, our decimal representation would go from &lt;code&gt;9&lt;/code&gt; to &lt;code&gt;00&lt;/code&gt; (similar to &lt;code&gt;alphabetic&lt;/code&gt;) but then double to &lt;code&gt;11&lt;/code&gt;, &lt;code&gt;22&lt;/code&gt;, &lt;code&gt;33&lt;/code&gt;, and so on.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style decimal-example {
        system: alphabetic;
        symbols: &quot;0&quot; &quot;1&quot; &quot;2&quot; &quot;3&quot; &quot;4&quot; &quot;5&quot; &quot;6&quot; &quot;7&quot; &quot;8&quot; &quot;9&quot;;
        suffix: &quot;. &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_pvzawRQ&quot; src=&quot;https://codepen.io/anon/embed/preview/pvzawRQ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=pvzawRQ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed pvzawRQ&quot; title=&quot;CodePen Embed pvzawRQ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-additive-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-additive&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-additive&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;additive&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;additive&lt;/code&gt; system assigns characters a numerical value and adds them together to get the counter representation. You can think of the additive system as counting bills: if we have only &lt;code&gt;$5&lt;/code&gt;, &lt;code&gt;$2&lt;/code&gt;, and &lt;code&gt;$1&lt;/code&gt; bills, we will add them together to get the desired quantity, trying to keep the number of bills used at a minimum. So to represent &lt;code&gt;10&lt;/code&gt;, we will use two &lt;code&gt;$5&lt;/code&gt; bills instead of ten &lt;code&gt;$1&lt;/code&gt; bills.&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Since there is no equivalent for negative values, they will drop down to their fallback.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style bills-example {
        system: additive;
        additive-symbols: 5 &quot;5️⃣&quot;, 2 &quot;2️⃣&quot;, 1 &quot;1️⃣&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Since we need to give each character an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; value, we use the &lt;code&gt;additive-symbols&lt;/code&gt; instead of the &lt;code&gt;symbols&lt;/code&gt;. It takes a comma-separated list of each &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; and its equivalent &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt;.&lt;/p&gt;
        &lt;p&gt;Another example would be using dice, since we can only represent up to 6 with one regular dice, we will need more to represent higher quantities:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style additive-example {
        system: additive;
        additive-symbols: 6 &quot;⚅&quot;, 5 &quot;⚄&quot;, 4 &quot;⚃&quot;, 3 &quot;⚂&quot;, 2 &quot;⚁&quot;, 1 &quot;⚀&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;If we didn’t have a representation for &lt;code&gt;1&lt;/code&gt;, we wouldn’t be able to represent every value so they would drop to their &lt;code&gt;fallback&lt;/code&gt;.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_EaYQQPL&quot; src=&quot;https://codepen.io/anon/embed/preview/EaYQQPL?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=EaYQQPL&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed EaYQQPL&quot; title=&quot;CodePen Embed EaYQQPL&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-extends-&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-extends&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-extends&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;&lt;code&gt;&lt;strong&gt;extends&lt;/strong&gt;&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;The &lt;code&gt;extends&lt;/code&gt; system creates a custom style from another one but with modifications such as its &lt;code&gt;suffix&lt;/code&gt;/&lt;code&gt;prefix&lt;/code&gt; or &lt;code&gt;negative&lt;/code&gt; representations. To do so, it takes a &lt;code&gt;&amp;lt;counter-style-name&amp;gt;&lt;/code&gt; after the &lt;code&gt;extends&lt;/code&gt; value. For example, we could change the &lt;code&gt;decimal&lt;/code&gt; counter style default &lt;code&gt;suffix&lt;/code&gt; to a closing parenthesis &lt;code&gt;&quot;)&quot;&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style decimal-example {
        system: extends decimal;
        suffix: &quot;) &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Per &lt;cite&gt;spec&lt;/cite&gt;, &lt;q&gt;If a &lt;code&gt;@counter-style&lt;/code&gt; uses the &lt;code&gt;extends&lt;/code&gt; system, it must not contain a &lt;code&gt;symbols&lt;/code&gt; or &lt;code&gt;additive-symbols&lt;/code&gt; descriptor, or else the &lt;code&gt;@counter-style&lt;/code&gt; rule is invalid.&lt;/q&gt;&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_KwPQQrZ&quot; src=&quot;https://codepen.io/anon/embed/preview/KwPQQrZ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=KwPQQrZ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed KwPQQrZ&quot; title=&quot;CodePen Embed KwPQQrZ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-negative-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-negative-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-negative-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;negative&lt;/code&gt; descriptor&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value:&lt;/strong&gt; &lt;code&gt;&amp;lt;symbol&amp;gt; &amp;lt;symbol&amp;gt;?&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;&quot;-&quot;&lt;/code&gt; (hyphen-minus)&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;negative&lt;/code&gt; descriptor creates a custom representation for negative values. It can take one or two &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; arguments: The first one is prepended to the counter, and by default, it’s the &lt;em&gt;hyphen-minus&lt;/em&gt; (&lt;code&gt;&quot;-&quot;&lt;/code&gt;) character. The second one is appended to the counter. For example, using &lt;code&gt;&quot;(&quot; &quot;)&quot;&lt;/code&gt; we could enclose negative representations into parenthesis &lt;code&gt;(2), (1), 0, 1, 2&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style enclosed-example {
        system: extends decimal;
        negative: &quot;(&quot; &quot;)&quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We also can extend the initial &lt;code&gt;&quot;-&quot;&lt;/code&gt; by keeping it as the first value:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style exclamation-example {
        system: extends decimal;
        negative: &quot;-&quot; &quot;!&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or remove it for a custom negative symbol:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style down-example {
        system: extends decimal;
        negative: &quot;🔻&quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_MYgOXMR&quot; src=&quot;https://codepen.io/anon/embed/preview/MYgOXMR?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=MYgOXMR&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed MYgOXMR&quot; title=&quot;CodePen Embed MYgOXMR&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-prefix-and-suffix-descriptors&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-prefix-and-suffix-descriptors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-prefix-and-suffix-descriptors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;prefix&lt;/code&gt; and &lt;code&gt;suffix&lt;/code&gt; descriptors&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value (Both):&lt;/strong&gt; &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial (&lt;code&gt;prefix&lt;/code&gt;): &lt;/strong&gt;&lt;code&gt;&quot;&quot;&lt;/code&gt; (the empty string)&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial (&lt;code&gt;suffix&lt;/code&gt;):&lt;/strong&gt; &lt;code&gt;&quot;2E20&quot;&lt;/code&gt; (full stop followed by a space, &lt;code&gt;&quot;.&quot;&lt;/code&gt;)&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;prefix&lt;/code&gt; and &lt;code&gt;suffix&lt;/code&gt; descriptor allows us to prepend and append, respectively, a symbol to the counter representation. We can use it to add a character at the beginning of each counter using &lt;code&gt;prefix&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style prefixed-example {
        system: extends decimal;
        prefix: &quot;‣ &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;In the end, using &lt;code&gt;suffix&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style suffixed-example {
        system: extends decimal;
        suffix: &quot;) &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or on both sides using both descriptors:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style both-example {
        system: extends decimal;
        prefix: &quot;(&quot;;
        suffix: &quot;) &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Per &lt;cite&gt;spec&lt;/cite&gt;, prefixes and suffixes &lt;q&gt;are only added by the algorithm for constructing the default contents of the &lt;code&gt;::marker&lt;/code&gt; pseudo-element; the prefix is not added automatically when the &lt;code&gt;counter()&lt;/code&gt; or &lt;code&gt;counters()&lt;/code&gt; functions are used.&lt;/q&gt; However, this isn’t a problem since we can embed them directly into each function.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_dPbZjpR&quot; src=&quot;https://codepen.io/anon/embed/preview/dPbZjpR?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=dPbZjpR&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed dPbZjpR&quot; title=&quot;CodePen Embed dPbZjpR&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-range-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-range-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-range-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;range&lt;/code&gt; descriptor&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value:&lt;/strong&gt; &lt;code&gt;[ [ &amp;lt;integer&amp;gt; | infinite ]{2} ]# | auto&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;auto&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;range&lt;/code&gt; descriptor defines &lt;strong&gt;an inclusive&lt;/strong&gt; range in which the counter style is used. The default range (&lt;code&gt;auto&lt;/code&gt;) depends on the &lt;code&gt;system&lt;/code&gt; used:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;&lt;code&gt;cyclic&lt;/code&gt;, &lt;code&gt;numeric&lt;/code&gt;, and &lt;code&gt;fixed&lt;/code&gt; systems can range from &lt;code&gt;(-∞, ∞)&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;alphabetic&lt;/code&gt; and &lt;code&gt;symbolic&lt;/code&gt; systems have a range from &lt;code&gt;[1, ∞)&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;additive&lt;/code&gt; systems have a range from &lt;code&gt;[0, &lt;code&gt;∞&lt;/code&gt;)&lt;/code&gt;.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;extends&lt;/code&gt; systems use the &lt;code&gt;range&lt;/code&gt; of the extended counter style.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;We can define a bounded range by writing one &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; next to another. For example, a range of &lt;code&gt;2 5&lt;/code&gt; affects elements 2, 3, 4, and 5:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style bounded-example {
        system: cyclic;
        symbols: &quot;‣&quot;;
        suffix: &quot; &quot;;
        range: 2 5;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;On the other hand, using the &lt;code&gt;infinite&lt;/code&gt; value, we can unbound the range to one side. For example, we could write &lt;code&gt;infinite 5&lt;/code&gt; so all items up to 5 ([…], 3, 4 5) have a counter style:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style unbounded-r-example {
        system: alphabetic;
        symbols: &quot;A&quot; &quot;B&quot; &quot;C&quot;;
        suffix: &quot;. &quot;;
        range: infinite 5;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Alternatively, we could write &lt;code&gt;5 infinite&lt;/code&gt; so that all items starting from 5 (5, 6, 7…) have a custom counter style:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style unbounded-l-example {
        system: numeric;
        symbols: &quot;0&quot; &quot;1&quot; &quot;2&quot;;
        suffix: &quot;. &quot;;
        range: 5 infinite;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;The &lt;code&gt;range&lt;/code&gt; descriptor accepts a comma-separated list, so multiple intervals are accepted. For example, setting the &lt;code&gt;range&lt;/code&gt; to &lt;code&gt;1 3, 6 7&lt;/code&gt; affects items 1, 2, 3 and 6, 7 in the list:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style multiple-example {
        system: extends upper-roman;
        suffix: &quot;) &quot;;
        range: 1 3, 6 7;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_wBwpodd&quot; src=&quot;https://codepen.io/anon/embed/preview/wBwpodd?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=wBwpodd&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed wBwpodd&quot; title=&quot;CodePen Embed wBwpodd&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-pad-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-pad-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-pad-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;pad&lt;/code&gt; descriptor&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value:&lt;/strong&gt; &lt;code&gt;&amp;lt;integer [0,∞]&amp;gt; &amp;amp;&amp;amp; &amp;lt;symbol&amp;gt;&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;0 &quot;&quot;&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;Some counters may need a minimal amount of width for each counter. This can be achieved by padding the counter with a specific character. For example, a zero-padded counter style would pad counters with leading zeros when needed (e.g. &lt;code&gt;001, 050, 200, etc&lt;/code&gt;). We can achieve this effect using the &lt;code&gt;pad&lt;/code&gt; descriptor which takes an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; that represents the minimum width for the counter and a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; to pad it. For example, our zero-padded example would look like the following:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style zero-padded-example {
        system: extends decimal;
        pad: 3 &quot;0&quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_jENYVeK&quot; src=&quot;https://codepen.io/anon/embed/preview/jENYVeK?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=jENYVeK&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed jENYVeK&quot; title=&quot;CodePen Embed jENYVeK&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-fallback-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-fallback-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-fallback-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;fallback&lt;/code&gt; descriptor&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value:&lt;/strong&gt; &lt;code&gt;&amp;lt;counter-style-name&amp;gt;&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;decimal&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;Sometimes counter styles can’t represent certain counter values: &lt;code&gt;alphabetic&lt;/code&gt; and &lt;code&gt;symbolic&lt;/code&gt; systems can’t represent zero and negative values; depending on the available &lt;code&gt;additive-symbols&lt;/code&gt;, &lt;code&gt;additive&lt;/code&gt; systems may not represent all values; and &lt;code&gt;fixed&lt;/code&gt; systems or systems with a defined &lt;code&gt;range&lt;/code&gt; only represent certain values.&lt;/p&gt;
        &lt;p&gt;In short, sometimes a system needs to fall back to another counter style. The &lt;code&gt;fallback &lt;/code&gt;descriptor allows you to define which counter style should be used as a fallback. We can fall back to a predefined counter style. For example, the following counter style is &lt;code&gt;fixed&lt;/code&gt; and will fallback to &lt;code&gt;lower-roman&lt;/code&gt; after the sixth item:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style predefined-example {
        system: fixed;
        symbols: &quot;⚀&quot; &quot;⚁&quot; &quot;⚂&quot; &quot;⚃&quot; &quot;⚄&quot; &quot;⚅&quot;;
        fallback: lower-roman;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;We can also use a custom counter style as another counter’s &lt;code&gt;fallback&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style custom-fallback {
        system: additive;
        additive-symbols: 4 &quot;::&quot;, 3 &quot;:.&quot;, 2 &quot;:&quot;, 1 &quot;.&quot;;
        }
        @counter-style custom-example {
        system: fixed;
        symbols: &quot;⚀&quot; &quot;⚁&quot; &quot;⚂&quot; &quot;⚃&quot; &quot;⚄&quot; &quot;⚅&quot;;
        suffix: &quot; &quot;;
        fallback: custom-fallback;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Fallbacks can be circular, meaning that “counter style A” &lt;code&gt;fallback&lt;/code&gt; could be “counter style B” and vice versa. According to the spec, this is intentional:&lt;/p&gt;
        &lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;For example, if an author desires a counter style with significantly different representations for even and odd counter values, they may find it easiest to define one style that can only represent odd values and one that can only represent even values, and specify each as the fallback for the other one.&lt;/p&gt;
        &lt;/blockquote&gt;
        &lt;p&gt;However, I couldn’t find a way to implement this behavior using circular fallbacks. Luckily, it can be done just using one counter style that is only able to represent even styles and can fall back to one that represents each counter value:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style odd-style {
        system: additive;
        additive-symbols: 2 &quot;⁑&quot;, 1 &quot;*&quot;;
        }
        @counter-style even-style {
        system: additive;
        additive-symbols: 2 &quot;:&quot;;
        suffix: &quot; &quot;;
        fallback: odd-style;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_MYgrbNL&quot; src=&quot;https://codepen.io/anon/embed/preview/MYgrbNL?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=MYgrbNL&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed MYgrbNL&quot; title=&quot;CodePen Embed MYgrbNL&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-symbols-descriptors&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-symbols-descriptors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-symbols-descriptors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;symbols&lt;/code&gt; descriptors&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value: &lt;/strong&gt;&lt;code&gt;&amp;lt;symbol&amp;gt;+&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; &lt;code&gt;n/a&lt;/code&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;symbols&lt;/code&gt; descriptor defines a space separated &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; list that the &lt;code&gt;system&lt;/code&gt; algorithm will use to construct each counter representation, except the &lt;code&gt;additive&lt;/code&gt; and &lt;code&gt;extends&lt;/code&gt; systems. The exact definition of a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; is the following:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;symbol&amp;gt; = &amp;lt;string&amp;gt; | &amp;lt;image&amp;gt; | &amp;lt;custom-ident&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;Support for &lt;code&gt;&amp;lt;image&amp;gt;&lt;/code&gt; is scarce.&lt;/p&gt;
        &lt;p&gt;So, you may see characters written as strings:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style string-example {
        system: cyclic;
        symbols: &quot;⁘&quot; &quot;⁙&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or written directly as custom idents.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style ident-example {
        system: numeric;
        symbols: ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or both together:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style both-example {
        system: alphabetic;
        symbols: A &quot;B&quot; C;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;However, what is valid as a string isn’t necessarily valid as a custom ident. For example, starting an ident with a number or using ASCII non-letters (e.g. &lt;code&gt;*&lt;/code&gt;) will invalidate the counter style, so it’s necessary to escape them using a backslash (&lt;code&gt;&lt;/code&gt;) or simply enclose them into a string:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style escaped-example {
        system: cyclic;
        symbols: *; /* or &quot;*&quot; */
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Also, we can use Unicode characters by writing a backslash (&lt;code&gt;&lt;/code&gt;) followed by their identifier. This can be easily achieved using strings:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style unicode-string-example {
        system: cyclic;
        symbols: &quot;2217&quot;&quot;2218&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;In the case of a custom ident, backslash escapes reserve the following space for another digit, so we need two spaces between Unicode characters.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style unicode-ident-example {
        system: cyclic;
        symbols: 2234 2235;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;For these little caveats, I recommend sticking to strings for &lt;code&gt;symbols&lt;/code&gt; and &lt;code&gt;additive-symbols&lt;/code&gt;.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_jENYvyP&quot; src=&quot;https://codepen.io/anon/embed/preview/jENYvyP?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=jENYvyP&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed jENYvyP&quot; title=&quot;CodePen Embed jENYvyP&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-additive-symbols-descriptors&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-additive-symbols-descriptors&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-additive-symbols-descriptors&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/a&gt;The &lt;code&gt;additive-symbols&lt;/code&gt; descriptors&lt;/h3&gt;
        &lt;ul class=&quot;wp-block-list is-style-almanac-list&quot;&gt;
        &lt;li&gt;&lt;strong&gt;Value:&lt;/strong&gt; &lt;code&gt;[ &amp;lt;integer [0,∞]&amp;gt; &amp;amp;&amp;amp; &amp;lt;symbol&amp;gt; ]#&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;Initial:&lt;/strong&gt; N/A&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;The &lt;code&gt;additive-symbols&lt;/code&gt; descriptors defines a comma-separated list composed of an &lt;code&gt;&amp;lt;integer&amp;gt;&lt;/code&gt; and a &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; that will be used by the &lt;code&gt;additive&lt;/code&gt; algorithm, ordered from highest to lowest. It has the same caveats regarding the &lt;code&gt;&amp;lt;symbol&amp;gt;&lt;/code&gt; value as the &lt;code&gt;symbols&lt;/code&gt; descriptor, so I also recommend using only strings:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;@counter-style string-example {
        system: additive;
        additive-symbols: 5 &quot;⁙&quot;, 4 &quot;⁘&quot;, 3 &quot;⁖&quot;, 2 &quot;‥&quot;, 1 &quot;․&quot;;
        suffix: &quot; &quot;;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_dPbJqxr&quot; src=&quot;https://codepen.io/anon/embed/preview/dPbJqxr?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=dPbJqxr&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed dPbJqxr&quot; title=&quot;CodePen Embed dPbJqxr&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-speak-as-descriptor&quot;&gt;&lt;a href=&quot;https://css-tricks.com/almanac/rules/c/counter-style/#aa-the-speak-as-descriptor&quot; aria-hidden=&quot;true&quot; class=&quot;aal_anchor&quot; id=&quot;aa-the-speak-as-descriptor&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;aal_svg&quot; height=&quot;16&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; d=&quot;M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0

...

@github-actions GitHub Actions
Copy link
Contributor

http://localhost:1200/css-tricks/popular - Success ✔️ 
<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>Popular this month</title>
    <link>https://css-tricks.com</link>
    <atom:link href="http://localhost:1200/css-tricks/popular" rel="self" type="application/rss+xml"></atom:link>
    <description>Popular CSS articles this month - Powered by RSSHub</description>
    <generator>RSSHub</generator>
    <webMaster>[email protected] (RSSHub)</webMaster>
    <language>en</language>
    <lastBuildDate>Sat, 18 Jan 2025 06:20:32 GMT</lastBuildDate>
    <ttl>5</ttl>
    <item>
      <title>A CSS Wishlist for 2025</title>
      <description>&lt;p&gt;2024 has been one of the greatest years for CSS: &lt;a href=&quot;https://css-tricks.com/tag/view-transitions/&quot;&gt;cross-document view transitions&lt;/a&gt;, &lt;a href=&quot;https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/&quot;&gt;scroll-driven animations&lt;/a&gt;, &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;anchor positioning&lt;/a&gt;, &lt;a href=&quot;https://css-tricks.com/transitioning-to-auto-height/&quot;&gt;animate to &lt;code&gt;height: auto&lt;/code&gt;&lt;/a&gt;, and many others. It seems out of touch to ask, but what else do we want from CSS? Well, many things!&lt;/p&gt;
        &lt;p&gt;We put our heads together and came up with a few ideas… including several of yours.&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;geoff-s-wishlist&quot;&gt;Geoff’s wishlist&lt;/h3&gt;
        &lt;p&gt;I’m of the mind that we already have a BUNCH of wonderful CSS goodies these days. We have so many wonderful — and new! — things that I’m still wrapping my head around many of them.&lt;/p&gt;
        &lt;p&gt;But! There’s always room for one more good thing, right? Or maybe room for &lt;em&gt;four&lt;/em&gt; new things. If I could ask for any new CSS features, these are the ones I’d go for.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;if-&quot;&gt;1. A conditional &lt;code&gt;if()&lt;/code&gt; statement&lt;/h4&gt;
        &lt;p&gt;It’s coming! Or it’s already here if you consider that the CSS Working Group (CSSWG)&amp;nbsp;&lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/10064#issuecomment-2165157958&quot; rel=&quot;noopener&quot;&gt;resolved to add an&amp;nbsp;&lt;code&gt;if()&lt;/code&gt;&amp;nbsp;conditional&lt;/a&gt;&amp;nbsp;to the CSS Values Module Level 5 specification. That’s a big step forward, even if it takes a year or two (or more?!) to get a formal definition and make its way into browsers.&lt;/p&gt;
        &lt;p&gt;My understanding about &lt;code&gt;if()&lt;/code&gt; is that it’s a key component for achieving &lt;a href=&quot;https://css-tricks.com/css-container-queries/#aa-container-style-queries&quot;&gt;Container Style Queries&lt;/a&gt;, which is what I ultimately want from this. Being able to apply styles conditionally based on the styles of another element is the white whale of CSS, so to speak. We can already style an element based on what other elements it &lt;code&gt;:has()&lt;/code&gt; so this would expand that magic to include conditional styles as well.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;mixins&quot;&gt;2. CSS mixins&lt;/h4&gt;
        &lt;p&gt;This is more of a “nice-to-have” feature because I feel its squarely in CSS Preprocessor Territory and believe it’s nice to have some tooling for light abstractions, such as writing functions or mixins in CSS. But I certainly wouldn’t say “no” to having mixins baked right into CSS if someone was offering it to me. That might be the straw that breaks the CSS preprocessor back and allows me to write plain CSS 100% of the time because right now I tend to reach for Sass when I need a mixin or function.&lt;/p&gt;
        &lt;p&gt;&lt;a href=&quot;https://css-tricks.com/css-functions-and-mixins-module-notes/&quot;&gt;I wrote up a bunch of notes about the mixins proposal and its initial draft in the specifications&lt;/a&gt; to give you an idea of why I’d want this feature.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;-inline-comments&quot;&gt;3. &lt;code&gt;// inline comments&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;Yes, please! It’s a minor developer convenience that brings CSS up to par with writing comments in other languages. I’m pretty sure that writing JavaScript comments in my CSS should be in &lt;a href=&quot;https://css-tricks.com/my-dumbest-css-mistakes/&quot;&gt;my list of dumbest CSS mistakes&lt;/a&gt; (even if I didn’t put it in there).&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;font-size-fit&quot;&gt;4. &lt;code&gt;font-size: fit&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;I just hate doing math, alright?! Sometimes I just want a word or short heading sized to the container it’s in. &lt;a href=&quot;https://css-tricks.com/simplified-fluid-typography/&quot;&gt;We can use things like &lt;code&gt;clamp()&lt;/code&gt; for fluid typesetting&lt;/a&gt;, but again, that’s math I can’t be bothered with. You might think there’s a possible solution with Container Queries and &lt;a href=&quot;https://css-tricks.com/css-container-queries/#aa-container-length-units&quot;&gt;using container query units&lt;/a&gt; for the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/f/font-size/&quot;&gt;font-size&lt;/a&gt;&lt;/code&gt; but that doesn’t work any better than &lt;a href=&quot;https://css-tricks.com/css-length-units/#aa-relative-units&quot;&gt;viewport units&lt;/a&gt;.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;ryans-wishlist&quot;&gt;Ryan’s wishlist&lt;/h3&gt;
        &lt;p&gt;I’m just a simple, small-town CSS developer, and I’m quite satisfied with all the new features coming to browsers over the past few years, what more could I ask for?&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;anchor-positioning-in-more-browsers&quot;&gt;5. Anchor positioning in more browsers!&lt;/h4&gt;
        &lt;p&gt;I don’t need anymore convincing on CSS anchor positioning, &lt;em&gt;I’m sold!&lt;/em&gt; After spending much of the month of November &lt;a href=&quot;https://css-tricks.com/one-of-those-onboarding-uis-with-anchor-positioning/&quot;&gt;learning how it works&lt;/a&gt;, I went into December knowing I won’t &lt;em&gt;really&lt;/em&gt; get to use it for a while. &lt;/p&gt;
        &lt;p&gt;As we close out 2024, only Chromium-based browsers have support, and fallbacks and progressive enhancements are not easy, unfortunately. There is a polyfill available (which is awesome), however, that does mean adding another chunk of JavaScript, contrasting what anchor positioning solves.&lt;/p&gt;
        &lt;p&gt;I’m patient though, I waited a long time for &lt;code&gt;:has&lt;/code&gt; to come to browsers, which has been “&lt;em&gt;newly available&lt;/em&gt;” in Baseline for a year now (can you believe it?).&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;a-way-to-move-an-element-to-the-top-layer-without-popover-would-be-nice&quot;&gt;6. Promoting elements to the &lt;code&gt;#top-layer&lt;/code&gt; &lt;em&gt;without&lt;/em&gt; popover?&lt;/h4&gt;
        &lt;p&gt;I like anchor positioning, I like popovers, and they go really well together!&lt;/p&gt;
        &lt;p&gt;The neat thing with popovers is how they appear in the &lt;code&gt;#top-layer&lt;/code&gt;, so you get to avoid stacking issues related to &lt;code&gt;z-index&lt;/code&gt;. This is probably all most would need with it, but having some other way to move an element there would be interesting. Also, now that I know that the &lt;code&gt;#top-layer&lt;/code&gt; exists, I want to do &lt;em&gt;more&lt;/em&gt; with it — I want to know what’s up there. &lt;em&gt;What’s really going on?&lt;/em&gt;&lt;/p&gt;
        &lt;p&gt;Well, I probably should have started at the spec. As it turns out, the &lt;a href=&quot;https://drafts.csswg.org/css-position-4/#top-layer&quot; rel=&quot;noopener&quot;&gt;CSS Position Layout Module Level 4&lt;/a&gt; draft talks about the &lt;code&gt;#top-layer&lt;/code&gt;, what it’s useful for, and ways to approach styling elements contained within it. Interestingly, the &lt;code&gt;#top-layer&lt;/code&gt; is controlled by the user agent and seems to be a byproduct of the &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API&quot; rel=&quot;noopener&quot;&gt;Fullscreen API&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Dialogs and popovers are the way to go for now but, optimistically speaking, these features existing &lt;em&gt;might&lt;/em&gt; mean it’s possible to promote elements to the &lt;code&gt;#top-layer&lt;/code&gt; in future ways. This very well may be a coyote/roadrunner-type situation, as I’m not quite sure what I’d do with it once I get it.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;set-layers-from-a-link-tag&quot;&gt;7. Adding a layer attribute to &lt;code&gt;&amp;lt;link&amp;gt;&lt;/code&gt; tags&lt;/h4&gt;
        &lt;p&gt;Personally speaking, &lt;a href=&quot;https://css-tricks.com/css-cascade-layers/&quot;&gt;Cascade Layers&lt;/a&gt; have changed how I write CSS. One thing I think would be ace is if we could include a &lt;code&gt;layer&lt;/code&gt; attribute on a &lt;code&gt;&amp;lt;link&amp;gt;&lt;/code&gt; tag. Imagine being able to include a CSS reset in your project like:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.com/some/reset.css&quot; layer=&quot;reset&quot;&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or, depending on the page visited, dynamically add parts of CSS, blended into your cascade layers:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;!--
        Global styles with layers defined, such as:
        @layer reset, typography, components, utilities;
        --&amp;gt;
        &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;/styles/main.css&quot;&amp;gt;
        &amp;lt;!-- Add only to pages using card components --&amp;gt;
        &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;/components/card.css&quot; layer=&quot;components&quot;&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;This feature was &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/5853&quot; rel=&quot;noopener&quot;&gt;proposed over on the CSSWG’s repo&lt;/a&gt;, and like most things in life: &lt;em&gt;it’s complicated&lt;/em&gt;. &lt;/p&gt;
        &lt;p&gt;Browsers are especially finicky with attributes they don’t know, plus definite concerns around handling fallbacks. The topic was also brought over to the W3C Technical Architecture Group (TAG) for &lt;a href=&quot;https://css-tricks.com/wp-admin/post.php?post=383249&amp;amp;action=edit&quot;&gt;discussion as well&lt;/a&gt;, so there’s still hope!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;juandi-s-wishlist&quot;&gt;Juandi’s Wishlist&lt;/h3&gt;
        &lt;p&gt;I must admit this, I wasn’t around when the web was wild and people had hit counters. In fact, I think I am pretty young compared to your average web &lt;em&gt;connoisseur&lt;/em&gt;. While I do know how to make a layout using &lt;code&gt;float&lt;/code&gt; (the first web course I picked up was &lt;em&gt;pretty&lt;/em&gt; outdated), I didn’t have to suffer long before using things like Flexbox or CSS Grid and never grinded my teeth against IE and browser support.&lt;/p&gt;
        &lt;p&gt;So, the following wishes may seem like petty requests compared to the really necessary features the web needed in the past — or even some in the present. Regardless, here are my three petty requests I would wish to see in 2025:&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;a-way-to-get-the-children-count-and-index-as-an-integer-&quot;&gt;8. Get the children count and index as an integer&lt;/h4&gt;
        &lt;p&gt;This is one of those things that you swear it should already be possible with just CSS. The situation is the following: I find myself wanting to know the index of an element between its siblings or the total number of children. I can’t use the &lt;code&gt;counter()&lt;/code&gt; function since sometimes I need an integer instead of a string. The current approach is either hardcoding an index on the HTML:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;ul&amp;gt;
        &amp;lt;li style=&quot;--index: 0&quot;&amp;gt;Milk&amp;lt;/li&amp;gt;
        &amp;lt;li style=&quot;--index: 1&quot;&amp;gt;Eggs&amp;lt;/li&amp;gt;
        &amp;lt;li style=&quot;--index: 2&quot;&amp;gt;Cheese&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Or alternatively, write each index in CSS:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;li:nth-child(1) { --index: 0; }
        li:nth-child(2) { --index: 1; }
        li:nth-child(3) { --index: 2; }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Either way, I always leave with the feeling that it should be easier to reference this number; the browser already has this info, it’s just a matter of exposing it to authors. It would make prettier and cleaner code for staggering animations, or simply changing the styles based on the total count.&lt;/p&gt;
        &lt;p&gt;Luckily, there is a already proposal in Working Draft for &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/4559&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;sibling-count()&lt;/code&gt; and &lt;code&gt;sibling-index()&lt;/code&gt;&lt;/a&gt; functions. While the syntax may change, I do hope to hear more about them in 2025.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;ul &amp;gt; li {
        background-color: hsl(sibling-count() 50% 50%);
        }
        ul &amp;gt; li {
        transition-delay: calc(sibling-index() * 500ms);
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;a-way-to-balance-flex-wrap-&quot;&gt;9. A way to balance &lt;code&gt;flex-wrap&lt;/code&gt;&lt;/h4&gt;
        &lt;p&gt;I’m stealing this one from &lt;a href=&quot;https://nerdy.dev/css-wishlist-2025#flex-wrap-balance&quot; rel=&quot;noopener&quot;&gt;Adam Argyle&lt;/a&gt;, but I do wish for a better way to balance &lt;code&gt;flex-wrap&lt;/code&gt; layouts. When elements wrap one by one as their container shrinks, they either are left alone with empty space (which I don’t dislike) or grow to fill it (which hurts my soul):&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;Flex Wrap leaving empty space or filling it completely&quot; class=&quot;wp-image-383259&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-bad-example.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;I wish for a more native way of balancing wrapping elements:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;Flex wrap balancing elements&quot; class=&quot;wp-image-383260&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/flex-wrap-good-example.png.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;It’s definitely annoying.&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;an-easier-way-to-read-research-csswg-issues&quot;&gt;10. An easier way to read/research CSSWG discussions&lt;/h4&gt;
        &lt;p&gt;I am a big fan of the CSSWG and everything they do, so I spent a lot of time reading their working drafts, GitHub issues, or notes about their meetings. However, as much as I love jumping from link to link in their GitHub, it can be hard to find all the related issues to a specific discussion.&lt;/p&gt;
        &lt;p&gt;I think this raises the barrier of entry to giving your opinion on some topics. If you want to participate in an issue, you should have the big picture of all the discussion (what has been said, why some things don’t work, others to consider, etc) but it’s usually scattered across several issues or meetings. While issues can be lengthy, that isn’t the problem (I love reading them), but rather not knowing part of a discussion existed somewhere in the first place.&lt;/p&gt;
        &lt;p&gt;So, while it isn’t directly a CSS wish, I wish there was an easier way to get the full picture of the discussion before jumping in.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;whats-on-your-wishlist&quot;&gt;What’s on your wishlist?&lt;/h3&gt;
        &lt;p&gt;We asked! You answered! Here are a few choice selections from the crowd:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;Rotate direct &lt;code&gt;background-images&lt;/code&gt;, like &lt;code&gt;background-rotate: 180deg&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;CSS &lt;code&gt;random()&lt;/code&gt;, with params for &lt;code&gt;range&lt;/code&gt;, &lt;code&gt;spread&lt;/code&gt;, and &lt;code&gt;type&lt;/code&gt;&lt;/li&gt;
        &lt;li&gt;A CSS anchor position mode that allows targeting the mouse cursor, pointer, or touch point positions&lt;/li&gt;
        &lt;li&gt;A string selector to query a certain word in a block of text and apply styling every time that word occurs&lt;/li&gt;
        &lt;li&gt;A native &lt;code&gt;.visually-hidden&lt;/code&gt; class.&lt;/li&gt;
        &lt;li&gt;&lt;code&gt;position: sticky&lt;/code&gt; with a &lt;code&gt;:stuck&lt;/code&gt; pseudo&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;and-a-bigger-wish-&quot;&gt;Wishing you a great 2025…&lt;/h3&gt;
        &lt;p&gt;CSS-Tricks trajectory hasn’t been the most smooth these last years, so our biggest wish for 2025 is to keep writing and sparking discussions about the web. Happy 2025! &lt;/p&gt;
      </description>
      <link>https://css-tricks.com/a-css-wishlist-for-2025/</link>
      <guid isPermaLink="false">https://css-tricks.com/a-css-wishlist-for-2025/</guid>
      <pubDate>Mon, 23 Dec 2024 07:07:41 GMT</pubDate>
      <author>Juan Diego Rodríguez</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2019/08/css-sparkle-1.png" type="image/jpeg"></enclosure>
      <category>opinion</category>
    </item>
    <item>
      <title>Yet Another Anchor Positioning Quirk</title>
      <description>&lt;p&gt;I strongly believe Anchor Positioning will go down as one of the greatest additions to CSS. It may not be as game-changing as Flexbox or Grid, but it does fill a positioning gap that has been missing for decades. As awesome as I think it is,&amp;nbsp;&lt;a href=&quot;https://css-tricks.com/anchor-positioning-quirks/&quot;&gt;CSS Anchor Positioning has a lot of quirks&lt;/a&gt;, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has&amp;nbsp;bugged me since I first saw it.&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;the-inception&quot;&gt;The inception&lt;/h3&gt;
        &lt;p&gt;It all started a month ago when I was reading about what other people have made using Anchor Positioning, specifically this post by &lt;a href=&quot;https://css-tricks.com/author/afiftemani/&quot;&gt;Temani Afif&lt;/a&gt; about &lt;a href=&quot;https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/&quot; rel=&quot;noopener&quot;&gt;“Anchor Positioning &amp;amp; Scroll-Driven Animations.”&lt;/a&gt; I strongly encourage you to read it and find out what caught my eye there. Combining Anchor Positioning and &lt;a href=&quot;https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/&quot;&gt;Scroll-Driven Animation&lt;/a&gt;, he makes a range slider that changes colors while it progresses.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_JjqNEbZ&quot; src=&quot;https://codepen.io/anon/embed/JjqNEbZ?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=JjqNEbZ&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed JjqNEbZ&quot; title=&quot;CodePen Embed JjqNEbZ&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Amazing by itself, but it’s interesting that he is using two target elements with the same anchor name, each attached to its corresponding anchor, just like magic. If this doesn’t seem as interesting as it looks, we should then briefly recap how Anchor Positioning works.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;anchor-positioning-and-the-anchor-scope-property&quot;&gt;CSS Anchor Positioning and the &lt;code&gt;anchor-scope&lt;/code&gt; property&lt;/h3&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;See our complete &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;CSS Anchor Positioning Guide&lt;/a&gt; for a comprehensive deep dive.&lt;/p&gt;
        &lt;p&gt;Anchor Positioning brings two new concepts to CSS, an &lt;em&gt;anchor&lt;/em&gt; element and a &lt;em&gt;target&lt;/em&gt; element. The anchor is the element used as a reference for positioning other elements, hence the anchor name. While the target is an absolutely-positioned element placed relative to one or more anchors.&lt;/p&gt;
        &lt;p&gt;An anchor and a target can be almost every element, so you can think of them as just two &lt;code&gt;div&lt;/code&gt; sitting next to each other:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To start, we first have to register the anchor element in CSS using the &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-name/&quot;&gt;&lt;code&gt;anchor-name&lt;/code&gt;&lt;/a&gt; property:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.anchor {
        anchor-name: --my-anchor;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;And the &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-anchor/&quot;&gt;&lt;code&gt;position-anchor&lt;/code&gt;&lt;/a&gt; property on an absolutely-positioned element attaches it to an anchor of the same name. However, to move the target around the anchor we need the &lt;a href=&quot;https://css-tricks.com/almanac/properties/p/position-area/&quot;&gt;&lt;code&gt;position-area&lt;/code&gt;&lt;/a&gt; property.&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;.target {
        position: absolute;
        position-anchor: --my-anchor;
        position-area: top right;
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_oNKavLV&quot; src=&quot;https://codepen.io/anon/embed/preview/oNKavLV?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=oNKavLV&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed oNKavLV&quot; title=&quot;CodePen Embed oNKavLV&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;This works great, but things get complicated if we change our markup to include more anchors and targets:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 1&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 1&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 2&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 2&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;
        &amp;lt;div class=&quot;anchor&quot;&amp;gt;anchor 3&amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;target&quot;&amp;gt;target 3&amp;lt;/div&amp;gt;
        &amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Instead of each target attaching to its closest anchor, they all pile up at the last registered anchor in the DOM.&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_BagXMNv&quot; src=&quot;https://codepen.io/anon/embed/preview/BagXMNv?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=BagXMNv&amp;amp;default-tab=html,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed BagXMNv&quot; title=&quot;CodePen Embed BagXMNv&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;The &lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-scope/#aa-why-we-need-anchor-scope&quot;&gt;&lt;code&gt;anchor-scope&lt;/code&gt;&lt;/a&gt; property was introduced in Chrome 131 as an answer to this issue. It limits the scope of anchors to a subtree so that each target attaches correctly. However, I don’t want to focus on this property, because what initially caught my attention was that &lt;strong&gt;Temani didn’t use it&lt;/strong&gt;. For some reason, they all attached correctly, again, like magic.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;what-s-happening-&quot;&gt;What’s happening?&lt;/h3&gt;
        &lt;p&gt;Targets usually attach to the last anchor on the DOM instead of their closest anchor, but in our first example, we saw two anchors with the same &lt;code&gt;anchor-name&lt;/code&gt; and their corresponding targets attached. All this without the &lt;code&gt;anchor-scope&lt;/code&gt; property. What’s happening?&lt;/p&gt;
        &lt;p&gt;Two words: &lt;strong&gt;Containing Block&lt;/strong&gt;.&lt;/p&gt;
        &lt;p&gt;Something to know about Anchor Positioning is that it relies a lot on how an element’s containing block is built. This isn’t something inherently from Anchor Positioning but from absolute positioning. Absolute elements are positioned relative to their containing block, and inset properties like &lt;code&gt;top: 0px&lt;/code&gt;, &lt;code&gt;left: 30px&lt;/code&gt; or &lt;code&gt;inset: 1rem&lt;/code&gt; are just moving an element around its containing block boundaries, creating what’s called the &lt;strong&gt;&lt;a href=&quot;https://www.w3.org/TR/css-position-3/#resolving-insets&quot; rel=&quot;noopener&quot;&gt;inset-modified containing block&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;An element being shrunk by its inset-modified containing block&quot; class=&quot;wp-image-382897&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-example.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;A target attached to an anchor isn’t any different, and what the &lt;code&gt;position-area&lt;/code&gt; property does under the table is change the target’s inset-modified containing block so it is right next to the anchor.&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;A target element inset-modified containing block shrunk to be in the top left corner of an anchor&quot; class=&quot;wp-image-382898&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/inset-modified-containing-block-target.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Usually, the containing block of an absolutely-positioned element is the whole viewport, but it can be changed by any ancestor with a position other than &lt;code&gt;static&lt;/code&gt; (usually &lt;code&gt;relative&lt;/code&gt;). Temani takes advantage of this fact and creates a new containing block for each slider, so they can only be attached to their corresponding anchors. If you snoop around the code, you can find it at the beginning:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;label {
        position: relative;
        /* No, It&#39;s not useless so don&#39;t remove it (or remove it and see what happens) */
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;If we use this tactic on our previous examples, suddenly they are all correctly attached!&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_zxOvNGE&quot; src=&quot;https://codepen.io/anon/embed/preview/zxOvNGE?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=zxOvNGE&amp;amp;default-tab=css,result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed zxOvNGE&quot; title=&quot;CodePen Embed zxOvNGE&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;yet-another-quirk&quot;&gt;Yet another quirk&lt;/h3&gt;
        &lt;p&gt;We didn’t need to use the &lt;code&gt;&lt;a href=&quot;https://css-tricks.com/almanac/properties/a/anchor-scope/&quot;&gt;anchor-scope&lt;/a&gt;&lt;/code&gt; property to attach each anchor to its respective target, but instead took advantage of how the containing block of absolute elements is computed. However, there is yet another approach, one that doesn’t need any extra bits of code.&lt;/p&gt;
        &lt;p&gt;This occurred to me when I was also experimenting with &lt;a href=&quot;https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/&quot;&gt;Scroll-Driven Animations and Anchor Positioning&lt;/a&gt; and trying to attach text-bubble footnotes on the side of a post, like the following:&lt;/p&gt;
        &lt;figure class=&quot;wp-block-image size-full&quot;&gt;&lt;img data-recalc-dims=&quot;1&quot; loading=&quot;lazy&quot; decoding=&quot;async&quot; width=&quot;1920&quot; height=&quot;1080&quot; src=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1920%2C1080&amp;amp;ssl=1&quot; alt=&quot;A blog post body with paragraphs, the paragraphs have footnotes attached on the sides&quot; class=&quot;wp-image-382899&quot; srcset=&quot;https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?w=1920&amp;amp;ssl=1 1920w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=300%2C169&amp;amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1024%2C576&amp;amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=768%2C432&amp;amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/12/moving-anchors-in-one-direction.png?resize=1536%2C864&amp;amp;ssl=1 1536w&quot; sizes=&quot;auto, (min-width: 735px) 864px, 96vw&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/figure&gt;
        &lt;p&gt;Logically, each footnote would be a target, but the choice of an anchor is a little more tricky. I initially thought that each paragraph would work as an anchor, but that would mean having more than one anchor with the same &lt;code&gt;anchor-name&lt;/code&gt;. The result: all the targets would pile up at the last anchor:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_jENbBNa&quot; src=&quot;https://codepen.io/anon/embed/preview/jENbBNa?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=jENbBNa&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed jENbBNa&quot; title=&quot;CodePen Embed jENbBNa&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;This could be solved using our prior approach of creating a new containing block for each note. However, there is another route we can take, what I call the reductionist method. The problem comes when there is more than one anchor with the same &lt;code&gt;anchor-name&lt;/code&gt;, so we will reduce the number of anchors to one, using an element that could work as the common anchor for all targets.&lt;/p&gt;
        &lt;p&gt;In this case, we just want to position each target on the sides of the post so we can use the entire body of the post as an anchor, and since each target is naturally aligned on the vertical axis, what’s left is to move them along the horizontal axis:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_oNKqwgy&quot; src=&quot;https://codepen.io/anon/embed/preview/oNKqwgy?height=450&amp;amp;theme-id=1&amp;amp;slug-hash=oNKqwgy&amp;amp;default-tab=result&quot; height=&quot;450&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed oNKqwgy&quot; title=&quot;CodePen Embed oNKqwgy&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;You can better check how it was done on the original post!&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;conclusion&quot;&gt;Conclusion&lt;/h3&gt;
        &lt;baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureid=&quot;anchor-positioning&quot;&gt;&lt;/baseline-status&gt;
        &lt;p&gt;The &lt;code&gt;anchor-scope&lt;/code&gt; may be the most recent CSS property to be shipped to a browser (so far, just in Chrome 131+), so we can’t expect its support to be something out of this world. And while I would love to use it every now and there, it will remain bound to short demos for a while. This isn’t a reason to limit the use of other Anchor Positioning properties, which are supported in Chrome 125 onwards (and let’s hope in other browsers in the near future), so I hope these little quirks can help you to keep using Anchor Positioning without any fear.&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/yet-another-anchor-positioning-quirk/</link>
      <guid isPermaLink="false">https://css-tricks.com/yet-another-anchor-positioning-quirk/</guid>
      <pubDate>Mon, 09 Dec 2024 08:54:00 GMT</pubDate>
      <author>Juan Diego Rodríguez</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2024/12/Yet-Another-Anchor-Positioning-Quirk.png" type="image/jpeg"></enclosure>
      <category>anchor positioning</category>
    </item>
    <item>
      <title>The Law of Diminishing Returns</title>
      <description>&lt;p&gt;Some animation can &lt;a href=&quot;https://css-tricks.com/making-css-animations-feel-natural/&quot;&gt;make things feel natural&lt;/a&gt;. Too many animations &lt;a href=&quot;https://css-tricks.com/newsletter/230-animate-everything-by-1/&quot;&gt;becomes distracting&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some line spacing can &lt;a href=&quot;https://css-tricks.com/how-to-tame-line-height-in-css/&quot;&gt;help legibility&lt;/a&gt;. Too much &lt;a href=&quot;https://css-tricks.com/equilateral-triangle-perfect-paragraph/&quot;&gt;hurts it&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some alt text is &lt;a href=&quot;https://css-tricks.com/alt-text-not-always-needed/&quot;&gt;contextual&lt;/a&gt;. Too much alt text is &lt;a href=&quot;https://css-tricks.com/just-how-long-should-alt-text-be/&quot;&gt;noise&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some padding feels comfy. Too much padding &lt;a href=&quot;https://codepen.io/geoffgraham/pen/OPLymod?editors=1100&quot; rel=&quot;noopener&quot;&gt;feels exposed&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some specificity is &lt;a href=&quot;https://css-tricks.com/strategies-keeping-css-specificity-low/&quot;&gt;manageable&lt;/a&gt;. Too much specificity is &lt;a href=&quot;https://css-tricks.com/specifics-on-css-specificity/&quot;&gt;untenable&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some technical debt is &lt;a href=&quot;https://css-tricks.com/defining-and-dealing-with-technical-debt/&quot;&gt;healthy&lt;/a&gt;. Too much of it becomes a &lt;a href=&quot;https://css-tricks.com/technical-debt-is-like-tetris/&quot;&gt;burden&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some corner rounding is &lt;a href=&quot;https://css-tricks.com/tabs-with-round-out-borders/&quot;&gt;classy&lt;/a&gt;. Too much is &lt;a href=&quot;https://css-tricks.com/what-happens-when-border-radii-overlap/&quot;&gt;just a circle&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some breakpoints are &lt;a href=&quot;https://css-tricks.com/fluid-everything-else/&quot;&gt;fluid&lt;/a&gt;. Too many of them becomes &lt;a href=&quot;https://css-tricks.com/snippets/css/media-queries-for-standard-devices/&quot;&gt;adaptive&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some margin &lt;a href=&quot;https://css-tricks.com/component-spacing-design-system/&quot;&gt;adds breathing room&lt;/a&gt;. Too much margin &lt;a href=&quot;https://css-tricks.com/what-you-should-know-about-collapsing-margins/&quot;&gt;collapses things&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some images &lt;a href=&quot;https://css-tricks.com/your-image-is-probably-not-decorative/&quot;&gt;add context&lt;/a&gt;. Too many images takes a &lt;a href=&quot;https://httparchive.org/reports/state-of-images?lens=top1m&amp;amp;start=2018_11_01&amp;amp;end=latest&amp;amp;view=list&quot; rel=&quot;noopener&quot;&gt;long time to download&lt;/a&gt; (and &lt;a href=&quot;https://css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget/&quot;&gt;impacts the environment&lt;/a&gt;).&lt;/p&gt;
        &lt;p&gt;Some JavaScript &lt;a href=&quot;https://css-tricks.com/embrace-the-platform/&quot;&gt;enhances interactions&lt;/a&gt;. Too much becomes a &lt;a href=&quot;https://www.smashingmagazine.com/2023/10/speedcurve-fight-main-thread/&quot; rel=&quot;noopener&quot;&gt;bottleneck&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;A font pairing creates a &lt;a href=&quot;https://css-tricks.com/sites-for-browsing-type-pairings/&quot;&gt;typographic system&lt;/a&gt;. Too many pairings creates a &lt;a href=&quot;https://pimpmytype.com/pairing-fonts/&quot; rel=&quot;noopener&quot;&gt;visual distraction&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some utility classes &lt;a href=&quot;https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/&quot;&gt;come in handy&lt;/a&gt;. Too many &lt;a href=&quot;https://css-tricks.com/css-utility-classes-separation-concerns/&quot;&gt;eliminates a separation of concerns&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some data &lt;a href=&quot;https://css-tricks.com/writing-feature-requirements/&quot;&gt;helps make decisions&lt;/a&gt;. Too much data &lt;a href=&quot;https://robinrendle.com/notes/vibe-driven-development/&quot; rel=&quot;noopener&quot;&gt;kills the vibe&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some AI can help &lt;a href=&quot;https://github.blog/news-insights/research/research-how-github-copilot-helps-improve-developer-productivity/&quot; rel=&quot;noopener&quot;&gt;write the boring parts of code&lt;/a&gt;. Too much puts &lt;a href=&quot;https://www.gitclear.com/coding_on_copilot_data_shows_ais_downward_pressure_on_code_quality&quot; rel=&quot;noopener&quot;&gt;downward pressure on code quality&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some SEO &lt;a href=&quot;https://css-tricks.com/common-sense-seo-checklist/&quot;&gt;improves search ranking&lt;/a&gt;. Too much mutes &lt;a href=&quot;https://css-tricks.com/make-it-personal/&quot;&gt;the human voice&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some testing provides &lt;a href=&quot;https://css-tricks.com/front-end-testing-is-for-everyone/&quot;&gt;good coverage&lt;/a&gt;. Too much testing &lt;a href=&quot;https://css-tricks.com/lessons-learned-from-a-year-of-testing-the-web-platform/&quot;&gt;requires its own maintenance&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;A few colors establish a &lt;a href=&quot;https://css-tricks.com/re-pleasing-color-palettes/&quot;&gt;visual hierarchy&lt;/a&gt;. Too many establish a &lt;a href=&quot;https://medium.com/@sn2632/universal-principles-of-design-4b3db103dd32&quot; rel=&quot;noopener&quot;&gt;cognitive dissonance&lt;/a&gt;.&lt;/p&gt;
        &lt;p&gt;Some planning &lt;a href=&quot;https://css-tricks.com/productivity-tip-time-tracking-and-task-lists-unite/&quot;&gt;helps productivity&lt;/a&gt;. Too much planning &lt;a href=&quot;https://basecamp.com/shapeup/3.3-chapter-12#how-to-know-if-the-scopes-are-right&quot; rel=&quot;noopener&quot;&gt;creates delays&lt;/a&gt;.&lt;/p&gt;
        &lt;hr class=&quot;wp-block-separator has-alpha-channel-opacity&quot;&gt;
        &lt;p&gt;Striking the right balance can be tough. We don’t want cool mama bear’s porridge or hot papa’s bear porridge, but something right in the middle, like baby bear’s porridge.&lt;/p&gt;
      </description>
      <link>https://css-tricks.com/the-law-of-diminishing-returns/</link>
      <guid isPermaLink="false">https://css-tricks.com/the-law-of-diminishing-returns/</guid>
      <pubDate>Wed, 04 Dec 2024 08:20:24 GMT</pubDate>
      <author>Geoff Graham</author>
      <enclosure url="https://css-tricks.com/wp-content/uploads/2018/11/cssstacks.png" type="image/jpeg"></enclosure>
      <category>inspiration</category>
    </item>
    <item>
      <title>The Different (and Modern) Ways to Toggle Content</title>
      <description>&lt;blockquote class=&quot;wp-block-quote is-layout-flow wp-block-quote-is-layout-flow&quot;&gt;
        &lt;p&gt;If all you have is a hammer, everything looks like a nail.&lt;/p&gt;
        &lt;cite&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Abraham_Maslow&quot; target=&quot;_blank&quot; rel=&quot;noreferrer noopener&quot;&gt;&lt;em&gt;Abraham Maslow&lt;/em&gt;&lt;/a&gt;&lt;/cite&gt;&lt;/blockquote&gt;
        &lt;p&gt;It’s easy to default to what you know. When it comes to toggling content, that might be reaching for &lt;code&gt;display: none&lt;/code&gt; or &lt;code&gt;opacity: 0&lt;/code&gt; with some JavaScript sprinkled in. But the web is more “modern” today, so perhaps now is the right time to get a birds-eye view of the different ways to toggle content — which native APIs are actually supported now, their pros and cons, and some things about them that you might not know (such as any pseudo-elements and other non-obvious stuff).&lt;/p&gt;
        &lt;!--more--&gt;
        &lt;p&gt;So, let’s spend some time looking at &lt;a href=&quot;https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/&quot;&gt;disclosures&lt;/a&gt; (&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt;), the &lt;a href=&quot;https://css-tricks.com/how-to-implement-and-style-the-dialog-element/&quot;&gt;Dialog API&lt;/a&gt;, the &lt;a href=&quot;https://css-tricks.com/poppin-in/&quot;&gt;Popover API&lt;/a&gt;, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.&lt;/p&gt;
        &lt;h3 class=&quot;wp-block-heading&quot; id=&quot;disclosures-details-and-summary-&quot;&gt;Disclosures (&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt;)&lt;/h3&gt;
        &lt;p&gt;&lt;strong&gt;Use case: Accessibly summarizing content while making the content details togglable independently or as an accordion.&lt;/strong&gt;&lt;/p&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;&lt;strong&gt;Update 12/12/2024:&lt;/strong&gt; A&amp;nbsp;&lt;a href=&quot;https://developer.chrome.com/blog/styling-details&quot; rel=&quot;noopener&quot;&gt;new article on the Chrome blog&lt;/a&gt;&amp;nbsp;has demonstrated a couple more interesting ways to use&amp;nbsp;&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt;, including &lt;a href=&quot;https://codepen.io/web-dot-dev/pen/XWvBZNo&quot; rel=&quot;noopener&quot;&gt;an animated gallery&lt;/a&gt; and &lt;a href=&quot;https://codepen.io/web-dot-dev/pen/PoMBQmW&quot; rel=&quot;noopener&quot;&gt;a partially-open&amp;nbsp;&lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt;&lt;/a&gt;&amp;nbsp;(optionally animated using&amp;nbsp;&lt;code&gt;calc-size&lt;/code&gt;).&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_yLmoZeo&quot; src=&quot;https://codepen.io/anon/embed/preview/yLmoZeo?height=250&amp;amp;theme-id=1&amp;amp;slug-hash=yLmoZeo&amp;amp;default-tab=html,result&quot; height=&quot;250&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed yLmoZeo&quot; title=&quot;CodePen Embed yLmoZeo&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Going in release order, disclosures — known by their elements as &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; — marked the first time we were able to toggle content without JavaScript or weird checkbox hacks. But lack of web browser support obviously holds new features back at first, and this one in particular came without keyboard accessibility. So I’d understand if you haven’t used it since it came to Chrome 12 way back in 2011. Out of sight, out of mind, right?&lt;/p&gt;
        &lt;p&gt;Here’s the low-down:&lt;/p&gt;
        &lt;ul class=&quot;wp-block-list&quot;&gt;
        &lt;li&gt;It’s functional without JavaScript (without any compromises).&lt;/li&gt;
        &lt;li&gt;It’s fully stylable without &lt;code&gt;appearance: none&lt;/code&gt; or the like.&lt;/li&gt;
        &lt;li&gt;You can hide the marker without non-standard pseudo-selectors.&lt;/li&gt;
        &lt;li&gt;You can connect multiple disclosures to create an accordion.&lt;/li&gt;
        &lt;li&gt;&lt;em&gt;Aaaand&lt;/em&gt;… it’s fully animatable, as of 2024.&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;marking-up-disclosures&quot;&gt;Marking up disclosures&lt;/h4&gt;
        &lt;p&gt;What you’re looking for is this:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;details&amp;gt;
        &amp;lt;summary&amp;gt;Content summary (always visible)&amp;lt;/summary&amp;gt;
        Content (visibility is toggled when summary is clicked on)
        &amp;lt;/details&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Behind the scenes, the content’s wrapped in a pseudo-element that as of 2024 we can select using &lt;a href=&quot;https://css-tricks.com/almanac/pseudo-selectors/d/details-content/&quot;&gt;&lt;code&gt;::details-content&lt;/code&gt;&lt;/a&gt;. To add to this, there’s a &lt;code&gt;::marker&lt;/code&gt; pseudo-element that indicates whether the disclosure’s open or closed, which we can customize.&lt;/p&gt;
        &lt;p&gt;With that in mind, disclosures actually look like this under the hood:&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;details&amp;gt;
        &amp;lt;summary&amp;gt;&amp;lt;::marker&amp;gt;&amp;lt;/::marker&amp;gt;Content summary (always visible)&amp;lt;/summary&amp;gt;
        &amp;lt;::details-content&amp;gt;
        Content (visibility is toggled when summary is clicked on)
        &amp;lt;/::details-content&amp;gt;
        &amp;lt;/details&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;To have the disclosure open by default, give &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; the &lt;code&gt;open&lt;/code&gt; attribute, which is what happens behind the scenes when disclosures are opened anyway.&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;details open&amp;gt; ... &amp;lt;/details&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;styling-disclosures&quot;&gt;Styling disclosures&lt;/h4&gt;
        &lt;p&gt;Let’s be real: you probably just want to lose that annoying marker. Well, you can do that by setting the &lt;code&gt;display&lt;/code&gt; property of &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; to anything but &lt;code&gt;list-item&lt;/code&gt;:&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;summary {
        display: block; /* Or anything else that isn&#39;t list-item */
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_OJKxRpd&quot; src=&quot;https://codepen.io/anon/embed/preview/OJKxRpd?height=250&amp;amp;theme-id=1&amp;amp;slug-hash=OJKxRpd&amp;amp;default-tab=css,result&quot; height=&quot;250&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed OJKxRpd&quot; title=&quot;CodePen Embed OJKxRpd&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;Alternatively, you can modify the marker. In fact, the example below utilizes Font Awesome to replace it with another icon, but keep in mind that &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;::marker&lt;/code&gt; doesn’t support many properties&lt;/a&gt;. The most flexible workaround is to wrap the content of &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; in an element and select it in CSS.&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;details&amp;gt;
        &amp;lt;summary&amp;gt;&amp;lt;span&amp;gt;Content summary&amp;lt;/span&amp;gt;&amp;lt;/summary&amp;gt;
        Content
        &amp;lt;/details&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;details {
        /* The marker */
        summary::marker {
        content: &quot;\f150&quot;;
        font-family: &quot;Font Awesome 6 Free&quot;;
        }
        /* The marker when &amp;lt;details&amp;gt; is open */
        &amp;amp;[open] summary::marker {
        content: &quot;\f151&quot;;
        }
        /* Because ::marker doesn’t support many properties */
        summary span {
        margin-left: 1ch;
        display: inline-block;
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_gOVxJer&quot; src=&quot;https://codepen.io/anon/embed/preview/gOVxJer?height=250&amp;amp;theme-id=1&amp;amp;slug-hash=gOVxJer&amp;amp;default-tab=css,result&quot; height=&quot;250&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed gOVxJer&quot; title=&quot;CodePen Embed gOVxJer&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;creating-an-accordion-with-multiple-disclosures&quot;&gt;Creating an accordion with multiple disclosures&lt;/h4&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_KKrRQXg&quot; src=&quot;https://codepen.io/anon/embed/preview/KKrRQXg?height=350&amp;amp;theme-id=1&amp;amp;slug-hash=KKrRQXg&amp;amp;default-tab=html,result&quot; height=&quot;350&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed KKrRQXg&quot; title=&quot;CodePen Embed KKrRQXg&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p&gt;To create an accordion, name multiple disclosures (they don’t even have to be siblings) with a &lt;code&gt;name&lt;/code&gt; attribute and a matching value (similar to how you’d implement &lt;code&gt;&amp;lt;input type=&quot;radio&quot;&amp;gt;&lt;/code&gt;):&lt;/p&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;details name=&quot;starWars&quot; open&amp;gt;
        &amp;lt;summary&amp;gt;Prequels&amp;lt;/summary&amp;gt;
        &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;Episode I: The Phantom Menace&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode II: Attack of the Clones&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode III: Revenge of the Sith&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
        &amp;lt;/details&amp;gt;
        &amp;lt;details name=&quot;starWars&quot;&amp;gt;
        &amp;lt;summary&amp;gt;Originals&amp;lt;/summary&amp;gt;
        &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;Episode IV: A New Hope&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode V: The Empire Strikes Back&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode VI: Return of the Jedi&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
        &amp;lt;/details&amp;gt;
        &amp;lt;details name=&quot;starWars&quot;&amp;gt;
        &amp;lt;summary&amp;gt;Sequels&amp;lt;/summary&amp;gt;
        &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;Episode VII: The Force Awakens&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode VIII: The Last Jedi&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;Episode IX: The Rise of Skywalker&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
        &amp;lt;/details&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;Using a wrapper, we can even turn these into horizontal tabs:&lt;/p&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_xxvXRxj&quot; src=&quot;https://codepen.io/anon/embed/preview/xxvXRxj?height=250&amp;amp;theme-id=1&amp;amp;slug-hash=xxvXRxj&amp;amp;default-tab=result&quot; height=&quot;250&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed xxvXRxj&quot; title=&quot;CodePen Embed xxvXRxj&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;pre rel=&quot;HTML&quot; class=&quot;wp-block-csstricks-code-block language-markup&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;&amp;lt;div&amp;gt; &amp;lt;!-- Flex wrapper --&amp;gt;
        &amp;lt;details name=&quot;starWars&quot; open&amp;gt; ... &amp;lt;/details&amp;gt;
        &amp;lt;details name=&quot;starWars&quot;&amp;gt; ... &amp;lt;/details&amp;gt;
        &amp;lt;details name=&quot;starWars&quot;&amp;gt; ... &amp;lt;/details&amp;gt;
        &amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/pre&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;div {
        gap: 1ch;
        display: flex;
        position: relative;
        details {
        min-height: 106px; /* Prevents content shift */
        &amp;amp;[open] summary,
        &amp;amp;[open]::details-content {
        background: #eee;
        }
        &amp;amp;[open]::details-content {
        left: 0;
        position: absolute;
        }
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;p&gt;…or, using 2024’s &lt;a href=&quot;https://css-tricks.com/css-anchor-positioning-guide/&quot;&gt;Anchor Positioning API&lt;/a&gt;, &lt;em&gt;vertical&lt;/em&gt; tabs (same HTML):&lt;/p&gt;
        &lt;pre rel=&quot;CSS&quot; class=&quot;wp-block-csstricks-code-block language-css&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;div {
        display: inline-grid;
        anchor-name: --wrapper;
        details[open] {
        summary,
        &amp;amp;::details-content {
        background: #eee;
        }
        &amp;amp;::details-content {
        position: absolute;
        position-anchor: --wrapper;
        top: anchor(top);
        left: anchor(right);
        }
        }
        }&lt;/code&gt;&lt;/pre&gt;
        &lt;div class=&quot;wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper&quot;&gt;&lt;iframe id=&quot;cp_embed_eYqGrOm&quot; src=&quot;https://codepen.io/anon/embed/eYqGrOm?height=350&amp;amp;theme-id=1&amp;amp;slug-hash=eYqGrOm&amp;amp;default-tab=css,result&quot; height=&quot;350&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;&quot; allowpaymentrequest=&quot;&quot; name=&quot;CodePen Embed eYqGrOm&quot; title=&quot;CodePen Embed eYqGrOm&quot; class=&quot;cp_embed_iframe&quot; style=&quot;width:100%;overflow:hidden&quot; referrerpolicy=&quot;no-referrer&quot;&gt;CodePen Embed Fallback&lt;/iframe&gt;&lt;/div&gt;
        &lt;p class=&quot;is-style-explanation&quot;&gt;If you’re looking for some wild ideas on what we can do with the Popover API in CSS, check out &lt;a href=&quot;https://css-tricks.com/popover-the-balloons/&quot;&gt;John Rhea’s article&lt;/a&gt; in which he makes an interactive game solely out of disclosures!&lt;/p&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;adding-javascript-functionality&quot;&gt;Adding JavaScript functionality&lt;/h4&gt;
        &lt;p&gt;Want to add some JavaScript functionality?&lt;/p&gt;
        &lt;pre rel=&quot;JavaScript&quot; class=&quot;wp-block-csstricks-code-block language-javascript&quot; data-line=&quot;&quot;&gt;&lt;code markup=&quot;tt&quot;&gt;// Optional: select and loop multiple disclosures
        document.querySelectorAll(&quot;details&quot;).forEach(details =&amp;gt; {
        details.addEventListener(&quot;toggle&quot;, () =&amp;gt; {
        // The disclosure was toggled
        if (details.open) {
        // The disclosure was opened
        } else {
        // The disclosure was closed
        }
        });
        });&lt;/code&gt;&lt;/pre&gt;
        &lt;h4 class=&quot;wp-block-heading&quot; id=&quot;creating-accessible-disclosures&quot;&gt;Creating accessible disclosures&lt;/h4&gt;
        &lt;p&gt;Disclosures are accessible as long as you follow a few rules. For example, &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; is basically a &lt;code&gt;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@TonyRL TonyRL Awaiting requested review from TonyRL

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.
3 participants
@Rjnishant530 @sk22 @TonyRL