CSS-TRICKS

<p>Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/invoker-commands-additional-ways-to-work-with-dialog-popover-and-more/">Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>The <a href="https://css-tricks.com/poppin-in/">Popover</a> <a href="https://css-tricks.com/poppin-in/">API</a> and <a href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/"><code>&lt;dialog&gt;</code> element</a> are two of my favorite new platform features. In fact, I recently [wrote a detailed overview of their use cases] and the sorts of things you can do with them, even learning a few tricks in the process that I couldn’t find documented anywhere else.</p>



<p>I’ll admit that one thing that I really dislike about popovers and dialogs is that they could’ve easily been combined into a single API. They cover different use cases (notably, dialogs are typically modal) but are quite similar in practice, and yet their implementations are different.</p>



<p>Well, web browsers are now experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you <em>do</em> reach for JavaScript, the new attributes — <code><strong>command</strong></code> and <code><strong>commandfor</strong></code> — come with some new events that we can listen for.</p>



<p>Invoker commands? I’m sure you have questions, so let’s dive in.</p>



<span id="more-382572"></span>


<h3 class="wp-block-heading" id="we-re-in-experimental-territory">We’re in experimental territory</h3>


<p>Before we get into the weeds, we’re dealing with experimental features. To use invoker commands today in November 2024 you’ll need Chrome <em>Canary</em> 134+ with the <code>enable-experimental-web-platform-features</code> flag set to <code>Enabled</code>, Firefox <em>Nightly</em> 135+ with the <code>dom.element.invokers.enabled</code> flag set to <code>true</code>, or Safari <em>Technology Preview</em> with the <code>InvokerAttributesEnabled</code> flag set to <code>true</code>.</p>



<p>I’m optimistic we’ll get baseline coverage for <code>command</code> and <code>commandfor</code> in due time considering how nicely they abstract the kind of work that currently takes a hefty amount of scripting.</p>


<h3 class="wp-block-heading" id="basic-command-and-commandfor-usage">Basic <code>command</code> and <code>commandfor</code> usage</h3>


<p>First, you’ll need a <code>&lt;button&gt;</code> or a button-esque <code>&lt;input&gt;</code> along the lines of <code>&lt;input type="button"&gt;</code> or <code>&lt;input type="reset"&gt;</code>. Next, tack on the <code>command</code> attribute. The <code>command</code> value should be the command name that you want the button to invoke (e.g., <code>show-modal</code>). After that, drop the <code>commandfor</code> attribute in there referencing the dialog or popover you’re targeting by its <code>id</code>.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button command="show-modal" commandfor="dialogA">Show dialogA&lt;/button>

&lt;dialog id="dialogA">...&lt;/dialog></code></pre>



<p>In this example, I have a <code>&lt;button&gt;</code> element with a <code>command</code> attribute set to <code>show-modal</code> and a <code>commandfor</code> attribute set to <code>dialogA</code>, which matches the <code>id</code> of a <code>&lt;dialog&gt;</code> element we’re targeting:</p>



<p>Let’s get into the possible values for these invoker commands and dissect what they’re doing.</p>


<h3 class="wp-block-heading" id="looking-closer-at-the-attribute-values">Looking closer at the attribute values</h3>


<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_gOVZVmG" src="//codepen.io/anon/embed/gOVZVmG?height=450&amp;theme-id=1&amp;slug-hash=gOVZVmG&amp;default-tab=html,result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed gOVZVmG" title="CodePen Embed gOVZVmG" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>The <code>show-modal</code> value is the command that I just showed you in that last example. Specifically, it’s the HTML-invoked equivalent of JavaScript’s <code><a href="http://(https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal">showModal()</a></code> method.</p>



<p>The main benefit is that <code>show-modal</code> enables us to, well… <em>show</em> a <em>modal</em> without reaching directly for JavaScript. Yes, this is almost identical to <a href="https://css-tricks.com/poppin-in/">how HTML-invoked popovers already work with the</a><a href="https://css-tricks.com/poppin-in/"><code>popovertarget</code> and <code>popovertargetaction</code> attributes</a>, so it’s cool that the &#8220;balance is being redressed” as <a href="https://open-ui.org/components/invokers.explainer/" rel="noopener">the Open UI explainer describes it</a>, even more so because you can use the <code>command</code> and <code>commandfor</code> invoker commands for popovers too.</p>



<p><strong>There isn’t a</strong> <strong><code>show</code> command</strong> to invoke <code>show()</code> for creating non-modal dialogs. I’ve <a href="https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/#aa-the-dialog-element-dialog">mentioned</a> before that non-modal dialogs are redundant now that we have the Popover API, especially since popovers have <a href="https://css-tricks.com/almanac/pseudo-selectors/b/backdrop/"><code>::backdrop</code>s</a> and other dialog-like features. My bold prediction is that non-modal dialogs will be quietly phased out over time.</p>



<p><strong>The <code>close</code> command</strong> is the HTML-invoked equivalent of JavaScript’s <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/close" rel="noopener"><code>close()</code></a> method used for closing the dialog. You probably could have guessed that based on the name alone!</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;dialog id="dialogA">
  &lt;!-- Close #dialogA -->
  &lt;button command="close" commandfor="dialogA">Close dialogA&lt;/button>
&lt;/dialog></code></pre>


<h3 class="wp-block-heading" id="the-show-popover-hide-popover-and-toggle-popover-values">The <code>show-popover</code>, <code>hide-popover</code>, and <code>toggle-popover</code> values</h3>


<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button command="show-popover" commandfor="id"></code></pre>



<p> &#8230;invokes <code>showPopover()</code>, and is the same thing as:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button popovertargetaction="show" popovertarget="id"></code></pre>



<p>Similarly:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button command="hide-popover" commandfor="id"></code></pre>



<p> &#8230;invokes <code>hidePopover()</code>, and is the same thing as:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button popovertargetaction="hide" popovertarget="id"></code></pre>



<p>Finally:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button command="toggle-popover" commandfor="id"></code></pre>



<p> &#8230;invokes <code>togglePopover()</code>, and is the same thing as:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button popovertargetaction="toggle" popovertarget="id">
&lt;!--  or &lt;button popovertarget="id">, since ‘toggle’ is the default action anyway. --></code></pre>



<p>I know all of this can be tough to organize in your mind’s eye, so perhaps a table will help tie things together:</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th><strong><code>command</code></strong></th><th><strong>Invokes</strong></th><th><code>popovertargetaction</code>&nbsp;equivalent</th></tr></thead><tbody><tr><td><code>show-popover</code></td><td><code>showPopover()</code></td><td><code>show</code></td></tr><tr><td><code>hide-popover</code></td><td><code>hidePopover()</code></td><td><code>hide</code></td></tr><tr><td><code>toggle-popover</code></td><td><code>togglePopover()</code></td><td><code>toggle</code></td></tr></tbody></table></figure>



<p>So… <em>yeah</em>, popovers can already be invoked using HTML attributes, making <code>command</code> and <code>commandfor</code> not all that useful in this context. But like I said, invoker commands also come with some useful JavaScript stuff, so let’s dive into all of that.</p>


<h3 class="wp-block-heading" id="listening-to-commands-with-javascript">Listening to commands with JavaScript</h3>


<p>Invoker commands dispatch a <code>command</code> event to the target whenever their source button is clicked on, which we can listen for and work with in JavaScript. This isn’t required for a <code>&lt;dialog&gt;</code> element’s <code>close</code> event, or a <code>popover</code> attribute’s <code>toggle</code> or <code>beforetoggle</code> event, because we can already listen for those, right?</p>



<p>For example, the Dialog API doesn’t dispatch an event when a <code>&lt;dialog></code> is shown. So, let’s use invoker commands to listen for the <code>command</code> event instead, and then read <code>event.command</code> to take the appropriate action.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select all dialogs
const dialogs = document.querySelectorAll("dialog");

// Loop all dialogs
dialogs.forEach(dialog => {

  // Listen for close (as normal)
  dialog.addEventListener("close", () => {
    // Dialog was closed
  });

  // Listen for command
  dialog.addEventListener("command", event => {

    // If command is show-modal
    if (event.command == "show-modal") {
      // Dialog was shown (modally)
    }

    // Another way to listen for close
    else if (event.command == "close") {
      // Dialog was closed
    }

  });
});</code></pre>



<p>So invoker commands give us additional ways to work with dialogs and popovers, and in some scenarios, they’ll be less verbose. In other scenarios though, they’ll be <em>more</em> verbose. Your approach should depend on what you need your dialogs and popovers to do.</p>



<p>For the sake of completeness, here’s an example for popovers, even though it’s largely the same:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select all popovers
const popovers = document.querySelectorAll("[popover]");

// Loop all popovers
popovers.forEach(popover => {

  // Listen for command
  popover.addEventListener("command", event => {

    // If command is show-popover
    if (event.command == "show-popover") {
      // Popover was shown
    }

    // If command is hide-popover
    else if (event.command == "hide-popover") {
      // Popover was hidden
    }

    // If command is toggle-popover
    else if (event.command == "toggle-popover") {
      // Popover was toggled
    }

  });
});</code></pre>



<p>Being able to listen for <code>show-popover</code> and <code>hide-popover</code> is useful as we otherwise have to write a sort of “if opened, do this, else do that” logic from within a <code>toggle</code> or <code>beforetoggle</code> event listener or <code>toggle-popover</code> conditional. But <code>&lt;dialog&gt;</code> elements? Yeah, those benefit more from the <code>command</code> and <code>commandfor</code> attributes than they do from this <code>command</code> JavaScript event.</p>



<p>Another thing that’s available to us via JavaScript is <code>event.source</code>, which is the button that invokes the <code>popover</code> or <code>&lt;dialog&gt;</code>:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">if (event.command == "toggle-popover") {
  // Toggle the invoker’s class
  event.source.classList.toggle("active");
}</code></pre>



<p>You can also set the <code>command</code> and <code>commandfor</code> attributes using JavaScript:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const button = document.querySelector("button");
const dialog = document.querySelector("dialog");

button.command = "show-modal";
button.commandForElement = dialog; /* Not dialog.id */</code></pre>



<p>…which is only slightly less verbose than:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">button.command = "show-modal";
button.setAttribute("commandfor", dialog.id);</code></pre>


<h3 class="wp-block-heading" id="creating-custom-commands">Creating custom commands</h3>


<p>The <code>command</code> attribute also accepts custom commands prefixed with two dashes (<code>--</code>). I suppose this makes them like CSS custom properties but for JavaScript events and event handler HTML attributes. The latter observation is maybe a bit (or definitely a lot) controversial since <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_—_dont_use_these" rel="noopener">using event handler HTML attributes is considered bad practice</a>. But let’s take a look at that anyway, shall we?</p>



<p>Custom commands look like this:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button command="--spin-me-a-bit" commandfor="record">Spin me a bit&lt;/button>
&lt;button command="--spin-me-a-lot" commandfor="record">Spin me a lot&lt;/button>
&lt;button command="--spin-me-right-round" commandfor="record">Spin me right round&lt;/button></code></pre>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const record = document.querySelector("#record");

record.addEventListener("command", event => {
  if (event.command == "--spin-me-a-bit") {
    record.style.rotate = "90deg";
  } else if (event.command == "--spin-me-a-lot") {
    record.style.rotate = "180deg";
  } else if (event.command == "--spin-me-right-round") {
    record.style.rotate = "360deg";
  }
});</code></pre>



<p><code>event.command</code> must match the string with the dashed (<code>--</code>) prefix.</p>


<h3 class="wp-block-heading" id="are-popover-and-dialog-the-only-features-that-support-invoker-commands-">Are <code>popover</code> and <code>&lt;dialog&gt;</code> the only features that support invoker commands?</h3>


<p><a href="https://open-ui.org/components/invokers.explainer/" rel="noopener">According to Open UI</a>, invokers targeting additional elements such as <code>&lt;details&gt;</code> were deferred from the initial release. I think this is because HTML-invoked dialogs and an API that unifies dialogs and popovers is a must-have, whereas other commands (even custom commands) feel more like a nice-to-have deal.</p>



<p>However, based on experimentation (I couldn’t help myself!) web browsers have actually implemented additional invokers to varying degrees. For example, <code>&lt;details&gt;</code> commands work as expected whereas <code>&lt;select&gt;</code> commands match <code>event.command</code> (e.g., <code>show-picker</code>) but fail to actually invoke the method (<code>showPicker()</code>). I missed all of this at first because <a href="https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API" rel="noopener">MDN only mentions dialog and popover</a>.</p>



<p>Open UI also alludes to commands for <code>&lt;input type="file"&gt;</code>, <code>&lt;input type="number"&gt;</code>, <code>&lt;video&gt;</code>, <code>&lt;audio&gt;</code>, and fullscreen-related methods, but I don’t think that anything is certain at this point.</p>


<h3 class="wp-block-heading" id="so-what-would-be-the-benefits-of-invoker-commands-">So, what would be the benefits of invoker commands?</h3>


<p>Well, a whole lot less JavaScript for one, especially if more invoker commands are implemented over time. Additionally, we can listen for these commands almost as if they were JavaScript events. But if nothing else, invoker commands simply provide more ways to interact with APIs such as the Dialog and Popover APIs. In a nutshell, it seems like a lot of “dotting i’s” and “crossing-t’s” which is never a bad thing.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/invoker-commands-additional-ways-to-work-with-dialog-popover-and-more/">Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


The Popover API and <dialog> element are two of my favorite new platform features. In fact, I recently [wrote a detailed overview of their use cases] and the sorts of things you can do with them, even learning a few tricks in the process that I couldn’t find documented anywhere else.
I’ll admit that one thing that I really dislike about popovers and dialogs is that they could’ve easily been combined into a single API. They cover different use cases (notably, dialogs are typically modal) but are quite similar in practice, and yet their implementations are different.
Well, web browsers are now experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes — command and commandfor — come with some new events that we can listen for.
Invoker commands? I’m sure you have questions, so let’s dive in.



We’re in experimental territory
Before we get into the weeds, we’re dealing with experimental features. To use invoker commands today in November 2024 you’ll need Chrome Canary 134+ with the enable-experimental-web-platform-features flag set to Enabled, Firefox Nightly 135+ with the dom.element.invokers.enabled flag set to true, or Safari Technology Preview with the InvokerAttributesEnabled flag set to true.
I’m optimistic we’ll get baseline coverage for command and commandfor in due time considering how nicely they abstract the kind of work that currently takes a hefty amount of scripting.
Basic command and commandfor usage
First, you’ll need a <button> or a button-esque <input> along the lines of <input type="button"> or <input type="reset">. Next, tack on the command attribute. The command value should be the command name that you want the button to invoke (e.g., show-modal). After that, drop the commandfor attribute in there referencing the dialog or popover you’re targeting by its id.
<button command="show-modal" commandfor="dialogA">Show dialogA</button>

<dialog id="dialogA">...</dialog>
In this example, I have a <button> element with a command attribute set to show-modal and a commandfor attribute set to dialogA, which matches the id of a <dialog> element we’re targeting:
Let’s get into the possible values for these invoker commands and dissect what they’re doing.
Looking closer at the attribute values
CodePen Embed Fallback
The show-modal value is the command that I just showed you in that last example. Specifically, it’s the HTML-invoked equivalent of JavaScript’s showModal() method.
The main benefit is that show-modal enables us to, well… show a modal without reaching directly for JavaScript. Yes, this is almost identical to how HTML-invoked popovers already work with thepopovertarget and popovertargetaction attributes, so it’s cool that the “balance is being redressed” as the Open UI explainer describes it, even more so because you can use the command and commandfor invoker commands for popovers too.
There isn’t a show command to invoke show() for creating non-modal dialogs. I’ve mentioned before that non-modal dialogs are redundant now that we have the Popover API, especially since popovers have ::backdrops and other dialog-like features. My bold prediction is that non-modal dialogs will be quietly phased out over time.
The close command is the HTML-invoked equivalent of JavaScript’s close() method used for closing the dialog. You probably could have guessed that based on the name alone!
<dialog id="dialogA">
  
  <button command="close" commandfor="dialogA">Close dialogA</button>
</dialog>
The show-popover, hide-popover, and toggle-popover values
<button command="show-popover" commandfor="id">
 …invokes showPopover(), and is the same thing as:
<button popovertargetaction="show" popovertarget="id">
Similarly:
<button command="hide-popover" commandfor="id">
 …invokes hidePopover(), and is the same thing as:
<button popovertargetaction="hide" popovertarget="id">
Finally:
<button command="toggle-popover" commandfor="id">
 …invokes togglePopover(), and is the same thing as:
<button popovertargetaction="toggle" popovertarget="id">

I know all of this can be tough to organize in your mind’s eye, so perhaps a table will help tie things together:

commandInvokespopovertargetaction equivalent

show-popovershowPopover()show
hide-popoverhidePopover()hide
toggle-popovertogglePopover()toggle





So… yeah, popovers can already be invoked using HTML attributes, making command and commandfor not all that useful in this context. But like I said, invoker commands also come with some useful JavaScript stuff, so let’s dive into all of that.
Listening to commands with JavaScript
Invoker commands dispatch a command event to the target whenever their source button is clicked on, which we can listen for and work with in JavaScript. This isn’t required for a <dialog> element’s close event, or a popover attribute’s toggle or beforetoggle event, because we can already listen for those, right?
For example, the Dialog API doesn’t dispatch an event when a <dialog> is shown. So, let’s use invoker commands to listen for the command event instead, and then read event.command to take the appropriate action.
// Select all dialogs
const dialogs = document.querySelectorAll("dialog");

// Loop all dialogs
dialogs.forEach(dialog => {

  // Listen for close (as normal)
  dialog.addEventListener("close", () => {
    // Dialog was closed
  });

  // Listen for command
  dialog.addEventListener("command", event => {

    // If command is show-modal
    if (event.command == "show-modal") {
      // Dialog was shown (modally)
    }

    // Another way to listen for close
    else if (event.command == "close") {
      // Dialog was closed
    }

  });
});
So invoker commands give us additional ways to work with dialogs and popovers, and in some scenarios, they’ll be less verbose. In other scenarios though, they’ll be more verbose. Your approach should depend on what you need your dialogs and popovers to do.
For the sake of completeness, here’s an example for popovers, even though it’s largely the same:
// Select all popovers
const popovers = document.querySelectorAll("[popover]");

// Loop all popovers
popovers.forEach(popover => {

  // Listen for command
  popover.addEventListener("command", event => {

    // If command is show-popover
    if (event.command == "show-popover") {
      // Popover was shown
    }

    // If command is hide-popover
    else if (event.command == "hide-popover") {
      // Popover was hidden
    }

    // If command is toggle-popover
    else if (event.command == "toggle-popover") {
      // Popover was toggled
    }

  });
});
Being able to listen for show-popover and hide-popover is useful as we otherwise have to write a sort of “if opened, do this, else do that” logic from within a toggle or beforetoggle event listener or toggle-popover conditional. But <dialog> elements? Yeah, those benefit more from the command and commandfor attributes than they do from this command JavaScript event.
Another thing that’s available to us via JavaScript is event.source, which is the button that invokes the popover or <dialog>:
if (event.command == "toggle-popover") {
  // Toggle the invoker’s class
  event.source.classList.toggle("active");
}
You can also set the command and commandfor attributes using JavaScript:
const button = document.querySelector("button");
const dialog = document.querySelector("dialog");

button.command = "show-modal";
button.commandForElement = dialog; /* Not dialog.id */
…which is only slightly less verbose than:
button.command = "show-modal";
button.setAttribute("commandfor", dialog.id);
Creating custom commands
The command attribute also accepts custom commands prefixed with two dashes (--). I suppose this makes them like CSS custom properties but for JavaScript events and event handler HTML attributes. The latter observation is maybe a bit (or definitely a lot) controversial since using event handler HTML attributes is considered bad practice. But let’s take a look at that anyway, shall we?
Custom commands look like this:
<button command="--spin-me-a-bit" commandfor="record">Spin me a bit</button>
<button command="--spin-me-a-lot" commandfor="record">Spin me a lot</button>
<button command="--spin-me-right-round" commandfor="record">Spin me right round</button>
const record = document.querySelector("#record");

record.addEventListener("command", event => {
  if (event.command == "--spin-me-a-bit") {
    record.style.rotate = "90deg";
  } else if (event.command == "--spin-me-a-lot") {
    record.style.rotate = "180deg";
  } else if (event.command == "--spin-me-right-round") {
    record.style.rotate = "360deg";
  }
});
event.command must match the string with the dashed (--) prefix.
Are popover and <dialog> the only features that support invoker commands?
According to Open UI, invokers targeting additional elements such as <details> were deferred from the initial release. I think this is because HTML-invoked dialogs and an API that unifies dialogs and popovers is a must-have, whereas other commands (even custom commands) feel more like a nice-to-have deal.
However, based on experimentation (I couldn’t help myself!) web browsers have actually implemented additional invokers to varying degrees. For example, <details> commands work as expected whereas <select> commands match event.command (e.g., show-picker) but fail to actually invoke the method (showPicker()). I missed all of this at first because MDN only mentions dialog and popover.
Open UI also alludes to commands for <input type="file">, <input type="number">, <video>, <audio>, and fullscreen-related methods, but I don’t think that anything is certain at this point.
So, what would be the benefits of invoker commands?
Well, a whole lot less JavaScript for one, especially if more invoker commands are implemented over time. Additionally, we can listen for these commands almost as if they were JavaScript events. But if nothing else, invoker commands simply provide more ways to interact with APIs such as the Dialog and Popover APIs. In a nutshell, it seems like a lot of “dotting i’s” and “crossing-t’s” which is never a bad thing.
Invoker Commands: Additional Ways to Work With Dialog, Popover… and More? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.
Invoker Commands: Additional Ways to Work With Dialog, Popover… and More? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?

<p>Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/complete-css-course/">Complete CSS Course</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>Do you subscribe to Piccalilli? <a href="https://piccalil.li/rss/" rel="noopener">You should.</a> If you&#8217;re reading that name for the first time, that would be none other than Andy Bell running the ship and he&#8217;s <a href="https://piccalil.li/blog/redesigning-piccalilli-the-first-part-of-the-design-process" rel="noopener">reimagined the site</a> from the ground-up after <a href="https://piccalil.li/rss/" rel="noopener">coming out of hibernation</a> this year. You&#8217;re likely familiar with <a href="https://css-tricks.com/author/andybell/">Andy&#8217;s great writing here on CSS-Tricks</a>.</p>



<p>Andy is more than a great writer — he&#8217;s a teacher, too. And you&#8217;ll see that in spades next week when his brand-new course <a href="https://piccalil.li/blog/complete-css-launches-on-november-26/" rel="noopener"><strong>Complete CSS</strong> is released one week from today</a> on November 26.</p>



<p>As someone who also <a href="https://thebasics.dev" rel="noopener">runs a front-end course</a>, I can tell you it takes a non-trivial amount of time and effort to put something like Complete CSS together. I&#8217;ve been able to sneak peek at the course and <s>like</s> love how it&#8217;s made for many CSS-Tricks readers — you know CSS and use it regularly but need to ratchet it up from good to <em>great</em>. If my course is for those just getting into CSS, Andy will graduate you from hobbyist to practitioner in Complete CSS. It&#8217;s the perfect next step for narrowing <a href="https://www.smashingmagazine.com/2024/05/in-praise-of-the-basics/" rel="noopener">the ever-growing learning gaps in this industry</a>.</p>



<p>Early bird price is £189 (~$240) which is a steep cut from the full £249 (~$325) price tag.</p>



<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://piccalil.li/complete-css/" rel="noopener">Sign up</a></div>
</div>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/complete-css-course/">Complete CSS Course</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Do you subscribe to Piccalilli? You should. If you’re reading that name for the first time, that would be none other than Andy Bell running the ship and he’s reimagined the site from the ground-up after coming out of hibernation this year. You’re likely familiar with Andy’s great writing here on CSS-Tricks.
Andy is more than a great writer — he’s a teacher, too. And you’ll see that in spades next week when his brand-new course Complete CSS is released one week from today on November 26.
As someone who also runs a front-end course, I can tell you it takes a non-trivial amount of time and effort to put something like Complete CSS together. I’ve been able to sneak peek at the course and like love how it’s made for many CSS-Tricks readers — you know CSS and use it regularly but need to ratchet it up from good to great. If my course is for those just getting into CSS, Andy will graduate you from hobbyist to practitioner in Complete CSS. It’s the perfect next step for narrowing the ever-growing learning gaps in this industry.
Early bird price is £189 (~$240) which is a steep cut from the full £249 (~$325) price tag.
Sign up


Complete CSS Course originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.
Complete CSS Course originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Complete CSS Course

<p>You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: <b>Anchoreum</b>.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/anchoreum-a-new-game-for-learning-anchor-positioning/">Anchoreum: A New Game for Learning Anchor Positioning</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>You&#8217;ve played <a href="https://flexboxfroggy.com" rel="noopener">Flexbox Froggy</a> before, right? Or maybe <a href="https://cssgridgarden.com" rel="noopener">Grid Garden</a>? They&#8217;re both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. I use both games in all of the classes I teach and I never get anything but high-fives from my students because they love them so much.</p>



<p>As widely known as those games are, you may be less familiar with the name of the developer who made them. That would be <a href="https://thomaspark.co" rel="noopener">Thomas Park</a>, and <a href="https://css-tricks.com/author/thomaspark/">he has a couple of CSS-Tricks articles</a> notched in his belt. He also has a horde of other games in his <a href="https://codepip.com" rel="noopener">CodePip collection of free and premium games for learning front-end techniques</a>.</p>



<p>Thomas wrote in to share his latest game with us: <strong><a href="https://anchoreum.com" rel="noopener">Anchoreum</a></strong>.</p>



<span id="more-382469"></span>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" fetchpriority="high" decoding="async" width="2284" height="1580" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=2284%2C1580&#038;ssl=1" alt="Showing level three of 40 in the Anchoreum game. Code is on the left and a live preview of the result is on the right," class="wp-image-382471" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?w=2284&amp;ssl=1 2284w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=300%2C208&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=1024%2C708&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=768%2C531&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=1536%2C1063&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/Screenshot-2024-11-11-at-9.50.21%E2%80%AFAM.png?resize=2048%2C1417&amp;ssl=1 2048w" sizes="(min-width: 735px) 864px, 96vw" /></figure>



<p>I&#8217;ll bet the two nickels in my pocket that you know this game&#8217;s all about CSS Anchor Positioning. I love that Thomas has jumped on this so quickly because the feature is still fresh, and indeed is currently only supported in a couple of browsers at the moment.</p>




<baseline-status class=&quot;wp-block-css-tricks-baseline-status&quot; featureId="anchor-positioning"></baseline-status>



<p>This is the <em>perfect</em> time to learn about anchor positioning. It&#8217;s still relatively early days, but things are baked enough to be supported in Chrome and Edge so you can access the games. If you haven&#8217;t seen <a href="https://css-tricks.com/css-anchor-positioning-guide/">Juan&#8217;s big ol&#8217; guide on anchor positioning</a>, that&#8217;s another dandy way to get up to speed.</p>



<p>The objective is less on-the-nose than Flexbox Froggy and Grid Garden, which both lean heavily into positioning elements to complete game tasks. For example, Flexbox Froggy is about positioning frogs safely on lilypads. Grid Garden wants you to water specific garden areas to feed your carrots. Anchoreum? You&#8217;re in a museum and need to anchor labels to museum artifacts. I know, attaching target elements to the same anchor over and again could get boring. But thankfully the game goes beyond simple positioning by getting into multiple anchors, spanning, and position fallbacks.</p>



<p>Whatever the objective, the repetition is good for developing muscle memory and the overall outcome is still the same: learn CSS Anchor Positioning. I&#8217;m already planning how and where I&#8217;m going to use Anchoreum in my curriculum. It&#8217;s not often we get a fun interactive learning resource like this for such a new web feature and I think it&#8217;s worth jumping on it sooner rather than later.</p>



<p>Thomas prepped a video trailer for the game so I thought I&#8217;d drop that for reference.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="Anchoreum - A free game for learning CSS anchor positioning | Trailer" width="500" height="281" src="https://www.youtube.com/embed/_Ub5Aejoi7Q?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/anchoreum-a-new-game-for-learning-anchor-positioning/">Anchoreum: A New Game for Learning Anchor Positioning</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


You’ve played Flexbox Froggy before, right? Or maybe Grid Garden? They’re both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. I use both games in all of the classes I teach and I never get anything but high-fives from my students because they love them so much.
As widely known as those games are, you may be less familiar with the name of the developer who made them. That would be Thomas Park, and he has a couple of CSS-Tricks articles notched in his belt. He also has a horde of other games in his CodePip collection of free and premium games for learning front-end techniques.
Thomas wrote in to share his latest game with us: Anchoreum.








I’ll bet the two nickels in my pocket that you know this game’s all about CSS Anchor Positioning. I love that Thomas has jumped on this so quickly because the feature is still fresh, and indeed is currently only supported in a couple of browsers at the moment.




This is the perfect time to learn about anchor positioning. It’s still relatively early days, but things are baked enough to be supported in Chrome and Edge so you can access the games. If you haven’t seen Juan’s big ol’ guide on anchor positioning, that’s another dandy way to get up to speed.
The objective is less on-the-nose than Flexbox Froggy and Grid Garden, which both lean heavily into positioning elements to complete game tasks. For example, Flexbox Froggy is about positioning frogs safely on lilypads. Grid Garden wants you to water specific garden areas to feed your carrots. Anchoreum? You’re in a museum and need to anchor labels to museum artifacts. I know, attaching target elements to the same anchor over and again could get boring. But thankfully the game goes beyond simple positioning by getting into multiple anchors, spanning, and position fallbacks.
Whatever the objective, the repetition is good for developing muscle memory and the overall outcome is still the same: learn CSS Anchor Positioning. I’m already planning how and where I’m going to use Anchoreum in my curriculum. It’s not often we get a fun interactive learning resource like this for such a new web feature and I think it’s worth jumping on it sooner rather than later.
Thomas prepped a video trailer for the game so I thought I’d drop that for reference.







Anchoreum: A New Game for Learning Anchor Positioning originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: Anchoreum.
Anchoreum: A New Game for Learning Anchor Positioning originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Anchoreum: A New Game for Learning Anchor Positioning

<p>Another title from A Book Apart has been re-released for free. The latest? Tim Brown's <em>Flexible Typesetting</em>. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it's still on the shelf next to me!) thinking maybe, just maybe, I might be able to hold a conversation about it with Robin when I finished it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/tim-brown-flexible-typesetting-is-now-yours-for-free/">Tim Brown: Flexible Typesetting is now yours, for free</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p><a href="https://css-tricks.com/where-you-can-still-get-a-book-apart-titles/">Another title from A Book Apart</a> has been re-released for free. The latest? Tim Brown&#8217;s <em><a href="https://flexibletypesetting.com" rel="noopener">Flexible Typesetting</a></em>. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it&#8217;s still on the shelf next to me!) thinking maybe, just <em>maybe</em>, I might be able to hold a conversation about it with <a href="https://robinrendle.com" rel="noopener">Robin</a> when I finished it.</p>



<span id="more-382456"></span>



<p>I still think I&#8217;m in &#8220;maybe&#8221; territory but that&#8217;s not Tim&#8217;s fault — I found the book super helpful and approachable for noobs like me who want to up our game. For the sake of it, I&#8217;ll drop the chapter titles here to give you an idea of what you&#8217;ll get.</p>



<ul class="wp-block-list">
<li>What is typsetting?</li>



<li>Preparing text and code (<em>planning is definitely part of the typesetting process</em>)</li>



<li>Selecting typefaces (<em>this one helped me a lot!</em>)</li>



<li>Shaping text blocks (<em>modern CSS can help here</em>)</li>



<li>Crafting compositions (<em>great if you&#8217;re designing for long-form content</em>)</li>



<li>Relieving pressure</li>
</ul>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/tim-brown-flexible-typesetting-is-now-yours-for-free/">Tim Brown: Flexible Typesetting is now yours, for free</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Another title from A Book Apart has been re-released for free. The latest? Tim Brown’s Flexible Typesetting. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it’s still on the shelf next to me!) thinking maybe, just maybe, I might be able to hold a conversation about it with Robin when I finished it.




I still think I’m in “maybe” territory but that’s not Tim’s fault — I found the book super helpful and approachable for noobs like me who want to up our game. For the sake of it, I’ll drop the chapter titles here to give you an idea of what you’ll get.
What is typsetting?
Preparing text and code (planning is definitely part of the typesetting process)
Selecting typefaces (this one helped me a lot!)
Shaping text blocks (modern CSS can help here)
Crafting compositions (great if you’re designing for long-form content)
Relieving pressure
Tim Brown: Flexible Typesetting is now yours, for free originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Another title from A Book Apart has been re-released for free. The latest? Tim Brown's Flexible Typesetting. I may not be the utmost expert on typography and its best practices but I do remember reading this book (it's still on the shelf next to me!) thinking maybe, just maybe, I might be able to hold a conversation about it with Robin when I finished it.
Tim Brown: Flexible Typesetting is now yours, for free originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Tim Brown: Flexible Typesetting is now yours, for free

<p>Let’s spend some time looking at disclosures, the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/the-different-and-modern-ways-to-toggle-content/">The Different (and Modern) Ways to Toggle Content</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Let’s spend some time looking at disclosures, the Dialog API, the Popover API, and more. We’ll look at the right time to use each one depending on your needs. Modal or non-modal? JavaScript or pure HTML/CSS? Not sure? Don’t worry, we’ll go into all that.
The Different (and Modern) Ways to Toggle Content originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The Different (and Modern) Ways to Toggle Content

<p><a href="https://css-tricks.com/state-of-css-2024-results/">The State of CSS 2024 survey</a> wrapped up and <a href="https://css-tricks.com/state-of-css-2024-results/">the results are interesting</a>, as always. Even though each section is worth analyzing, we are usually most hyped about the section on the most used CSS features. And if you &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/">Popping Comments With CSS Anchor Positioning and View-Driven Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p><a href="https://css-tricks.com/state-of-css-2024-results/">The State of CSS 2024 survey</a> wrapped up and <a href="https://css-tricks.com/state-of-css-2024-results/">the results are interesting</a>, as always. Even though each section is worth analyzing, we are usually most hyped about the section on the most used CSS features. And if you are interested in writing about web development (maybe <a href="https://css-tricks.com/guest-writing/">start writing with us</a> &#x1f609;), you will specifically want to check out the feature&#8217;s <a href="https://2024.stateofcss.com/en-US/features/#reading_list" rel="noopener">Reading List</a> section. It holds the features that survey respondents wish to read about after completing the survey and is usually composed of up-and-coming features with low community awareness.</p>



<span id="more-382247"></span>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2080" height="1856" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=2080%2C1856&#038;ssl=1" alt="Reading List Results, showing Anchor Positioning and View Driven Animations at the top 5" class="wp-image-382248" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?w=2080&amp;ssl=1 2080w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=300%2C268&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=1024%2C914&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=768%2C685&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=1536%2C1371&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/reading-list.png?resize=2048%2C1827&amp;ssl=1 2048w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>One of the features I was excited to see was my 2024 top pick: <strong><a href="https://css-tricks.com/css-anchor-positioning-guide/">CSS Anchor Positioning</a></strong>, ranking in the survey&#8217;s Top 4. Just below, you can find <strong><a href="https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/">Scroll-Driven Animations</a></strong>, another amazing feature that gained broad browser support this year. Both are elegant and offer good <a href="https://css-tricks.com/what-is-developer-experience-dx/">DX</a>, but combining them opens up new possibilities that clearly fall into what most of us would have considered JavaScript territory just last year.</p>



<p>I want to show one of those possibilities while learning more about both features. Specifically, we will make the following blog post in which footnotes pop up as comments on the sides of each text.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_oNKqwgy" src="//codepen.io/anon/embed/preview/oNKqwgy?height=450&amp;theme-id=1&amp;slug-hash=oNKqwgy&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed oNKqwgy" title="CodePen Embed oNKqwgy" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>For this demo, our requirements will be:</p>



<ul class="wp-block-list">
<li>Pop the footnotes up when they get into the screen.</li>



<li>Attach them to their corresponding texts.</li>



<li>The footnotes are on the sides of the screen, so we need a mobile fallback.</li>
</ul>


<h3 class="wp-block-heading" id="the-foundation">The Foundation</h3>


<p>To start, we will use the following everyday example of a blog post layout: title, cover image, and body of text:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_RwXMQmY" src="//codepen.io/anon/embed/preview/RwXMQmY?height=450&amp;theme-id=1&amp;slug-hash=RwXMQmY&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed RwXMQmY" title="CodePen Embed RwXMQmY" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>The only thing to notice about the markup is that now and then we have a paragraph with a footnote at the end:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;main class="post">

  &lt;!-- etc. -->

  &lt;p class="note">
    Super intereseting information!
    &lt;span class="footnote"> A footnote about it &lt;/span>
  &lt;/p>
&lt;/main></code></pre>


<h3 class="wp-block-heading" id="positioning-the-footnotes">Positioning the Footnotes</h3>


<p>In that demo, the footnotes are located inside the body of the post just after the text we want to note. However, we want them to be attached as floating bubbles on the side of the text. In the past, we would probably need a mix of absolute and relative positioning along with finding the correct inset properties for each footnote.</p>



<p>However, we can now use anchor positioning for the job, a feature that allows us to position absolute elements relative to other elements — rather than just relative to the containment context it is in. We will be talking about &#8220;anchors&#8221; and &#8220;targets&#8221; for a while, so a little terminology as we get going:</p>



<ul class="wp-block-list">
<li><strong>Anchor: </strong>This is the element used as a reference for positioning other elements, hence the anchor name.</li>



<li><strong>Target:</strong> This is an absolutely-positioned element placed relative to one or more anchors. The target is the name we will use from now on, but you will often find it as just an “absolutely positioned element” in other resources.</li>
</ul>



<p>I won&#8217;t get into each detail, but if you want to learn more about it I highly recommend our <a href="https://css-tricks.com/css-anchor-positioning-guide/">Anchor Positioning Guide</a> for complete information and examples.</p>


<h4 class="wp-block-heading" id="the-anchor-and-target">The Anchor and Target</h4>


<p>It&#8217;s easy to know that each <code>.footnote</code> is a target element. Picking our anchor, however, requires more nuance. While it may look like each .note element should be an anchor element, it&#8217;s better to choose the whole <code>.post</code> as the anchor. Let me explain if we set the <code>.footnote</code> position to absolute:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  position: absolute;
}</code></pre>



<p>You will notice that the <code>.footnote</code> elements on the post are removed from the normal document flow and they hover visually above their <code>.note</code> elements. This is great news! Since they are already aligned on the vertical axis, we just have to move them on the horizontal axis onto the sides using the post as an anchor.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="576" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?resize=1024%2C576&#038;ssl=1" alt="Example of the footnotes inside the posts and where do we want them" class="wp-image-382249" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?resize=1024%2C576&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?resize=300%2C169&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?resize=768%2C432&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?resize=1536%2C864&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/11/example1.png?w=1920&amp;ssl=1 1920w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>This is when we would need to find the correct inset property to place them on the sides. While this is doable, it&#8217;s a painful choice since:</p>



<ol class="wp-block-list">
<li>You would have to rely on a magic number.</li>



<li>It depends on the viewport.</li>



<li>It depends on the footnote&#8217;s content since it changes its width.</li>
</ol>



<p>Elements aren&#8217;t anchors by default, so to register the post as an anchor, we have to use the <a href="https://css-tricks.com/almanac/properties/a/anchor-name/"><code>anchor-name</code></a> property and give it a dashed-ident (a custom name starting with two dashes) as a name.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.post {
  anchor-name: --post;
}</code></pre>



<p>In this case, our target element would be the <code>.footnote</code>. To use a target element, we can keep the absolute positioning and select an anchor element using the <code><a href="https://css-tricks.com/almanac/properties/p/position-anchor/">position-anchor</a></code> property, which takes the anchor&#8217;s dashed ident. This will make <code>.post</code> the default anchor for the target in the following step.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  position: absolute;
  position-anchor: --post;
}</code></pre>


<h4 class="wp-block-heading" id="moving-the-target-around">Moving the Target Around</h4>


<p>Instead of choosing an arbitrary inset value for the <code>.footnote</code>&#8216;s <code>left</code> or <code>right</code> properties, we can use the <a href="https://css-tricks.com/almanac/functions/a/anchor/"><code>anchor()</code></a> function. It returns a <code>&lt;length&gt;</code> value with the position of one side of the anchor, allowing us to always set the target&#8217;s inset properties correctly. So, we can connect the left side of the target to the right side of the anchor and vice versa:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  position: absolute;
  position-anchor: --post;

  /* To place them on the right */
  left: anchor(right);

  /* or to place them on the left*/
  right: anchor(left);

  /* Just one of them at a time! */
}</code></pre>



<p>However, you will notice that it&#8217;s stuck to the side of the post with no space in between. Luckily, the <code><a href="https://css-tricks.com/almanac/properties/m/margin/">margin</a></code> property works just as you are hoping it does with target elements and gives a little space between the footnote target and the post anchor. We can also add a little more styles to make things prettier:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}</code></pre>



<p>Lastly, all our <code>.footnote</code> elements are on the same side of the post, if we want to arrange them one on each side, we can use the <a href="https://css-tricks.com/almanac/pseudo-selectors/n/nth-of-type/"><code>nth-of-type()</code></a> selector to select the <code>even</code> and <code>odd</code> notes and set them on opposite sides.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.note:nth-of-type(odd) .footnote {
  left: anchor(right);
}

.note:nth-of-type(even) .footnote {
  right: anchor(left);
}</code></pre>



<p class="is-style-explanation">We use <a href="https://css-tricks.com/almanac/pseudo-selectors/n/nth-of-type/"><code>nth-of-type()</code></a> instead of <a href="https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/"><code>nth-child</code></a> since we just want to iterate over <code>.note</code> elements and not all the siblings.</p>



<p>Just remember to remove the last inset declaration from <code>.footnote</code>, and <em>tada</em>! We have our footnotes on each side. You will notice I also added a little triangle on each footnote, but that&#8217;s beyond the scope of this post:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_YzmLoNv" src="//codepen.io/anon/embed/preview/YzmLoNv?height=450&amp;theme-id=1&amp;slug-hash=YzmLoNv&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed YzmLoNv" title="CodePen Embed YzmLoNv" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>


<h3 class="wp-block-heading" id="the-view-driven-animation">The View-Driven Animation</h3>


<p>Let&#8217;s get into making the pop-up animation. I find it the easiest part since both view and scroll-driven animation are built to be as intuitive as possible. We will start by registering an animation using an everyday <code>@keyframes</code>. What we want is for our footnotes to start being invisible and slowly become bigger and visible:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@keyframes pop-up {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
  }
}</code></pre>



<p>That&#8217;s our animation, now we just have to add it to each <code>.footnote</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  /* ... */
  animation: pop-up linear;
}</code></pre>



<p>This by itself won&#8217;t do anything. We usually would have set an <a href="https://css-tricks.com/almanac/properties/a/animation/"><code>animation-duration</code></a> for it to start. However, view-driven animations don&#8217;t run through a set time, rather the animation progression will depend on where the element is on the screen. To do so, we set the <code>animation-timeline</code> to <code>view()</code>.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="4"><code markup="tt">.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
}</code></pre>



<p>This makes the animation finish just as the element is leaving the screen. What we want is for it to finish somewhere more readable. The last touch is setting the <code>animation-range</code> to <code>cover 0% cover 40%</code>. This translates to, <em>&#8220;I want the element to start its animation when it&#8217;s 0% in the view and end when it&#8217;s at 40% in the view.&#8221;</em></p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="5"><code markup="tt">.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
  animation-range: cover 0% cover 40%;
}</code></pre>



<p>This amazing tool by Bramus focused on scroll and view-driven animation better shows how <a href="https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=cover&amp;range-start-percentage=0&amp;range-end-name=cover&amp;range-end-percentage=40&amp;view-timeline-axis=block&amp;view-timeline-inset=0&amp;subject-size=smaller&amp;subject-animation=reveal&amp;interactivity=clicktodrag&amp;show-areas=yes&amp;show-fromto=yes&amp;show-labels=yes" rel="noopener">the <code>animation-range</code> property works</a>.</p>


<h3 class="wp-block-heading" id="what-about-mobile-">What About Mobile?</h3>


<p>You may have noticed that this approach to footnotes doesn&#8217;t work on smaller screens since there is no space at the sides of the post. The fix is easy. What we want is for the footnotes to display as normal notes on small screens and as comments on larger screens, we can do that by making our comments only available when the screen is bigger than a certain threshold, which is about <code>1000px</code>. If it isn&#8217;t, then the notes are displayed on the body of the post as any other note you may find on the web.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.footnote {
  display: flex;
  gap: 10px;

  border-radius: 20px;
  padding: 20px;

  background-color: #fce6c2;

  &amp;::before {
    content: "Note:";
    font-weight: 600;
  }
}

@media (width > 1000px) {
  /* Styles */
}</code></pre>



<p>Now our comments should be displayed on the sides only when there is enough space for them:</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_jOgxmJg" src="//codepen.io/anon/embed/preview/jOgxmJg?height=450&amp;theme-id=1&amp;slug-hash=jOgxmJg&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed jOgxmJg" title="CodePen Embed jOgxmJg" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>


<h3 class="wp-block-heading" id="conclusion">Wrapping Up</h3>


<p>If you also like writing about something you are passionate about, you will often find yourself going into random tangents or wanting to add a comment in each paragraph for extra context. At least, that&#8217;s my case, so having a way to dynamically show comments is a great addition. Especially when we achieved using only CSS — in a way that we couldn&#8217;t just a year ago!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/popping-comments-with-css-anchor-positioning-and-view-driven-animations/">Popping Comments With CSS Anchor Positioning and View-Driven Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


The State of CSS 2024 survey wrapped up and the results are interesting, as always. Even though each section is worth analyzing, we are usually most hyped about the section on the most used CSS features. And if you are interested in writing about web development (maybe start writing with us 😉), you will specifically want to check out the feature’s Reading List section. It holds the features that survey respondents wish to read about after completing the survey and is usually composed of up-and-coming features with low community awareness.








One of the features I was excited to see was my 2024 top pick: CSS Anchor Positioning, ranking in the survey’s Top 4. Just below, you can find Scroll-Driven Animations, another amazing feature that gained broad browser support this year. Both are elegant and offer good DX, but combining them opens up new possibilities that clearly fall into what most of us would have considered JavaScript territory just last year.
I want to show one of those possibilities while learning more about both features. Specifically, we will make the following blog post in which footnotes pop up as comments on the sides of each text.
CodePen Embed Fallback
For this demo, our requirements will be:
Pop the footnotes up when they get into the screen.
Attach them to their corresponding texts.
The footnotes are on the sides of the screen, so we need a mobile fallback.
The Foundation
To start, we will use the following everyday example of a blog post layout: title, cover image, and body of text:
CodePen Embed Fallback
The only thing to notice about the markup is that now and then we have a paragraph with a footnote at the end:
<main class="post">

  

  <p class="note">
    Super intereseting information!
    <span class="footnote"> A footnote about it </span>
  </p>
</main>
Positioning the Footnotes
In that demo, the footnotes are located inside the body of the post just after the text we want to note. However, we want them to be attached as floating bubbles on the side of the text. In the past, we would probably need a mix of absolute and relative positioning along with finding the correct inset properties for each footnote.
However, we can now use anchor positioning for the job, a feature that allows us to position absolute elements relative to other elements — rather than just relative to the containment context it is in. We will be talking about “anchors” and “targets” for a while, so a little terminology as we get going:
Anchor: This is the element used as a reference for positioning other elements, hence the anchor name.
Target: This is an absolutely-positioned element placed relative to one or more anchors. The target is the name we will use from now on, but you will often find it as just an “absolutely positioned element” in other resources.
I won’t get into each detail, but if you want to learn more about it I highly recommend our Anchor Positioning Guide for complete information and examples.
The Anchor and Target
It’s easy to know that each .footnote is a target element. Picking our anchor, however, requires more nuance. While it may look like each .note element should be an anchor element, it’s better to choose the whole .post as the anchor. Let me explain if we set the .footnote position to absolute:
.footnote {
  position: absolute;
}
You will notice that the .footnote elements on the post are removed from the normal document flow and they hover visually above their .note elements. This is great news! Since they are already aligned on the vertical axis, we just have to move them on the horizontal axis onto the sides using the post as an anchor.




This is when we would need to find the correct inset property to place them on the sides. While this is doable, it’s a painful choice since:
You would have to rely on a magic number.
It depends on the viewport.
It depends on the footnote’s content since it changes its width.
Elements aren’t anchors by default, so to register the post as an anchor, we have to use the anchor-name property and give it a dashed-ident (a custom name starting with two dashes) as a name.
.post {
  anchor-name: --post;
}
In this case, our target element would be the .footnote. To use a target element, we can keep the absolute positioning and select an anchor element using the position-anchor property, which takes the anchor’s dashed ident. This will make .post the default anchor for the target in the following step.
.footnote {
  position: absolute;
  position-anchor: --post;
}
Moving the Target Around
Instead of choosing an arbitrary inset value for the .footnote‘s left or right properties, we can use the anchor() function. It returns a <length> value with the position of one side of the anchor, allowing us to always set the target’s inset properties correctly. So, we can connect the left side of the target to the right side of the anchor and vice versa:
.footnote {
  position: absolute;
  position-anchor: --post;

  /* To place them on the right */
  left: anchor(right);

  /* or to place them on the left*/
  right: anchor(left);

  /* Just one of them at a time! */
}
However, you will notice that it’s stuck to the side of the post with no space in between. Luckily, the margin property works just as you are hoping it does with target elements and gives a little space between the footnote target and the post anchor. We can also add a little more styles to make things prettier:
.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}
Lastly, all our .footnote elements are on the same side of the post, if we want to arrange them one on each side, we can use the nth-of-type() selector to select the even and odd notes and set them on opposite sides.
.note:nth-of-type(odd) .footnote {
  left: anchor(right);
}

.note:nth-of-type(even) .footnote {
  right: anchor(left);
}
We use nth-of-type() instead of nth-child since we just want to iterate over .note elements and not all the siblings.
Just remember to remove the last inset declaration from .footnote, and tada! We have our footnotes on each side. You will notice I also added a little triangle on each footnote, but that’s beyond the scope of this post:
CodePen Embed Fallback
The View-Driven Animation
Let’s get into making the pop-up animation. I find it the easiest part since both view and scroll-driven animation are built to be as intuitive as possible. We will start by registering an animation using an everyday @keyframes. What we want is for our footnotes to start being invisible and slowly become bigger and visible:
@keyframes pop-up {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
  }
}
That’s our animation, now we just have to add it to each .footnote:
.footnote {
  /* ... */
  animation: pop-up linear;
}
This by itself won’t do anything. We usually would have set an animation-duration for it to start. However, view-driven animations don’t run through a set time, rather the animation progression will depend on where the element is on the screen. To do so, we set the animation-timeline to view().
.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
}
This makes the animation finish just as the element is leaving the screen. What we want is for it to finish somewhere more readable. The last touch is setting the animation-range to cover 0% cover 40%. This translates to, “I want the element to start its animation when it’s 0% in the view and end when it’s at 40% in the view.”
.footnote {
  /* ... */
  animation: pop-up linear;
  animation-timeline: view();
  animation-range: cover 0% cover 40%;
}
This amazing tool by Bramus focused on scroll and view-driven animation better shows how the animation-range property works.
What About Mobile?
You may have noticed that this approach to footnotes doesn’t work on smaller screens since there is no space at the sides of the post. The fix is easy. What we want is for the footnotes to display as normal notes on small screens and as comments on larger screens, we can do that by making our comments only available when the screen is bigger than a certain threshold, which is about 1000px. If it isn’t, then the notes are displayed on the body of the post as any other note you may find on the web.
.footnote {
  display: flex;
  gap: 10px;

  border-radius: 20px;
  padding: 20px;

  background-color: #fce6c2;

  &::before {
    content: "Note:";
    font-weight: 600;
  }
}

@media (width > 1000px) {
  /* Styles */
}
Now our comments should be displayed on the sides only when there is enough space for them:
CodePen Embed Fallback
Wrapping Up
If you also like writing about something you are passionate about, you will often find yourself going into random tangents or wanting to add a comment in each paragraph for extra context. At least, that’s my case, so having a way to dynamically show comments is a great addition. Especially when we achieved using only CSS — in a way that we couldn’t just a year ago!
Popping Comments With CSS Anchor Positioning and View-Driven Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The State of CSS 2024 survey wrapped up and the results are interesting, as always. Even though each section is worth analyzing, we are usually most hyped about the section on the most used CSS features. And if you …
Popping Comments With CSS Anchor Positioning and View-Driven Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Popping Comments With CSS Anchor Positioning and View-Driven Animations

<p>We can apply the concept of fluid typography to almost anything. This way we can have a layout that fluidly changes with the size of its parent container. Few users will ever see the transition, but they will all appreciate the results. Honestly, they will.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/fluid-everything-else/">Fluid Everything Else</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


We all know how to do responsive design, right? We use media queries. Well no, we use container queries now, don’t we? Sometimes we get inventive with flexbox or autoflowing grids. If we’re feeling really adventurous we can reach for fluid typography.
I’m a bit uncomfortable that responsive design is often pushed into discreet chunks, like “layout A up to this size, then layout B until there’s enough space for layout C.” It’s OK, it works and fits into a workflow where screens are designed as static layouts in PhotoFigVa (caveat, I made that up). But the process feels like a compromise to me. I’ve long believed that responsive design should be almost invisible to the user. When they visit my site on a mobile device while waiting in line for K-Pop tickets, they shouldn’t notice that it’s different from just an hour ago, sitting at the huge curved gaming monitor they persuaded their boss they needed.




Consider this simple hero banner and its mobile equivalent. Sorry for the unsophisticated design. The image is AI generated, but It’s the only thing about this article that is.




The meerkat and the text are all positioned and sized differently. The traditional way to pull this off is to have two layouts, selected by a media, sorry, container query. There might be some flexibility in each layout, perhaps centering the content, and a little fluid typography on the font-size, but we’re going to choose a point at which we flip the layout in and out of the stacked version. As a result, there are likely to be widths near the breakpoint where the layout looks either a little empty or a little congested.
Is there another way?
It turns out there is. We can apply the concept of fluid typography to almost anything. This way we can have a layout that fluidly changes with the size of its parent container. Few users will ever see the transition, but they will all appreciate the results. Honestly, they will.
Let’s get this styled up
For the first step, let’s style the layouts individually, a little like we would when using width queries and a breakpoint. In fact, let’s use a container query and a breakpoint together so that we can easily see what properties need to change.
This is the markup for our hero, and it won’t change:
<div id="hero">
  <div class="details">
    <h1>LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>
This is the relevant CSS for the wide version:
#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}
I’ve attached the background image to a ::before pseudo-element so I can use container queries on it (because containers cannot query themselves). We’ll keep this later on so that we can use inline container query (cqi) units. For now, here’s the container query that just shows the values we’re going to make fluid:
@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}
You can see the code running in a live demo — it’s entirely static to show the limitations of a typical approach.
Let’s get fluid
Now we can take those start and end points for the size and position of both the text and background and make them fluid. The text size uses fluid typography in a way you are already familiar with. Here’s the result — I’ll explain the expressions once you’ve looked at the code.
First the changes to the position and size of the text:
/* Line changes
 * -12,27 +12,32
 */
  
.details {
  /* ... lines 14-16 unchanged */
  /* Evaluates to 50px for a 360px wide container, and 220px for 1200px */
  top: clamp(50px, 20.238cqi - 22.857px, 220px);

  /* Evaluates to 20px for a 360px wide container, and 565px for 1200px */
  left: clamp(20px, 64.881cqi - 213.571px, 565px);
  
  /* ... lines 20-25 unchanged */
  h1 {
    /* Evaluates to 3.5rem for a 360px wide container, and 5rem for 1200px */
    font-size: clamp(3.5rem, 2.857rem + 2.857cqi, 5rem);
    /* ... font-weight unchanged */

  }

  p {
    /* Evaluates to 2rem for a 360px wide container, and 2.5rem for 1200px */
    font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
  }
}
And here’s the background position and size for the meerkat image:
/* Line changes
 * -50,3 +55,8
 */

/* Evaluates to -310px for a 360px wide container, and 0px for 1200px */
background-position-x: clamp(-310px, 36.905cqi - 442.857px, 0px);
/* Evaluates to -25px for a 360px wide container, and 0px for 1200px */
background-position-y: clamp(-25px, 2.976cqi);
/* Evaluates to 710px for a 360px wide container, and 589px for 1200px */
background-size: auto clamp(589px, 761.857px - 14.405cqi, 710px);
Now we can drop the container query entirely.
Let’s explain those clamp() expressions. We’ll start with the expression for the top property.
/* Evaluates to 50px for a 360px wide container, and 220px for 1200px */
top: clamp(50px, 20.238cqi - 22.857px, 220px);
You’ll have noticed there’s a comment there. These expressions are a good example of how magic numbers are a bad thing. But we can’t avoid them here, as they are the result of solving some simultaneous equations — which CSS cannot do!
The upper and lower bounds passed to clamp() are clear enough, but the expression in the middle comes from these simultaneous equations:
f + 12v = 220
f + 3.6v = 50
…where f is the number of fixed-size length units (i.e., px) and v is the variable-sized unit (cqi). In the first equation, we are saying that we want the expression to evaluate to 220px when 1cqi is equal to 12px. In the second equation, we’re saying we want 50px when 1cqi is 3.6px, which solves to:
f = -22.857
v = 20.238
…and this tidies up to 20.238cqi – 22.857px in a calc()-friendly expression.
When the fixed unit is different, we must change the size of the variable units accordingly. So for the <h1> element’s font-size we have;
/* Evaluates to 2rem for a 360px wide container, and 2.5rem for 1200px */
font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
This is solving these equations because, at a container width of 1200px, 1cqi is the same as 0.75rem (my rems are relative to the default UA stylesheet, 16px), and at 360px wide, 1cqi is 0.225rem.
f + 0.75v = 2.5
f + 0.225v = 2
This is important to note: The equations are different depending on what unit you are targeting.
Honestly, this is boring math to do every time, so I made a calculator you can use. Not only does it solve the equations for you (to three decimal places to keep your CSS clean) it also provides that helpful comment to use alongside the expression so that you can see where they came from and avoid magic numbers. Feel free to use it. Yes, there are many similar calculators out there, but they concentrate on typography, and so (rightly) fixate on rem units. You could probably port the JavaScript if you’re using a CSS preprocessor.
The clamp() function isn’t strictly necessary at this point. In each case, the bounds of clamp() are set to the values of when the container is either 360px or 1200px wide. Since the container itself is constrained to those limits — by setting min-width and max-width values — the clamp() expression should never invoke either bound. However, I prefer to keep clamp() there in case we ever change our minds (which we are about to do) because implicit bounds like these are difficult to spot and maintain.
Avoiding injury
We could consider our work finished, but we aren’t. The layout still doesn’t quite work. The text passes right over the top of the meerkat’s head. While I have been assured this causes the meerkat no harm, I don’t like the look of it. So, let’s make some changes to make the text avoid hitting the meerkat.
The first is simple. We’ll move the meerkat to the left more quickly so that it gets out of the way. This is done most easily by changing the lower end of the interpolation to a wider container. We’ll set it so that the meerkat is fully left by 450px rather than down to 360px. There’s no reason the start and end points for all of our fluid expressions need to align with the same widths, so we can keep the other expressions fluid down to 360px.
Using my trusty calculator, all we need to do is change the clamp() expressions for the background-position properties:
/* Line changes
 * -55,5 +55,5
 */

/* Evaluates to -310px for a 450px wide container, and 0px for 1200px */
background-position-x: clamp(-310px, 41.333cqi - 496px, 0px);

/* Evaluates to -25px for a 450px wide container, and 0px for 1200px */
background-position-y: clamp(-25px, 3.333cqi - 40px, 0px);
This improves things, but not totally. I don’t want to move it any quicker, so next we’ll look at the path the text takes. At the moment it moves in a straight line, like this:




But can we bend it? Yes, we can.
A Bend in the path
One way we can do this is by defining two different interpolations for the top coordinate that places the line at different angles and then choosing the smallest one. This way, it allows the steeper line to “win” at larger container widths, and the shallower line becomes the value that wins when the container is narrower than about 780px. The result is a line with a bend that misses the meerkat.
All we’re changing is the top value, but we must calculate two intermediate values first:
/* Line changes
 * -18,2 +18,9 @@
 */

/* Evaluates to 220px for a 1200px wide container, and -50px for 360px */
--top-a: calc(32.143cqi - 165.714px);

/* Evaluates to 120px for a 1200px wide container, and 50px for 360px */
--top-b: calc(20px + 8.333cqi);

/* By taking the max, --topA is used at lower widths, with --topB taking over when wider.
We only need to apply clamp when the value is actually used */
top: clamp(50px, max(var(--top-a), var(--top-b)), 220px);
For these values, rather than calculating them formally using a carefully chosen midpoint, I experimented with the endpoints until I got the result I wanted. Experimentation is just as valid as calculation as a way of getting the result you need. In this case, I started with duplicates of the interpolation in custom variables. I could have split the path into explicit sections using a container query, but that doesn’t reduce the math overhead, and using the min() function is cleaner to my eye. Besides, this article isn’t strictly about container queries, is it?
Now the text moves along this path. Open up the live demo to see it in action.



CSS can’t do everything
As a final note on the calculations, it’s worth pointing out that there are restrictions as far as what we can and can’t do. The first, which we have already mitigated a little, is that these interpolations are linear. This means that easing in or out, or other complex behavior, is not possible.
Another major restriction is that CSS can only generate length values this way, so there is no way in pure CSS to apply, for example, opacity or a rotation angle that is fluid based on the container or viewport size. Preprocessors can’t help us here either because the limitation is on the way calc() works in the browser.
Both of these restrictions can be lifted if you’re prepared to rely on a little JavaScript. A few lines to observe the width of the container and set a CSS custom property that is unitless is all that’s needed. I’m going to use that to make the text follow a quadratic Bezier curve, like this:




There’s too much code to list here, and too much math to explain the Bezier curve, but go take a look at it in action in this live demo.
We wouldn’t even need JavaScript if expressions like calc(1vw / 1px) didn’t fail in CSS. There is no reason for them to fail since they represent a ratio between two lengths. Just as there are 2.54cm in 1in, there are 8px in 1vw when the viewport is 800px wide, so calc(1vw / 1px) should evaluate to a unitless 8 value.
They do fail though, so all we can do is state our case and move on.
Fluid everything doesn’t solve all layouts
There will always be some layouts that need size queries, of course; some designs will simply need to snap changes at fixed breakpoints. There is no reason to avoid that if it’s right. There is also no reason to avoid mixing the two, for example, by fluidly sizing and positioning the background while using a query to snap between grid definitions for the text placement. My meerkat example is deliberately contrived to be simple for the sake of demonstration.
One thing I’ll add is that I’m rather excited by the possibility of using the new Anchor Positioning API for fluid positioning. There’s the possibility of using anchor positioning to define how two elements might flow around the screen together, but that’s for another time.


Fluid Everything Else originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

We can apply the concept of fluid typography to almost anything. This way we can have a layout that fluidly changes with the size of its parent container. Few users will ever see the transition, but they will all appreciate the results. Honestly, they will.
Fluid Everything Else originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Fluid Everything Else

<p>Can we recreate a JavaScript library for scrolling animations with a modern CSS approach using CSS Scroll-Driven Animations? Yes. Yes, we can.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations/">Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>We had fun in my <a href="https://css-tricks.com/slide-through-unlimited-dimensions-with-css-scroll-timelines/">previous article</a> exploring the goodness of scrolly animations supported in today’s versions of Chrome and Edge (and behind a feature flag in Firefox <a href="https://caniuse.com/mdn-css_properties_scroll-timeline" rel="noopener">for now</a>). Those are by and large referred to as “scroll-driven” animations. However, “scroll triggering” is something the Chrome team is still working on. It refers to the behavior you might have seen in the wild in which a point of no return activates a complete animation like a trap after our hapless scrolling user ventures past a certain point. You can see JavaScript examples of this on the <a href="https://wowjs.uk/" rel="noopener">Wow.js homepage</a> which assembles itself in a sequence of animated entrances as you scroll down. There is no current official CSS solution for scroll-triggered animations — but Ryan Mulligan has shown how we can make it work by <a href="https://ryanmulligan.dev/blog/scroll-triggered-animations-style-queries/" rel="noopener">cleverly combining</a> the <code>animation-timeline</code> property with <a href="https://css-tricks.com/a-complete-guide-to-custom-properties/">custom properties</a> and <a href="https://css-tricks.com/css-container-queries/#container-queries-properties-amp-values">style queries</a>.</p>



<p>That is a very cool way to combine new CSS features. But I am not done being overly demanding toward the awesome emergent animation timeline technology I didn’t know existed before I read up on it last month. I noticed scroll timelines and view timelines are geared toward animations that play backward when you scroll back up, unlike the Wow.js example where the dogs roll in and then stay. Bramus mentions the same point in his <a href="https://www.bram.us/2023/06/15/scroll-triggered-animations/" rel="noopener">exploration</a> of scroll-triggered animations. <q>The animations run in reverse when scrolling back up. This is not always feasible.</q> As a divorced Dad, I can attest that the Tinder UI is another example of a pattern in which scrolling and swiping can have irreversible consequences.</p>



<span id="more-382156"></span>


<h3 class="wp-block-heading" id="scroll-till-the-cows-come-home-with-moo-css">Scroll till the cows come home with Web-Slinger.css</h3>


<p>Believe it or not, with a small amount of SCSS and no JavaScript, we can build a pure CSS replacement of the Wow.js library, which I hereby christen “Web-Slinger.css.” It feels good to use the scroll-driven optimized standards already supported by <a href="https://caniuse.com/?search=css-scroll-timeline" rel="noopener">some major browsers</a> to make a prototype library. Here’s the finished demo and then we will break down how it works. I have always enjoyed the deliberately lo-fi aesthetic of the original Wow.js page, so it’s nice to have an excuse to create a parody. Much profession, so impress.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_MWNEyOr" src="//codepen.io/anon/embed/preview/MWNEyOr?height=500&amp;theme-id=1&amp;slug-hash=MWNEyOr&amp;default-tab=result" height="500" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed MWNEyOr" title="CodePen Embed MWNEyOr" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>


<h3 class="wp-block-heading" id="teach-scrolling-elements-to-roll-over-and-stay">Teach scrolling elements to roll over and stay</h3>


<p>Web-Slinger.css introduces a set of class names in the format <code>.scroll-trigger-n</code> and <code>.on-scroll-trigger-n</code>. It also defines <code>--scroll-trigger-n</code> custom properties, which are inherited from the document root so we can access them from any CSS class. These conventions are more verbose than Wow.js but also more powerful. The two types of CSS classes decouple the triggers of our one-off animations from the elements they trigger, which means we can animate anything on the page based on the user reaching any scroll marker.</p>



<p>Here’s a basic example that triggers the <a href="https://animate.style/" rel="noopener">A</a><a href="https://animate.style/" rel="noopener">nimate.css</a> animation “flipInY” when the user has scrolled to the <code>&lt;div&gt;</code> marked as <code>.scroll-trigger-8</code>.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="scroll-trigger-8">&lt;/div>
&lt;img 
  class="on-scroll-trigger-8 animate__animated animate__flipInY" 
  src="https://i.imgur.com/wTWuv0U.jpeg"
></code></pre>



<p>A more advanced use is the sticky “Cownter” (trademark pending) at the top of the demo page, which takes advantage of the ability of one trigger to activate an arbitrary number of animations anywhere in the document. The Cownter increments as new cows appear then displays a reset button once we reach the final scroll trigger at the bottom of the page.</p>



<p>Here is the markup for the Cownter:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div class="header">
  &lt;h2 class="cownter">&lt;/h2>
  &lt;div class="animate__animated  animate__backInDown on-scroll-trigger-12">
    &lt;br>
    &lt;a href="#" class="reset">&#x1f501; Play again&lt;/a>
  &lt;/div>
&lt;/div></code></pre>



<p>…and the CSS:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';

    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }
  
  a {
    text-decoration: none;
    color:blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}</code></pre>



<p>The demo CodePen references Web-Slinger.css from a <a href="https://codepen.io/leemeyer/pen/WNVdoNV" rel="noopener">separate CodePen,</a> which I reference in my final demo the <a href="https://blog.codepen.io/documentation/adding-external-resources/" rel="noopener">same way I would an external resource</a>.</p>



<p class="is-style-explanation"><strong>Sidenote:</strong> If you have doubts about the utility of style queries, behold the age-old cow pluralization problem solved in pure CSS.</p>


<h3 class="wp-block-heading" id="how-does-moo-like-to-move-it-">How does Web Slinger like to sling it?</h3>


<p>The secret is based on an iconic thought experiment by the philosopher Friedrich Nietzsche who once asked: <q>If the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view" rel="noopener"><code>view()</code> function</a> lets you style an element once it comes into view, what if you take that opportunity to style it so it can never be scrolled out of view? Would that element not stare back into you for eternity?</q></p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.scroll-trigger {
  animation-timeline: view();
  animation-name: stick-to-the-top;
  animation-fill-mode: both;
  animation-duration: 1ms;
}

@keyframes stick-to-the-top {
  .1%, to {
    position: fixed;
    top: 0;
  }
}</code></pre>



<p>This idea sounded too good to be true, reminiscent of the urge when you meet a genie to ask for unlimited wishes. But it works! The next puzzle piece is how to use this one-way animation technique to control something we’d want to display to the user. Divs that instantly stick to the ceiling as soon as they enter the viewport might have their place on a page discussing the movie <a href="https://en.wikipedia.org/wiki/Xenomorph" rel="noopener"><em>Alien</em></a>, but most of the time this type of animation won’t be something we want the user to see.</p>



<p>That’s where <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline" rel="noopener"><em>named view progress timelines</em></a> come in. The empty scroll trigger element only has the job of sticking to the top of the viewport as soon as it enters. Next, we set the <code>timeline-scope</code> property of the <code>&lt;body&gt;</code> element so that it matches the sticky element’s <code>view-timeline-name</code>. Now we can apply Ryan’s toggle custom property and style query tricks to let each sticky element trigger arbitrary one-off animations anywhere on the page!</p>



<details >
  <summary>
          View CSS code      </summary>
  

<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/** Each trigger element will cause a toggle named with 
  * the convention `--scroll-trigger-n` to be flipped 
  * from 0 to 1, which will unpause the animation on
  * any element with the class .on-scroll-trigger-n
 **/

:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "&lt;integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to {
    --scroll-trigger-1: 1;
  }
}

/** Add this class to arbitrary elements we want 
  * to only animate once `.scroll-trigger-1` has come 
  * into view, default them to paused state otherwise
 **/
.on-scroll-trigger-1 {
  animation-play-state: paused;
}

/** The style query hack will run the animations on
  * the element once the toggle is set to true
 **/
@container style(--scroll-trigger-1: 1) {
  .on-scroll-trigger-1 {
    animation-play-state: running;
  }
}

/** The trigger element which sticks to the top of 
  * the viewport and activates the one-way  animation 
  * that will unpause the animation on the 
  * corresponding element marked with `.on-scroll-trigger-n` 
  **/
.scroll-trigger-1 {
  view-timeline-name: --trigger-timeline-1;
} </code></pre>


</details>

<h3 class="wp-block-heading" id="trigger-warning">Trigger warning</h3>


<p>We generate the genericized Web-Slinger.css in 95 lines of SCSS, which isn’t too bad. The drawback is that the more triggers we need, the larger the compiled CSS file. The numbered CSS classes also aren’t semantic, so it would be great to have native support for linking a scroll-triggered element to its trigger based on IDs, reminiscent of the <a href="https://css-tricks.com/poppin-in/"><code>popovertarget</code></a> <a href="https://css-tricks.com/poppin-in/"></a>attribute for HTML buttons — except this hypothetical attribute would go on each target element and specify the ID of the trigger, which is the opposite of the way <code>popovertarget</code> works.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- This is speculative — do not use -->
&lt;scroll-trigger id="my-scroll-trigger">&lt;/scroll-trigger>
&lt;div class="rollIn" scrolltrigger="my-scroll-trigger">Hello world&lt;/div></code></pre>


<h3 class="wp-block-heading" id="do-androids-dream-of-standardized-scroll-triggers-">Do androids dream of standardized scroll triggers?</h3>


<p>As I mentioned at the start, Bramus has <a href="https://youtu.be/5noL_qFobm0" rel="noopener">teased</a> that scroll-triggered animations are <q>something we’d like to ship in a future version of Chrome, but it still needs a bit of work before we can do that.</q> I’m looking forward to standardized scroll-triggered animations built into the browser. We could do worse than a convention resembling Web-Slinger.css for declaratively defining scroll-triggered animations, but I know I am not objective about Web Slinger as its creator. It’s become a bit of a sacred cow for me so I shall stop milking the topic — for now.</p>



<p>Feel free to reference the prototype Web-Slinger.css library in your experimental CodePens, or fork the library itself if you have better ideas about how scroll-triggered animations could be standardized.</p>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations/">Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


We had fun in my previous article exploring the goodness of scrolly animations supported in today’s versions of Chrome and Edge (and behind a feature flag in Firefox for now). Those are by and large referred to as “scroll-driven” animations. However, “scroll triggering” is something the Chrome team is still working on. It refers to the behavior you might have seen in the wild in which a point of no return activates a complete animation like a trap after our hapless scrolling user ventures past a certain point. You can see JavaScript examples of this on the Wow.js homepage which assembles itself in a sequence of animated entrances as you scroll down. There is no current official CSS solution for scroll-triggered animations — but Ryan Mulligan has shown how we can make it work by cleverly combining the animation-timeline property with custom properties and style queries.
That is a very cool way to combine new CSS features. But I am not done being overly demanding toward the awesome emergent animation timeline technology I didn’t know existed before I read up on it last month. I noticed scroll timelines and view timelines are geared toward animations that play backward when you scroll back up, unlike the Wow.js example where the dogs roll in and then stay. Bramus mentions the same point in his exploration of scroll-triggered animations. The animations run in reverse when scrolling back up. This is not always feasible. As a divorced Dad, I can attest that the Tinder UI is another example of a pattern in which scrolling and swiping can have irreversible consequences.



Scroll till the cows come home with Web-Slinger.css
Believe it or not, with a small amount of SCSS and no JavaScript, we can build a pure CSS replacement of the Wow.js library, which I hereby christen “Web-Slinger.css.” It feels good to use the scroll-driven optimized standards already supported by some major browsers to make a prototype library. Here’s the finished demo and then we will break down how it works. I have always enjoyed the deliberately lo-fi aesthetic of the original Wow.js page, so it’s nice to have an excuse to create a parody. Much profession, so impress.
CodePen Embed Fallback
Teach scrolling elements to roll over and stay
Web-Slinger.css introduces a set of class names in the format .scroll-trigger-n and .on-scroll-trigger-n. It also defines --scroll-trigger-n custom properties, which are inherited from the document root so we can access them from any CSS class. These conventions are more verbose than Wow.js but also more powerful. The two types of CSS classes decouple the triggers of our one-off animations from the elements they trigger, which means we can animate anything on the page based on the user reaching any scroll marker.
Here’s a basic example that triggers the Animate.css animation “flipInY” when the user has scrolled to the <div> marked as .scroll-trigger-8.
<div class="scroll-trigger-8"></div>
<img 
  class="on-scroll-trigger-8 animate__animated animate__flipInY" 
  src="https://i.imgur.com/wTWuv0U.jpeg"
>
A more advanced use is the sticky “Cownter” (trademark pending) at the top of the demo page, which takes advantage of the ability of one trigger to activate an arbitrary number of animations anywhere in the document. The Cownter increments as new cows appear then displays a reset button once we reach the final scroll trigger at the bottom of the page.
Here is the markup for the Cownter:
<div class="header">
  <h2 class="cownter"></h2>
  <div class="animate__animated  animate__backInDown on-scroll-trigger-12">
    <br>
    <a href="#" class="reset">🔁 Play again</a>
  </div>
</div>
…and the CSS:
.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';

    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }
  
  a {
    text-decoration: none;
    color:blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}
The demo CodePen references Web-Slinger.css from a separate CodePen, which I reference in my final demo the same way I would an external resource.
Sidenote: If you have doubts about the utility of style queries, behold the age-old cow pluralization problem solved in pure CSS.
How does Web Slinger like to sling it?
The secret is based on an iconic thought experiment by the philosopher Friedrich Nietzsche who once asked: If the view() function lets you style an element once it comes into view, what if you take that opportunity to style it so it can never be scrolled out of view? Would that element not stare back into you for eternity?
.scroll-trigger {
  animation-timeline: view();
  animation-name: stick-to-the-top;
  animation-fill-mode: both;
  animation-duration: 1ms;
}

@keyframes stick-to-the-top {
  .1%, to {
    position: fixed;
    top: 0;
  }
}
This idea sounded too good to be true, reminiscent of the urge when you meet a genie to ask for unlimited wishes. But it works! The next puzzle piece is how to use this one-way animation technique to control something we’d want to display to the user. Divs that instantly stick to the ceiling as soon as they enter the viewport might have their place on a page discussing the movie Alien, but most of the time this type of animation won’t be something we want the user to see.
That’s where named view progress timelines come in. The empty scroll trigger element only has the job of sticking to the top of the viewport as soon as it enters. Next, we set the timeline-scope property of the <body> element so that it matches the sticky element’s view-timeline-name. Now we can apply Ryan’s toggle custom property and style query tricks to let each sticky element trigger arbitrary one-off animations anywhere on the page!
/** Each trigger element will cause a toggle named with 
  * the convention `--scroll-trigger-n` to be flipped 
  * from 0 to 1, which will unpause the animation on
  * any element with the class .on-scroll-trigger-n
 **/

:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to {
    --scroll-trigger-1: 1;
  }
}

/** Add this class to arbitrary elements we want 
  * to only animate once `.scroll-trigger-1` has come 
  * into view, default them to paused state otherwise
 **/
.on-scroll-trigger-1 {
  animation-play-state: paused;
}

/** The style query hack will run the animations on
  * the element once the toggle is set to true
 **/
@container style(--scroll-trigger-1: 1) {
  .on-scroll-trigger-1 {
    animation-play-state: running;
  }
}

/** The trigger element which sticks to the top of 
  * the viewport and activates the one-way  animation 
  * that will unpause the animation on the 
  * corresponding element marked with `.on-scroll-trigger-n` 
  **/
.scroll-trigger-1 {
  view-timeline-name: --trigger-timeline-1;
} 
Trigger warning
We generate the genericized Web-Slinger.css in 95 lines of SCSS, which isn’t too bad. The drawback is that the more triggers we need, the larger the compiled CSS file. The numbered CSS classes also aren’t semantic, so it would be great to have native support for linking a scroll-triggered element to its trigger based on IDs, reminiscent of the popovertarget attribute for HTML buttons — except this hypothetical attribute would go on each target element and specify the ID of the trigger, which is the opposite of the way popovertarget works.

<scroll-trigger id="my-scroll-trigger"></scroll-trigger>
<div class="rollIn" scrolltrigger="my-scroll-trigger">Hello world</div>
Do androids dream of standardized scroll triggers?
As I mentioned at the start, Bramus has teased that scroll-triggered animations are something we’d like to ship in a future version of Chrome, but it still needs a bit of work before we can do that. I’m looking forward to standardized scroll-triggered animations built into the browser. We could do worse than a convention resembling Web-Slinger.css for declaratively defining scroll-triggered animations, but I know I am not objective about Web Slinger as its creator. It’s become a bit of a sacred cow for me so I shall stop milking the topic — for now.
Feel free to reference the prototype Web-Slinger.css library in your experimental CodePens, or fork the library itself if you have better ideas about how scroll-triggered animations could be standardized.


Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Can we recreate a JavaScript library for scrolling animations with a modern CSS approach using CSS Scroll-Driven Animations? Yes. Yes, we can.
Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations

<p>The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/state-of-css-2024-results/">State of CSS 2024 Results</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p><a href="https://2024.stateofcss.com/en-US/" rel="noopener">They&#8217;re out!</a> Like many of you, I look forward to these coming out each year. I don&#8217;t put much stock in surveys but they can be insightful and give a snapshot of the CSS zeitgeist. There are a few little nuggets in this year&#8217;s results that I find interesting. But before I get there, you&#8217;ll want to also check out what others have already written about it.</p>



<ul class="wp-block-list">
<li>Josh Comeau <a href="https://www.joshwcomeau.com/email/2024-10-22-css-survey/" rel="noopener">digested his takeaways</a> in a recent newsletter.</li>
</ul>



<p>Oh, I guess that&#8217;s it — at least it&#8217;s the most formal write-up I&#8217;ve seen. <a href="https://2024.stateofcss.com/en-US/conclusion/" rel="noopener">There&#8217;s a little summary by Ahmad Shadeed</a> at the end of the survey that generally rounds things up. I&#8217;ll drop in more links as I find &#8217;em.</p>



<p>In no particular order&#8230;</p>



<span id="more-382144"></span>


<h3 class="wp-block-heading" id="demographics">Demographics</h3>


<p>Josh has way more poignant thoughts on this than I do. He rightfully calls out discrepancies in gender pay and regional pay, where men are way more compensated than women (a nonsensical and frustratingly never-ending trend) and the United States boasts more $100,000 salaries than anywhere else. The countries with the highest salaries were also the most represented in survey responses, so perhaps the results are no surprise. We&#8217;re essentially looking at a snapshot of what it&#8217;s like to be a rich, white male developer in the West.</p>



<p>Besides pay, my eye caught the Age Group demographics. As an aging front-ender, <a href="https://geoffgraham.me/aging/" rel="noopener">I often wonder what we all do when we finally get to retirement age</a>. I officially dropped from the most represented age group (30-39, 42%) a few years ago into the third most represented tier (40-49, 21%). Long gone are my days being with the cool kids (20-29, 27%).</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2004" height="806" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?resize=2004%2C806&#038;ssl=1" alt="Bar chart with age results from the state of CSS 2024 survey." class="wp-image-382145" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?w=2004&amp;ssl=1 2004w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?resize=300%2C121&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?resize=1024%2C412&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?resize=768%2C309&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-age.jpg?resize=1536%2C618&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>And if the distribution is true to life, I&#8217;m riding fast into my sunset years and will be only slightly more represented than those getting into the profession. I don&#8217;t know if anyone else feels similarly anxious about aging in this industry — but if you&#8217;re one of the 484 folks who identify with the 50+ age group, I&#8217;d love to talk with you.</p>



<p>Before we plow ahead, I think it&#8217;s worth calling out how relatively &#8220;new&#8221; most people are to front-end development.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2018" height="906" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?resize=2018%2C906&#038;ssl=1" alt="Bar chart with years of experience from the state of CSS 2024 survey." class="wp-image-382148" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?w=2018&amp;ssl=1 2018w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?resize=300%2C135&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?resize=1024%2C460&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?resize=768%2C345&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/css-survey-2024-experience-1.png?resize=1536%2C690&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>Wow! Forty-freaking-four percent of respondents have less than 10 years of experience. Yes, 10 years is a high threshold, but we&#8217;re still talking about a profession that popped up in recent memory. </p>



<p>For perspective, someone developing for 10 years came to the field around 2014. That&#8217;s just when we were getting Flexbox, and several years after the big bang of CSS 3 and HTML 5. That&#8217;s just under <em>half</em> of developers who never had to deal with the headaches of table layouts, clearfix hacks, image sprites, spacer images, and rasterized rounded corners. Ethan Marcotte&#8217;s seminal article on <a href="https://alistapart.com/article/responsive-web-design/" rel="noopener">&#8220;Responsive Web Design&#8221;</a> predates these folks by a whopping four years!</p>



<p>That&#8217;s just wild. And exciting. I&#8217;m a firm believer in <a href="https://www.smashingmagazine.com/2024/02/frequently-heard-beginning-front-end-web-development-class/" rel="noopener">the next generation of front-enders</a> but always hope that they learn from our past mistakes and <a href="https://geoffgraham.me/the-basics-dev/" rel="noopener">become masters at the basics</a>.</p>


<h3 class="wp-block-heading" id="features">Features</h3>


<p>I&#8217;m not entirely sure what to make of this section. When there are so many CSS features, how do you determine which are most widely used? How do you pare it down to just 50 features? Like, are <code>filter</code> effects really the most widely used CSS feature? So many questions, but the results are always interesting nonetheless.</p>



<p>What I find most interesting are the <em>underused</em> features. For example, <code>hanging-punctuation</code> comes in dead last in usage (1.57%) but is the feature that most developers (52%) have on their <a href="https://2024.stateofcss.com/en-US/features/#reading_list" rel="noopener">reading list</a>. (If you need some reading material on it, Chris initially published <a href="https://css-tricks.com/almanac/properties/h/hanging-punctuation/">the Almanac entry for <code>hanging-punctuation</code></a> back in 2013.)</p>



<p>I also see Anchor Positioning at the end of the long tail with reported usage at 4.8%. That&#8217;ll go up for sure now that we have at least one supporting browser engine (Chromium) but also given all of the tutorials that have sprung up in the past few months. Yes, we&#8217;ve contributed to that noise&#8230; but it&#8217;s good noise! I think Juan published what might be <a href="https://css-tricks.com/css-anchor-positioning-guide/">the most thorough and thoughtful guide on the topic</a> yet.</p>



<p>I&#8217;m excited to see Cascade Layers falling smack dab in the middle of the pack at a fairly robust 18.7%. Cascade Layers are super approachable and elegantly designed that I have trouble believing anybody these days when they say that the CSS Cascade is difficult to manage. And even though <code>@scope</code> is currently low on the list (4.8%, same as Anchor Positioning), I&#8217;d bet the crumpled gum wrapper in my pocket that the overall sentiment of working with the Cascade will improve dramatically. We&#8217;ll still see &#8220;CSS is Awesome&#8221; memes galore, but they&#8217;ll be more like old familiar dad jokes in good time.</p>



<p>(Aside: Did you see the <a href="https://github.com/CSS-Next/css-next/issues/105#issuecomment-2445341089" rel="noopener">proposed designs for a new CSS logo</a>? You can vote on them as of yesterday, but <a href="https://css-tricks.com/searching-for-a-new-css-logo/">earlier versions</a> played off the “CSS is Awesome” mean quite beautifully.)</p>



<p>Interestingly enough, viewport units come in at Number 11 with 44.2% usage&#8230; which lands them at <a href="https://2024.stateofcss.com/en-US/layout/" rel="noopener">Number 2 for most experience that developers have with CSS layout</a>. Does that suggest that layout features are less widely used than CSS filters? Again, so many questions.</p>


<h3 class="wp-block-heading" id="frameworks">Frameworks</h3>


<p>How many of you were surprised that Tailwind blew past Bootstrap as <a href="https://2024.stateofcss.com/en-US/tools/" rel="noopener">Top Dog framework</a> in CSS Land? Nobody, right?</p>



<p>More interesting to me is that &#8220;No CSS framework&#8221; clocks in at Number 13 out of 21 list frameworks. Sure, its 46 votes are dwarfed by the 138 for Material UI at Number 10&#8230; but the fact that we&#8217;re seeing &#8220;no framework&#8221; as a ranking option at all would have been unimaginable just three years ago.</p>



<p>The same goes for <a href="https://2024.stateofcss.com/en-US/tools/#pre_post_processors" rel="noopener">CSS pre/post-processing</a>. Sass (67%) and PostCSS (38%) are the power players, but &#8220;None&#8221; comes in third at 19%, ahead of Less, Stylus, and Lightning CSS.</p>



<p>It&#8217;s a real testament to the great work the CSSWG is doing to make CSS better every day. We don&#8217;t thank the CSSWG enough — thank you, team! <strong>Y&#8217;all are heroes around these parts.</strong></p>


<h2 class="wp-block-heading" id="css-usage">CSS Usage</h2>


<p>Josh already has a good take on the fact that only 67% of folks say they test their work on mobile phones. It should be <em>at least</em> tied with the 99% who test on desktops, right? <em>Right?!</em> Who knows, maybe some responses consider things like &#8220;Responsive Design Mode&#8221; desktop features to be the equivalent of testing on real mobile devices. I find it hard to believe that only 67% of us test mobile.</p>



<p>Oh, and <a href="https://css-tricks.com/the-great-divide/">The Great Divide</a> is still alive and well if the results are true and 53% write more JavsScript than CSS in their day-to-day.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="2014" height="960" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?resize=2014%2C960&#038;ssl=1" alt="" class="wp-image-382175" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?w=2014&amp;ssl=1 2014w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?resize=300%2C143&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?resize=1024%2C488&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?resize=768%2C366&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.02.03%E2%80%AFPM.png?resize=1536%2C732&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>


<h3 class="wp-block-heading" id="missing-css-features">Missing CSS Features</h3>


<p><a href="https://css-tricks.com/2019-css-wishlist/">This is always a fun topic to ponder.</a> Some of the most-wanted CSS features have been <a href="https://css-tricks.com/the-2013-css-wishlist/">lurking around 10+ years</a>. But let&#8217;s look at the top three form this year&#8217;s survey:</p>



<ul class="wp-block-list">
<li>Mixins</li>



<li>Conditional Logic</li>



<li>Masonry</li>
</ul>



<p>We&#8217;re in luck team! There&#8217;s movement on all three of those fronts:</p>



<ul class="wp-block-list">
<li>A new&nbsp;<a href="https://drafts.csswg.org/css-mixins/" rel="noopener">CSS Functions and Mixins Module draft</a>&nbsp;was published in late June after the&nbsp;<a href="https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591" rel="noopener">CSSWG resolved to adopt the proposal</a>&nbsp;back in February. (<a href="https://css-tricks.com/css-masonry-css-grid/">Read our notes.</a>)</li>



<li>The CSS Working Group (CSSWG)&nbsp;<a href="https://github.com/w3c/csswg-drafts/issues/10064#issuecomment-2165157958" rel="noopener">resolved to add an&nbsp;<code>if()</code>&nbsp;conditional</a>&nbsp;to the CSS Values Module Level 5 specification. (Read our notes.)</li>



<li>There are competing proposals for how to forge ahead with a CSS-y approach to masonry layouts. One is based on the <a href="https://drafts.csswg.org/css-grid-3/" rel="noopener">CSS Grid Layout Module Level 3 draft specifcation</a> and the other is <a href="https://tabatkins.github.io/specs/css-masonry/" rel="noopener">a fresh new module dedicated to masonry</a>. Apple has <a href="https://webkit.org/blog/16026/css-masonry-syntax/" rel="noopener">planted its flag</a>. So <a href="https://developer.chrome.com/blog/masonry-syntax" rel="noopener">has Chrome</a>. Let the cage-match continue!</li>
</ul>


<h3 class="wp-block-heading" id="resources">Resources</h3>


<p>This is where I get to toot our own horn a bit because CSS-Tricks continues to place first among y&#8217;all when it comes to the blogs you follow for CSS happenings.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1980" height="948" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?resize=1980%2C948&#038;ssl=1" alt="" class="wp-image-382178" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?w=1980&amp;ssl=1 1980w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?resize=300%2C144&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?resize=1024%2C490&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?resize=768%2C368&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-29-at-3.17.40%E2%80%AFPM.png?resize=1536%2C735&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>I&#8217;m also stoked to see Smashing Magazine right there as well. It was fifth in 2023 and I&#8217;d like to think that rise is <a href="https://geoffgraham.me/smashing-magazine/" rel="noopener">due to me joining the team last year</a>. Correlation implies causation, <em>amirite?</em></p>



<p>But look at Kevin Powell and Josh in the Top 10. That&#8217;s just awesome. It speaks volumes about their teaching talents and the hard work they put into &#8220;helping people fall in love with CSS&#8221; as Kevin might say it. I was able to help Kevin with a couple of his videos last year (here&#8217;s <a href="https://www.youtube.com/watch?v=P4oOR4frV_4&amp;feature=youtu.be" rel="noopener">one</a>) and can tell you the guy cares a heckuva lot about making CSS approachable and fun.</p>



<p>Honestly, the rankings are not what we live for. Now that <a href="https://css-tricks.com/css-chronicles-xlii/">I&#8217;ve been given a second wind to work on CSS-Tricks</a>, all I want is to publish things that are valuable to your everyday work as front-enders. That&#8217;s traditionally happened as a stream of daily articles but is shifting to more tutorials and resources, whether it&#8217;s <a href="https://css-tricks.com/guides/">guides</a> (we&#8217;ve published <em>four</em> new ones this year), <a href="https://css-tricks.com/category/notes/">taking notes</a> on interesting developments, spotlighting good work <a href="https://css-tricks.com/category/links/">with links</a>, or <a href="https://css-tricks.com/re-working-the-css-almanac/">expanding the ol&#8217; Almanac</a> to account for things like <a href="https://css-tricks.com/almanac/functions/">functions</a>, <a href="https://css-tricks.com/almanac/rules/">at-rules</a>, and <a href="https://css-tricks.com/almanac/pseudo-selectors/">pseudos</a> (we have lots of work to do).</p>


<h3 class="wp-block-heading" id="my-2024-pick">My 2024 Pick</h3>


<p>No one asked my opinion but I&#8217;ll say it anyway: <strong>Personal blogging.</strong> I&#8217;m seeing more of us in the front-end community getting back behind the keyboards of their personal websites and I&#8217;ve never been subscribed to more RSS feeds than I am today. Some started blogging as a <a href="http://I&#039;m seeing more of us in the front-end community getting back behind the keyboards of their own personal websites.">&#8220;worry stone&#8221;</a> during the 2020 lockdown. Some abandoned socials when  <s>Twitter</s> X imploded. Some got way into the <a href="https://css-tricks.com/de-mystifying-indieweb-on-a-wordpress-site/">IndieWeb</a>. <a href="https://manuelmoreale.com/links-and-webrings" rel="noopener">Webrings </a>and <a href="https://geoffgraham.me/the-cheap-lazy-way-to-display-form-entries-on-the-front-end-of-a-wordpress-site/" rel="noopener">guestbooks</a> are even gaining new life. Sure, it can be <a href="https://manuelmoreale.com/discovering-new-blogs-is-stupid-hard" rel="noopener">tough keeping up</a>, but what a good problem to have! <a href="https://daverupert.com/2018/01/welcome-to-rss-club/" rel="noopener">Let&#8217;s make RSS king once and for all.</a></p>


<h3 class="wp-block-heading" id="thats-a-wrap">That&#8217;s a wrap!</h3>


<p>Seriously, a huge thanks to <a href="https://sachagreif.com" rel="noopener">Sacha Greif</a> and the entire <a href="https://www.devographics.com" rel="noopener">Devographics team</a> for the commitment to putting this survey together every year. It&#8217;s always fun. And the visualizations are always to die for.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/state-of-css-2024-results/">State of CSS 2024 Results</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


They’re out! Like many of you, I look forward to these coming out each year. I don’t put much stock in surveys but they can be insightful and give a snapshot of the CSS zeitgeist. There are a few little nuggets in this year’s results that I find interesting. But before I get there, you’ll want to also check out what others have already written about it.
Josh Comeau digested his takeaways in a recent newsletter.
Oh, I guess that’s it — at least it’s the most formal write-up I’ve seen. There’s a little summary by Ahmad Shadeed at the end of the survey that generally rounds things up. I’ll drop in more links as I find ’em.
In no particular order…



Demographics
Josh has way more poignant thoughts on this than I do. He rightfully calls out discrepancies in gender pay and regional pay, where men are way more compensated than women (a nonsensical and frustratingly never-ending trend) and the United States boasts more $100,000 salaries than anywhere else. The countries with the highest salaries were also the most represented in survey responses, so perhaps the results are no surprise. We’re essentially looking at a snapshot of what it’s like to be a rich, white male developer in the West.
Besides pay, my eye caught the Age Group demographics. As an aging front-ender, I often wonder what we all do when we finally get to retirement age. I officially dropped from the most represented age group (30-39, 42%) a few years ago into the third most represented tier (40-49, 21%). Long gone are my days being with the cool kids (20-29, 27%).




And if the distribution is true to life, I’m riding fast into my sunset years and will be only slightly more represented than those getting into the profession. I don’t know if anyone else feels similarly anxious about aging in this industry — but if you’re one of the 484 folks who identify with the 50+ age group, I’d love to talk with you.
Before we plow ahead, I think it’s worth calling out how relatively “new” most people are to front-end development.




Wow! Forty-freaking-four percent of respondents have less than 10 years of experience. Yes, 10 years is a high threshold, but we’re still talking about a profession that popped up in recent memory. 
For perspective, someone developing for 10 years came to the field around 2014. That’s just when we were getting Flexbox, and several years after the big bang of CSS 3 and HTML 5. That’s just under half of developers who never had to deal with the headaches of table layouts, clearfix hacks, image sprites, spacer images, and rasterized rounded corners. Ethan Marcotte’s seminal article on “Responsive Web Design” predates these folks by a whopping four years!
That’s just wild. And exciting. I’m a firm believer in the next generation of front-enders but always hope that they learn from our past mistakes and become masters at the basics.
Features
I’m not entirely sure what to make of this section. When there are so many CSS features, how do you determine which are most widely used? How do you pare it down to just 50 features? Like, are filter effects really the most widely used CSS feature? So many questions, but the results are always interesting nonetheless.
What I find most interesting are the underused features. For example, hanging-punctuation comes in dead last in usage (1.57%) but is the feature that most developers (52%) have on their reading list. (If you need some reading material on it, Chris initially published the Almanac entry for hanging-punctuation back in 2013.)
I also see Anchor Positioning at the end of the long tail with reported usage at 4.8%. That’ll go up for sure now that we have at least one supporting browser engine (Chromium) but also given all of the tutorials that have sprung up in the past few months. Yes, we’ve contributed to that noise… but it’s good noise! I think Juan published what might be the most thorough and thoughtful guide on the topic yet.
I’m excited to see Cascade Layers falling smack dab in the middle of the pack at a fairly robust 18.7%. Cascade Layers are super approachable and elegantly designed that I have trouble believing anybody these days when they say that the CSS Cascade is difficult to manage. And even though @scope is currently low on the list (4.8%, same as Anchor Positioning), I’d bet the crumpled gum wrapper in my pocket that the overall sentiment of working with the Cascade will improve dramatically. We’ll still see “CSS is Awesome” memes galore, but they’ll be more like old familiar dad jokes in good time.
(Aside: Did you see the proposed designs for a new CSS logo? You can vote on them as of yesterday, but earlier versions played off the “CSS is Awesome” mean quite beautifully.)
Interestingly enough, viewport units come in at Number 11 with 44.2% usage… which lands them at Number 2 for most experience that developers have with CSS layout. Does that suggest that layout features are less widely used than CSS filters? Again, so many questions.
Frameworks
How many of you were surprised that Tailwind blew past Bootstrap as Top Dog framework in CSS Land? Nobody, right?
More interesting to me is that “No CSS framework” clocks in at Number 13 out of 21 list frameworks. Sure, its 46 votes are dwarfed by the 138 for Material UI at Number 10… but the fact that we’re seeing “no framework” as a ranking option at all would have been unimaginable just three years ago.
The same goes for CSS pre/post-processing. Sass (67%) and PostCSS (38%) are the power players, but “None” comes in third at 19%, ahead of Less, Stylus, and Lightning CSS.
It’s a real testament to the great work the CSSWG is doing to make CSS better every day. We don’t thank the CSSWG enough — thank you, team! Y’all are heroes around these parts.
CSS Usage
Josh already has a good take on the fact that only 67% of folks say they test their work on mobile phones. It should be at least tied with the 99% who test on desktops, right? Right?! Who knows, maybe some responses consider things like “Responsive Design Mode” desktop features to be the equivalent of testing on real mobile devices. I find it hard to believe that only 67% of us test mobile.
Oh, and The Great Divide is still alive and well if the results are true and 53% write more JavsScript than CSS in their day-to-day.



Missing CSS Features
This is always a fun topic to ponder. Some of the most-wanted CSS features have been lurking around 10+ years. But let’s look at the top three form this year’s survey:
Mixins
Conditional Logic
Masonry
We’re in luck team! There’s movement on all three of those fronts:
A new CSS Functions and Mixins Module draft was published in late June after the CSSWG resolved to adopt the proposal back in February. (Read our notes.)
The CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. (Read our notes.)
There are competing proposals for how to forge ahead with a CSS-y approach to masonry layouts. One is based on the CSS Grid Layout Module Level 3 draft specifcation and the other is a fresh new module dedicated to masonry. Apple has planted its flag. So has Chrome. Let the cage-match continue!
Resources
This is where I get to toot our own horn a bit because CSS-Tricks continues to place first among y’all when it comes to the blogs you follow for CSS happenings.




I’m also stoked to see Smashing Magazine right there as well. It was fifth in 2023 and I’d like to think that rise is due to me joining the team last year. Correlation implies causation, amirite?
But look at Kevin Powell and Josh in the Top 10. That’s just awesome. It speaks volumes about their teaching talents and the hard work they put into “helping people fall in love with CSS” as Kevin might say it. I was able to help Kevin with a couple of his videos last year (here’s one) and can tell you the guy cares a heckuva lot about making CSS approachable and fun.
Honestly, the rankings are not what we live for. Now that I’ve been given a second wind to work on CSS-Tricks, all I want is to publish things that are valuable to your everyday work as front-enders. That’s traditionally happened as a stream of daily articles but is shifting to more tutorials and resources, whether it’s guides (we’ve published four new ones this year), taking notes on interesting developments, spotlighting good work with links, or expanding the ol’ Almanac to account for things like functions, at-rules, and pseudos (we have lots of work to do).
My 2024 Pick
No one asked my opinion but I’ll say it anyway: Personal blogging. I’m seeing more of us in the front-end community getting back behind the keyboards of their personal websites and I’ve never been subscribed to more RSS feeds than I am today. Some started blogging as a “worry stone” during the 2020 lockdown. Some abandoned socials when  Twitter X imploded. Some got way into the IndieWeb. Webrings and guestbooks are even gaining new life. Sure, it can be tough keeping up, but what a good problem to have! Let’s make RSS king once and for all.
That’s a wrap!
Seriously, a huge thanks to Sacha Greif and the entire Devographics team for the commitment to putting this survey together every year. It’s always fun. And the visualizations are always to die for.
State of CSS 2024 Results originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.
State of CSS 2024 Results originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

State of CSS 2024 Results

<p>What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/tooltip-best-practices/">Tooltip Best Practices</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>In this article, I try to summarize the best practices mentioned by various accessibility experts and their work (like <a href="https://inclusive-components.design/tooltips-toggletips/" rel="noopener">this</a>, <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/" rel="noopener">this</a>, and <a href="https://www.tpgi.com/simple-standalone-toggletip-widget-pattern/" rel="noopener">this</a>) into a single article that&#8217;s easy to read, understand, and apply.</p>



<p>Let&#8217;s begin.</p>



<span id="more-382082"></span>


<h3 class="wp-block-heading" id="what-are-tooltips-">What are tooltips?</h3>


<p>Tooltips are used to provide simple text hints for UI controls. Think of them as tips for tools. They&#8217;re basically little bubbles of text content that pop up when you hover over an unnamed control (like the bell icon in Stripe).</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1005" height="420" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/tooltip.png?resize=1005%2C420&#038;ssl=1" alt="Hovering on top of a bell icon in Stripe's navigation. Clicking the icon triggers a notification displayed underneath it." class="wp-image-382083" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/tooltip.png?w=1005&amp;ssl=1 1005w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/tooltip.png?resize=300%2C125&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/tooltip.png?resize=768%2C321&amp;ssl=1 768w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-element-caption">The &#8220;Notifications&#8221; text that pops up when you hover over Stripe&#8217;s bell icon is a tooltip.</figcaption></figure>



<p>If you prefer more of a formal definition, Sarah Highley provides us with a pretty good one:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>A &#8220;tooltip&#8221; is a non-<a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" rel="noopener">modal</a> (or non-blocking) overlay containing text-only content that provides supplemental information about an existing UI control. It is hidden by default, and becomes available on hover or focus of the control it describes.</p>
</blockquote>



<p>She further goes on to say:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>That definition could even be narrowed down even further by saying tooltips must provide only descriptive text.</p>
</blockquote>



<p><strong>This narrowed definition is basically</strong> (in my experience) <strong>how every accessibility expert defines tooltips:</strong></p>



<ul class="wp-block-list">
<li><a href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/">A tooltip is a popover.</a></li>



<li>Tooltips must not contain interactive content.</li>
</ul>



<p>Heydon Pickering takes things even further, saying: If you&#8217;re thinking of adding interactive content (even an <code>ok</code> button), you should be using <code>dialog</code> instead.</p>



<p>In <a href="https://heydonworks.com/article/your-tooltips-are-bogus#:~:text=You&#039;re%20thinking%20of%20dialogs.%20Use%20a%20dialog." rel="noopener">his</a> words:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>You&#8217;re thinking of dialogs. Use a dialog.</p>
</blockquote>


<h3 class="wp-block-heading" id="two-kinds-of-tooltips">Two kinds of tooltips</h3>


<p>Tooltips are basically only used for two things:</p>



<ol class="wp-block-list">
<li>Labeling an icon</li>



<li>Providing a contextual description of an icon</li>
</ol>



<p>Heydon separates these cleanly into two categories, &#8220;Primary Label&#8221; and &#8220;Auxiliary description&#8221; in his <a href="(https://inclusive-components.design/tooltips-toggletips/">Inclusive Components article on tooltips and toggletips</a>).</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="707" height="324" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/two-kinds.png?resize=707%2C324&#038;ssl=1" alt="Two examples of a bell icon with content displayed beneath them, one as a primary label and one as an auxiliary description." class="wp-image-382084" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/two-kinds.png?w=707&amp;ssl=1 707w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/two-kinds.png?resize=300%2C137&amp;ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>


<h4 class="wp-block-heading" id="labelling">Labeling</h4>


<p>If your tooltip is used to label an icon — using only one or two words — you should use the <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16" rel="noopener"><code>aria-labelledby</code></a> attribute to properly label it since it is attached to nothing else on the page that would help identify it.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button aria-labelledby="notifications"> ... &lt;/button>
&lt;div role="tooltip" id="notifications">Notifications&lt;/div> </code></pre>



<p>You could provide contextual information, like stating the number of notifications, by giving a space-separated list of <code>id</code>s to <code>aria-labelledby</code>.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="719" height="242" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/label-with-context.png?resize=719%2C242&#038;ssl=1" alt="Bell icon with a badge indicating three notifications and a tooltip displayed to the right." class="wp-image-382087" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/label-with-context.png?w=719&amp;ssl=1 719w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/label-with-context.png?resize=300%2C101&amp;ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button aria-labelledby="notifications-count notifications-label">  
  &lt;!-- bell icon here --> 
  &lt;span id="notifications-count">3&lt;/span>
&lt;/button>  

&lt;div role="tooltip" id="notifications-label">Notifications&lt;/div></code></pre>


<h4 class="wp-block-heading" id="providing-contextual-description">Providing contextual description</h4>


<p>If your tooltip provides a contextual description of the icon, you should use <code>aria-describedby</code>. But, when you do this, you also need to provide an accessible name for the icon.</p>



<p>In this case, Heydon recommends including the label as the text content of the button. This label would be hidden visually from sighted users but read for screen readers.</p>



<p>Then, you can add <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1" rel="noopener"><code>aria-describedby</code></a> to include the auxiliary description.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button class="notifications" aria-describedby="notifications-desc">  
  &lt;!-- icon for bell here --> 
  &lt;span id="notifications-count">3&lt;/span> 
  &lt;span class="visually-hidden">Notifications&lt;/span>
&lt;/button>  

&lt;div role="tooltip" id="notifications-desc">View and manage notifications settings&lt;/div> </code></pre>



<p>Here, screen readers would say &#8220;3 notifications&#8221; first, followed by &#8220;view and manage notifications settings&#8221; after a brief pause.</p>


<h3 class="wp-block-heading" id="additional-tooltip-dos-and-don-ts">Additional tooltip dos and don&#8217;ts</h3>


<p>Here are a couple of additional points you should be aware of:</p>



<p><strong>Do:</strong></p>



<ul class="wp-block-list">
<li>Use <code>aria-labellebdy</code> or <code>aria-describedby</code> attributes depending on the type of tooltip you&#8217;re building.</li>



<li>Use the <code>tooltip</code> role even if it <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/#best-practices-summary" rel="noopener">doesn&#8217;t do much in screen readers today</a>, because it may <a href="https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" rel="noopener">extend accessibility support</a> for some software.</li>



<li>Open tooltips on <code>mouseover</code> or <code>focus</code>, and close them on <code>mouseout</code> or <code>blur</code>.</li>



<li>Allow a mouse user to <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21#:~:text=Allow%20a%20mouse%20user%20to%20move%20their%20mouse%20over%20the%20tooltip%20content%20without%20dismissing%20the%20tooltip" rel="noopener">move their mouse over the tooltip content</a> without dismissing the tooltip.</li>



<li>Allow a keyboard user to close the tooltip on the <code>Escape</code> button, per <a href="https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus" rel="noopener">WCAG Success Criterion 1.4.13</a>.</li>
</ul>



<p><strong>Don&#8217;t:</strong></p>



<ul class="wp-block-list">
<li>Don&#8217;t use the <code>title</code> attribute. <a href="https://www.tpgi.com/using-the-html-title-attribute-updated/" rel="noopener">Much has been said about this</a> so I shall not repeat them.</li>



<li>Don&#8217;t use the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup" rel="noopener"><code>aria-haspopup</code></a> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role" rel="noopener"><code>tooltip</code></a> role because <code>aria-haspopup</code> signifies interactive content while <code>tooltip</code> should contain non-interactive content.</li>



<li>Don&#8217;t include essential content inside tooltips because some screen readers may ignore <code>aria-labelledby</code> or <code>aria-describedby</code>. (<a href="https://a11ysupport.io/tests/tech__aria__aria-labelledby-one-ref" rel="noopener">It&#8217;s rare, but possible.</a>)</li>
</ul>


<h3 class="wp-block-heading" id="tooltip-limitations-and-alternatives">Tooltip limitations and alternatives</h3>


<p>Tooltips are inaccessible to most touch devices because:</p>



<ul class="wp-block-list">
<li>users cannot hover over a button on a touch device, and</li>



<li>users cannot focus on a button on a touch device.</li>
</ul>



<p>The best alternative is not to use tooltips, and instead, find a way to include the label or descriptive text in the design.</p>



<p>If the &#8220;tooltip&#8221; contains a lot of content — including interactive content — you may want to display that information with a Toggletip (or just use a <a href="https://css-tricks.com/some-hands-on-with-the-html-dialog-element/"><code>&lt;dialog&gt;</code> element</a>).</p>



<p>Heydon <a href="https://inclusive-components.design/tooltips-toggletips#:~:text=toggletips%20exist%20to%20reveal%20information%20balloons,%20and%20serve%20no%20other%20purpose" rel="noopener">explains toggletips</a> nicely and concisely:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Toggletips exist to reveal information balloons. Often they take the form of little &#8220;i&#8221; icons.</p>
</blockquote>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="693" height="141" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/toggletip.png?resize=693%2C141&#038;ssl=1" alt="Information icon with a message displayed to its right as a notification." class="wp-image-382085" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/toggletip.png?w=693&amp;ssl=1 693w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/toggletip.png?resize=300%2C61&amp;ssl=1 300w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>These informational icons should be wrapped within a <code>&lt;button&gt;</code> element. When opened, screen readers can announce the text contained in it through a <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="noopener">live region</a> with the <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22" rel="noopener"><code>status</code></a> role.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;span class="tooltip-container"> 
  &lt;button type="button" aria-label="more info">i&lt;/button> 
  &lt;span role="status">This clarifies whatever needs clarifying&lt;/span>
&lt;/span></code></pre>



<p>Speaking anymore about toggletips detracts this article from tooltips so I&#8217;ll point you to Heydon&#8217;s <a href="https://inclusive-components.design/tooltips-toggletips/" rel="noopener">&#8220;Tooltips and Toggletips&#8221;</a> article if you&#8217;re interested in chasing this short rabbit hole.</p>



<p>That&#8217;s all you need to know about tooltips and their current best practices!</p>


<h3 class="wp-block-heading" id="further-reading">Further reading</h3>


<ul class="wp-block-list">
<li><a href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/">Clarifying the Relationship Between Popovers and Dialogs</a> (Zell Liew)</li>



<li><a href="https://inclusive-components.design/tooltips-toggletips/" rel="noopener">Tooltips and Toggletips</a> (Inclusive Components)</li>



<li><a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/#best-practices-summary" rel="noopener">Tooltips in the time of WCAG 2.1</a> (Sarah Higley)</li>



<li><a href="https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" rel="noopener">Short note on <code>aria-label</code>, <code>aria-labelledby</code>, and <code>aria-describedby</code></a> (Léonie Watson)</li>



<li><a href="https://css-tricks.com/some-hands-on-with-the-html-dialog-element/">Some Hands-On with the HTML Dialog Element</a> (Chris Coyier)</li>
</ul>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/tooltip-best-practices/">Tooltip Best Practices</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


In this article, I try to summarize the best practices mentioned by various accessibility experts and their work (like this, this, and this) into a single article that’s easy to read, understand, and apply.
Let’s begin.



What are tooltips?
Tooltips are used to provide simple text hints for UI controls. Think of them as tips for tools. They’re basically little bubbles of text content that pop up when you hover over an unnamed control (like the bell icon in Stripe).
The “Notifications” text that pops up when you hover over Stripe’s bell icon is a tooltip.



If you prefer more of a formal definition, Sarah Highley provides us with a pretty good one:
A “tooltip” is a non-modal (or non-blocking) overlay containing text-only content that provides supplemental information about an existing UI control. It is hidden by default, and becomes available on hover or focus of the control it describes.
She further goes on to say:
That definition could even be narrowed down even further by saying tooltips must provide only descriptive text.
This narrowed definition is basically (in my experience) how every accessibility expert defines tooltips:
A tooltip is a popover.
Tooltips must not contain interactive content.
Heydon Pickering takes things even further, saying: If you’re thinking of adding interactive content (even an ok button), you should be using dialog instead.
In his words:
You’re thinking of dialogs. Use a dialog.
Two kinds of tooltips
Tooltips are basically only used for two things:
Labeling an icon
Providing a contextual description of an icon
Heydon separates these cleanly into two categories, “Primary Label” and “Auxiliary description” in his Inclusive Components article on tooltips and toggletips).



Labeling
If your tooltip is used to label an icon — using only one or two words — you should use the aria-labelledby attribute to properly label it since it is attached to nothing else on the page that would help identify it.
<button aria-labelledby="notifications"> ... </button>
<div role="tooltip" id="notifications">Notifications</div> 
You could provide contextual information, like stating the number of notifications, by giving a space-separated list of ids to aria-labelledby.




<button aria-labelledby="notifications-count notifications-label">  
   
  <span id="notifications-count">3</span>
</button>  

<div role="tooltip" id="notifications-label">Notifications</div>
Providing contextual description
If your tooltip provides a contextual description of the icon, you should use aria-describedby. But, when you do this, you also need to provide an accessible name for the icon.
In this case, Heydon recommends including the label as the text content of the button. This label would be hidden visually from sighted users but read for screen readers.
Then, you can add aria-describedby to include the auxiliary description.
<button class="notifications" aria-describedby="notifications-desc">  
   
  <span id="notifications-count">3</span> 
  <span class="visually-hidden">Notifications</span>
</button>  

<div role="tooltip" id="notifications-desc">View and manage notifications settings</div> 
Here, screen readers would say “3 notifications” first, followed by “view and manage notifications settings” after a brief pause.
Additional tooltip dos and don’ts
Here are a couple of additional points you should be aware of:
Do:
Use aria-labellebdy or aria-describedby attributes depending on the type of tooltip you’re building.
Use the tooltip role even if it doesn’t do much in screen readers today, because it may extend accessibility support for some software.
Open tooltips on mouseover or focus, and close them on mouseout or blur.
Allow a mouse user to move their mouse over the tooltip content without dismissing the tooltip.
Allow a keyboard user to close the tooltip on the Escape button, per WCAG Success Criterion 1.4.13.
Don’t:
Don’t use the title attribute. Much has been said about this so I shall not repeat them.
Don’t use the aria-haspopup attribute with the tooltip role because aria-haspopup signifies interactive content while tooltip should contain non-interactive content.
Don’t include essential content inside tooltips because some screen readers may ignore aria-labelledby or aria-describedby. (It’s rare, but possible.)
Tooltip limitations and alternatives
Tooltips are inaccessible to most touch devices because:
users cannot hover over a button on a touch device, and
users cannot focus on a button on a touch device.
The best alternative is not to use tooltips, and instead, find a way to include the label or descriptive text in the design.
If the “tooltip” contains a lot of content — including interactive content — you may want to display that information with a Toggletip (or just use a <dialog> element).
Heydon explains toggletips nicely and concisely:
Toggletips exist to reveal information balloons. Often they take the form of little “i” icons.




These informational icons should be wrapped within a <button> element. When opened, screen readers can announce the text contained in it through a live region with the status role.
<span class="tooltip-container"> 
  <button type="button" aria-label="more info">i</button> 
  <span role="status">This clarifies whatever needs clarifying</span>
</span>
Speaking anymore about toggletips detracts this article from tooltips so I’ll point you to Heydon’s “Tooltips and Toggletips” article if you’re interested in chasing this short rabbit hole.
That’s all you need to know about tooltips and their current best practices!
Further reading
Clarifying the Relationship Between Popovers and Dialogs (Zell Liew)
Tooltips and Toggletips (Inclusive Components)
Tooltips in the time of WCAG 2.1 (Sarah Higley)
Short note on aria-label, aria-labelledby, and aria-describedby (Léonie Watson)
Some Hands-On with the HTML Dialog Element (Chris Coyier)
Tooltip Best Practices originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.
Tooltip Best Practices originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Tooltip Best Practices

<p>Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/come-to-the-light-dark-side/">Come to the light-dark() Side</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Dark mode interfaces have matured a lot in the past few years. We all know the "traditional" approach using media queries but in this article, Sara Joy demonstrates modern CSS features that make respecting user color scheme preferences pretty darn easy.
Come to the light-dark() Side originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Come to the light-dark() Side

<p>Imagine a scenario where you need to split a layout in half. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container. Like many things in CSS, there are a number of ways to go about this.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/left-and-right/">Left Half and Right Half Layout &#8211; Many Different Ways</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p class="is-style-default">A whole bunch of years ago, we <a href="https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/">posted on this idea</a> here on CSS-Tricks. We figured it was time to update that and do the subject justice.</p>



<p>Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, there are a number of ways to go about this and we&#8217;re going to go over many of them right now!</p>



<p class="is-style-explanation"><strong>Update (Oct. 25, 2024):</strong> <a href="#aa-css-anchor-positioning">Added an example</a> that uses <a href="https://css-tricks.com/css-anchor-positioning-guide/">CSS Anchor Positioning</a>.</p>



<span id="more-198099"></span>


<h3 class="wp-block-heading" id="using-background-gradient">Using Background Gradient</h3>


<p>One simple way we can create the appearance of a changing background is to use gradients. Half of the background is set to one color and the other half another color. Rather than fade from one color to another, a zero-space color stop is set in the middle.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}</code></pre>



<p>This works with a single container element. However, that also means that it will take working with floats or possibly some other layout method if content needs to fill both sides of the container.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_wBQPMv" src="//codepen.io/anon/embed/wBQPMv?height=450&amp;theme-id=1&amp;slug-hash=wBQPMv&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed wBQPMv" title="CodePen Embed wBQPMv" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>


<h3 class="wp-block-heading" id="using-absolute-positioning">Using Absolute Positioning</h3>


<p>Another route might be to set up two containers inside of a parent container, position them absolutely, split them up in halves using percentages, then apply the backgrounds. The benefit here is that now we have two separate containers that can hold their own content.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ZYmaQe" src="//codepen.io/anon/embed/ZYmaQe?height=450&amp;theme-id=1&amp;slug-hash=ZYmaQe&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ZYmaQe" title="CodePen Embed ZYmaQe" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>Absolute positioning is sometimes a perfect solution, and sometimes untenable. The parent container here will need to have a set height, and setting heights is often bad news for content (content changes!). Not to mention absolute positioned elements are out of the document flow. So it would be hard to get this to work while, say, pushing down other content below it.</p>


<h3 class="wp-block-heading" id="using-fake-tables">Using (fake) Tables</h3>


<p>Yeah, yeah, tables are so old school (not to mention fraught with accessibility issues and layout inflexibility). Well, using the <code>display: table-cell;</code> property can actually be a handy way to create this layout without writing table markup in HTML. In short, we turn our semantic parent container into a table, then the child containers into cells inside the table — all in CSS!</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_PwxONM" src="//codepen.io/anon/embed/PwxONM?height=450&amp;theme-id=1&amp;slug-hash=PwxONM&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed PwxONM" title="CodePen Embed PwxONM" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>You could even change the display properties at breakpoints pretty easily here, making the sides stack on smaller screens. <code>display: table;</code> (<a href="https://css-tricks.com/almanac/properties/d/display/#display-table">and friends</a>) is supported as far back as IE 8 and even old Android, so it&#8217;s pretty safe!</p>


<h3 class="wp-block-heading" id="using-floats">Using Floats</h3>


<p>We can use our good friend the <code><a href="https://css-tricks.com/almanac/properties/f/float/">float</a></code> to arrange the containers beside each other. The benefit here is that it avoids absolute positioning (which as we noted, can be messy).</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ZYmapK" src="//codepen.io/anon/embed/ZYmapK?height=450&amp;theme-id=1&amp;slug-hash=ZYmapK&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ZYmapK" title="CodePen Embed ZYmapK" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>In this example, we&#8217;re explicitly setting heights to get them to be even. But you don&#8217;t really get that ability with floats by default. You could use the background gradient trick we already covered so they just <em>look</em> even. Or look at <a href="http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/" rel="noopener">fancy negative margin tricks</a> and the like.</p>



<p>Also, remember you may need to <a href="https://css-tricks.com/snippets/css/clear-fix/">clear the floats</a> on the parent element to keep the document flow happy.</p>


<h3 class="wp-block-heading" id="using-inlineblock">Using Inline-Block</h3>


<p>If clearing elements after floats seems like a burden, then using <code>display: inline-block</code> is another option. The trick here is to make sure that the elements for the individual sides have no breaks or whitespace in between them in the HTML. Otherwise, that space will be rendered as a literal space and the second half will break and fall.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_ZYmaBy" src="//codepen.io/anon/embed/ZYmaBy?height=450&amp;theme-id=1&amp;slug-hash=ZYmaBy&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed ZYmaBy" title="CodePen Embed ZYmaBy" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>Again there is nothing about inline-block that helps us equalize the heights of the sides, so you&#8217;ll have to be explicit about that.</p>



<p>There are also <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">other potential ways</a> to deal with that spacing problem described above.</p>


<h3 class="wp-block-heading" id="using-flexbox">Using Flexbox</h3>


<p><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a> is a pretty fantastic way to do this, just note that it&#8217;s limited to IE 10 and up and you may need to <a href="https://css-tricks.com/using-flexbox/">get fancy with the prefixes and values</a> to get the best support.</p>



<p>Using this method, we turn our parent container into a flexible box with the child containers taking up an equal share of the space. No need to set widths or heights! Flexbox just knows what to do, because the defaults are set up perfectly for this. For instance, <code>flex-direction: row;</code> and <code>align-items: stretch;</code> is what we&#8217;re after, but those are the defaults so we don&#8217;t have to set them. To make sure they are even though, setting <code>flex: 1;</code> on the sides is a good plan. That forces them to take up equal shares of the space.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_zxMPNp" src="//codepen.io/anon/embed/zxMPNp?height=450&amp;theme-id=1&amp;slug-hash=zxMPNp&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed zxMPNp" title="CodePen Embed zxMPNp" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>In this demo we&#8217;re making the side flex containers as well, just for fun, to handle the vertical and horizontal centering.</p>


<h3 class="wp-block-heading" id="using-grid-layout">Using Grid Layout</h3>


<p>For those living on the bleeding edge, the <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS Grid Layout</a> technique is like the Flexbox and Table methods merged into one. In other words, a container is defined, then split into columns and cells which can be filled flexibly with child elements.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_emQevE" src="//codepen.io/anon/embed/emQevE?height=450&amp;theme-id=1&amp;slug-hash=emQevE&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed emQevE" title="CodePen Embed emQevE" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>


<h3 class="wp-block-heading" id="css-anchor-positioning">CSS Anchor Positioning</h3>


<p>This started rolling out in 2024 and we&#8217;re still waiting for full browser support. But we can use <a href="https://css-tricks.com/css-anchor-positioning-guide/">CSS Anchor Positioning</a> to &#8220;attach&#8221; one element to another — even if those two elements are completely unrelated in the markup.</p>



<p>The idea is that we have one element that&#8217;s registered as an &#8220;anchor&#8221; and another element that&#8217;s the &#8220;target&#8221; of that anchor. It&#8217;s like the target element is pinned to the anchor. And we get to control where we pin it!</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}</code></pre>



<p>This sets up an <code>.anchor</code> and establishes a relationship with a <code>.target</code> element. From here, we can tell the target which side of the anchor it should pin to.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}</code></pre>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_BaXJBZB" src="//codepen.io/anon/embed/BaXJBZB?height=450&amp;theme-id=1&amp;slug-hash=BaXJBZB&amp;default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed BaXJBZB" title="CodePen Embed BaXJBZB" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>



<p>Isn&#8217;t it cool how many ways there are to do things in CSS?</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/left-and-right/">Left Half and Right Half Layout &#8211; Many Different Ways</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was time to update that and do the subject justice.
Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container, creating a distinct break between one. Like many things in CSS, there are a number of ways to go about this and we’re going to go over many of them right now!
Update (Oct. 25, 2024): Added an example that uses CSS Anchor Positioning.



Using Background Gradient
One simple way we can create the appearance of a changing background is to use gradients. Half of the background is set to one color and the other half another color. Rather than fade from one color to another, a zero-space color stop is set in the middle.
.container {
  background: linear-gradient(
    to right, 
    #ff9e2c 0%, 
    #ff9e2c 50%, 
    #b6701e 50%, 
    #b6701e 100%
  );
}
This works with a single container element. However, that also means that it will take working with floats or possibly some other layout method if content needs to fill both sides of the container.
CodePen Embed Fallback
Using Absolute Positioning
Another route might be to set up two containers inside of a parent container, position them absolutely, split them up in halves using percentages, then apply the backgrounds. The benefit here is that now we have two separate containers that can hold their own content.
CodePen Embed Fallback
Absolute positioning is sometimes a perfect solution, and sometimes untenable. The parent container here will need to have a set height, and setting heights is often bad news for content (content changes!). Not to mention absolute positioned elements are out of the document flow. So it would be hard to get this to work while, say, pushing down other content below it.
Using (fake) Tables
Yeah, yeah, tables are so old school (not to mention fraught with accessibility issues and layout inflexibility). Well, using the display: table-cell; property can actually be a handy way to create this layout without writing table markup in HTML. In short, we turn our semantic parent container into a table, then the child containers into cells inside the table — all in CSS!
CodePen Embed Fallback
You could even change the display properties at breakpoints pretty easily here, making the sides stack on smaller screens. display: table; (and friends) is supported as far back as IE 8 and even old Android, so it’s pretty safe!
Using Floats
We can use our good friend the float to arrange the containers beside each other. The benefit here is that it avoids absolute positioning (which as we noted, can be messy).
CodePen Embed Fallback
In this example, we’re explicitly setting heights to get them to be even. But you don’t really get that ability with floats by default. You could use the background gradient trick we already covered so they just look even. Or look at fancy negative margin tricks and the like.
Also, remember you may need to clear the floats on the parent element to keep the document flow happy.
Using Inline-Block
If clearing elements after floats seems like a burden, then using display: inline-block is another option. The trick here is to make sure that the elements for the individual sides have no breaks or whitespace in between them in the HTML. Otherwise, that space will be rendered as a literal space and the second half will break and fall.
CodePen Embed Fallback
Again there is nothing about inline-block that helps us equalize the heights of the sides, so you’ll have to be explicit about that.
There are also other potential ways to deal with that spacing problem described above.
Using Flexbox
Flexbox is a pretty fantastic way to do this, just note that it’s limited to IE 10 and up and you may need to get fancy with the prefixes and values to get the best support.
Using this method, we turn our parent container into a flexible box with the child containers taking up an equal share of the space. No need to set widths or heights! Flexbox just knows what to do, because the defaults are set up perfectly for this. For instance, flex-direction: row; and align-items: stretch; is what we’re after, but those are the defaults so we don’t have to set them. To make sure they are even though, setting flex: 1; on the sides is a good plan. That forces them to take up equal shares of the space.
CodePen Embed Fallback
In this demo we’re making the side flex containers as well, just for fun, to handle the vertical and horizontal centering.
Using Grid Layout
For those living on the bleeding edge, the CSS Grid Layout technique is like the Flexbox and Table methods merged into one. In other words, a container is defined, then split into columns and cells which can be filled flexibly with child elements.
CodePen Embed Fallback
CSS Anchor Positioning
This started rolling out in 2024 and we’re still waiting for full browser support. But we can use CSS Anchor Positioning to “attach” one element to another — even if those two elements are completely unrelated in the markup.
The idea is that we have one element that’s registered as an “anchor” and another element that’s the “target” of that anchor. It’s like the target element is pinned to the anchor. And we get to control where we pin it!
.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
}
This sets up an .anchor and establishes a relationship with a .target element. From here, we can tell the target which side of the anchor it should pin to.
.anchor {
  anchor-name: --anchor;
}

.target {
  anchor-position: --anchor;
  position: absolute; /* required */
  left: anchor(right);
}
CodePen Embed Fallback
Isn’t it cool how many ways there are to do things in CSS?
Left Half and Right Half Layout – Many Different Ways originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Imagine a scenario where you need to split a layout in half. Basically two equal height columns are needed inside of a container. Each side takes up exactly half of the container. Like many things in CSS, there are a number of ways to go about this.
Left Half and Right Half Layout – Many Different Ways originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Left Half and Right Half Layout – Many Different Ways

<p>The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/you-can-use-text-wrap-balance-on-icons/">You can use text-wrap: balance; on icons</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>Terence Eden on using <code>text-wrap: balance</code> for more than headings:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>But the name is, I think, slightly misleading. It doesn&#8217;t <em>only</em> work on text. It will work on <em>any</em> content. For example &#8211; I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next line. That can look a bit weird.</p>
</blockquote>



<span id="more-382065"></span>



<p><em>Heck yeah.</em> I may have reached for some sort of <a href="https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/">auto-fitting grid approach</a>, but hey, may as well go with a one-liner if you can! And while we&#8217;re on the topic, I just wanna mention that, yes, <code>text-wrap: balance</code> will work on <em>any</em> content. — just know that <a href="https://www.w3.org/TR/css-text-4/#:~:text=the%20balance%20value%20is%20intended%20for%20titles%20and%20captions" rel="noopener">the spec is a little opinionated on this</a> and make sure that the content is <a href="https://www.w3.org/TR/css-text-4/#:~:text=5%20or%20fewer%20lines" rel="noopener">fewer than five lines</a>.</p>



<p>There&#8217;s likely more nuance to come if the note for Issue 6 in the spec is any indication about <a href="https://www.w3.org/mid/0BD85DFF-A147-44EF-B18A-FF03C3D67EF0@verou.me" rel="noopener">possibly allowing for a line length minimum</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Suggestion for value space is <code>match-indent</code> | <code>&lt;length></code> | <code>&lt;percentage></code> (with Xch given as an example to make that use case clear). Alternately <a href="https://www.w3.org/TR/css-values-4/#integer-value" rel="noopener"><code>&lt;integer></code></a> could actually count the characters.</p>
</blockquote>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/you-can-use-text-wrap-balance-on-icons/">You can use text-wrap: balance; on icons</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Terence Eden on using text-wrap: balance for more than headings:
But the name is, I think, slightly misleading. It doesn’t only work on text. It will work on any content. For example – I have a row of icons at the bottom of this page. If the viewport is too narrow, a single icon might drop to the next line. That can look a bit weird.




Heck yeah. I may have reached for some sort of auto-fitting grid approach, but hey, may as well go with a one-liner if you can! And while we’re on the topic, I just wanna mention that, yes, text-wrap: balance will work on any content. — just know that the spec is a little opinionated on this and make sure that the content is fewer than five lines.
There’s likely more nuance to come if the note for Issue 6 in the spec is any indication about possibly allowing for a line length minimum:
Suggestion for value space is match-indent | <length> | <percentage> (with Xch given as an example to make that use case clear). Alternately <integer> could actually count the characters.


You can use text-wrap: balance; on icons originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.
You can use text-wrap: balance; on icons originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

You can use text-wrap: balance; on icons

<p>Pop quiz! What's the difference between a Popover element and a Dialog element? The answer is not all that clear and is widely misunderstood, but Zell has a clear way to explain it so that you know which element to reach for in your work.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/">Clarifying the Relationship Between Popovers and Dialogs</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>The difference between <strong>Popovers</strong> (i.e., the <code>popover</code> attribute) and <strong>Dialogs</strong> (i.e., both the <code>&lt;dialog></code> element and the <code>dialog</code> accessible role) is incredibly confusing — so much that many articles (like <a href="https://blog.logrocket.com/comparing-popover-api-dialog-element/" rel="noopener">this</a>, <a href="https://levelup.gitconnected.com/dialogs-vs-popovers-understanding-the-key-differences-8919d5be0fcc" rel="noopener">this</a>, and <a href="https://hidde.blog/dialog-modal-popover-differences/" rel="noopener">this</a>) have tried to shed some light on the issue.</p>



<p>If you&#8217;re still feeling confused, I hope this one clears up that confusion once and for all.</p>



<span id="more-382008"></span>


<h3 class="wp-block-heading" id="the-relationship-between-popovers-and-dialogs">Distinguishing Popovers From Dialogs</h3>


<p>Let&#8217;s pull back on the technical implementations and consider the greater picture that makes more sense and puts everything into perspective.</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="997" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/popover-accessible-roles.jpg?resize=1024%2C997&#038;ssl=1" alt="Line diagram connecting the popover attribute to six types of accessible roles, including dialog." class="wp-image-382021" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/popover-accessible-roles.jpg?resize=1024%2C997&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/popover-accessible-roles.jpg?resize=300%2C292&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/popover-accessible-roles.jpg?resize=768%2C748&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/popover-accessible-roles.jpg?w=1167&amp;ssl=1 1167w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>The reason for this categorization comes from a couple of noteworthy points.</p>



<p>First, we know that a <code>popover</code> is content that &#8220;pops&#8221; up when a user clicks a button (or hovers over it, or focuses on it). In the <a href="https://www.w3.org/WAI/standards-guidelines/aria/" rel="noopener">ARIA</a> world, there is a useful attribute called <a href="https://www.w3.org/TR/wai-aria-1.2/#aria-haspopup" rel="noopener"><code>aria-haspopup</code></a> that categorizes such popups into five different <code>role</code>s:</p>



<ul class="wp-block-list">
<li><code>menu</code></li>



<li><code>listbox</code></li>



<li><code>tree</code></li>



<li><code>grid</code></li>



<li><code>dialog</code></li>
</ul>



<p class="is-style-explanation">Strictly speaking, there&#8217;s a sixth value, <code>true</code>, that evaluates to <code>menu</code>. I didn&#8217;t include it above since it&#8217;s effectively just <code>menu</code>.</p>



<p>By virtue of <code>dialog</code> being on this list, <strong>we already know that <code>dialog</code> is a type of popover</strong>. But there&#8217;s more evidence behind this too.</p>


<h3 class="wp-block-heading" id="further-expansion-on-dialog">The Three Types of Dialogues</h3>


<p>Since we&#8217;re already talking about the <code>dialog</code> role, let&#8217;s further expand that into its subcategories:</p>



<figure class="wp-block-image size-large"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="709" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?resize=1024%2C709&#038;ssl=1" alt="Lone diagram connecting the popover attribute to six accessible roles, including dialog, which is broken out into three categories." class="wp-image-382017" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?resize=1024%2C709&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?resize=300%2C208&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?resize=768%2C532&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?resize=1536%2C1063&amp;ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2024/10/Screenshot-2024-10-22-at-8.56.04%E2%80%AFAM.png?w=1748&amp;ssl=1 1748w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>Dialogs can be categorized into three main kinds:</p>



<ul class="wp-block-list">
<li><strong>Modal</strong>: A dialog with an overlay and focus trapping</li>



<li><strong>Non-Modal</strong>: A dialog with neither an overlay nor focus trapping</li>



<li><strong>Alert Dialog</strong>: A dialog that alerts screen readers when shown. It can be either modal or non-modal.</li>
</ul>



<p>This brings us to another reason why <strong>a dialog is considered a popover</strong>.</p>



<p>Some people may say that popovers are strictly non-modal, but this seems to be a major misunderstanding — because popovers have a <a href="https://css-tricks.com/almanac/pseudo-selectors/b/backdrop/"><code>::backdrop</code></a> pseudo-element on the top layer. <strong>The presence of <code>::backdrop</code> indicates that popovers are modal.</strong> Quoting the <a href="https://css-tricks.com/almanac/pseudo-selectors/b/backdrop/">CSS-Tricks almanac</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>The <code>::backdrop</code> CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <code>&lt;dialog&gt;</code>, an element with the <code>popup</code> attribute, or any element that enters fullscreen mode using the Fullscreen API.</p>
</blockquote>



<p>That said, I don&#8217;t recommend using the Popover API for modality because it doesn&#8217;t have a <code>showModal()</code> method (that <code>&lt;dialog&gt;</code> has) that creates inertness, focus trapping, and other necessary features to make it a real modal. If you only use the Popover API, you&#8217;ll need to build those features from scratch.</p>



<p>So, the fact that popovers can be modal means that <strong>a <code>dialog</code> is simply one kind of <code>popover</code></strong>.</p>


<h3 class="wp-block-heading" id="a-popover-needs-a-role">A Popover Needs an Accessible Role</h3>


<p>Popovers need a role to be accessible. Hidde has a <a href="https://hidde.blog/popover-semantics/" rel="noopener">great article</a> on selecting the right role, but I’m going to provide some points in this article as well.</p>



<p>To start, you can use one of the <code>aria-haspopup</code> roles mentioned above:</p>



<ul class="wp-block-list">
<li><code>menu</code></li>



<li><code>listbox</code></li>



<li><code>tree</code></li>



<li><code>grid</code></li>



<li><code>dialog</code></li>
</ul>



<p>You could also use one of the more complex roles like:</p>



<ul class="wp-block-list">
<li><code>treegrid</code></li>



<li><code>alertdialog</code></li>
</ul>



<p>There are two additional roles that are slightly more contentious but may do just fine.</p>



<ul class="wp-block-list">
<li><code>tooltip</code></li>



<li><code>status</code></li>
</ul>



<p>To understand why <code>tooltip</code> and <code>status</code> could be valid <code>popover</code> roles, we need to take a detour into the world of tooltips.</p>


<h3 class="wp-block-heading" id="a-note-on-tooltips">A Note on Tooltips</h3>


<p><strong>From a visual perspective, a tooltip is a popover</strong> because it contains a tiny window that pops up when the tooltip is displayed.</p>



<p>I included <code>tooltip</code> in the mental model because it is reasonable to implement <code>tooltip</code> with the Popover API.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div popver role="tooltip">...&lt;/div></code></pre>



<p class="is-style-explanation">The <code>tooltip</code> role <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/#best-practices-summary" rel="noopener">doesn&#8217;t do much in screen readers today</a> so you need to use <code>aria-describedby</code> to create accessible tooltips. But it is still important because it may <a href="https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/" rel="noopener">extend accessibility support</a> for some software.</p>



<p><strong>But, from an accessibility standpoint, tooltips are not popovers</strong>. In the accessibility world, tooltips must not contain interactive content. If they contain interactive content, you&#8217;re not looking at a <code>tooltip</code>, but a <code>dialog</code>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>You&#8217;re thinking of dialogs. Use a dialog.</p>
<cite>Heydon Pickering, <a href="https://heydonworks.com/article/your-tooltips-are-bogus/" rel="noopener">&#8220;Your Tooltips are Bogus&#8221;</a></cite></blockquote>



<p>This is also why <code>aria-haspopup</code> doesn&#8217;t include <code>tooltip</code> —<code>aria-haspopup</code> is supposed to signify interactive content but a <code>tooltip</code> must not contain interactive content.</p>



<p>With that, let&#8217;s move on to <code>status</code> which is an interesting role that requires some explanation.</p>


<h3 class="wp-block-heading" id="why-status-">Why <code>status</code>?</h3>


<p>Tooltips have a <a href="https://sarahmhigley.com/writing/tooltips-in-wcag-21/" rel="noopener">pretty complex history</a> in the world of accessible interfaces so there&#8217;s a lot of discussion and contention over it.</p>



<p>To keep things short (again), there&#8217;s an accessibility issue with tooltips since tooltips should only show on hover. This means screen readers and mobile phone users won&#8217;t be able to see those tooltips (since they can&#8217;t hover on the interface).</p>



<p>Steve Faulkner created an alternative — <a href="https://www.paciellogroup.com/blog/2016/01/simple-standalone-toggletip-widget-pattern/" rel="noopener">toggletips</a> — to fill the gap. In doing so, he explained that toggletip content must be announced by screen readers through live regions.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>When initially displayed content is announced by (most) screen readers that support <code>aria-live</code></p>
</blockquote>



<p>Heydon Pickering later added that <code>status</code> can be used in his article on <a href="https://inclusive-components.design/tooltips-toggletips/#toggletipswithliveregions" rel="noopener">toggletips</a>.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>We can supply an empty live region, and populate it with the toggletip &#8220;bubble&#8221; when it is invoked. This will both make the bubble appear visually and cause the live region to announce the tooltip&#8217;s information.</p>
</blockquote>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- Code example by Heydon -->
&lt;span class="tooltip-container"> 
  &lt;button type="button" aria-label="more info" data-toggletip-content="This clarifies whatever needs clarifying">i&lt;/button> 
  &lt;span role="status"> 
    &lt;span class="toggletip-bubble">This clarifies whatever needs clarifying&lt;/span> 
  &lt;/span>
&lt;/span></code></pre>



<p>This is why <code>status</code> can be a potential role for a <code>popover</code>, but you must use discretion when creating it.</p>



<p>That said, I&#8217;ve chosen not to include the <code>status</code> role in the Popover mental model because <code>status</code> is a live region role and hence different from the rest.</p>


<h3 class="wp-block-heading" id="in-summary">In Summary</h3>


<p>Here&#8217;s a quick summary of the mental model:</p>



<ul class="wp-block-list">
<li><strong>Popover</strong> is an umbrella term for any kind of on-demand popup.</li>



<li><strong>Dialog</strong> is one type of popover — a kind that creates a new window (or card) to contain some content.</li>
</ul>



<p>When you internalize this, it&#8217;s not hard to see why the Popover API can be used with the <code>dialog</code> element.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- Uses the popover API. Role needs to be determined manually -->
&lt;div popover>...&lt;/div>

&lt;!-- Dialog with the popover API. Role is dialog -->
&lt;dialog popover>...&lt;/dialog>

&lt;!-- Dialog that doesn't use the popover API. Role is dialog -->
&lt;dialog>...&lt;/dialog></code></pre>



<p>When choosing a <code>role</code> for your popover, you can use one of these roles safely.</p>



<ul class="wp-block-list">
<li><code>menu</code></li>



<li><code>listbox</code></li>



<li><code>tree</code></li>



<li><code>grid</code></li>



<li><code>treegrid</code></li>



<li><code>dialog</code></li>



<li><code>alertdialog</code></li>
</ul>



<p>The added benefit is most of these roles work together with <code>aria-haspopup</code> which gained <a href="https://html5accessibility.com/stuff/2023/06/20/aria-haspopup-less-is-more/" rel="noopener">decent support</a> in screen readers last year.</p>



<p>Of course, there are a couple more you can use like <code>status</code> and <code>tooltip</code>, but you won&#8217;t be able to use them together with <code>aria-haspopup</code>.</p>


<h3 class="wp-block-heading" id="further-reading">Further Reading</h3>


<ul class="wp-block-list">
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-haspopup" rel="noopener"><code>aria-haspopup</code> property</a> (WAI-ARIA Specification, Version 1.2)</li>



<li><a href="https://hidde.blog/popover-semantics/" rel="noopener">Semantics and the popover attribute: which role to use when?</a> (Hidde de Vries)</li>



<li><a href="https://html5accessibility.com/stuff/2023/06/20/aria-haspopup-less-is-more/" rel="noopener"><code>aria-hasPopUp</code> less is more</a> (html5accessibility.com)</li>



<li><a href="https://inclusive-components.design/tooltips-toggletips/" rel="noopener">Tooltips &amp; Toggletips</a> (Inclusive Components)</li>



<li><a href="https://frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers/" rel="noopener">What’s the Difference Between HTML’s Dialog Element and Popovers?</a> (Chris Coyier)</li>
</ul>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/">Clarifying the Relationship Between Popovers and Dialogs</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


The difference between Popovers (i.e., the popover attribute) and Dialogs (i.e., both the <dialog> element and the dialog accessible role) is incredibly confusing — so much that many articles (like this, this, and this) have tried to shed some light on the issue.
If you’re still feeling confused, I hope this one clears up that confusion once and for all.



Distinguishing Popovers From Dialogs
Let’s pull back on the technical implementations and consider the greater picture that makes more sense and puts everything into perspective.




The reason for this categorization comes from a couple of noteworthy points.
First, we know that a popover is content that “pops” up when a user clicks a button (or hovers over it, or focuses on it). In the ARIA world, there is a useful attribute called aria-haspopup that categorizes such popups into five different roles:
menu
listbox
tree
grid
dialog
Strictly speaking, there’s a sixth value, true, that evaluates to menu. I didn’t include it above since it’s effectively just menu.
By virtue of dialog being on this list, we already know that dialog is a type of popover. But there’s more evidence behind this too.
The Three Types of Dialogues
Since we’re already talking about the dialog role, let’s further expand that into its subcategories:




Dialogs can be categorized into three main kinds:
Modal: A dialog with an overlay and focus trapping
Non-Modal: A dialog with neither an overlay nor focus trapping
Alert Dialog: A dialog that alerts screen readers when shown. It can be either modal or non-modal.
This brings us to another reason why a dialog is considered a popover.
Some people may say that popovers are strictly non-modal, but this seems to be a major misunderstanding — because popovers have a ::backdrop pseudo-element on the top layer. The presence of ::backdrop indicates that popovers are modal. Quoting the CSS-Tricks almanac:
The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog>, an element with the popup attribute, or any element that enters fullscreen mode using the Fullscreen API.
That said, I don’t recommend using the Popover API for modality because it doesn’t have a showModal() method (that <dialog> has) that creates inertness, focus trapping, and other necessary features to make it a real modal. If you only use the Popover API, you’ll need to build those features from scratch.
So, the fact that popovers can be modal means that a dialog is simply one kind of popover.
A Popover Needs an Accessible Role
Popovers need a role to be accessible. Hidde has a great article on selecting the right role, but I’m going to provide some points in this article as well.
To start, you can use one of the aria-haspopup roles mentioned above:
menu
listbox
tree
grid
dialog
You could also use one of the more complex roles like:
treegrid
alertdialog
There are two additional roles that are slightly more contentious but may do just fine.
tooltip
status
To understand why tooltip and status could be valid popover roles, we need to take a detour into the world of tooltips.
A Note on Tooltips
From a visual perspective, a tooltip is a popover because it contains a tiny window that pops up when the tooltip is displayed.
I included tooltip in the mental model because it is reasonable to implement tooltip with the Popover API.
<div popver role="tooltip">...</div>
The tooltip role doesn’t do much in screen readers today so you need to use aria-describedby to create accessible tooltips. But it is still important because it may extend accessibility support for some software.
But, from an accessibility standpoint, tooltips are not popovers. In the accessibility world, tooltips must not contain interactive content. If they contain interactive content, you’re not looking at a tooltip, but a dialog.
You’re thinking of dialogs. Use a dialog.
Heydon Pickering, “Your Tooltips are Bogus”
This is also why aria-haspopup doesn’t include tooltip —aria-haspopup is supposed to signify interactive content but a tooltip must not contain interactive content.
With that, let’s move on to status which is an interesting role that requires some explanation.
Why status?
Tooltips have a pretty complex history in the world of accessible interfaces so there’s a lot of discussion and contention over it.
To keep things short (again), there’s an accessibility issue with tooltips since tooltips should only show on hover. This means screen readers and mobile phone users won’t be able to see those tooltips (since they can’t hover on the interface).
Steve Faulkner created an alternative — toggletips — to fill the gap. In doing so, he explained that toggletip content must be announced by screen readers through live regions.
When initially displayed content is announced by (most) screen readers that support aria-live
Heydon Pickering later added that status can be used in his article on toggletips.
We can supply an empty live region, and populate it with the toggletip “bubble” when it is invoked. This will both make the bubble appear visually and cause the live region to announce the tooltip’s information.

<span class="tooltip-container"> 
  <button type="button" aria-label="more info" data-toggletip-content="This clarifies whatever needs clarifying">i</button> 
  <span role="status"> 
    <span class="toggletip-bubble">This clarifies whatever needs clarifying</span> 
  </span>
</span>
This is why status can be a potential role for a popover, but you must use discretion when creating it.
That said, I’ve chosen not to include the status role in the Popover mental model because status is a live region role and hence different from the rest.
In Summary
Here’s a quick summary of the mental model:
Popover is an umbrella term for any kind of on-demand popup.
Dialog is one type of popover — a kind that creates a new window (or card) to contain some content.
When you internalize this, it’s not hard to see why the Popover API can be used with the dialog element.

<div popover>...</div>


<dialog popover>...</dialog>


<dialog>...</dialog>
When choosing a role for your popover, you can use one of these roles safely.
menu
listbox
tree
grid
treegrid
dialog
alertdialog
The added benefit is most of these roles work together with aria-haspopup which gained decent support in screen readers last year.
Of course, there are a couple more you can use like status and tooltip, but you won’t be able to use them together with aria-haspopup.
Further Reading
aria-haspopup property (WAI-ARIA Specification, Version 1.2)
Semantics and the popover attribute: which role to use when? (Hidde de Vries)
aria-hasPopUp less is more (html5accessibility.com)
Tooltips & Toggletips (Inclusive Components)
What’s the Difference Between HTML’s Dialog Element and Popovers? (Chris Coyier)
Clarifying the Relationship Between Popovers and Dialogs originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Pop quiz! What's the difference between a Popover element and a Dialog element? The answer is not all that clear and is widely misunderstood, but Zell has a clear way to explain it so that you know which element to reach for in your work.
Clarifying the Relationship Between Popovers and Dialogs originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Clarifying the Relationship Between Popovers and Dialogs

<p>There&#8217;s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you&#8217;re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/clamp-it-vs-code-extension/">Clamp it! VS Code extension</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>There&#8217;s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you&#8217;re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often have to look it back up, despite having written it maybe a hundred times.</p>



<p><a href="https://www.silvestar.codes/articles/clamp-it/" rel="noopener">Silvestar made a little VS Code helper</a> to abstract all that. Type in the target values you&#8217;re aiming for and the helper expands it on the spot.</p>



<span id="more-381992"></span>



<figure class="wp-block-video"><video controls src="https://css-tricks.com/wp-content/uploads/2024/10/clamp-it_fng4a5.mp4" playsinline></video></figure>



<p>He says ChatGPT did the initial lifting before he refined it. I can get behind this sort of AI-flavored usage. Start with an idea, find a starting point, look deeper at it, and shape it into something incredibly useful for a small, single purpose.</p>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/clamp-it-vs-code-extension/">Clamp it! VS Code extension</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


There’s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you’re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often have to look it back up, despite having written it maybe a hundred times.
Silvestar made a little VS Code helper to abstract all that. Type in the target values you’re aiming for and the helper expands it on the spot.








He says ChatGPT did the initial lifting before he refined it. I can get behind this sort of AI-flavored usage. Start with an idea, find a starting point, look deeper at it, and shape it into something incredibly useful for a small, single purpose.


Clamp it! VS Code extension originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

There’s a lot of math behind fluid typography. CSS does make the math a lot easier these days, but even if you’re comfortable with that, writing the full declaration can be verbose and tough to remember. I know I often …
Clamp it! VS Code extension originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.