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 1 commit into
base: master
Choose a base branch
from
Open

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

wants to merge 1 commit into from
+293 −1

Conversation

Rjnishant530
Copy link
Contributor

Involved Issue / 该 PR 相关 Issue

Close #

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

/css-tricks/articles
/css-tricks/guides
/css-tricks/popular/false
/css-tricks/fresh

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

sk22 commented Jan 8, 2025

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

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

Copilot Copilot left review comments

Assignees
No one assigned
Labels
Auto: Route Test Complete Auto route test has finished on given PR Route
Projects
None yet
Milestone
No milestone
Development

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