CSS-TRICKS

<p>Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/the-gap-strikes-back-now-stylable/">The Gap Strikes Back: Now Stylable</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>


Four years ago, I wrote an article titled Minding the “gap”, where I talked about the CSS gap property, where it applied, and how it worked with various CSS layouts.
At the time, I described how easy it was to evenly space items out in a flex, grid, or multi-column layout, by using the gap property. But, I also said that styling the gap areas was much harder, and I shared a workaround.
However, workarounds like using extra HTML elements, pseudo-elements, or borders to draw separator lines tend to come with drawbacks, especially those that impact your layout size, interfere with assistive technologies, or pollute your markup with style-only elements.
Today, I’m writing again about layout gaps, but this time, to tell you all about a new and exciting CSS feature that’s going to change it all. What you previously had to use workarounds for, you’ll soon be able to do with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.
There’s already a specification draft for the feature you can peruse. At the time I’m writing this, it is available in Chrome and Edge 139 behind a flag. But I believe it won’t be long before we turn that flag on. I believe other browsers are also very receptive and engaged.
Displaying decorative lines between items of a layout can make a big difference. When used well, these lines can bring more structure to your layout, and give your users more of a sense of how the different regions of a page are organized.



Introducing CSS gap decorations
If you’ve ever used a multi-column layout, such as by using the column-width property, then you might already be familiar with gap decorations. You can draw vertical lines between the columns of a multi-column layout by using the column-rule property:
article {
  column-width: 20rem;
  column-rule: 1px solid black;
}




The CSS gap decorations feature builds on this to provide a more comprehensive system that makes it easy for you to draw separator lines in other layout types.
For example, the draft specification says that the column-rule property also works in flexbox and grid layouts:
.my-grid-container {
  display: grid;
  gap: 2px;
  column-rule: 2px solid pink;
}




No need for extra elements or borders! The key benefit here is that the decoration happens in CSS only, where it belongs, with no impacts to your semantic markup.
The CSS gap decorations feature also introduces a new row-rule property for drawing lines between rows:
.my-flex-container {
  display: flex;
  gap: 10px;
  row-rule: 10px dotted limegreen;
  column-rule: 5px dashed coral;
}




But that’s not all, because the above syntax also allows you to define multiple, comma-separated, line style values, and use the same repeat() function that CSS grid already uses for row and column templates. This makes it possible to define different styles of line decorations in a single layout, and adapt to an unknown number of gaps:
.my-container {
  display: grid;
  gap: 2px;
  row-rule:
    repeat(2, 1px dashed red),
    2px solid black,
    repeat(auto, 1px dotted green);
}




Finally, the CSS gap decorations feature comes with additional CSS properties such as row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, and gap-rule-paint-order, which make it possible to precisely customize the way the separators are drawn, whether they overlap, or where they start and end.
And of course, all of this works across grid, flexbox, multi-column, and soon, masonry!
Browser support
Currently, the CSS gap decorations feature is only available in Chromium-based browsers.
The feature is still early in the making, and there’s time for you all to try it and to provide feedback that could help make the feature better and more adapted to your needs.
If you want to try the feature today, make sure to use Edge or Chrome, starting with version 139 (or another Chromium-based browser that matches those versions), and enable the flag by following these steps:
In Chrome or Edge, go to about://flags.
In the search field, search for Enable Experimental Web Platform Features.
Enable the flag.
Restart the browser.
To put this all into practice, let’s walk through an example together that uses the new CSS gap decorations feature. I also have a final example you can demo.
Using CSS gap decorations
Let’s build a simple web page to learn how to use the feature. Here is what we’ll be building:




The above layout contains a header section with a title, a navigation menu with a few links, a main section with a series of short paragraphs of text and photos, and a footer.
We’ll use the following markup:
<body>
<header>
  <h1>My personal site</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Links</a></li>
  </ul>
</nav>
<main>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="cat.jpg" alt="A sleeping cat.">
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="tree.jpg" alt="An old olive tree trunk.">
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <p>...</p>
  </article>
  <article>
    <img src="strings.jpg" alt="Snow flakes falling in a motion blur effect.">
  </article>
</main>
<footer>
  <p>© 2025 Patrick Brosset</p>
</footer>
</body>
We’ll start by making the <body> element be a grid container. This way, we can space out the <header>, <nav>, <main>, and <footer> elements apart in one go by using the gap property:
body {
  display: grid;
  gap: 4rem;
  margin: 2rem;
}
Let’s now use the CSS gap decorations feature to display horizontal separator lines within the gaps we just defined:
body {
  display: grid;
  gap: 4rem;
  margin: 2rem;
 
  row-rule: 1rem solid #efefef;
}
This gives us the following result:




We can do a bit better by making the first horizontal line look different than the other two lines, and simplify the row-rule value by using the repeat() syntax:
body {
  display: grid;
  gap: 4rem;
  margin: 2rem;
 
  row-rule:
    1rem solid #efefef,
    repeat(2, 2px solid #efefef);
}
With this new row-rule property value, we’re telling the browser to draw the first horizontal separator as a 1rem thick line, and the next two separators as 2px thick lines, which gives the following result:




Now, let’s turn our attention to the navigation element and its list of links. We’ll use flexbox to display the links in a single row, where each link is separated from the other links by a gap and a vertical line:
nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  column-rule: 2px dashed #666;
}
Very similarly to how we used the row-rule property before, we’re now using the column-rule property to display a dashed 2px thick separator between the links.
Our example web page now looks like this:




The last thing we need to change is the <main> element and its paragraphs and pictures. We’ll use flexbox again and display the various children in a wrapping row of varying width items:
main {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}


main > * {
  flex: 1 1 200px;
}


main article:has(p) {
  flex-basis: 400px;
}
In the above code snippet, we’re setting the <main> element to be a wrapping flex container with a 4rem gap between items and flex lines. We’re also making the items have a flex basis size of 200px for pictures and 400px for text, and allowing them to grow and shrink as needed. This gives us the following result:




Let’s use CSS gap decorations to bring a little more structure to our layout by drawing 2px thick separator lines between the rows and columns of the layout:
main {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  row-rule: 2px solid #999;
  column-rule: 2px solid #999;
}
This gives us the following result, which is very close to our expected design:




The last detail we want to change is related to the vertical lines. We don’t want them to span across the entire height of the flex lines but instead start and stop where the content starts and stops.
With CSS gap decorations, we can easily achieve this by using the column-rule-outset property to fine-tune exactly where the decorations start and end, relative to the gap area:
main {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  row-rule: 2px solid #999;
  column-rule: 2px solid #999;
  column-rule-outset: 0;
}
The column-rule-outset property above makes the vertical column separators span the height of each row, excluding the gap area, which is what we want:




And with that, we’re done with our example. Check out the live example, and source code.
Learn more
There’s more to the feature and I mentioned a couple more CSS properties earlier
gap-rule-paint-order, which lets you control which of the decorations, rows or columns, appear above the other ones.
row-rule-break / column-rule-break, which sets the behavior of the decoration lines at intersections. In particular, whether they are made of multiple segments, which start and end at intersections, or single, continuous lines.
Because the feature is new, there isn’t MDN documentation about it yet. So to learn more, check out:
CSS Gap Decorations Module Level 1 (First Public Working Draft)
Microsoft Edge Explainer
The Edge team has also created an interactive playground where you can use visual controls to configure gap decorations.
And, of course, the reason this is all implemented behind a flag is to elicit feedback from developers like you! If you have any feedback, questions, or bugs about this feature, I definitely encourage you to open a new ticket on the Chromium issue tracker.
The Gap Strikes Back: Now Stylable originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.
The Gap Strikes Back: Now Stylable originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The Gap Strikes Back: Now Stylable

<p>Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/">Using CSS Cascade Layers With Tailwind Utilities</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>Adam Wathan has (very cleverly) built Tailwind with <a href="https://css-tricks.com/css-cascade-layers/">CSS Cascade Layers</a>, making it extremely powerful for organizing styles by priority.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);</code></pre>



<p>The core of Tailwind are its utilities. This means you have two choices:</p>



<ol class="wp-block-list">
<li>The default choice</li>



<li>The unorthodox choice</li>
</ol>



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


<h3 class="wp-block-heading" id="the-default-choice">The default choice</h3>


<p>The default choice is to follow Tailwind’s recommended layer order: place components first, and Tailwind utilities last.</p>



<p>So, if you&#8217;re building components, you need to manually wrap your components with a <code>@layer</code> directive. Then, overwrite your component styles with Tailwind, putting Tailwind as the &#8220;most important layer&#8221;.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Write your components */
@layer components {
  .component {
    /* Your CSS here */
  }
}</code></pre>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- Override with Tailwind utilities --> 
&lt;div class="component p-4"> ... &lt;/div></code></pre>



<p>That&#8217;s a decent way of doing things.</p>



<p>But, being the bad boy I am, I don&#8217;t take the default approach as the &#8220;best&#8221; one. Over a year of (major) experimentation with Tailwind and vanilla CSS, I&#8217;ve come across what I believe is a better solution.</p>


<h3 class="wp-block-heading" id="the-unorthodox-choice">The Unorthodox Choice</h3>


<p>Before we go on, I have to tell you that I&#8217;m writing a course called <a href="https://magicaldevschool.com/courses/unorthodox-tailwind/" rel="noopener">Unorthodox Tailwind</a> — this shows you everything I know about using Tailwind and CSS in synergistic ways, leveraging the strengths of each.</p>



<p>Shameless plug aside, let&#8217;s dive into the Unorthodox Choice now.</p>



<p>In this case, the Unorthodox Choice is to write your styles in an unnamed layer — or any layer after utilities, really — so that your CSS naturally overwrites Tailwind utilities.</p>



<p>Of these two, I prefer the unnamed layer option:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Unnamed layer option */
@layer theme, base, components, utilities; 

/* Write your CSS normally here */ 
.component { /* ... */ }</code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Named layer option */
/* Use whatever layer name you come up with. I simply used css here because it made most sense for explaining things */
@layer theme, base, components, utilities, css; 

@layer css {
  .component { /* ... */ }
}</code></pre>



<p>I have many reasons why I do this:</p>



<ol class="wp-block-list">
<li>I don&#8217;t like to add unnecessary CSS layers because it makes code harder to write — more keystrokes, having to remember the specific layer I used it in, etc.</li>



<li>I&#8217;m pretty skilled with <a href="https://itcss.io" rel="noopener">ITCSS</a>, selector specificity, and all the good-old-stuff you&#8217;d expect from a seasoned front-end developer, so writing CSS in a single layer doesn&#8217;t scare me at all.</li>



<li>I can do complex stuff that are hard or impossible to do in Tailwind (like theming and animations) in CSS.</li>
</ol>



<p>Your mileage may vary, of course.</p>



<p>Now, if you have followed my reasoning so far, you would have noticed that I use Tailwind <em>very</em> differently:</p>



<ul class="wp-block-list">
<li>Tailwind utilities are not the &#8220;most important&#8221; layer.</li>



<li>My unnamed CSS layer is the most important one.</li>
</ul>



<p>I do this so I can:</p>



<ul class="wp-block-list">
<li><strong>Build prototypes with Tailwind</strong> (quickly, easily, especially with the <a href="https://splendidlabz/docs/layouts/">tools</a> I&#8217;ve created).</li>



<li><strong>Shift these properties to CSS</strong> when they get more complex — so I don&#8217;t have to read messy utility-littered HTML that makes my heart sink. Not because utility HTML is bad, but because it takes lots of brain processing power to figure out what&#8217;s happening.</li>
</ul>



<p>Finally, here&#8217;s the nice thing about Tailwind being in a utility layer: I can always <code>!important</code> a utility to give it strength.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;!-- !important the padding utility -->
&lt;div class="component !p-4"> ... &lt;/div></code></pre>



<p>Whoa, hold on, wait a minute! Isn&#8217;t this wrong, you might ask?</p>



<p>Nope. The <code>!important</code> keyword has traditionally been used to override classes. In this case, we&#8217;re leveraging on the <a href="https://css-tricks.com/css-cascade-layers/#important-origins-context-and-layers-are-reversed"><code>!important</code> feature in CSS Layers</a> to say the Tailwind utility is more important than any CSS in the unnamed layer.</p>



<p>This is perfectly valid and is a built-in feature for CSS Layers.</p>



<p>Besides, the <code>!important</code> is so explicit (and used so little) that it makes sense for one-off quick-and-dirty adjustments (without creating a brand new selector for it).</p>


<h3 class="wp-block-heading" id="tailwind-utilities-are-more-powerful-than-they-seem">Tailwind utilities are more powerful than they seem</h3>


<p>Tailwind utilities are not a 1:1 map between a class and a CSS property. Built-in Tailwind utilities mostly look like this so it can give people a wrong impression.</p>



<p>Tailwind utilities are more like <a href="https://css-tricks.com/tailwinds-apply-feature-is-better-than-it-sounds/">convenient Sass mixins</a>, which means we can build effective tools for <a href="https://splendidlabz/docs/layouts/">layouts</a>, theming, typography, and more, through them.</p>



<p>You can find out about these thoughts inside <a href="https://magicaldevschool.com/courses/unorthodox-tailwind/" rel="noopener">Unorthodox Tailwind</a>.</p>



<p>Thanks for reading and I hope you&#8217;re enjoying a new way of looking at (or using) Tailwind!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-css-cascade-layers-with-tailwind-utilities/">Using CSS Cascade Layers With Tailwind Utilities</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>


Adam Wathan has (very cleverly) built Tailwind with CSS Cascade Layers, making it extremely powerful for organizing styles by priority.
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
The core of Tailwind are its utilities. This means you have two choices:
The default choice
The unorthodox choice



The default choice
The default choice is to follow Tailwind’s recommended layer order: place components first, and Tailwind utilities last.
So, if you’re building components, you need to manually wrap your components with a @layer directive. Then, overwrite your component styles with Tailwind, putting Tailwind as the “most important layer”.
/* Write your components */
@layer components {
  .component {
    /* Your CSS here */
  }
}
 
<div class="component p-4"> ... </div>
That’s a decent way of doing things.
But, being the bad boy I am, I don’t take the default approach as the “best” one. Over a year of (major) experimentation with Tailwind and vanilla CSS, I’ve come across what I believe is a better solution.
The Unorthodox Choice
Before we go on, I have to tell you that I’m writing a course called Unorthodox Tailwind — this shows you everything I know about using Tailwind and CSS in synergistic ways, leveraging the strengths of each.
Shameless plug aside, let’s dive into the Unorthodox Choice now.
In this case, the Unorthodox Choice is to write your styles in an unnamed layer — or any layer after utilities, really — so that your CSS naturally overwrites Tailwind utilities.
Of these two, I prefer the unnamed layer option:
/* Unnamed layer option */
@layer theme, base, components, utilities; 

/* Write your CSS normally here */ 
.component { /* ... */ }
/* Named layer option */
/* Use whatever layer name you come up with. I simply used css here because it made most sense for explaining things */
@layer theme, base, components, utilities, css; 

@layer css {
  .component { /* ... */ }
}
I have many reasons why I do this:
I don’t like to add unnecessary CSS layers because it makes code harder to write — more keystrokes, having to remember the specific layer I used it in, etc.
I’m pretty skilled with ITCSS, selector specificity, and all the good-old-stuff you’d expect from a seasoned front-end developer, so writing CSS in a single layer doesn’t scare me at all.
I can do complex stuff that are hard or impossible to do in Tailwind (like theming and animations) in CSS.
Your mileage may vary, of course.
Now, if you have followed my reasoning so far, you would have noticed that I use Tailwind very differently:
Tailwind utilities are not the “most important” layer.
My unnamed CSS layer is the most important one.
I do this so I can:
Build prototypes with Tailwind (quickly, easily, especially with the tools I’ve created).
Shift these properties to CSS when they get more complex — so I don’t have to read messy utility-littered HTML that makes my heart sink. Not because utility HTML is bad, but because it takes lots of brain processing power to figure out what’s happening.
Finally, here’s the nice thing about Tailwind being in a utility layer: I can always !important a utility to give it strength.

<div class="component !p-4"> ... </div>
Whoa, hold on, wait a minute! Isn’t this wrong, you might ask?
Nope. The !important keyword has traditionally been used to override classes. In this case, we’re leveraging on the !important feature in CSS Layers to say the Tailwind utility is more important than any CSS in the unnamed layer.
This is perfectly valid and is a built-in feature for CSS Layers.
Besides, the !important is so explicit (and used so little) that it makes sense for one-off quick-and-dirty adjustments (without creating a brand new selector for it).
Tailwind utilities are more powerful than they seem
Tailwind utilities are not a 1:1 map between a class and a CSS property. Built-in Tailwind utilities mostly look like this so it can give people a wrong impression.
Tailwind utilities are more like convenient Sass mixins, which means we can build effective tools for layouts, theming, typography, and more, through them.
You can find out about these thoughts inside Unorthodox Tailwind.
Thanks for reading and I hope you’re enjoying a new way of looking at (or using) Tailwind!
Using CSS Cascade Layers With Tailwind Utilities originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Being the bad boy I am, I don't take Tailwind's default approach to cascade layers as the "best" one. Over a year experimenting with Tailwind and vanilla CSS, I've come across what I believe is a better solution.
Using CSS Cascade Layers With Tailwind Utilities originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Using CSS Cascade Layers With Tailwind Utilities

<p>Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-blob-recipes/">CSS Blob Recipes</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>


Blob, Blob, Blob. You hate them. You love them. Personally, as a design illiterate, I like to overuse them… a lot. And when you repeat the same process over and over again, it’s only a question of how much you can optimize it, or in this case, what’s the easiest way to create blobs in CSS? Turns out, as always, there are many approaches.




To know if our following blobs are worth using, we’ll need them to pass three tests:
They can be with just a single element (and preferably without pseudos).
They can be easily designed (ideally through an online tool).
We can use gradient backgrounds, borders, shadows, and other CSS effects on them.
Without further ado, let’s Blob, Blob, Blob right in.
Just generate them online
I know it’s disenchanting to click on an article about making blobs in CSS just for me to say you can generate them outside CSS. Still, it’s probably the most common way to create blobs on the web, so to be thorough, these are some online tools I’ve used before to create SVG blobs.
Haikei. Probably the one I have used the most since, besides blobs, it can also generate lots of SVG backgrounds.
Blobmaker. A dedicated tool for making blobs. It’s apparently part of Haikei now, so you can use both.
Lastly, almost all graphic programs let you hand-draw blobs and export them as SVGs.
For example, this is one I generated just now. Keep it around, as it will come in handy later.




<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="#FA4D56"
    d="M65.4,-37.9C79.2,-13.9,81,17,68.1,38C55.2,59.1,27.6,70.5,1.5,69.6C-24.6,68.8,-49.3,55.7,-56,38.2C-62.6,20.7,-51.3,-1.2,-39,-24.4C-26.7,-47.6,-13.3,-72,6.2,-75.6C25.8,-79.2,51.6,-62,65.4,-37.9Z"
    transform="translate(100 100)"
  />
</svg>
Using border-radius
While counterintuitive, we can use the border-radius property to create blobs. This technique isn’t new by any means; it was first described by Nils Binder in 2018, but it is still fairly unknown. Even for those who use it, the inner workings are not entirely clear.
To start, you may know the border-radius is a shorthand to each individual corner’s radius, going from the top left corner clockwise. For example, we can set each corner’s border-radius to get a bubbly square shape:
<div class="blob"></div>
.blob {
  border-radius: 25% 50% 75% 100%;
}
CodePen Embed Fallback
However, what border-radius does — and also why it’s called “radius” — is to shape each corner following a circle of the given radius. For example, if we set the top left corner to 25%, it will follow a circle with a radius 25% the size of the shape.
.blob {
  border-top-left-radius: 25%;
}
CodePen Embed Fallback
What’s less known is that each corner property is still a shortcut towards its horizontal and vertical radii. Normally, you set both radii to the same value, getting a circle, but you can set them individually to create an ellipse. For example, the following sets the horizontal radius to 25% of the element’s width and the vertical to 50% of its height:
.blob {
  border-top-left-radius: 25% 50%;
}
CodePen Embed Fallback
We can now shape each corner like an ellipse, and it is the combination of all four ellipses that creates the illusion of a blob! Just take into consideration that to use the horizontal and vertical radii syntax through the border-radius property, we’ll need to separate the horizontal from the vertical radii using a forward slash (/).
.blob {
  border-radius:
    /* horizontal */
    100% 30% 60% 70% /
    /* vertical */
    50% 40% 70% 70%;
}
CodePen Embed Fallback
The syntax isn’t too intuitive, so designing a blob from scratch will likely be a headache. Luckily, Nils Binder made a tool exactly for that!
Blobbing blobs together
This hack is awesome. We aren’t supposed to use border-radius like that, but we still do. Admittedly, we are limited to boring blobs. Due to the nature of border-radius, no matter how hard we try, we will only get convex shapes.




Just going off border-radius, we can try to minimize it a little by sticking more than one blob together:
CodePen Embed Fallback
However, I don’t want to spend too much time on this technique since it is too impractical to be worth it. To name a few drawbacks:
We are using more than one element or, at the very least, an extra pseudo-element. Ideally, we want to keep it to one element.
We don’t have a tool to prototype our blobby amalgamations, so making one is a process of trial and error.
We can’t use borders, gradients, or box shadows since they would reveal the element’s outlines.
Multiple backgrounds and SVG filters
This one is an improvement in the Gooey Effect, described here by Lucas Bebber, although I don’t know who first came up with it. In the original effect, several elements can be morphed together like drops of liquid sticking to and flowing out of each other:
CodePen Embed Fallback
It works by first blurring shapes nearby, creating some connected shadows. Then we crank up the contrast, forcing the blur out and smoothly connecting them in the process. Take, for example, this demo by Chris Coyer (It’s from 2014, so more than 10 years ago!):
CodePen Embed Fallback
If you look at the code, you’ll notice Chris uses the filter property along the blur() and contrast() functions, which I’ve also seen in other blob demos. To be specific, it applies blur() on each individual circle and then contrast() on the parent element. So, if we have the following HTML:
<div class="blob">
  <div class="subblob"></div>
  <div class="subblob"></div>
  <div class="subblob"></div>
</div>
…we would need to apply filters and background colors as such:
.blob {
  filter: contrast(50);
  background: white; /* Solid colors are necessary */
}

.subblob {
  filter: blur(15px);
  background: black; /* Solid colors are necessary */
}
However, there is a good reason why those demos stick to white shapes and black backgrounds (or vice versa) since things get unpredictable once colors aren’t contrast-y enough. See it for yourself in the following demo by changing the color. Just be wary: shades get ugly.
CodePen Embed Fallback
To solve this, we will use an SVG filter instead. I don’t want to get too technical on SVG (if you want to, read Luca’s post!). In a nutshell, we can apply blurring and contrast filters using SVGs, but now, we can also pick which color channel we apply the contrast to, unlike normal contrast(), which modifies all colors. 
Since we want to leave color channels (R, G and B) untouched, we will only crank the contrast up for the alpha channel. That translates to the next SVG filter, which can be embedded in the HTML:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position: absolute;">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -6" result="goo" />
      <feBlend in="SourceGraphic" in2="blob" />
    </filter>
  </defs>
</svg>
To apply it, we will use again filter, but this time we’ll set it to url("#blob"), so that it pulls the SVG from the HTML.
.blob {
  filter: url("#blob");
}
And now we can even use it with gradient backgrounds!
CodePen Embed Fallback
That being said, this approach comes with two small, but important, changes to common CSS filters:
The filter is applied to the parent element, not the individual shapes.
The parent element must be transparent (which is a huge advantage). To change the background color, we can instead change the body or other ancestors’ background, and it will work with no issues.
What’s left is to place the .subblob elements together such that they make a blobby enough shape, then apply the SVG filters to morph them:
CodePen Embed Fallback
Making it one element
This works well, but it has a similar issue to the blob we made by morphing several border-radius instances: too many elements for a simple blob. Luckily, we can take advantage of the background property to create multiple shapes and morph them together using SVG filters, all in a single element. Since we are keeping it to one element, we will go back to just one empty .blob div:
<div class="blob"></div>
To recap, the background shorthand can set all background properties and also set multiple backgrounds at once. Of all the properties, we only care about the background-image, background-position and background-size.
First, we will use background-image along with radial-gradient() to create a circle inside the element:
body {
  background: radial-gradient(farthest-side, var(--blob-color) 100%, #0000);
  background-repeat: no-repeat; /* Important! */
}
CodePen Embed Fallback
Here is what each parameter does:
farthest-side: Confines the shape to the element’s box farthest from its center. This way, it is kept as a circle.
var(--blob-color) 100%: Fills the background shape from 0 to 100% with the same color, so it ends up as a solid color.
#0000: After the shape is done, it makes a full stop to transparency, so the color ends.
The next part is moving and resizing the circle using the background-position and background-size properties. Luckily, both can be set on background after the gradient, separated from each other by a forward slash (/).
body {
  background: radial-gradient(...) 20% 30% / 30% 40%;
  background-repeat: no-repeat; /* Important! */
}
CodePen Embed Fallback
The first pair of percentages sets the shape’s horizontal and vertical position (taking as a reference the top-left corner), while the second pair sets the shape’s width and height (taking as a reference the element’s size).
As I mentioned, we can stack up different backgrounds together, which means we can create as many circles/ellipses as we want! For example, we can create three ellipses on the same element:
.blob {
  background:
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 20% 30% / 30% 40%, 
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 80% 50% / 40% 60%, 
    radial-gradient(farthest-side, var(--blob-color) 100%, #0000) 50% 70% / 50% 50%;
  background-repeat: no-repeat;
}
What’s even better is that SVG filters don’t care whether shapes are made of elements or backgrounds, so we can also morph them together using the last url(#blob) filter!
CodePen Embed Fallback
While this method may be a little too much for blobs, it unlocks squishing, stretching, dividing, and merging blobs in seamless animations.
Again, all these tricks are awesome, but not enough for what we want! We accomplished reducing the blob to a single element, but we still can’t use gradients, borders, or shadows on them, and also, they are tedious to design and model. Then, that brings us to the ultimate blob approach…
Using the shape() function
Fortunately, there is a new way to make blobs that just dropped to CSS: the shape() function!
I’ll explain shape()‘s syntax briefly, but for an in-depth explanation, you’ll want to check out both this explainer from the CSS-Tricks Almanac as well as Temani Afif‘s three-part series on the shape() function, as well as his recent article about blobs.
First off, the CSS shape() function is used alongside the clip-path property to cut elements into any shape we want. More specifically, it uses a verbal version of SVG’s path syntax. The syntax has lots of commands for lots of types of lines, but when blobbing with shape(), we’ll define curves using the curve command:
.blob {
  clip-path: shape(
    from X0 Y0, 
    curve to X1 Y1 with Xc1 Yc1, 
    curve to X2 Y2 with Xc21 Yc21 / Xc22 Yc22
    /* ... */
  );
}
Let’s break down each parameter:
X0 Y0 defines the starting point of the shape.
curve starts the curve where X1 Y1 is the next point of the shape, while Xc1 Yc1 defines a control point used in Bézier curves.
The next parameter is similar, but we used Xc21 Yc21 / Xc22 Yc22 instead to define two control points on the Bézier curve.
I honestly don’t understand Bézier curves and control points completely, but luckily, we don’t need them to use shape() and blobs! Again, shape() uses a verbal version of SVG’s path syntax, so it can draw any shape an SVG can, which means that we can translate the SVG blobs we generated earlier… and CSS-ify them. To do so, we’ll grab the d attribute (which defines the path) from our SVG and paste it into Temani’s SVG to shape() generator.
This is the exact code the tool generated for me:
.blob {
  aspect-ratio: 0.925; /* Generated too! */

  clip-path: shape(
    from 91.52% 26.2%,
    curve to 93.52% 78.28% with 101.76% 42.67%/103.09% 63.87%,
    curve to 44.11% 99.97% with 83.95% 92.76%/63.47% 100.58%,
    curve to 1.45% 78.42% with 24.74% 99.42%/6.42% 90.43%,
    curve to 14.06% 35.46% with -3.45% 66.41%/4.93% 51.38%,
    curve to 47.59% 0.33% with 23.18% 19.54%/33.13% 2.8%,
    curve to 91.52% 26.2% with 62.14% -2.14%/81.28% 9.66%
  );
}
As you might have guessed, it returns our beautiful blob:
CodePen Embed Fallback
Let’s check if it passes our requirements:
Yes, they can be made of a single element.
Yes, they can also be created in a generator and then translated into CSS.
Yes, we can use gradient backgrounds, but due to the nature of clip-path(), borders and shadows get cut out.
Two out of three? Maybe two and a half of three? That’s a big improvement over the other approaches, even if it’s not perfect.
Conclusion
So, alas, we failed to find what I believe is the perfect CSS approach to blobs. I am, however, amazed how something so trivial designing blobs can teach us about so many tricks and new CSS features, many of which I didn’t know myself.
CSS Blob Recipes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!
CSS Blob Recipes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS Blob Recipes

<p><a href="https://kelpui.com">KelpUI</a> is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/kelpui/">KelpUI</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://kelpui.com" rel="noopener">KelpUI</a> is new library that <a href="https://gomakethings.com" rel="noopener">Chris Ferdinandi</a> is developing, designed to leverage newer CSS features and Web Components. I&#8217;ve enjoyed following Chris as he&#8217;s published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.</p>



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



<p>He outlined his principles up front in a post back in April:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I’m imagining a system that includes…</p>



<ul class="wp-block-list">
<li>Base styles for all of the common HTML elements.</li>



<li>Loads of utility classes for nudging and tweaking things.</li>



<li>Group classes for styling more complex UI elements&nbsp;<em>without</em>&nbsp;a million little classes.</li>



<li>Easy customization with CSS variables.</li>



<li>Web Components to progressively add interactivity to functional HTML.</li>



<li>All of the Web Component HTML lives in the light DOM, so its easy to style and reason about.</li>
</ul>



<p>I’m imagining something that can be loaded directly from a CDN, downloaded locally, or imported if you want to roll your own build.</p>
</blockquote>



<p>And that&#8217;s what I&#8217;ve seen so far. The Cascade is openly embraced and <a href="https://gomakethings.com/the-css-layer-at-rule/" rel="noopener">logically structured with Cascade Layers</a>. Plenty of <a href="https://gomakethings.com/naming-conventions-for-css-classes/" rel="noopener">utility classes are included</a>, with extra care put into how they are named. <a href="https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/" rel="noopener">Selectors are kept simple</a> and <a href="https://gomakethings.com/is-vs.-where/" rel="noopener">specificity is nice and low</a>, where needed. <a href="https://gomakethings.com/modern-layouts-with-css/" rel="noopener">Layouts are flexible</a> with <a href="https://gomakethings.com/4-common-layouts-made-easy-with-modern-css/" rel="noopener">good constraints</a>. Color palettes are <a href="https://gomakethings.com/how-to-create-an-accessible-color-palette/" rel="noopener">accessible</a> and sport <a href="https://gomakethings.com/creating-a-semantic-color-palette/" rel="noopener">semantic naming</a>.</p>



<p>Chris has even put a ton of thought into <a href="https://gomakethings.com/the-kelp-commons-license/" rel="noopener">how KelpUI is licensed</a>.</p>



<p>KelpUI is still evolving, and that&#8217;s part of the beauty of looking at it now and following Chris&#8217;s blog as he openly chronicles his approach. There&#8217;s always going to be some opinionated directions in a library like this, but I love that the guiding philosophy is so clear and is being used as a yardstick to drive decisions. As I write this, Chris is <a href="https://gomakethings.com/modular-css-redux/" rel="noopener">openly questioning the way he optimizes the library</a>, demonstrating the tensions between things like performance and a good developer experience.</p>



<p>Looks like it&#8217;ll be a good system, but even more than that, it&#8217;s a wonderful learning journey that&#8217;s worth following.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/kelpui/">KelpUI</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>


KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I’ve enjoyed following Chris as he’s published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.




He outlined his principles up front in a post back in April:
I’m imagining a system that includes…
Base styles for all of the common HTML elements.
Loads of utility classes for nudging and tweaking things.
Group classes for styling more complex UI elements without a million little classes.
Easy customization with CSS variables.
Web Components to progressively add interactivity to functional HTML.
All of the Web Component HTML lives in the light DOM, so its easy to style and reason about.
I’m imagining something that can be loaded directly from a CDN, downloaded locally, or imported if you want to roll your own build.
And that’s what I’ve seen so far. The Cascade is openly embraced and logically structured with Cascade Layers. Plenty of utility classes are included, with extra care put into how they are named. Selectors are kept simple and specificity is nice and low, where needed. Layouts are flexible with good constraints. Color palettes are accessible and sport semantic naming.
Chris has even put a ton of thought into how KelpUI is licensed.
KelpUI is still evolving, and that’s part of the beauty of looking at it now and following Chris’s blog as he openly chronicles his approach. There’s always going to be some opinionated directions in a library like this, but I love that the guiding philosophy is so clear and is being used as a yardstick to drive decisions. As I write this, Chris is openly questioning the way he optimizes the library, demonstrating the tensions between things like performance and a good developer experience.
Looks like it’ll be a good system, but even more than that, it’s a wonderful learning journey that’s worth following.
KelpUI originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.
KelpUI originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

KelpUI

<p>The CSS <code>if()</code> function enables us to use values conditionally, but what exactly does <code>if()</code> do? Let's look at a possible real-world use case.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/">Poking at the CSS if() Function a Little More: Conditional Color Theming</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://developer.chrome.com/release-notes/137" rel="noopener">Chrome 137</a> shipped the <a href="https://css-tricks.com/if-css-gets-inline-conditionals/"><code>if()</code> CSS function</a>, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, <code>if()</code> enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the <a href="https://css-tricks.com/almanac/functions/l/light-dark/"><code>light-dark()</code></a> function), so I’m sure you’re wondering: What exactly does <code>if()</code> do?</p>



<p><a href="https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/">Sunkanmi gave us a nice overview of the function yesterday</a>, poking at the syntax at a high level. I&#8217;d like to poke at it a little harder in this article, getting into some possible real-world usage.</p>



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



<p>To recap, <code>if()</code> conditionally assigns a value to a property based on the value of a CSS variable. For example, we could assign different values to the <a href="https://css-tricks.com/almanac/properties/c/color/"><code>color</code></a> and <a href="https://css-tricks.com/almanac/properties/b/background/"><code>background</code></a> properties based on the value of <code>--theme</code>:</p>



<ul class="wp-block-list">
<li><code>--theme</code>: <code>"Shamrock"</code>
<ul class="wp-block-list">
<li><code>color</code>: <code>‌hsl(146 50% 3%)</code></li>



<li><code>background</code>: <code>hsl(146 50% 40%)</code></li>
</ul>
</li>



<li><code>--theme</code>: Anything else
<ul class="wp-block-list">
<li><code>color</code>: <code>hsl(43 74% 3%)</code></li>



<li><code>background</code>: <code>hsl(43 74% 64%)</code></li>
</ul>
</li>
</ul>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  /* Change to fall back to the ‘else’ values */
  --theme: "Shamrock";

  body {
    color: if(style(--theme: "Shamrock"): hsl(146 50% 3%); else: hsl(43 74% 3%));
    background: if(style(--theme: "Shamrock"): hsl(146 50% 40%); else: hsl(43 74% 64%));
  }
}</code></pre>



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



<p>I don’t love the syntax (too many colons, brackets, and so on), but we can format it like this (which I think is a bit clearer):</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">color: if(
  style(--theme: "Shamrock"): hsl(146 50% 3%);
  else: hsl(43 74% 3%)
);</code></pre>



<p>We should be able to do a crazy number of things with <code>if()</code>, and I hope that becomes the case eventually, but I did some testing and learned that the syntax above is the only one that works. We can’t base the condition on the value of an ordinary CSS property (instead of a custom property), HTML attribute (using <a href="https://css-tricks.com/almanac/functions/a/attr/"><code>attr()</code></a>), or any other value. For now, at least, the condition must be based on the value of a custom property (CSS variable).</p>


<h3 class="wp-block-heading" id="exploring-what-we-can-do-with-if-">Exploring what we can do with <code>if()</code></h3>


<p>Judging from that first example, it’s clear that we can use <code>if()</code> for theming (and design systems overall). While we could utilize the <code>light-dark()</code> function for this, what if the themes aren’t strictly light and dark, or what if we want to have more than two themes or light and dark modes for each theme? Well, that’s what <code>if()</code> can be used for.</p>



<p>First, let’s create more themes/more conditions:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Saffron"; /* ...I choose you! */

  body {
    color: if(
      style(--theme: "Shamrock"): hsl(146 50% 3%);
      style(--theme: "Saffron"): hsl(43 74% 3%);
      style(--theme: "Amethyst"): hsl(282 47% 3%)
    );
    background: if(
      style(--theme: "Shamrock"): hsl(146 50% 40%);
      style(--theme: "Saffron"): hsl(43 74% 64%);
      style(--theme: "Amethyst"): hsl(282 47% 56%)
    );
    transition: 300ms;
  }
}</code></pre>



<p>Pretty simple really, but there are a few easy-to-miss things. Firstly, there’s no “else condition” this time, which means that if the theme isn’t <code>Shamrock</code>, <code>Saffron</code>, or <code>Amethyst</code>, the default browser styles are used. Otherwise, the <code>if()</code> function <em>resolves to the value of the first true statement</em>, which is the <code>Saffron</code> theme in this case. Secondly, transitions work right out of the box; in the demo below, I’ve added a user interface for toggling the <code>--theme</code>, and for the transition, <em>literally</em> just <code>transition: 300ms</code> alongside the <code>if()</code> functions:</p>



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



<p class="is-style-explanation"><strong>Note:</strong> if theme-swapping is user-controlled, such as selecting an option, you don’t actually need <code>if()</code> at all. You can just use the logic that I’ve used at the beginning of the demo (<code>:root:has(#shamrock:checked) { /* Styles */ }</code>). Amit Sheen has an <a href="https://www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/" rel="noopener">excellent demonstration over at Smashing Magazine</a>.</p>



<p>To make the code more maintainable though, we can slide the colors into CSS variables as well, then use them in the <code>if()</code> functions, <em>then</em> slide the <code>if()</code> functions themselves into CSS variables:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Setup */
:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I choose you! */

  /* Base colors */
  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  /* Base colors, but at 3% lightness */
  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  --background: if(
    style(--theme: "Shamrock"): var(--shamrock);
    style(--theme: "Saffron"): var(--saffron);
    style(--theme: "Amethyst"): var(--amethyst)
  );

  --color: if(
    style(--theme: "Shamrock"): var(--shamrock-complementary);
    style(--theme: "Saffron"): var(--saffron-complementary);
    style(--theme: "Amethyst"): var(--amethyst-complementary)
  );

  /* Usage */
  body {
    /* One variable, all ifs! */
    background: var(--background);
    color: var(--color);
    accent-color: var(--color);

    /* Can’t forget this! */
    transition: 300ms;
  }
}</code></pre>



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



<p>As well as using CSS variables within the <code>if()</code> function, we can also nest other functions. In the example below, I’ve thrown <code>light-dark()</code> in there, which basically inverts the colors for dark mode:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">--background: if(
  style(--theme: "Shamrock"): light-dark(var(--shamrock), var(--shamrock-complementary));
  style(--theme: "Saffron"): light-dark(var(--saffron), var(--saffron-complementary));
  style(--theme: "Amethyst"): light-dark(var(--amethyst), var(--amethyst-complementary))
);</code></pre>



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


<h3 class="wp-block-heading" id="-if-vs-container-style-queries"><code>if()</code> vs. Container style queries</h3>


<p>If you haven’t used <a href="https://css-tricks.com/css-container-queries/#aa-container-style-queries">container style queries</a> before, they basically check if a container has a certain CSS variable (much like the <code>if()</code> function). Here’s the exact same example/demo but with container style queries instead of the <code>if()</code> function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I choose you! */

  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  body {
    /* Container has chosen Shamrock! */
    @container style(--theme: "Shamrock") {
      --background: light-dark(var(--shamrock), var(--shamrock-complementary));
      --color: light-dark(var(--shamrock-complementary), var(--shamrock));
    }

    @container style(--theme: "Saffron") {
      --background: light-dark(var(--saffron), var(--saffron-complementary));
      --color: light-dark(var(--saffron-complementary), var(--saffron));
    }

    @container style(--theme: "Amethyst") {
      --background: light-dark(var(--amethyst), var(--amethyst-complementary));
      --color: light-dark(var(--amethyst-complementary), var(--amethyst));
    }

    background: var(--background);
    color: var(--color);
    accent-color: var(--color);
    transition: 300ms;
  }
}</code></pre>



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



<p>As you can see, where <code>if()</code> facilitates conditional values, container style queries facilitate conditional properties <em>and</em> values. Other than that, it really is just a different syntax.</p>


<h3 class="wp-block-heading" id="additional-things-you-can-do-with-if-but-might-not-realize-">Additional things you can do with <code>if()</code> (but might not realize)</h3>


<p>Check if a CSS variable exists:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Hide icons if variable isn’t set */
.icon {
  display: if(
    style(--icon-family): inline-block;
    else: none
  );
}</code></pre>



<p>Create more-complex conditional statements:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">h1 {
  font-size: if(
    style(--largerHeadings: true): xxx-large;
    style(--theme: "themeWithLargerHeadings"): xxx-large
  );
}</code></pre>



<p>Check if two CSS variables match:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* If #s2 has the same background as #s1, add a border */
#s2 {
  border-top: if(
    style(--s2-background: var(--s1-background)): thin solid red
  );
}</code></pre>


<h3 class="wp-block-heading" id="-if-and-calc-when-the-math-isn-t-mathing"><code>if()</code> and <code>calc()</code>: When the math isn’t mathing</h3>


<p>This won’t work (maybe someone can help me pinpoint why):</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">div {
  /* 3/3 = 1 */
  --calc: calc(3/3);
  /* Blue, because if() won’t calculate --calc */
  background: if(style(--calc: 1): red; else: blue);
}</code></pre>



<p>To make <code>if()</code> calculate <code>--calc</code>, we’ll need to register the CSS variable using <code><a href="https://css-tricks.com/almanac/rules/p/property/">@property</a></code> first, like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@property --calc {
  syntax: "&lt;number>";
  initial-value: 0;
  inherits: false;
}</code></pre>


<h3 class="wp-block-heading" id="closing-thoughts">Closing thoughts</h3>


<p>Although I’m not keen on the syntax and how unreadable it can sometimes look (especially if it’s formatted on one line), I’m mega excited to see how <code>if()</code> evolves. I’d love to be able to use it with ordinary properties (e.g., <code>color: if(style(background: white): black; style(background: black): white);</code>) to avoid having to set CSS variables where possible.</p>



<p>It’d also be awesome if <code>calc()</code> calculations could be calculated on the fly without having to register the variable.</p>



<p>That being said, I’m still super happy with what <code>if()</code> does currently, and can’t wait to build even simpler design systems.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/">Poking at the CSS if() Function a Little More: Conditional Color Theming</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>


Chrome 137 shipped the if() CSS function, so it’s totally possible we’ll see other browsers implement it, though it’s tough to know exactly when. Whatever the case, if() enables us to use values conditionally, which we can already do with queries and other functions (e.g., media queries and the light-dark() function), so I’m sure you’re wondering: What exactly does if() do?
Sunkanmi gave us a nice overview of the function yesterday, poking at the syntax at a high level. I’d like to poke at it a little harder in this article, getting into some possible real-world usage.




To recap, if() conditionally assigns a value to a property based on the value of a CSS variable. For example, we could assign different values to the color and background properties based on the value of --theme:
--theme: "Shamrock"

color: ‌hsl(146 50% 3%)
background: hsl(146 50% 40%)
--theme: Anything else

color: hsl(43 74% 3%)
background: hsl(43 74% 64%)
:root {
  /* Change to fall back to the ‘else’ values */
  --theme: "Shamrock";

  body {
    color: if(style(--theme: "Shamrock"): hsl(146 50% 3%); else: hsl(43 74% 3%));
    background: if(style(--theme: "Shamrock"): hsl(146 50% 40%); else: hsl(43 74% 64%));
  }
}
CodePen Embed Fallback
I don’t love the syntax (too many colons, brackets, and so on), but we can format it like this (which I think is a bit clearer):
color: if(
  style(--theme: "Shamrock"): hsl(146 50% 3%);
  else: hsl(43 74% 3%)
);
We should be able to do a crazy number of things with if(), and I hope that becomes the case eventually, but I did some testing and learned that the syntax above is the only one that works. We can’t base the condition on the value of an ordinary CSS property (instead of a custom property), HTML attribute (using attr()), or any other value. For now, at least, the condition must be based on the value of a custom property (CSS variable).
Exploring what we can do with if()
Judging from that first example, it’s clear that we can use if() for theming (and design systems overall). While we could utilize the light-dark() function for this, what if the themes aren’t strictly light and dark, or what if we want to have more than two themes or light and dark modes for each theme? Well, that’s what if() can be used for.
First, let’s create more themes/more conditions:
:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Saffron"; /* ...I choose you! */

  body {
    color: if(
      style(--theme: "Shamrock"): hsl(146 50% 3%);
      style(--theme: "Saffron"): hsl(43 74% 3%);
      style(--theme: "Amethyst"): hsl(282 47% 3%)
    );
    background: if(
      style(--theme: "Shamrock"): hsl(146 50% 40%);
      style(--theme: "Saffron"): hsl(43 74% 64%);
      style(--theme: "Amethyst"): hsl(282 47% 56%)
    );
    transition: 300ms;
  }
}
Pretty simple really, but there are a few easy-to-miss things. Firstly, there’s no “else condition” this time, which means that if the theme isn’t Shamrock, Saffron, or Amethyst, the default browser styles are used. Otherwise, the if() function resolves to the value of the first true statement, which is the Saffron theme in this case. Secondly, transitions work right out of the box; in the demo below, I’ve added a user interface for toggling the --theme, and for the transition, literally just transition: 300ms alongside the if() functions:
CodePen Embed Fallback
Note: if theme-swapping is user-controlled, such as selecting an option, you don’t actually need if() at all. You can just use the logic that I’ve used at the beginning of the demo (:root:has(#shamrock:checked) { /* Styles */ }). Amit Sheen has an excellent demonstration over at Smashing Magazine.
To make the code more maintainable though, we can slide the colors into CSS variables as well, then use them in the if() functions, then slide the if() functions themselves into CSS variables:
/* Setup */
:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I choose you! */

  /* Base colors */
  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  /* Base colors, but at 3% lightness */
  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  --background: if(
    style(--theme: "Shamrock"): var(--shamrock);
    style(--theme: "Saffron"): var(--saffron);
    style(--theme: "Amethyst"): var(--amethyst)
  );

  --color: if(
    style(--theme: "Shamrock"): var(--shamrock-complementary);
    style(--theme: "Saffron"): var(--saffron-complementary);
    style(--theme: "Amethyst"): var(--amethyst-complementary)
  );

  /* Usage */
  body {
    /* One variable, all ifs! */
    background: var(--background);
    color: var(--color);
    accent-color: var(--color);

    /* Can’t forget this! */
    transition: 300ms;
  }
}
CodePen Embed Fallback
As well as using CSS variables within the if() function, we can also nest other functions. In the example below, I’ve thrown light-dark() in there, which basically inverts the colors for dark mode:
--background: if(
  style(--theme: "Shamrock"): light-dark(var(--shamrock), var(--shamrock-complementary));
  style(--theme: "Saffron"): light-dark(var(--saffron), var(--saffron-complementary));
  style(--theme: "Amethyst"): light-dark(var(--amethyst), var(--amethyst-complementary))
);
CodePen Embed Fallback
if() vs. Container style queries
If you haven’t used container style queries before, they basically check if a container has a certain CSS variable (much like the if() function). Here’s the exact same example/demo but with container style queries instead of the if() function:
:root {
  /* Shamrock | Saffron | Amethyst */
  --theme: "Shamrock"; /* ...I choose you! */

  --shamrock: hsl(146 50% 40%);
  --saffron: hsl(43 74% 64%);
  --amethyst: hsl(282 47% 56%);

  --shamrock-complementary: hsl(from var(--shamrock) h s 3%);
  --saffron-complementary: hsl(from var(--saffron) h s 3%);
  --amethyst-complementary: hsl(from var(--amethyst) h s 3%);

  body {
    /* Container has chosen Shamrock! */
    @container style(--theme: "Shamrock") {
      --background: light-dark(var(--shamrock), var(--shamrock-complementary));
      --color: light-dark(var(--shamrock-complementary), var(--shamrock));
    }

    @container style(--theme: "Saffron") {
      --background: light-dark(var(--saffron), var(--saffron-complementary));
      --color: light-dark(var(--saffron-complementary), var(--saffron));
    }

    @container style(--theme: "Amethyst") {
      --background: light-dark(var(--amethyst), var(--amethyst-complementary));
      --color: light-dark(var(--amethyst-complementary), var(--amethyst));
    }

    background: var(--background);
    color: var(--color);
    accent-color: var(--color);
    transition: 300ms;
  }
}
CodePen Embed Fallback
As you can see, where if() facilitates conditional values, container style queries facilitate conditional properties and values. Other than that, it really is just a different syntax.
Additional things you can do with if() (but might not realize)
Check if a CSS variable exists:
/* Hide icons if variable isn’t set */
.icon {
  display: if(
    style(--icon-family): inline-block;
    else: none
  );
}
Create more-complex conditional statements:
h1 {
  font-size: if(
    style(--largerHeadings: true): xxx-large;
    style(--theme: "themeWithLargerHeadings"): xxx-large
  );
}
Check if two CSS variables match:
/* If #s2 has the same background as #s1, add a border */
#s2 {
  border-top: if(
    style(--s2-background: var(--s1-background)): thin solid red
  );
}
if() and calc(): When the math isn’t mathing
This won’t work (maybe someone can help me pinpoint why):
div {
  /* 3/3 = 1 */
  --calc: calc(3/3);
  /* Blue, because if() won’t calculate --calc */
  background: if(style(--calc: 1): red; else: blue);
}
To make if() calculate --calc, we’ll need to register the CSS variable using @property first, like this:
@property --calc {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
Closing thoughts
Although I’m not keen on the syntax and how unreadable it can sometimes look (especially if it’s formatted on one line), I’m mega excited to see how if() evolves. I’d love to be able to use it with ordinary properties (e.g., color: if(style(background: white): black; style(background: black): white);) to avoid having to set CSS variables where possible.
It’d also be awesome if calc() calculations could be calculated on the fly without having to register the variable.
That being said, I’m still super happy with what if() does currently, and can’t wait to build even simpler design systems.
Poking at the CSS if() Function a Little More: Conditional Color Theming originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.
Poking at the CSS if() Function a Little More: Conditional Color Theming originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Poking at the CSS if() Function a Little More: Conditional Color Theming

<p>The CSS <code>if()</code> function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/">Lightly Poking at the CSS if() Function in Chrome 137</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&#8217;ve known it for a few weeks now, but the CSS <code>if()</code> function <a href="https://css-tricks.com/quick-hit-49/">officially shipped in Chrome 137 version</a>. It&#8217;s really fast development for a feature that <a href="https://css-tricks.com/if-css-gets-inline-conditionals/">the CSSWG resolved to add less than a year ago</a>. We can typically expect this sort of thing — especially one that is unlike anything we currently have in CSS — to develop over a number of years before we can get our dirty hands on it. But here we are!</p>



<p>I’m not here to debate whether&nbsp;<code>if()</code>&nbsp;in CSS should exist, nor do I want to answer whether CSS is a programming language;&nbsp;<a href="https://css-tricks.com/is-css-a-programming-language/">Chris already did that</a>&nbsp;and definitely explained how exhausting that <em>fun </em>little argument can be.</p>



<p>What I <em>am</em> here to do is poke at <code>if()</code> in these early days of support and explore what we know about it today at a pretty high level to get a feel for its syntax. <a href="https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/">We poke a little harder at it in another post</a> where we&#8217;ll look at a more heady real-world example.</p>



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


<h3 class="wp-block-heading" id="it-s-finally-here-">Yes, it’s already here!</h3>


<p>Conditional statements exist everywhere in CSS. From at-rules to the parsing and matching of every statement to the DOM, CSS has always had conditionals. And, <a href="https://lea.verou.me/blog/2024/css-conditionals/" rel="noopener">as Lea Verou put it</a>,&nbsp;every selector is essentially a conditional!&nbsp;What we haven&#8217;t had, however, is a way to style an element against multiple conditions in one line, and then have it return a result&nbsp;<em>conditionally</em>.</p>



<p>The <code>if()</code>&nbsp;function is a more advanced level of conditionals, where you can manipulate and have all your conditional statements assigned to a single property.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.element {
  color: if(style(--theme: dark): oklch(52% 0.18 140); else: oklch(65% 0.05 220));
}</code></pre>



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


<h3 class="wp-block-heading" id="how-does-if-work-">How does <code>if()</code> work?</h3>


<p>Well before Chrome implemented the feature, back in 2021 when it was first proposed, the early syntax was like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;if()> = if( &lt;container-query>, [&lt;declaration-value>]{1, 2} )</code></pre>



<p>Now we&#8217;re looking at this instead:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;if()> = if(
  [&lt;if-statement>: &lt;result>]*;
  &lt;if-statement>: &lt;result> ;?
)</code></pre>



<p>Where…</p>



<ul class="wp-block-list">
<li>The first&nbsp;<code>&lt;if-statement&gt;</code>&nbsp;represents conditions inside either&nbsp;<code>style()</code>,&nbsp;<code>media()</code>, or&nbsp;<code>supports()</code>&nbsp;wrapper functions. This allows us to write multiple if statements, as many as we may desire. Yes, you read that right. As many as we want!</li>



<li>The final&nbsp;<code>&lt;if-statement&gt;</code>&nbsp;condition (<code>else</code>) is the default value when all other if statements fail.</li>
</ul>



<p>That&#8217;s the &#8220;easy&#8221; way to read the syntax. This is what&#8217;s <a href="https://www.w3.org/TR/css-values-5/#if-notation" rel="noopener">in the spec</a>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">&lt;if()> = if( [ &lt;if-branch> ; ]* &lt;if-branch> ;? )
&lt;if-branch> = &lt;if-condition> : &lt;declaration-value>?
&lt;if-condition> = &lt;boolean-expr[ &lt;if-test> ]> | else
&lt;if-test> =
  supports( [ &lt;ident> : &lt;declaration-value> ] | &lt;supports-condition> )
  media( &lt;media-feature> | &lt;media-condition> ) |
  style( &lt;style-query> )</code></pre>



<p>A little wordy, right? So, let’s look at an example to wrap our heads around it. Say we want to change an element&#8217;s padding depending on a given active color scheme. We would set an <code>if()</code> statement with a&nbsp;<code>style()</code>&nbsp;function inside, and that would compare a given value with something like a custom variable to output a result. All this talk sounds so complicated, so let&#8217;s jump into code:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.element {
  padding: if(style(--theme: dark): 2rem; else: 3rem);
}</code></pre>



<p>The example above sets the padding to&nbsp;<code>2rem</code>&#8230;&nbsp;<em>if</em>&nbsp;the&nbsp;<code>--theme</code>&nbsp;variable is set to <code>dark</code>. <em>If</em> not, it defaults to&nbsp;<code>3rem</code>. I know, not exactly the sort of thing you might actually use the function for, but it&#8217;s merely to illustrate the basic idea.</p>


<h3 class="wp-block-heading" id="make-the-syntax-clean-">Make the syntax clean!</h3>


<p>One thing I noticed, though, is that things can get convoluted very&nbsp;<em>very</em>&nbsp;fast. Imagine you have three <code>if()</code> statements like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;
}

.element {
  height: if(
    style(--height: 3rem): 14.5rem; style(--width: 7rem): 10rem; style(--weight: 100rem): 2rem; else: var(--height)
  );
}</code></pre>



<p>We&#8217;re only working with three statements and, I&#8217;ll be honest, it makes my eyes hurt with complexity. So, I’m anticipating&nbsp;<code>if()</code>&nbsp;style patterns to be developed soon or <em>prettier</em> versions to adopt a formatting style for this.</p>



<p>For example, if I were to break things out to be more readable, I would likely do something like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;
}

/* This is much cleaner, don't you think? */
.element {
  height: if(
    style(--height: 3rem): 14.5rem; 
    style(--width: 7rem): 10rem; 
    style(--weight: 100rem): 2rem; 
    else: var(--height)
  );
}</code></pre>



<p>Much better, right? Now, you can definitely understand what is going on at a glance. That&#8217;s just me, though. Maybe you have different ideas&#8230; and <em>if</em> you do, I&#8217;d love to see them in the comments.</p>



<p>Here’s a quick demo showing multiple conditionals in CSS for this animated ball to work. The width of the ball changes based on some custom variable values set. Gentle reminder that this is only supported in Chrome 137+ at the time I&#8217;m writing this:</p>



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


<h3 class="wp-block-heading" id="how-do-supports-and-media-work-in-if-">The <code>supports()</code> and <code>media()</code> statements</h3>


<p>Think of&nbsp;<code>supports()</code>&nbsp;the same way you would use the&nbsp;<a href="https://css-tricks.com/almanac/rules/s/supports/"><code>@supports</code></a>&nbsp;at-rule. In fact, they work about the same, at least conceptually:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* formal syntax for @supports */
@supports &lt;supports-condition> {
  &lt;rule-list>
}

/* formal syntax for supports() */
supports( [ &lt;ident> : &lt;declaration-value> ] | &lt;supports-condition> )</code></pre>



<p>The only difference here is that <code>supports()</code> returns a value instead of matching a block of code. But, how does this work in&nbsp;<em>real code?</em></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>The&nbsp;<code>&lt;ident&gt;: &lt;declaration-value&gt;</code>&nbsp;you see here is, in this case, the&nbsp;<strong>property name: property value</strong>&nbsp;e.g.&nbsp;<code>display: flex</code>.</p>
</blockquote>



<p>Let’s say you want to check for support for the&nbsp;<code><a href="https://css-tricks.com/almanac/properties/b/backdrop-filter/">backdrop-filter</a></code>&nbsp;property, particularly the&nbsp;<code>blur()</code>&nbsp;function. Typically, you can do this with&nbsp;<code>@supports</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Fallback in case the browser doesn't support backdrop-filter */
.card {
  backdrop-filter: unset;
  background-color: oklch(20% 50% 40% / 0.8);
}

@supports (backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
    background-color: oklch(20% 50% 40% / 0.8);
  }
}</code></pre>



<p>But, with CSS&nbsp;<code>if()</code>, we can also do this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.card {
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    else: unset
  );
}</code></pre>



<p class="is-style-explanation"><strong>Note:</strong> Think of <code>unset</code> here as a possible fallback for graceful degradation.</p>



<p>That looks awesome, right? Multiple conditions can be checked as well for&nbsp;<code>supports()</code>&nbsp;and any of the supported functions. For example:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.card {
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    supports(backdrop-filter: invert(50%)): invert(50%);
    supports(backdrop-filter: hue-rotate(230deg)): hue-rotate(230deg);;
    else: unset
  );
}</code></pre>



<p>Now, take a look at the&nbsp;<code><a href="https://css-tricks.com/almanac/rules/m/media/">@media</a></code> at-rule.&nbsp;<a href="https://css-tricks.com/a-complete-guide-to-css-media-queries/">You can compare and check for a bunch of stuff</a>, but I’d like to keep it simple and check for whether or not a screen size is a certain width and apply styles based on that:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}</code></pre>



<p>The&nbsp;<code>media()</code>&nbsp;wrapper works almost the same way as its at-rule counterpart. Note its syntax from the spec:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* formal syntax for @media */
@media &lt;media-query-list> {
  &lt;rule-list>
}

/* formal syntax for media() */
media( &lt;media-feature> | &lt;media-condition> )</code></pre>



<p>Notice how at the&nbsp;<em>end of the day</em>, the formal syntax (<code>&lt;media-query&gt;</code>) is the same as the syntax for the&nbsp;<code>media()</code>&nbsp;function. And instead of returning a block of code in&nbsp;<code>@media</code>, you’d have something like this in the CSS inline&nbsp;<code>if()</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    else: 2rem
  );
}</code></pre>


<h3 class="wp-block-heading" id="how-is-browser-support-for-if-">Again, these are early days</h3>


<p>As of the time of this writing, only the&nbsp;<a href="https://caniuse.com/?search=if(" rel="noopener">latest update of Chrome supports&nbsp;<code>if()</code></a>). I’m guessing other browsers will follow suit once usage and interest come in. I have no idea when that will happen. Until then, I think it&#8217;s fun to experiment with this stuff, just as others have been doing:</p>



<ul class="wp-block-list">
<li><a href="https://css-tricks.com/the-what-if-machine-bringing-the-iffy-future-of-css-into-the-present/">The What If Machine: Bringing the “Iffy” Future of CSS into the Present</a> (Lee Meyer)</li>



<li><a href="https://css-tip.com/inline-if/" rel="noopener">How To Correctly Use <code>if()</code> In CSS</a> (Temani Afif)</li>



<li><a href="https://blog.kizu.dev/future-proofing-indirect-cyclic-conditions/" rel="noopener">Future-Proofing Indirect Cyclical Conditions</a> (Roma Komarov)</li>



<li><a href="https://www.amitmerchant.com/the-if-function-in-css/" rel="noopener">The new <code>if()</code> function in CSS has landed in the latest Chrome</a> (Amit Merchant)</li>
</ul>



<p>Experimenting with early features is how we help CSS evolve. If you&#8217;re trying things out, consider adding your feedback to the <a href="https://github.com/w3c/csswg-drafts/issues/" rel="noopener">CSSWG</a> and <a href="https://issues.chromium.org/issues/wizard?pli=1" rel="noopener">Chromium</a>. The more use cases, the better, and that will certain help make future implementations better as well.</p>



<p>Now that we have a high-level feel for the <code>if()</code>syntax, <a href="https://css-tricks.com/poking-at-the-css-if-function-a-little-more-conditional-color-theming/">we&#8217;ll poke a little harder at the function in another article</a> where we put it up against a real-world use case.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/lightly-poking-at-the-css-if-function-in-chrome-137/">Lightly Poking at the CSS if() Function in Chrome 137</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’ve known it for a few weeks now, but the CSS if() function officially shipped in Chrome 137 version. It’s really fast development for a feature that the CSSWG resolved to add less than a year ago. We can typically expect this sort of thing — especially one that is unlike anything we currently have in CSS — to develop over a number of years before we can get our dirty hands on it. But here we are!
I’m not here to debate whether if() in CSS should exist, nor do I want to answer whether CSS is a programming language; Chris already did that and definitely explained how exhausting that fun little argument can be.
What I am here to do is poke at if() in these early days of support and explore what we know about it today at a pretty high level to get a feel for its syntax. We poke a little harder at it in another post where we’ll look at a more heady real-world example.



Yes, it’s already here!
Conditional statements exist everywhere in CSS. From at-rules to the parsing and matching of every statement to the DOM, CSS has always had conditionals. And, as Lea Verou put it, every selector is essentially a conditional! What we haven’t had, however, is a way to style an element against multiple conditions in one line, and then have it return a result conditionally.
The if() function is a more advanced level of conditionals, where you can manipulate and have all your conditional statements assigned to a single property.
.element {
  color: if(style(--theme: dark): oklch(52% 0.18 140); else: oklch(65% 0.05 220));
}
CodePen Embed Fallback
How does if() work?
Well before Chrome implemented the feature, back in 2021 when it was first proposed, the early syntax was like this:
<if()> = if( <container-query>, [<declaration-value>]{1, 2} )
Now we’re looking at this instead:
<if()> = if(
  [<if-statement>: <result>]*;
  <if-statement>: <result> ;?
)
Where…
The first <if-statement> represents conditions inside either style(), media(), or supports() wrapper functions. This allows us to write multiple if statements, as many as we may desire. Yes, you read that right. As many as we want!
The final <if-statement> condition (else) is the default value when all other if statements fail.
That’s the “easy” way to read the syntax. This is what’s in the spec:
<if()> = if( [ <if-branch> ; ]* <if-branch> ;? )
<if-branch> = <if-condition> : <declaration-value>?
<if-condition> = <boolean-expr[ <if-test> ]> | else
<if-test> =
  supports( [ <ident> : <declaration-value> ] | <supports-condition> )
  media( <media-feature> | <media-condition> ) |
  style( <style-query> )
A little wordy, right? So, let’s look at an example to wrap our heads around it. Say we want to change an element’s padding depending on a given active color scheme. We would set an if() statement with a style() function inside, and that would compare a given value with something like a custom variable to output a result. All this talk sounds so complicated, so let’s jump into code:
.element {
  padding: if(style(--theme: dark): 2rem; else: 3rem);
}
The example above sets the padding to 2rem… if the --theme variable is set to dark. If not, it defaults to 3rem. I know, not exactly the sort of thing you might actually use the function for, but it’s merely to illustrate the basic idea.
Make the syntax clean!
One thing I noticed, though, is that things can get convoluted very very fast. Imagine you have three if() statements like this:
:root {
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;
}

.element {
  height: if(
    style(--height: 3rem): 14.5rem; style(--width: 7rem): 10rem; style(--weight: 100rem): 2rem; else: var(--height)
  );
}
We’re only working with three statements and, I’ll be honest, it makes my eyes hurt with complexity. So, I’m anticipating if() style patterns to be developed soon or prettier versions to adopt a formatting style for this.
For example, if I were to break things out to be more readable, I would likely do something like this:
:root {
  --height: 12.5rem;
  --width: 4rem;
  --weight: 2rem;
}

/* This is much cleaner, don't you think? */
.element {
  height: if(
    style(--height: 3rem): 14.5rem; 
    style(--width: 7rem): 10rem; 
    style(--weight: 100rem): 2rem; 
    else: var(--height)
  );
}
Much better, right? Now, you can definitely understand what is going on at a glance. That’s just me, though. Maybe you have different ideas… and if you do, I’d love to see them in the comments.
Here’s a quick demo showing multiple conditionals in CSS for this animated ball to work. The width of the ball changes based on some custom variable values set. Gentle reminder that this is only supported in Chrome 137+ at the time I’m writing this:
CodePen Embed Fallback
The supports() and media() statements
Think of supports() the same way you would use the @supports at-rule. In fact, they work about the same, at least conceptually:
/* formal syntax for @supports */
@supports <supports-condition> {
  <rule-list>
}

/* formal syntax for supports() */
supports( [ <ident> : <declaration-value> ] | <supports-condition> )
The only difference here is that supports() returns a value instead of matching a block of code. But, how does this work in real code?
The <ident>: <declaration-value> you see here is, in this case, the property name: property value e.g. display: flex.
Let’s say you want to check for support for the backdrop-filter property, particularly the blur() function. Typically, you can do this with @supports:
/* Fallback in case the browser doesn't support backdrop-filter */
.card {
  backdrop-filter: unset;
  background-color: oklch(20% 50% 40% / 0.8);
}

@supports (backdrop-filter: blur(10px)) {
  .card {
    backdrop-filter: blur(10px);
    background-color: oklch(20% 50% 40% / 0.8);
  }
}
But, with CSS if(), we can also do this:
.card {
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    else: unset
  );
}
Note: Think of unset here as a possible fallback for graceful degradation.
That looks awesome, right? Multiple conditions can be checked as well for supports() and any of the supported functions. For example:
.card {
  backdrop-filter: if(
    supports(backdrop-filter: blur(10px)): blur(10px);
    supports(backdrop-filter: invert(50%)): invert(50%);
    supports(backdrop-filter: hue-rotate(230deg)): hue-rotate(230deg);;
    else: unset
  );
}
Now, take a look at the @media at-rule. You can compare and check for a bunch of stuff, but I’d like to keep it simple and check for whether or not a screen size is a certain width and apply styles based on that:
h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}
The media() wrapper works almost the same way as its at-rule counterpart. Note its syntax from the spec:
/* formal syntax for @media */
@media <media-query-list> {
  <rule-list>
}

/* formal syntax for media() */
media( <media-feature> | <media-condition> )
Notice how at the end of the day, the formal syntax (<media-query>) is the same as the syntax for the media() function. And instead of returning a block of code in @media, you’d have something like this in the CSS inline if():
h1 {
  font-size: if(
    media(width >= 1200px): 3rem;
    media(width >= 768px): 2.5rem;
    else: 2rem
  );
}
Again, these are early days
As of the time of this writing, only the latest update of Chrome supports if()). I’m guessing other browsers will follow suit once usage and interest come in. I have no idea when that will happen. Until then, I think it’s fun to experiment with this stuff, just as others have been doing:
The What If Machine: Bringing the “Iffy” Future of CSS into the Present (Lee Meyer)
How To Correctly Use if() In CSS (Temani Afif)
Future-Proofing Indirect Cyclical Conditions (Roma Komarov)
The new if() function in CSS has landed in the latest Chrome (Amit Merchant)
Experimenting with early features is how we help CSS evolve. If you’re trying things out, consider adding your feedback to the CSSWG and Chromium. The more use cases, the better, and that will certain help make future implementations better as well.
Now that we have a high-level feel for the if()syntax, we’ll poke a little harder at the function in another article where we put it up against a real-world use case.
Lightly Poking at the CSS if() Function in Chrome 137 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The CSS if() function was recently implemented in Chrome 137, making it the first instance where we have it supported by a mainstream browser. Let's poke at it a bit at a very high level.
Lightly Poking at the CSS if() Function in Chrome 137 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Lightly Poking at the CSS if() Function in Chrome 137

<p>Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/">A Better API for the Intersection and Mutation Observers</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 a <a href="">previous article</a>, I showed you how to refactor the Resize Observer API into something way simpler to use:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// From this
const observer = new ResizeObserver(observerFn)

function observerFn (entries) {
  for (let entry of entries) {
    // Do something with each entry
  }
}

const element = document.querySelector('#some-element')
observer.observe(element);</code></pre>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// To this 
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, {
  callback({ entry }) {
    // Do something with each entry
  }
})</code></pre>



<p>Today, we’re going to do the same for <code>MutationObserver</code> and <code>IntersectionObserver</code>.</p>



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


<h3 class="wp-block-heading" id="refactoring-mutationobserver">Refactoring Mutation Observer</h3>


<p><code>MutationObserver</code> has almost the same API as that of <code>ResizeObserver</code>. So we can practically copy-paste the entire chunk of code we wrote for <code>resizeObserver</code> to <code>mutationObserver</code>.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">export function mutationObserver(node, options = {}) {
  const observer = new MutationObserver(observerFn)
  const { callback, ...opts } = options
  observer.observe(node, opts)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('mutate', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}</code></pre>



<p>You can now use <code>mutationObserver</code> with the <code>callback</code> pattern or event listener pattern.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const node = document.querySelector('.some-element')

// Callback pattern 
const obs = mutationObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('mutate', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})</code></pre>



<p>Much easier!</p>


<h4 class="wp-block-heading" id="disconnecting-the-observer">Disconnecting the observer</h4>


<p>Unlike <code>ResizeObserver</code> who has two methods to stop observing elements, <code>MutationObserver</code> only has one, the <code>disconnect</code> method.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">export function mutationObserver(node, options = {}) {
  // ... 
  return {
    disconnect() {
      observer.disconnect()
    }
  }
}</code></pre>



<p>But,&nbsp;<code>MutationObserver</code>&nbsp;has a&nbsp;<code>takeRecords</code>&nbsp;method that lets you&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/takeRecords#examples" target="_blank" rel="noreferrer noopener">get unprocessed records</a>&nbsp;before you disconnect. Since we should <code>takeRecords</code> before we <code>disconnect</code>, let&#8217;s use it inside <code>disconnect</code>.</p>



<p>To create a complete API, we can return this method as well.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">export function mutationObserver(node, options = {}) {
  // ... 
  return {
    // ...
    disconnect() {
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    }
  }
}</code></pre>



<p>Now we can disconnect our mutation observer easily with <code>disconnect</code>.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const node = document.querySelector('.some-element')
const obs = mutationObserver(/* ... */)

obs.disconnect()</code></pre>


<h4 class="wp-block-heading" id="mutationobserver-s-observe-options">MutationObserver&#8217;s observe options</h4>


<p>In case you were wondering, <code>MutationObserver</code>’s <code>observe</code> method can take in 7 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#options" rel="noopener">options</a>. Each one of them determines what to observe, and they all default to <code>false</code>.</p>



<ul class="wp-block-list">
<li><code>subtree</code>: Monitors the entire subtree of nodes</li>



<li><code>childList</code>: Monitors for addition or removal children elements. If <code>subtree</code> is <code>true</code>, this monitors all descendant elements.</li>



<li><code>attributes</code>: Monitors for a change of attributes</li>



<li><code>attributeFilter</code>: Array of specific attributes to monitor</li>



<li><code>attributeOldValue</code>: Whether to record the previous attribute value if it was changed</li>



<li><code>characterData</code>: Monitors for change in character data</li>



<li><code>characterDataOldValue</code>: Whether to record the previous character data value</li>
</ul>


<h3 class="wp-block-heading" id="refactoring-intersection-observer">Refactoring Intersection Observer</h3>


<p>The API for <code>IntersectionObserver</code> is similar to other observers. Again, you have to:</p>



<ol class="wp-block-list">
<li><strong>Create a new observer:</strong> with the <code>new</code> keyword. This observer takes in an observer function to execute.</li>



<li><strong>Do something with the observed changes:</strong> This is done via the observer function that is passed into the observer.</li>



<li><strong>Observe a specific element:</strong> By using the <code>observe</code> method.</li>



<li><strong>(Optionally) unobserve the element:</strong> By using the <code>unobserve</code> or <code>disconnect</code> method (depending on which Observer you&#8217;re using).</li>
</ol>



<p>But <code>IntersectionObserver</code> requires you to pass the options in Step 1 (instead of Step 3). So here’s the code to use the <code>IntersectionObserver</code> API.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Step 1: Create a new observer and pass in relevant options
const options = {/*...*/}
const observer = new IntersectionObserver(observerFn, options)

// Step 2: Do something with the observed changes
function observerFn (entries) {
  for (const entry of entries) {
    // Do something with entry
  }
}

// Step 3: Observe the element
const element = document.querySelector('#some-element')
observer.observe(element)

// Step 4 (optional): Disconnect the observer when we're done using it
observer.disconnect(element)</code></pre>



<p>Since the code is similar, we can also copy-paste the code we wrote for <code>mutationObserver</code> into <code>intersectionObserver</code>. When doing so, we have to remember to pass the options into <code>IntersectionObserver</code> and not the <code>observe</code> method.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line="2,3"><code markup="tt">export function mutationObserver(node, options = {}) {
  const { callback, ...opts } = options
  const observer = new MutationObserver(observerFn, opts)
  observer.observe(node)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('intersect', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}</code></pre>



<p>Now we can use <code>intersectionObserver</code> with the same easy-to-use API:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const node = document.querySelector('.some-element')

// Callback pattern 
const obs = intersectionObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('intersect', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})</code></pre>


<h4 class="wp-block-heading" id="disconnecting-the-intersection-observer">Disconnecting the Intersection Observer</h4>


<p><code>IntersectionObserver</code>&#8216;s methods are a union of both <code>resizeObserver</code> and <code>mutationObserver</code>. It has four methods:</p>



<ul class="wp-block-list">
<li><code>observe</code>: observe an element</li>



<li><code>unobserve</code>: stops observing one element</li>



<li><code>disconnect</code>: stops observing all elements</li>



<li><code>takeRecords</code>: gets unprocessed records</li>
</ul>



<p>So, we can combine the methods we&#8217;ve written in <code>resizeObserver</code> and <code>mutationObserver</code> for this one:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">export function intersectionObserver(node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },

    disconnect() {
      // Take records before disconnecting.
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    },
    
    takeRecords() {
      return observer.takeRecords()
    },
  }
}</code></pre>



<p>Now we can stop observing with the <code>unobserve</code> or <code>disconnect</code> method.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const node = document.querySelector('.some-element')
const obs = intersectionObserver(node, /*...*/)

// Disconnect the observer
obs.disconnect()</code></pre>


<h4 class="wp-block-heading" id="-intersectionobserver-options"><code>IntersectionObserver</code> options</h4>


<p>In case you were wondering, <code>IntersectionObserver</code> takes in three options:</p>



<ul class="wp-block-list">
<li><code>root</code>: The element used to check if observed elements are visible</li>



<li><code>rootMargin</code>: Lets you specify an offset amount from the edges of the root</li>



<li><code>threshold</code>: Determines when to log an observer entry</li>
</ul>



<p>Here&#8217;s an article to help you <a href="https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/">understand <code>IntersectionObserver</code> options</a>.</p>


<h3 class="wp-block-heading" id="using-this-in-practice-via-splendid-labz">Using this in practice via Splendid Labz</h3>


<p>Splendid Labz has a <a href="https://splendidlabz.com/utils" rel="noopener"><code>utils</code></a> library that contains <code>resizeObserver</code>, <code>mutationObserver</code> and <code>IntersectionObserver</code>.</p>



<p>You can use them if you don’t want to copy-paste the above snippets into every project.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">import { 
  resizeObserver, 
  intersectionObserver, 
  mutationObserver 
} from 'splendidlabz/utils/dom'

const mode = document.querySelector(‘some-element’)

const resizeObs = resizeObserver(node, /* ... */)
const intersectObs = intersectionObserver(node, /* ... */)
const mutateObs = mutationObserver(node, /* ... */)</code></pre>



<p>Aside from the code we&#8217;ve written together above (and in the <a href="">previous article</a>), each observer method in Splendid Labz is capable of letting you observe and stop observing multiple elements at once (except <code>mutationObserver</code> because it doesn&#8217;t have a <code>unobserve</code> method)</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const items = document.querySelectorAll('.elements')
const obs = resizeObserver(items, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

// Unobserves two items at once
const subset = [items[0], items[1]]
obs.unobserve(subset)</code></pre>



<p>So it might be just a tad easier to use the functions I&#8217;ve already created for you. &#x1f609;</p>



<p>Shameless Plug: <a href="https://splendidlabz.com" rel="noopener">Splendid Labz</a> contains a ton of useful utilities — for CSS, JavaScript, Astro, and Svelte — that I have created over the last few years.</p>



<p>I&#8217;ve parked them all in into Splendid Labz, so I no longer need to scour the internet for useful functions for most of my web projects. If you take a look, you might just enjoy what I&#8217;ve complied!</p>



<p>(I’m still making the docs at the time of writing so it can seem relatively empty. Check back every now and then!)</p>


<h3 class="wp-block-heading" id="learning-to-refactor-stuff">Learning to refactor stuff</h3>


<p>If you love the way I explained how to refactor the observer APIs, you may find how I teach JavaScript interesting.</p>



<p>In <a href="https://learnjavascript.today" rel="noopener">my JavaScript course</a>, you’ll learn to build 20 real life components. We’ll start off simple, add features, and refactor along the way.</p>



<p>Refactoring is such an important skill to learn — and in here, I make sure you got cement it into your brain.</p>



<p>That’s it! Hope you had fun reading this piece!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/">A Better API for the Intersection and Mutation Observers</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 a previous article, I showed you how to refactor the Resize Observer API into something way simpler to use:
// From this
const observer = new ResizeObserver(observerFn)

function observerFn (entries) {
  for (let entry of entries) {
    // Do something with each entry
  }
}

const element = document.querySelector('#some-element')
observer.observe(element);
// To this 
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, {
  callback({ entry }) {
    // Do something with each entry
  }
})
Today, we’re going to do the same for MutationObserver and IntersectionObserver.



Refactoring Mutation Observer
MutationObserver has almost the same API as that of ResizeObserver. So we can practically copy-paste the entire chunk of code we wrote for resizeObserver to mutationObserver.
export function mutationObserver(node, options = {}) {
  const observer = new MutationObserver(observerFn)
  const { callback, ...opts } = options
  observer.observe(node, opts)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('mutate', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}
You can now use mutationObserver with the callback pattern or event listener pattern.
const node = document.querySelector('.some-element')

// Callback pattern 
const obs = mutationObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('mutate', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})
Much easier!
Disconnecting the observer
Unlike ResizeObserver who has two methods to stop observing elements, MutationObserver only has one, the disconnect method.
export function mutationObserver(node, options = {}) {
  // ... 
  return {
    disconnect() {
      observer.disconnect()
    }
  }
}
But, MutationObserver has a takeRecords method that lets you get unprocessed records before you disconnect. Since we should takeRecords before we disconnect, let’s use it inside disconnect.
To create a complete API, we can return this method as well.
export function mutationObserver(node, options = {}) {
  // ... 
  return {
    // ...
    disconnect() {
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    }
  }
}
Now we can disconnect our mutation observer easily with disconnect.
const node = document.querySelector('.some-element')
const obs = mutationObserver(/* ... */)

obs.disconnect()
MutationObserver’s observe options
In case you were wondering, MutationObserver’s observe method can take in 7 options. Each one of them determines what to observe, and they all default to false.
subtree: Monitors the entire subtree of nodes
childList: Monitors for addition or removal children elements. If subtree is true, this monitors all descendant elements.
attributes: Monitors for a change of attributes
attributeFilter: Array of specific attributes to monitor
attributeOldValue: Whether to record the previous attribute value if it was changed
characterData: Monitors for change in character data
characterDataOldValue: Whether to record the previous character data value
Refactoring Intersection Observer
The API for IntersectionObserver is similar to other observers. Again, you have to:
Create a new observer: with the new keyword. This observer takes in an observer function to execute.
Do something with the observed changes: This is done via the observer function that is passed into the observer.
Observe a specific element: By using the observe method.
(Optionally) unobserve the element: By using the unobserve or disconnect method (depending on which Observer you’re using).
But IntersectionObserver requires you to pass the options in Step 1 (instead of Step 3). So here’s the code to use the IntersectionObserver API.
// Step 1: Create a new observer and pass in relevant options
const options = {/*...*/}
const observer = new IntersectionObserver(observerFn, options)

// Step 2: Do something with the observed changes
function observerFn (entries) {
  for (const entry of entries) {
    // Do something with entry
  }
}

// Step 3: Observe the element
const element = document.querySelector('#some-element')
observer.observe(element)

// Step 4 (optional): Disconnect the observer when we're done using it
observer.disconnect(element)
Since the code is similar, we can also copy-paste the code we wrote for mutationObserver into intersectionObserver. When doing so, we have to remember to pass the options into IntersectionObserver and not the observe method.
export function mutationObserver(node, options = {}) {
  const { callback, ...opts } = options
  const observer = new MutationObserver(observerFn, opts)
  observer.observe(node)

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (options.callback) options.callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('intersect', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
}
Now we can use intersectionObserver with the same easy-to-use API:
const node = document.querySelector('.some-element')

// Callback pattern 
const obs = intersectionObserver(node, {
  callback ({ entry, entries }) {
    // Do what you want with each entry
  }
})

// Event listener pattern
node.addEventListener('intersect', event => {
  const { entry } = event.detail
  // Do what you want with each entry
})
Disconnecting the Intersection Observer
IntersectionObserver‘s methods are a union of both resizeObserver and mutationObserver. It has four methods:
observe: observe an element
unobserve: stops observing one element
disconnect: stops observing all elements
takeRecords: gets unprocessed records
So, we can combine the methods we’ve written in resizeObserver and mutationObserver for this one:
export function intersectionObserver(node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },

    disconnect() {
      // Take records before disconnecting.
      const records = observer.takeRecords()
      observer.disconnect()
      if (records.length > 0) observerFn(records)
    },
    
    takeRecords() {
      return observer.takeRecords()
    },
  }
}
Now we can stop observing with the unobserve or disconnect method.
const node = document.querySelector('.some-element')
const obs = intersectionObserver(node, /*...*/)

// Disconnect the observer
obs.disconnect()
IntersectionObserver options
In case you were wondering, IntersectionObserver takes in three options:
root: The element used to check if observed elements are visible
rootMargin: Lets you specify an offset amount from the edges of the root
threshold: Determines when to log an observer entry
Here’s an article to help you understand IntersectionObserver options.
Using this in practice via Splendid Labz
Splendid Labz has a utils library that contains resizeObserver, mutationObserver and IntersectionObserver.
You can use them if you don’t want to copy-paste the above snippets into every project.
import { 
  resizeObserver, 
  intersectionObserver, 
  mutationObserver 
} from 'splendidlabz/utils/dom'

const mode = document.querySelector(‘some-element’)

const resizeObs = resizeObserver(node, /* ... */)
const intersectObs = intersectionObserver(node, /* ... */)
const mutateObs = mutationObserver(node, /* ... */)
Aside from the code we’ve written together above (and in the previous article), each observer method in Splendid Labz is capable of letting you observe and stop observing multiple elements at once (except mutationObserver because it doesn’t have a unobserve method)
const items = document.querySelectorAll('.elements')
const obs = resizeObserver(items, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

// Unobserves two items at once
const subset = [items[0], items[1]]
obs.unobserve(subset)
So it might be just a tad easier to use the functions I’ve already created for you. 😉
Shameless Plug: Splendid Labz contains a ton of useful utilities — for CSS, JavaScript, Astro, and Svelte — that I have created over the last few years.
I’ve parked them all in into Splendid Labz, so I no longer need to scour the internet for useful functions for most of my web projects. If you take a look, you might just enjoy what I’ve complied!
(I’m still making the docs at the time of writing so it can seem relatively empty. Check back every now and then!)
Learning to refactor stuff
If you love the way I explained how to refactor the observer APIs, you may find how I teach JavaScript interesting.
In my JavaScript course, you’ll learn to build 20 real life components. We’ll start off simple, add features, and refactor along the way.
Refactoring is such an important skill to learn — and in here, I make sure you got cement it into your brain.
That’s it! Hope you had fun reading this piece!
A Better API for the Intersection and Mutation Observers originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.
A Better API for the Intersection and Mutation Observers originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Better API for the Intersection and Mutation Observers

<p>An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/color-everything-in-css/">Color Everything in CSS</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>


I have had the opportunity to edit over a lot of the new color entries coming to the CSS-Tricks Almanac. We’ve already published several with more on the way, including a complete guide on color functions:
color()
hsl()
lab()
lch()
oklab()
oklch()
rgb()
And I must admit: I didn’t know a lot about color in CSS (I still used rgb(), which apparently isn’t what cool people do anymore), so it has been a fun learning experience. One of the things I noticed while trying to keep up with all this new information was how long the glossary of color goes, especially the “color” concepts. There are “color spaces,” “color models,” “color gamuts,” and basically a “color” something for everything.
They are all somewhat related, and it can get confusing as you dig into using color in CSS, especially the new color functions that have been shipped lately, like contrast-color() and color-mix(). Hence, I wanted to make the glossary I wish I had when I was hearing for the first time about each concept, and that anyone can check whenever they forget what a specific “color” thing is.




As a disclaimer, I am not trying to explain color, or specifically, color reproduction, in this post; that would probably be impossible for a mortal like me. Instead, I want to give you a big enough picture for some technicalities behind color in CSS, such that you feel confident using functions like lab() or oklch() while also understanding what makes them special.
What’s a color?
Let’s slow down first. In order to understand everything in color, we first need to understand the color in everything.
While it’s useful to think about an object being a certain color (watch out for the red car, or cut the white cable!), color isn’t a physical property of objects, or even a tangible thing. Yes, we can characterize light as the main cause of color1, but it isn’t until visible light enters our eyes and is interpreted by our brains that we perceive a color. As said by Elle Stone:
Light waves are out there in the world, but color happens in the interaction between light waves and the eye, brain, and mind.
Even if color isn’t a physical thing, we still want to replicate it as reliably as possible, especially in the digital era. If we take a photo of a beautiful bouquet of lilies (like the one on my desk) and then display it on a screen, we expect to see the same colors in both the image and reality. However, “reality” here is a misleading term since, once again, the reality of color depends on the viewer. To solve this, we need to understand how light wavelengths (something measurable and replicable) create different color responses in viewers (something not so measurable).
Luckily, this task was already carried out 95 years ago by the International Commission on Illumination (CIE, by its French name). I wish I could get into the details of the experiment, but we haven’t gotten into our first color thingie yet. What’s important is that from these measurements, the CIE was able to map all the colors visible to the average human (in the experiment) to light wavelengths and describe them with only three values.
Initially, those three primary values corresponded to the red, green, and blue wavelengths used in the experiment, and they made up the CIERGB Color Space, but researchers noticed that some colors required a negative wavelength2 to represent a visible color. To avoid that, a series of transformations were performed on the original CIERGB and the resulting color space was called CIEXYZ.
This new color space also has three values, X and Z represent the chromaticity of a color, while Y represents its luminance. Since it has three axes, it makes a 3D shape, but if we slice it such that its luminance is the same, we get all the visible colors for a given luminance in a figure you have probably seen before.




This is called the xy chromaticity diagram and holds all the colors visible by the average human eye (based on the average viewer in the CIE 1931 experiment). Colors inside the shape are considered real, while those outside are deemed imaginary.
Color Spaces
The purpose of the last explanation was to reach the CIEXYZ Color Space concept, but what exactly is a “color space”? And why is the CIEXYZ Color Space so important?
The CIEXYZ Color Space is a mapping from all the colors visible by the average human eye into a 3D coordinate system, so we only need three values to define a color. Then, a color space can be thought of as a general mapping of color, with no need to include every visible color, and it is usually defined through three values as well.
RGB Color Spaces
The most well-known color spaces are the RGB color spaces (note the plural). As you may guess from the name, here we only need the amount of red, green, and blue to describe a color. And to describe an RGB color space, we only need to define its “reddest”, “greenest”, and “bluest” values3. If we use coordinates going from 0 to 1 to define a color in the RGB color space, then:
(1, 0, 0) means the reddest color.
(0, 1, 0) means the greenest color.
(0, 0, 1) means the bluest color.
However, “reddest”, “bluest”, and “greenest” are only arbitrary descriptions of color. What makes a color the “bluest” is up to each person. For example, which of the following colors do you think is the bluest?




As you can guess, something like “bluest” is an appalling description. Luckily, we just have to look back at the CIEXYZ color space — it’s pretty useful! Here, we can define what we consider the reddest, greenest, and bluest colors just as coordinates inside the xy chromaticity diagram. That’s all it takes to create an RGB color space, and why there are so many!
Credit: Elle Stone



In CSS, the most used color space is the standard RGB (sRGB) color space, which, as you can see in the last image, leaves a lot of colors out. However, in CSS, we can use modern RGB color spaces with a lot more colors through the color() function, such as display-p3, prophoto-rgb, and rec2020.
Credit: Chrome Developer Team



Notice how the ProPhoto RGB color space goes out of the visible color. This is okay. Colors outside are clamped; they aren’t new or invisible colors.
In CSS, besides sRGB, we have two more color spaces: the CIELAB color space and the Oklab color space. Luckily, once we understood what the CIEXYZ color space is, then these two should be simpler to understand. Let’s dig into that next.
CIELAB and Oklab Color Spaces
As we saw before, the sRGB color space lacks many of the colors visible by the average human eye. And as modern screens got better at displaying more colors, CSS needed to adopt newer color spaces to fully take advantage of those newer displays. That wasn’t the only problem with sRGB — it also lacks perceptual uniformity, meaning that changes in the color’s chromaticity also change its perceived lightness. Check, for example, this demo by Adam Argyle:
CodePen Embed Fallback
Created in 1976 by the CIE, CIELAB, derived from CIEXYZ, also encompasses all the colors visible by the human eye. It works with three coordinates: L for perceptual lightness, a for the amount of red-green, and b* for the amount of yellow-blue in the color.
Credit: Linshang Technology



It has a way better perceptual uniformity than sRGB, but it still isn’t completely uniform, especially in gradients involving blue. For example, in the following white-to-blue gradient, CIELAB shifts towards purple.
Image Credits to Björn Ottosson



As a final improvement, Björn Ottosson came up with the Oklab color space, which also holds all colors visible by the human eye while keeping a better perceptual uniformity. Oklab also uses the three L*a*b* coordinates. Thanks to all these improvements, it is the color space I try to use the most lately.
Color Models
When I was learning about these concepts, my biggest challenge after understanding color spaces was not getting them confused with color models and color gamuts. These two concepts, while complementary and closely related to color spaces, aren’t the same, so they are a common pitfall when learning about color.
A color model refers to the mathematical description of color through tuples of numbers, usually involving three numbers, but these values don’t give us an exact color until we pair them with a color space. For example, you know that in the RGB color model, we define color through three values: red, green, and blue. However, it isn’t until we match it to an RGB color space (e.g., sRGB with display-p3) that we have a color. In this sense, a color space can have several color models, like sRGB, which uses RGB, HSL, and HWB. At the same time, a color model can be used in several color spaces.
I found plenty of articles and tutorials where “color spaces” and “color models” were used interchangeably. And some places were they had a different definition of color spaces and models than the one provided here. For example, Chrome’s High definition CSS color guide defines CSS’s RGB and HSL as different color spaces, while MDN’s Color Space entry does define RGB and HSL as part of the sRGB color space.
Personally, in CSS, I find it easier to understand the idea of RGB, HSL and HWB as different models to access the sRGB color space.
Color Gamuts
A color gamut is more straightforward to explain. You may have noticed how we have talked about a color space having more colors than another, but it would be more correct to say it has a “wider” gamut, since a color gamut is the range of colors available in a color space. However, a color gamut isn’t only restricted by color space boundaries, but also by physical limitations. For example, an older screen may decrease the color gamut since it isn’t able to display each color available in a given color space. In this case where a color can’t be represented (due to physical limitation or being outside the color space itself), it’s said to be “out of gamut”.
Color Functions
In CSS, the only color space available used to be sRGB. Nowadays, we can work with a lot of modern color spaces through their respective color functions. As a quick reference, each of the color spaces in CSS uses the following functions:
sRGB: We can work in sRGB using the ol’ hexadecimal notation, named colors, and the rgb(), rgba(), hsl(), hsla() and hwb() functions.
CIELAB: Here we have the lab() for Cartesian coordinates and lch() for polar coordinates.
Oklab: Similar to CIELAB, we have oklab() for Cartesian coordinates and oklch() for polar coordinates.
More through the color() and color-mix(). Outside these three color spaces, we can use many more using the color() and color-mix() functions. Specifically, we can use the RGB color spaces: rgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020 and the XYZ color space: xyz, xyz-d50, or xyz-d65.
TL;DR
Color spaces are a mapping between available colors and a coordinate system. In CSS, we have three main color spaces: sRGB, CIELAB, and Oklab, but many more are accessible through the color() function.
Color models define color with tuples of numbers, but they don’t give us information about the actual color until we pair them with a color space. For example, the RGB model doesn’t mean anything until we assign it an RGB color space.
Most of the time, we want to talk about how many colors a color space holds, so we use the term color gamut for the task. However, a color gamut is also tied to the physical limitations of a camera/display. A color may be out-of-gamut, meaning it can’t be represented in a given color space.
In CSS, we can access all these color spaces through color functions, of which there are many.
The CIEXYZ color space is extremely useful to define other color spaces, describe their gamuts, and convert between them.
References
Completely Painless Programmer’s Guide to XYZ, RGB, ICC, xyY, and TRCs (Elle Stone)
Color Spaces (Bartosz Ciechanowski)
The CIE XYZ and xyY Color Spaces(Douglas A. Kerr)
From personal project to industry standard (Björn Ottosson)
High definition CSS color guide (Adam Argyle)
Color Spaces: Explained from the Ground Up (Video Tech Explained)
Color Space (MDN)
What Makes a Color Space Well Behaved? (Elle Stone)
Footnotes
1 Light is the main cause of color, but color can be created by things other than light. For example, rubbing your closed eyes mechanically stimulates your retina, creating color in what’s called phosphene. ⤴️
2 If negative light also makes you scratch your head, and for more info on how the CIEXYZ color space was created, I highly recommend Douglas A. Kerr The CIE XYZ and xyY Color Spaces paper. ⤴️
3 We also need to define the darkest dark color (“black”) and the lightest light color (“white”). However, for well-behaved color spaces, these two can be abstracted from the reddest, blues, and greenest colors. ⤴️
Color Everything in CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

An introduction to "Color spaces", "Color models", "Color gamuts," and basically all of the "Color somethings" in CSS.
Color Everything in CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Color Everything in CSS

<p>CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-color-functions/">CSS Color Functions</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>


CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.
CSS Color Functions originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS Color Functions

<p>How do you stay informed of new CSS features when the language evolves quickly and information is spread all around the web? Sacha Greif has some tips from his work running an annual survey focused on new CSS features.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/how-to-keep-up-with-new-css-features/">How to Keep Up With New CSS Features</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>


How do you keep up with new CSS features?
Let’s say for example that, hypothetically speaking, you run a popular web development survey focused on CSS, and need to figure out what to include in this year’s edition. (In a total coincidence the aforementioned State of CSS survey for this year is actually open right now — go take it to see what’s new in CSS!)
You might think you can just type “new CSS features 2025” in Google and be done with it. But while this does give us a few promising leads, it also unearths a lot of cookie-cutter content that proclaims CSS Grid as the “next big thing”, despite the fact it’s been well-supported for over eight years now. 
We need a better approach. 
I’ll focus on CSS in this article, but all the resources linked here cover all web platform features, including JavaScript and HTML.



Browser blogs




The browsers themselves are often a good source of what’s new and, thankfully, the big ones maintain blogs where they even cover specific CSS news.
A good general starting point is Google’s web.dev blog, and more specifically Rachel Andrew‘s monthly web platform recaps. Here’s a small sample of those:
New to the web platform in January
New to the web platform in February
New to the web platform in March
New to the web platform in April
The WebKit blog is, of course, another great place. Jen Simmons is very active on the blog (as well as Bluesky) and there’s an entire category dedicated solely to CSS. The blog doesn’t publish content as regularly as web.dev, but the breadth of content is incredibly deep and thorough, as you can see in Jen’s write-up on the release of text-wrap: pretty.
And, to round things out, you’ll want to keep an eye on Firefox Nightly News for what’s shipping in Firefox, and the official blog for Microsoft Edge.
CSS-Tricks (and others)
I’d be remiss to not mention that CSS-Tricks is also a great source for up-to-date CSS knowledge, including an ever-growing almanac of CSS features. But you probably already know that since you’re reading this.
And let’s not discount other fine publications that cover CSS. Here are just a few:
Smashing Magazine
Frontend Masters Blog
Piccalilli
CSS-Tip
Following individual sources can get a little overwhelming, particularly when CSS is moving as fast as it is. That’s where Frontend Dogma comes in with an ever-growing and updated list of curated links from these (and many other sources) in a one-stop shop.
Web Platform Features Explorer




If you need something a bit more structured to help you figure out what’s new, Web Platform Features Explorer is great way to look up features based on their Baseline status.
Web Platform Status




A similar tool is the Web Platform Status dashboard. This one features more fine-grained filtering tools, letting you narrow down features by Baseline year or even show features mentioned as Top CSS Interop in the latest State of CSS survey!
Another very cool feature is the ability to view a feature’s adoption rate, as measured in terms of percentage of Chrome page views where that feature was used, such as here for the popover HTML attribute:




An important caveat: since sites like Facebook and Google account for a very large percentage of all measured page views, this metric can become skewed once one of these platforms adopts a new feature.
The Web Platform Status’s stats section also features the “chart of shame” (according to Lea Verou), which highlights how certain browsers might be slightly lagging behind their peers in terms of new feature adoption.
Chrome Platform Status




That same adoption data can also be found on the Chrome Platform Status dashboard, which gives you even more details, such as usage among top sites, as well as sample URLs of sites that are using a feature. 
Polypane Experimental Chromium Features Dashboard




Polypane is a great developer-focused browser that provides a ton of useful tools like contrast checkers, multi-viewport views, and more. 
They also provide an experimental Chromium features explorer that breaks new features down by Chromium version, for those of you who want to be at the absolute top of the cutting edge. 
Kevin Powell’s YouTube Channel




As YouTube’s de facto CSS expert, Kevin Powell often puts up great video recaps of new features. You should definitely be following him, but statistically speaking you probably already are! It’s also worth mentioning that Kevin runs a site that publishes weekly HTML and CSS tips.
CSS Working Group
Of course, you can always also go straight to the source and look at what the CSS Working Group itself has been working on! They have a mailing list you can subscribe to keep tabs on things straight from your inbox, as well as an RSS feed.
Browser release notes
Most browsers publish a set of release notes any time a new version ships. For the most part, you can get a good pulse on when new CSS features are released by following the three big names in browsers:
Chrome release notes
Safari release notes
Firefox release notes
ChatGPT
Another way to catch up with CSS is to just ask ChatGPT! This sample prompt worked well enough for me:
What are the latest CSS features that have either become supported by browsers in the past year, or will soon become supported? 
Other resources
If you really want to get in the weeds, Igalia’s BCD Watch displays changes to MDN’s browser-compat-data repo, which itself tracks which features are supported in which browsers. 
Also, the latest editions of the HTTP Archive Web Almanac do not seem to include a CSS section specifically, but past editions did feature one, which was a great way to catch up with CSS once a year. 
There’s also caniuse has a news section which does not seem to be frequently updated at the moment, but could potentially become a great resource for up-to-date new feature info in the future.
The IntentToShip bot (available on Bluesky, Mastodon, Twitter) posts whenever a browser vendor ships or changes a feature. You can’t get more cutting-edge than that!
And lastly, there’s a ton of folks on social media who are frequently discussing new CSS features and sharing their own thoughts and experiments with them. If you’re on Bluesky, there’s a starter pack of CSS-Tricks authors that’s a good spot to find a deep community of people.
Wrapping up
Of course, another great way to make sure no new features are slipping through the cracks is to take the State of CSS survey once a year. I use all the resources mentioned above to try and make sure each survey includes every new important feature. What’s more, you can bookmark features by adding them to your “reading list” as you take the survey to get a nice recap at the end.
So go take this year’s State of CSS survey and then let me know on Bluesky how many new features you learned about!
How to Keep Up With New CSS Features originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

How do you stay informed of new CSS features when the language evolves quickly and information is spread all around the web? Sacha Greif has some tips from his work running an annual survey focused on new CSS features.
How to Keep Up With New CSS Features originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

How to Keep Up With New CSS Features

<p>ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages with practical examples.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-better-api-for-the-resize-observer/">A Better API for the Resize Observer</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>Resize Observer, Mutation Observer, and Intersection Observers are all good APIs that are more performant than their older counterparts:</p>



<ul class="wp-block-list">
<li><code>ResizeObserver</code> is <a href="https://web.dev/articles/resize-observer" rel="noopener">better</a> than the <code>resize</code> event</li>



<li><code>MutationObserver</code> replaces the now deprecated <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent" rel="noopener">Mutation Events</a></li>



<li><code>IntersectionObserver</code> lets you do certain <code>scroll</code> interactions with <a href="https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/" rel="noopener">less performance overhead</a>.</li>
</ul>



<p>The API for these three observers are quite similar (but they have their differences which we will go into later). To use an observer, you have to follow the steps below:</p>



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



<ol class="wp-block-list">
<li><strong>Create a new observer with the <code>new</code> keyword:</strong> This observer takes in an observer function to execute.</li>



<li><strong>Do something with the observed changes</strong>: This is done via the observer function that is passed into the observer.</li>



<li><strong>Observe a specific element</strong>: By using the <code>observe</code> method.</li>



<li><strong>(Optionally) unobserve the element</strong>: By using the <code>unobserve</code> or <code>disconnect</code> method. (depending on which observer you&#8217;re using).</li>
</ol>



<p>In practice, the above steps looks like this with the <code>ResizeObserver</code>.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Step 1: Create a new observer
const observer = new ResizeObserver(observerFn)

// Step 2: Do something with the observed changes
function observerFn (entries) {
  for (let entry of entries) {
    // Do something with entry
  }
}

// Step 3: Observe an element
const element = document.querySelector('#some-element')
observer.observe(element);

// Step 4 (optional): Disconnect the observer
observer.disconnect(element)</code></pre>



<p>This looks clear (and understandable) after the steps have been made clear. But it can look like a mess without the comments:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const observer = new ResizeObserver(observerFn)

function observerFn (entries) {
  for (let entry of entries) {
    // Do something with entry
  }
}

const element = document.querySelector('#some-element')
observer.observe(element);</code></pre>



<p>The good news is: I think we can improve the observer APIs and make them easier to use.</p>


<h3 class="wp-block-heading" id="the-resize-observer">The Resize Observer</h3>


<p>Let&#8217;s start with the <code><a href="https://splendidlabz.com/docs/utils/dom/resize-observer" rel="noopener">ResizeObserver</a></code> since it&#8217;s the simplest of them all. We&#8217;ll begin by writing a function that encapsulates the <code>resizeObserver</code> that we create.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver () {
  // ... Do something
}</code></pre>



<p>The easiest way to begin refactoring the <code>ResizeObserver</code> code is to put everything we&#8217;ve created into our <code>resizeObserver</code> first.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver () {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      // Do something with entry
    }
  }

  const node = document.querySelector('#some-element')
  observer.observe(node);
}</code></pre>



<p>Next, we can pass the <code>element</code> into the function to make it simpler. When we do this, we can eliminate the <code>document.querySelector</code> line.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver (element) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      // Do something with entry
    }
  }

  observer.observe(node);
}</code></pre>



<p>This makes the function more versatile since we can now pass any element into it.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node)</code></pre>



<p>This is already much easier than writing all of the <code>ResizeObserver</code> code from scratch whenever you wish to use it.</p>



<p>Next, it&#8217;s quite obvious that we have to pass in an observer function to the callback. So, we can potentially do this:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Not great
function resizeObserver (node, observerFn) {
  const observer = new ResizeObserver(observerFn)
  observer.observe(node);
}</code></pre>



<p>Since <code>observerFn</code> is always the same — it loops through the <code>entries</code> and acts on every <code>entry</code> — we could keep the <code>observerFn</code> and pass in a <code>callback</code> to perform tasks when the element is resized.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Better 
function resizeObserver (node, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback(entry)
    }
  }

  observer.observe(node);
}</code></pre>



<p>To use this, we can pass <code>callback</code> into the <code>resizeObserver</code> — this makes <code>resizeObserver</code> operate somewhat like an event listener which we are already familiar with.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, entry => {
  // Do something with each entry
})</code></pre>



<p>We can make the callback slightly better by providing both <code>entry</code> and <code>entries</code>. There&#8217;s no performance hit for passing an additional variable so there&#8217;s no harm providing more flexibility here.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line="6"><code markup="tt">function resizeObserver (element, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback({ entry, entries })
    }
  }

  observer.observe(element);
}</code></pre>



<p>Then we can grab <code>entries</code> in the <code>callback</code> if we need to.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Usage of the resizeObserver function
// ...
const obs = resizeObserver(node, ({ entry, entries }) => {
  // ...
})</code></pre>



<p>Next, it makes sense to pass the callback as an option parameter instead of a variable. This will make <code>resizeObserver</code> more consistent with the <code><a href="https://splendidlabz.com/docs/utils/dom/mutation-observer" rel="noopener">mutationObserver</a></code> and <code><a href="https://splendidlabz.com/docs/utils/dom/intersection-observer" rel="noopener">intersectionObserver</a></code> functions that we will create in the next article.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line="1,2"><code markup="tt">function resizeObserver (element, options = {}) {
  const { callback } = options
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
        callback({ entry, entries })
      }
  }

  observer.observe(element);
}</code></pre>



<p>Then we can use <code>resizeObserver</code> like this.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})</code></pre>


<h3 class="wp-block-heading" id="the-observer-can-take-in-an-option-too">The observer can take in an option too</h3>


<p><code>ResizeObserver</code>&#8216;s <code>observe</code> method can take in an <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options" rel="noopener">options</a> object that contains one property, <code>box</code>. This determines whether the observer will observe changes to <code>content-box</code>, <code>border-box</code> or <code>device-pixel-content-box</code>.</p>



<p>So, we need to extract these options from the <code>options</code> object and pass them to <code>observe</code>.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver (element, options = {}) {
  const { callback, ...opts } = options
  // ...
  observer.observe(element, opts);
}</code></pre>


<h3 class="wp-block-heading" id="optional-event-listener-pattern">Optional: Event listener pattern</h3>


<p>I prefer using <code>callback</code> because it&#8217;s quite straightforward. But if you want to use a standard event listener pattern, we can do that, too. The trick here is to emit an event. We&#8217;ll call it <code>resize-obs</code> since <code>resize</code> is already taken.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver (element, options = {}) {
  // ...
  function observerFn (entries) {
    for (let entry of entries) {
      if (callback) callback({ entry, entries })
      else {
        node.dispatchEvent(
          new CustomEvent('resize-obs', {
            detail: { entry, entries },
          }),
        )
      }
    }
  }

  // ...
}</code></pre>



<p>Then we can listen to the <code>resize-obs</code> event, like this:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const obs = resizeObserver(node)
node.addEventListener('resize-obs', event => {
  const { entry, entries } = event.detail
})</code></pre>



<p>Again, this is optional.</p>


<h3 class="wp-block-heading" id="unobserving-the-element">Unobserving the element</h3>


<p>One final step is to allow the user to stop observing the element(s) when observation is no longer required. To do this, we can return two of the <code>observer</code> methods:</p>



<ul class="wp-block-list">
<li><code>unobserve</code>: Stops observing one <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" rel="noopener"><code>Element</code></a></li>



<li><code>disconnect</code>: Stops observing all <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" rel="noopener"><code>Elements</code></a></li>
</ul>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">function resizeObserver (node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnet()
    }
  }
}</code></pre>



<p>Both methods do the same thing for what we have built so far since we only allowed <code>resizeObserver</code> to observe one element. So, pick whatever method you prefer to stop observing the element.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})

// Stops observing all elements 
obs.disconect()</code></pre>



<p>With this, we&#8217;ve completed the creation of a better API for the <code>ResizeObserver</code> — the <code>resizeObserver</code> function.</p>


<h3 class="wp-block-heading" id="code-snippet">Code snippet</h3>


<p>Here&#8217;s the code we&#8217;ve wrote for <code>resizeObserver</code></p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">export function resizeObserver(node, options = {}) {
  const observer = new ResizeObserver(observerFn)
  const { callback, ...opts } = options

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (callback) callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('resize-obs', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
 
  observer.observe(node)

  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnect()
    }
  }
}</code></pre>


<h3 class="wp-block-heading" id="using-this-in-practice-via-splendid-labz">Using this in practice via Splendid Labz</h3>


<p>Splendid Labz has a <a href="https://splendidlabz.com/docs/utils" rel="noopener"><code>utils</code></a> library that contains an enhanced version of the <code>resizeObserver</code> we made above. You can use it if you wanna use a enhanced observer, or if you don&#8217;t want to copy-paste the observer code into your projects.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">import { resizeObserver } from '@splendidlabz/utils/dom'

const node = document.querySelector('.some-element')
const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})</code></pre>



<p><strong>Bonus:</strong> The Splendid Labz <code>resizeObserver</code> is capable of observing multiple elements at once. It can also unobserve multiple elements at once.</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const items = document.querySelectorAll('.elements')
const obs = resizeObserver(items, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

// Unobserves two items at once
const subset = [items[0], items[1]]
obs.unobserve(subset) </code></pre>


<h3 class="wp-block-heading" id="found-this-refactoring-helpful-">Found this refactoring helpful?</h3>


<p>Refactoring is ultra useful (and important) because its a process that lets us create code that&#8217;s easy to use or maintain.</p>



<p>If you found this refactoring exercise useful, you might just love how I teach JavaScript to budding developers in my <a href="https://learnjavascript.today" rel="noopener">Learn JavaScript</a> course.</p>



<p>In this course, you&#8217;ll learn to build 20 real-world components. For each component, we start off simple. Then we add features and you&#8217;ll learn to refactor along the way.</p>



<p>That’s it!</p>



<p>Hope you enjoyed this piece and see you in the next one.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-better-api-for-the-resize-observer/">A Better API for the Resize Observer</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>


Resize Observer, Mutation Observer, and Intersection Observers are all good APIs that are more performant than their older counterparts:
ResizeObserver is better than the resize event
MutationObserver replaces the now deprecated Mutation Events
IntersectionObserver lets you do certain scroll interactions with less performance overhead.
The API for these three observers are quite similar (but they have their differences which we will go into later). To use an observer, you have to follow the steps below:





Create a new observer with the new keyword: This observer takes in an observer function to execute.
Do something with the observed changes: This is done via the observer function that is passed into the observer.
Observe a specific element: By using the observe method.
(Optionally) unobserve the element: By using the unobserve or disconnect method. (depending on which observer you’re using).
In practice, the above steps looks like this with the ResizeObserver.
// Step 1: Create a new observer
const observer = new ResizeObserver(observerFn)

// Step 2: Do something with the observed changes
function observerFn (entries) {
  for (let entry of entries) {
    // Do something with entry
  }
}

// Step 3: Observe an element
const element = document.querySelector('#some-element')
observer.observe(element);

// Step 4 (optional): Disconnect the observer
observer.disconnect(element)
This looks clear (and understandable) after the steps have been made clear. But it can look like a mess without the comments:
const observer = new ResizeObserver(observerFn)

function observerFn (entries) {
  for (let entry of entries) {
    // Do something with entry
  }
}

const element = document.querySelector('#some-element')
observer.observe(element);
The good news is: I think we can improve the observer APIs and make them easier to use.
The Resize Observer
Let’s start with the ResizeObserver since it’s the simplest of them all. We’ll begin by writing a function that encapsulates the resizeObserver that we create.
function resizeObserver () {
  // ... Do something
}
The easiest way to begin refactoring the ResizeObserver code is to put everything we’ve created into our resizeObserver first.
function resizeObserver () {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      // Do something with entry
    }
  }

  const node = document.querySelector('#some-element')
  observer.observe(node);
}
Next, we can pass the element into the function to make it simpler. When we do this, we can eliminate the document.querySelector line.
function resizeObserver (element) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      // Do something with entry
    }
  }

  observer.observe(node);
}
This makes the function more versatile since we can now pass any element into it.
// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node)
This is already much easier than writing all of the ResizeObserver code from scratch whenever you wish to use it.
Next, it’s quite obvious that we have to pass in an observer function to the callback. So, we can potentially do this:
// Not great
function resizeObserver (node, observerFn) {
  const observer = new ResizeObserver(observerFn)
  observer.observe(node);
}
Since observerFn is always the same — it loops through the entries and acts on every entry — we could keep the observerFn and pass in a callback to perform tasks when the element is resized.
// Better 
function resizeObserver (node, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback(entry)
    }
  }

  observer.observe(node);
}
To use this, we can pass callback into the resizeObserver — this makes resizeObserver operate somewhat like an event listener which we are already familiar with.
// Usage of the resizeObserver function
const node = document.querySelector('#some-element')
const obs = resizeObserver(node, entry => {
  // Do something with each entry
})
We can make the callback slightly better by providing both entry and entries. There’s no performance hit for passing an additional variable so there’s no harm providing more flexibility here.
function resizeObserver (element, callback) {
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
      callback({ entry, entries })
    }
  }

  observer.observe(element);
}
Then we can grab entries in the callback if we need to.
// Usage of the resizeObserver function
// ...
const obs = resizeObserver(node, ({ entry, entries }) => {
  // ...
})
Next, it makes sense to pass the callback as an option parameter instead of a variable. This will make resizeObserver more consistent with the mutationObserver and intersectionObserver functions that we will create in the next article.
function resizeObserver (element, options = {}) {
  const { callback } = options
  const observer = new ResizeObserver(observerFn)

  function observerFn (entries) {
    for (let entry of entries) {
        callback({ entry, entries })
      }
  }

  observer.observe(element);
}
Then we can use resizeObserver like this.
const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})
The observer can take in an option too
ResizeObserver‘s observe method can take in an options object that contains one property, box. This determines whether the observer will observe changes to content-box, border-box or device-pixel-content-box.
So, we need to extract these options from the options object and pass them to observe.
function resizeObserver (element, options = {}) {
  const { callback, ...opts } = options
  // ...
  observer.observe(element, opts);
}
Optional: Event listener pattern
I prefer using callback because it’s quite straightforward. But if you want to use a standard event listener pattern, we can do that, too. The trick here is to emit an event. We’ll call it resize-obs since resize is already taken.
function resizeObserver (element, options = {}) {
  // ...
  function observerFn (entries) {
    for (let entry of entries) {
      if (callback) callback({ entry, entries })
      else {
        node.dispatchEvent(
          new CustomEvent('resize-obs', {
            detail: { entry, entries },
          }),
        )
      }
    }
  }

  // ...
}
Then we can listen to the resize-obs event, like this:
const obs = resizeObserver(node)
node.addEventListener('resize-obs', event => {
  const { entry, entries } = event.detail
})
Again, this is optional.
Unobserving the element
One final step is to allow the user to stop observing the element(s) when observation is no longer required. To do this, we can return two of the observer methods:
unobserve: Stops observing one Element
disconnect: Stops observing all Elements
function resizeObserver (node, options = {}) {
  // ...
  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnet()
    }
  }
}
Both methods do the same thing for what we have built so far since we only allowed resizeObserver to observe one element. So, pick whatever method you prefer to stop observing the element.
const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    // Do something ...
  }
})

// Stops observing all elements 
obs.disconect()
With this, we’ve completed the creation of a better API for the ResizeObserver — the resizeObserver function.
Code snippet
Here’s the code we’ve wrote for resizeObserver
export function resizeObserver(node, options = {}) {
  const observer = new ResizeObserver(observerFn)
  const { callback, ...opts } = options

  function observerFn(entries) {
    for (const entry of entries) {
      // Callback pattern
      if (callback) callback({ entry, entries, observer })
      // Event listener pattern
      else {
        node.dispatchEvent(
          new CustomEvent('resize-obs', {
            detail: { entry, entries, observer },
          })
        )
      }
    }
  }
 
  observer.observe(node)

  return {
    unobserve(node) {
      observer.unobserve(node)
    },
    
    disconnect() {
      observer.disconnect()
    }
  }
}
Using this in practice via Splendid Labz
Splendid Labz has a utils library that contains an enhanced version of the resizeObserver we made above. You can use it if you wanna use a enhanced observer, or if you don’t want to copy-paste the observer code into your projects.
import { resizeObserver } from '@splendidlabz/utils/dom'

const node = document.querySelector('.some-element')
const obs = resizeObserver(node, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})
Bonus: The Splendid Labz resizeObserver is capable of observing multiple elements at once. It can also unobserve multiple elements at once.
const items = document.querySelectorAll('.elements')
const obs = resizeObserver(items, {
  callback ({ entry, entries }) {
    /* Do what you want here */
  }
})

// Unobserves two items at once
const subset = [items[0], items[1]]
obs.unobserve(subset) 
Found this refactoring helpful?
Refactoring is ultra useful (and important) because its a process that lets us create code that’s easy to use or maintain.
If you found this refactoring exercise useful, you might just love how I teach JavaScript to budding developers in my Learn JavaScript course.
In this course, you’ll learn to build 20 real-world components. For each component, we start off simple. Then we add features and you’ll learn to refactor along the way.
That’s it!
Hope you enjoyed this piece and see you in the next one.
A Better API for the Resize Observer originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

ResizeObserver, MutationObserver, and IntersectionObserver enhance performance over their predecessors. Zell discusses their API similarities, usage steps, refactoring strategies, and advantages with practical examples.
A Better API for the Resize Observer originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Better API for the Resize Observer

<p>We put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no JavaScript required.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/">Breaking Boundaries: Building a Tangram Puzzle With (S)CSS</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 put it to the test and it turns out Sass can replace JavaScript, at least when it comes to low-level logic and puzzle behavior. With nothing but maps, mixins, functions, and a whole lot of math, we managed to bring our Tangram puzzle to life, no JavaScript required.
Breaking Boundaries: Building a Tangram Puzzle With (S)CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS

<p>The HTML <code>popover</code> attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript.  Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/creating-an-auto-closing-notification-with-an-html-popover/">Creating an Auto-Closing Notification With an HTML Popover</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/">HTML <code>popover</code> attribute</a> transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Most popovers can be light-dismissed, closing when the user clicks or taps outside the popup. Currently, HTML <code>popover</code> lacks built-in auto-close functionality, but it’s easy to add. Auto closing popups are useful for user interfaces like banner notifications — the new-message alerts in phones, for instance.</p>



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



<p>A <del>picture</del> demo, is worth a thousand words, right? Click on the “Add to my bookmarks” button in the following example. It triggers a notification that dismisses itself after a set amount of time.</p>



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


<h3 class="wp-block-heading" id="let-s-start-with-the-popover">Let’s start with the popover</h3>


<p>The HTML <code>popover</code> attribute is remarkably trivial to use. Slap it on a <code>div</code>, specify the type of popover you need, and you’re done.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div popover="manual" id="pop">Bookmarked!&lt;/div></code></pre>



<p>A <code>manual</code> popover simply means it cannot be light-dismissed by clicking outside the element. As a result, we have to hide, show, or toggle the popover’s visibility ourselves explicitly with either buttons or JavaScript. Let’s use a semantic HTML <code>button</code>.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button popovertarget="pop" popovertargetaction="show">
  Add to my bookmarks
&lt;/button>
&lt;div popover="manual" id="pop">Bookmarked!&lt;/div></code></pre>



<p>The <code>popovertarget</code> and <code>popovertargetaction</code> attributes are the final two ingredients, where <code>popovertarget</code> links the button to the <code>popover</code> element and <code>popovertargetaction</code> ensures that the <code>popover</code> is <code>show</code>-n when the button is clicked.</p>


<h3 class="wp-block-heading" id="hiding-the-popover-with-a-css-transition">Hiding the popover with a CSS transition</h3>


<p>OK, so the challenge is that we have a <code>popover</code> that is shown when a certain button is clicked, but it cannot be dismissed. The button is only wired up to <code>show</code> the <code>popover</code>, but it does not <code>hide</code> or <code>toggle</code> the <code>popover</code> (since we are not explicitly declaring it). We want the <code>popover</code> to <code>show</code> when the button is clicked, then dismiss itself after a certain amount of time.</p>



<p>The HTML <code>popover</code> can’t be <em>closed</em> with CSS, but it can be <em>hidden</em> from the page. Adding animation to that creates a visual effect. In our example, we will hide the <code>popover</code> by eliminating its CSS <code>height</code> property. You’ll learn in a moment why we’re using <code>height</code>, and that there are other ways you can go about it.</p>



<p>We can indeed select the <code>popover</code> attribute using an <a href="https://css-tricks.com/css-selectors/#aa-attribute-selectors">attribute selector</a>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">[popover] {
  height: 0;
  transition: height cubic-bezier(0.6, -0.28, 0.735, 0.045) .3s .6s;

  @starting-style { 
    height: 1lh;
  }
}</code></pre>



<p>When the <code>popover</code> is triggered by the button, its <code>height</code> value is the one declared in the <code>@starting-style</code> ruleset (<code>1lh</code>). After the <code>transition-delay</code> (which is <code>.6s</code> in the example), the <code>height</code> goes from <code>1lh</code> to <code>0</code> in <code>.3s</code>, effectively hiding the <code>popover</code>.</p>



<p>Once again, this is only <em>hiding</em> the popover, not <em>closing</em> it properly. That’s the next challenge and we’ll need JavaScript for that level of interaction.</p>


<h3 class="wp-block-heading" id="closing-the-popover-with-javascript">Closing the popover with JavaScript</h3>


<p>We can start by setting a variable that selects the <code>popover</code>:</p>



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



<p>Next, we can establish a <code>ResizeObserver</code> that monitors the <code>popover</code>’s size:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const POPOVER = document.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });</code></pre>



<p>And we can fire that off starting when the button to show the <code>popover</code> is clicked:</p>



<pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const POPOVER = document.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });
document.querySelector('button').onclick = () => OBSERVER.observe(POPOVER);</code></pre>



<p>The observer will know when the <code>popover</code>’s CSS <code>height</code> reaches zero at the end of the transition, and, at that point, the <code>popover</code> is closed with <code>hidePopover()</code>. From there, the observer is stopped with <code>unobserve()</code>.</p>



<p>In our example, <code>height</code> and <code>ResizeObserver</code> are used to auto-close the notification. You can try any other CSS property and JavaScript observer combination that might work with your preference. Learning about <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver" rel="noopener"><code>ResizeObserver</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="noopener"><code>MutationObserver</code></a> can help you find some options.</p>


<h3 class="wp-block-heading" id="setting-an-html-fallback">Setting an HTML fallback</h3>


<p>When JavaScript is disabled in the browser, if the <code>popover</code> type is set to any of the light-dismissible types, it acts as a fallback. Keep the <code>popover</code> visible by overriding the style rules that hide it. The user can dismiss it by clicking or tapping anywhere outside the element.</p>



<p>If the <code>popover</code> needs to be light-dismissible <em>only</em> when JavaScript is disabled, then include that <code>popover</code> inside a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript" rel="noopener"><code>&lt;noscript&gt;</code></a> element before the <code>manual</code> popover. It’s the same process as before, where you override CSS styles as needed.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;noscript>
  &lt;div popover="auto" id="pop">Bookmarked!&lt;/div>
&lt;/noscript>

&lt;div popover="manual" id="pop">Bookmarked!&lt;/div>

&lt;!-- goes where &lt;head> element's descendants go -->
&lt;noscript>
  &lt;style>
    [popover] {
      transition: none;
      height: 1lh;
    }
  &lt;/style>
&lt;/noscript></code></pre>


<h3 class="wp-block-heading" id="when-to-use-this-method-">When to use this method?</h3>


<p>Another way to implement all of this would be to use <code>setTimeout()</code> to create a delay before closing the popover in JavaScript when the button is clicked, then adding a class to the <code>popover</code> element to trigger the transition effect. That way, no observer is needed.</p>



<p>With the method covered in this post, the delay can be set and triggered in CSS itself, thanks to <a href="https://css-tricks.com/almanac/rules/s/starting-style/"><code>@starting-style</code></a> and <code>transition-delay</code> — no extra class required! If you prefer to implement the delay through CSS itself, then this method works best. The JavaScript will catch up to the change CSS makes at the time CSS defines, not the other way around.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/creating-an-auto-closing-notification-with-an-html-popover/">Creating an Auto-Closing Notification With an HTML Popover</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 HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript. Most popovers can be light-dismissed, closing when the user clicks or taps outside the popup. Currently, HTML popover lacks built-in auto-close functionality, but it’s easy to add. Auto closing popups are useful for user interfaces like banner notifications — the new-message alerts in phones, for instance.




A picture demo, is worth a thousand words, right? Click on the “Add to my bookmarks” button in the following example. It triggers a notification that dismisses itself after a set amount of time.
CodePen Embed Fallback
Let’s start with the popover
The HTML popover attribute is remarkably trivial to use. Slap it on a div, specify the type of popover you need, and you’re done.
<div popover="manual" id="pop">Bookmarked!</div>
A manual popover simply means it cannot be light-dismissed by clicking outside the element. As a result, we have to hide, show, or toggle the popover’s visibility ourselves explicitly with either buttons or JavaScript. Let’s use a semantic HTML button.
<button popovertarget="pop" popovertargetaction="show">
  Add to my bookmarks
</button>
<div popover="manual" id="pop">Bookmarked!</div>
The popovertarget and popovertargetaction attributes are the final two ingredients, where popovertarget links the button to the popover element and popovertargetaction ensures that the popover is show-n when the button is clicked.
Hiding the popover with a CSS transition
OK, so the challenge is that we have a popover that is shown when a certain button is clicked, but it cannot be dismissed. The button is only wired up to show the popover, but it does not hide or toggle the popover (since we are not explicitly declaring it). We want the popover to show when the button is clicked, then dismiss itself after a certain amount of time.
The HTML popover can’t be closed with CSS, but it can be hidden from the page. Adding animation to that creates a visual effect. In our example, we will hide the popover by eliminating its CSS height property. You’ll learn in a moment why we’re using height, and that there are other ways you can go about it.
We can indeed select the popover attribute using an attribute selector:
[popover] {
  height: 0;
  transition: height cubic-bezier(0.6, -0.28, 0.735, 0.045) .3s .6s;

  @starting-style { 
    height: 1lh;
  }
}
When the popover is triggered by the button, its height value is the one declared in the @starting-style ruleset (1lh). After the transition-delay (which is .6s in the example), the height goes from 1lh to 0 in .3s, effectively hiding the popover.
Once again, this is only hiding the popover, not closing it properly. That’s the next challenge and we’ll need JavaScript for that level of interaction.
Closing the popover with JavaScript
We can start by setting a variable that selects the popover:
const POPOVER = document.querySelector('[popover]');
Next, we can establish a ResizeObserver that monitors the popover’s size:
const POPOVER = document.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });
And we can fire that off starting when the button to show the popover is clicked:
const POPOVER = document.querySelector('[popover]');
const OBSERVER = 
  new ResizeObserver((entries) => {
    if(entries[0].contentBoxSize[0].blockSize == 0) 
      OBSERVER.unobserve((POPOVER.hidePopover(), POPOVER));
  });
document.querySelector('button').onclick = () => OBSERVER.observe(POPOVER);
The observer will know when the popover’s CSS height reaches zero at the end of the transition, and, at that point, the popover is closed with hidePopover(). From there, the observer is stopped with unobserve().
In our example, height and ResizeObserver are used to auto-close the notification. You can try any other CSS property and JavaScript observer combination that might work with your preference. Learning about ResizeObserver and MutationObserver can help you find some options.
Setting an HTML fallback
When JavaScript is disabled in the browser, if the popover type is set to any of the light-dismissible types, it acts as a fallback. Keep the popover visible by overriding the style rules that hide it. The user can dismiss it by clicking or tapping anywhere outside the element.
If the popover needs to be light-dismissible only when JavaScript is disabled, then include that popover inside a <noscript> element before the manual popover. It’s the same process as before, where you override CSS styles as needed.
<noscript>
  <div popover="auto" id="pop">Bookmarked!</div>
</noscript>

<div popover="manual" id="pop">Bookmarked!</div>


<noscript>
  <style>
    [popover] {
      transition: none;
      height: 1lh;
    }
  </style>
</noscript>
When to use this method?
Another way to implement all of this would be to use setTimeout() to create a delay before closing the popover in JavaScript when the button is clicked, then adding a class to the popover element to trigger the transition effect. That way, no observer is needed.
With the method covered in this post, the delay can be set and triggered in CSS itself, thanks to @starting-style and transition-delay — no extra class required! If you prefer to implement the delay through CSS itself, then this method works best. The JavaScript will catch up to the change CSS makes at the time CSS defines, not the other way around.
Creating an Auto-Closing Notification With an HTML Popover originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The HTML popover attribute transforms elements into top-layer elements that can be opened and closed with a button or JavaScript.  Popovers can be dismissed a number of ways, but there is no option to auto-close them. Preethi has a technique you can use.
Creating an Auto-Closing Notification With an HTML Popover originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Creating an Auto-Closing Notification With an HTML Popover

<p>This is the third article in a series about the CSS <code>shape()</code> function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the <code>curve</code> command and how to use it for drawing complex shapes.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/better-css-shapes-using-shape-part-3-curves/">Better CSS Shapes Using shape() — Part 3: Curves</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>


If you’re following along, this is the third post in a series about the new CSS shape() function. We’ve learned how to draw lines and arcs and, in this third part, I will introduce the curve command — the missing command you need to know to have full control over the shape() function. In reality, there are more commands, but you will rarely need them and you can easily learn about them later by checking the documentation.





Better CSS Shapes Using shape()
Lines and Arcs
More on Arcs
Curves (you are here!)



The curve command
This command adds a Bézier curve between two points by specifying control points. We can either have one control point and create a Quadratic curve or two control points and create a Cubic curve.
Bézier, Quadratic, Cubic, control points? What?!
For many of you, that definition is simply unclear, or even useless! You can spend a few minutes reading about Bézier curves but is it really worth it? Probably not, unless your job is to create shapes all the day and you have a solid background in geometry.
We already have cubic-bezier() as an easing function for animations but, honestly, who really understands how it works? We either rely on a generator to get the code or we read a “boring” explanation that we forget in two minutes. (I have one right here by the way!)
Don’t worry, this article will not be boring as I will mostly focus on practical examples and more precisely the use case of rounding the corners of irregular shapes. Here is a figure to illustrate a few examples of Bézier curves.




The blue dots are the starting and ending points (let’s call them A and B) and the black dots are the control points. And notice how the curve is tangent to the dashed lines illustrated in red.
In this article, I will consider only one control point. The syntax will follow this pattern:
clip-path: shape(
  from Xa Ya, 
  curve to Xb Yb with Xc Yc
);
arc command vs. curve command
We already saw in Part 1 and Part 2 that the arc command is useful establishing rounded edges and corners, but it will not cover all the cases. That’s why you will need the curve command. The tricky part is to know when to use each one and the answer is “it depends.” There is no generic rule but my advice is to first see if it’s possible (and easy) using arc. If not, then you have to use curve.
For some shapes, we can have the same result using both commands and this is a good starting point for us to understand the curve command and compare it with arc.
Take the following example:
CodePen Embed Fallback
This is the code for the first shape:
.shape {
  clip-path: shape(from 0 0,
    arc to 100% 100% of 100% cw,
    line to 0 100%)
}
And for the second one, we have this:
.shape {
  clip-path: shape(from 0 0,
    curve to 100% 100% with 100% 0,
    line to 0 100%)
}
The arc command needs a radius (100% in this case), but the curve command needs a control point (which is 100% 0 in this example).




Now, if you look closely, you will notice that both results aren’t exactly the same. The first shape using the arc command is creating a quarter of a circle, whereas the shape using the curve command is slightly different. If you place both of them above each other, you can clearly see the difference.
CodePen Embed Fallback
This is interesting because it means we can round some corners using either an arc or a curve, but with slightly different results. Which one is better, you ask? I would say it depends on your visual preference and the shape you are creating.
In Part 1, we created rounded tabs using the arc command, but we can also create them with curve.
CodePen Embed Fallback
Can you spot the difference? It’s barely visible but it’s there.
Notice how I am using the by directive the same way I am doing with arc, but this time we have the control point, which is also relative. This part can be confusing, so pay close attention to this next bit.
Consider the following:
shape(from Xa Ya, curve by Xb Yb with Xc Yc)
It means that both (Xb,Yb) and (Xc,Yc) are relative coordinates calculated from the coordinate of the starting point. The equivalent of the above using a to directive is this:
shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xc) (Yb + Yc))
We can change the reference of the control point by adding a from directive. We can either use start (the default value), end, or origin.
shape(from Xa Ya, curve by Xb Yb with Xc Yc from end)
The above means that the control point will now consider the ending point instead of the starting point. The result is similar to:
shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xb + Xc) (Ya + Yb + Yc))
If you use origin, the reference will be the origin, hence the coordinate of the control point becomes absolute instead of relative.
The from directive may add some complexity to the code and the calculation, so don’t bother yourself with it. Simply know it exists in case you face it, but keep using the default value.
I think it’s time for your first homework! Similar to the rounded tab exercise, try to create the inverted radius shape we covered in the Part 1 using curve instead of arc. Here are both versions for you to reference, but try to do it without peeking first, if you can.
CodePen Embed Fallback
Let’s draw more shapes!
Now that we have a good overview of the curve command, let’s consider more complex shapes where arc won’t help us round the corners and the only solution is to draw curves instead. Considering that each shape is unique, so I will focus on the technique rather than the code itself.
Slanted edge
Let’s start with a rectangular shape with a slanted edge.




Getting the shape on the left is quite simple, but the shape on the right is a bit tricky. We can round two corners with a simple border-radius, but for the slanted edge, we will use shape() and two curve commands.
The first step is to write the code of the shape without rounded corners (the left one) which is pretty straightforward since we’re only working with the line command:
.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line to calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}
Then we take each corner and try to round it by modifying the code. Here is a figure to illustrate the technique I am going to use for each corner.




We define a distance, R, that controls the radius. From each side of the corner point, I move by that distance to create two new points, which are illustrated above in red. Then, I draw my curve using the new points as starting and ending points. The corner point will be the control point.
The code becomes:
.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    Line  to Xa Ya,
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}
Notice how the curve is using the coordinates of the corner point in the with directive, and we have two new points, A and B.
Until now, the technique is not that complex. For each corner point, you replace the line command with line + curve commands where the curve command reuses the old point in its with directive.
If we apply the same logic to the other corner, we get the following:
.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line  to Xa Ya, 
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line  to Xc Yc,
    curve to Xd Yd with 100% 100%,
    line to 0 100%
    );
}
Now we need to calculate the coordinates of the new points. And here comes the tricky part because it’s not always simple and it may require some complex calculation. Even if I detail this case, the logic won’t be the same for the other shapes we’re making, so I will skip the math part and give you the final code:
.box {
  --h: 200px; /* element height */
  --s: 90px;  /* slant size */
  --r: 20px;  /* radius */
  
  height: var(--h);
  border-radius: var(--r) 0 0 var(--r);
  --_a: atan2(var(--s), var(--h));
  clip-path: 
    shape(from 0 0,
    line  to calc(100% - var(--s) - var(--r)) 0,
    curve by calc(var(--r) * (1 + sin(var(--_a)))) 
              calc(var(--r) * cos(var(--_a)))
    with var(--r) 0,
    line  to calc(100% - var(--r) * sin(var(--_a))) 
              calc(100% - var(--r) * cos(var(--_a))),
    curve to calc(100% - var(--r)) 100%  with 100% 100%,
    line to 0 100%
    );
}
I know the code looks a bit scary, but the good news is that the code is also really easy to control using CSS variables. So, even if the math is not easy to grasp, you don’t have to deal with it. It should be noted that I need to know the height to be able to calculate the coordinates which means the solution isn’t perfect because the height is a fixed value.
CodePen Embed Fallback
Arrow-shaped box
Here’s a similar shape, but this time we have three corners to round using the curve command.
CodePen Embed Fallback
The final code is still complex but I followed the same steps. I started with this:
.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line to calc(100% - var(--s)) 0,
    /* corner #2 */
    line to 100% 50%,
    /* corner #3 */
    line to calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}
Then, I modified it into this:
.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line  to Xa Ya
    curve to Xb Yb with calc(100% - var(--s)) 0,
    /* corner #2 */
    line  to Xa Ya
    curve to Xb Yb with 100% 50%,
    /* corner #3 */
    line  to Xa Yb
    curve to Xb Yb with calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}
Lastly, I use a pen and paper to do all the calculations.
You might think this technique is useless if you are not good with math and geometry, right? Not really, because you can still grab the code and use it easily since it’s optimized using CSS variables. Plus, you aren’t obligated to be super accurate and precise. You can rely on the above technique and use trial and error to approximate the coordinates. It will probably take you less time than doing all the math.
Rounded polygons
I know you are waiting for this, right? Thanks to the new shape() and the curve command, we can now have rounded polygon shapes!




Here is my implementation using Sass where you can control the radius, number of sides and the rotation of the shape:
CodePen Embed Fallback
If we omit the complex geometry part, the loop is quite simple as it relies on the same technique with a line + curve per corner.
$n: 9; /* number of sides*/
$r: .2; /* control the radius [0 1] */
$a: 15deg; /* control the rotation */

.poly {
  aspect-ratio: 1;
  $m: ();
  @for $i from 0 through ($n - 1) {
    $m: append($m, line  to Xai Yai, comma);
    $m: append($m, curve to Xbi Ybi with Xci Yci, comma);
  } 
  clip-path: shape(#{$m});
}
Here is another implementation where I define the variables in CSS instead of Sass:
CodePen Embed Fallback
Having the variables in CSS is pretty handy especially if you want to have some animations. Here is an example of a cool hover effect applied to hexagon shapes:
CodePen Embed Fallback
I have also updated my online generator to add the radius parameter. If you are not familiar with Sass, you can easily copy the CSS code from there. You will also find the border-only and cut-out versions!



Conclusion
Are we done with the curve command? Probably not, but we have a good overview of its potential and all the complex shapes we can build with it. As for the code, I know that we have reached a level that is not easy for everyone. I could have extended the explanation by explicitly breaking down the math, but then this article would be overly complex and make it seem like using shape() is harder than it is.
This said, most of the shapes I code are available within my online collection that I constantly update and optimize so you can easily grab the code of any shape!
If you want a good follow-up to this article, I wrote an article for Frontend Masters where you can create blob shapes using the curve command.





Better CSS Shapes Using shape()
Lines and Arcs
More on Arcs
Curves (you are here!)


Better CSS Shapes Using shape() — Part 3: Curves originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

This is the third article in a series about the CSS shape() function. We've covered drawing lines and arcs in previous articles and, this time, we look specifically at the curve command and how to use it for drawing complex shapes.
Better CSS Shapes Using shape() — Part 3: Curves originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Better CSS Shapes Using shape() — Part 3: Curves

<p>The <code>contrast-color()</code> function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/">Exploring the CSS contrast-color() Function… a Second Time</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 many countries, web accessibility is a human right and the law, and there can be heavy fines for non-compliance. Naturally, this means that text and icons and such must have optimal color contrast in accordance with the benchmarks set by the Web Content Accessibility Guidelines (WCAG). Now, there are quite a few color contrast checkers out there (Figma even has one built-in now), but the upcoming <code>contrast-color()</code> function doesn’t <em>check</em> color contrast, it outright resolves to either black or white (whichever one contrasts the most with your chosen color).</p>



<p>Right off the bat, you should know that <a href="https://css-tricks.com/exploring-color-contrast-for-the-first-time/">we’ve sorta looked at this feature before</a>. Back then, however, it was called <code>color-contrast()</code> instead of <code>contrast-color()</code> and had a much more convoluted way of going about things. It was only released in <a href="https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/" rel="noopener">Safari Technology Preview 122 back in 2021</a>, and that’s still the case at the time I’m writing this (now at version 220).</p>



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



<p>You’d use it like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}</code></pre>



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



<p>Here, <code>contrast-color()</code> has determined that white contrasts with <code>darkblue</code> better than black does, which is why <code>contrast-color()</code> resolves to <code>white</code>. Pretty simple, really, but there are a few shortcomings, which includes a lack of browser support (again, it’s only in <a href="https://developer.apple.com/safari/technology-preview/" rel="noopener">Safari Technology Preview</a> at the moment).</p>



<p>We can use <code>contrast-color()</code> conditionally, though:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@supports (color: contrast-color(red)) {
  /* contrast-color() supported */
}

@supports not (color: contrast-color(red)) {
  /* contrast-color() not supported */
}</code></pre>


<h3 class="wp-block-heading" id="the-shortcomings-of-contrast-color-">The shortcomings of <code>contrast-color()</code></h3>


<p>First, let me just say that improvements are already being considered, so here I’ll explain the shortcomings as well as any improvements that I’ve heard about.</p>



<p>Undoubtedly, the number one shortcoming is that <code>contrast-color()</code> only resolves to either black or white. If you don’t want black or white, well… that sucks. However, <a href="https://drafts.csswg.org/css-color-5/#contrast-color" rel="noopener">the draft spec</a> itself alludes to more control over the resolved color in the future.</p>



<p>But there’s one other thing that’s surprisingly easy to overlook. What happens when neither black nor white is actually accessible against the chosen color? That’s right, it’s possible for <code>contrast-color()</code> to just… <em>not provide a contrasting color</em>. Ideally, I think we’d want <code>contrast-color()</code> to resolve to the closest accessible variant of a <em>preferred</em> color. Until then, <code>contrast-color()</code> isn’t really usable.</p>



<p>Another shortcoming of <code>contrast-color()</code> is that it only accepts arguments of the <code>&lt;color&gt;</code> data type, so it’s just not going to work with images or anything like that. I did, however, manage to make it “work” with a gradient (basically, two instances of <code>contrast-color()</code> for two color stops/one linear gradient):</p>



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



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;button>
  &lt;span>A button&lt;/span>
&lt;/button></code></pre>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  background: linear-gradient(to right, red, blue);

  span {
    background: linear-gradient(to right, contrast-color(red), contrast-color(blue));
    color: transparent;
    background-clip: text;
  }
}</code></pre>



<p>The reason this looks so horrid is that, as mentioned before, <code>contrast-color()</code> only resolves to black or white, so in the middle of the gradient we essentially have 50% grey on purple. This problem would also get solved by <code>contrast-color()</code> resolving to a wider spectrum of colors.</p>



<p>But what about the font size? As you might know already, the criteria for color contrast depends on the font size, so how does <em>that</em> work? Well, at the moment it doesn’t, but I think it’s safe to assume that it’ll eventually take the <code>font-size</code> into account when determining the resolved color. Which brings us to APCA.</p>



<p>APCA (<a href="https://git.apcacontrast.com/documentation/APCA_in_a_Nutshell.html" rel="noopener">Accessible Perceptual Contrast Algorithm</a>) is a new algorithm for measuring color contrast reliably. Andrew Somers, creator of APCA, conducted studies (alongside many other independent studies) and learned that <a href="https://medium.com/@colleengratzer/how-apca-changes-accessible-contrast-with-andrew-somers-3d47627a5e16" rel="noopener">23% of WCAG 2 &#8220;Fails&#8221; are actually accessible. In addition, an insane 47% of &#8220;Passes&#8221; are inaccessible</a>.</p>



<p>Not only should APCA do a better job, but the <a href="https://readtech.org/ARC/#conformance" rel="noopener">APCA Readability Criterion</a> (ARC) is far more nuanced, taking into account a much wider spectrum of font sizes and weights (hooray for me, as I’m very partial to <code>600</code> as a standard font weight). While the criterion is expectedly complex and unnecessarily confusing, the <a href="https://apcacontrast.com/" rel="noopener">APCA Contrast Calculator</a> does a decent-enough job of explaining how it all works visually, for now.</p>



<p><code>contrast-color()</code> doesn’t use APCA, but <a href="https://drafts.csswg.org/css-color-5/#contrast-color" rel="noopener">the draft spec</a> <em>does</em> allude to offering more algorithms in the future. This wording is odd as it suggests that we’ll be able to choose between the APCA and WCAG algorithms. Then again, we have to remember that the laws of some countries will require WCAG 2 compliance while others require WCAG 3 compliance (when it becomes a standard).</p>



<p>That’s right, we’re a long way off of APCA becoming a part of WCAG 3, let alone <code>contrast-color()</code>. In fact, <a href="https://github.com/w3c/silver/pull/663#issuecomment-1408914402" rel="noopener">it might not even be a part of it initially</a> (or at all), and there are many more hurdles after that, but hopefully this sheds some light on the whole thing. For now, <code>contrast-color()</code> is using WCAG 2 <em>only</em>.</p>


<h3 class="wp-block-heading" id="using-contrast-color-">Using <code>contrast-color()</code></h3>


<p>Here’s a simple example (the same one from earlier) of a <code>darkblue</code>-colored button with accessibly-colored text chosen by <code>contrast-color()</code>. I’ve put this <code>darkblue</code> color into a CSS variable so that we can define it once but reference it as many times as is necessary (which is just twice for now).</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --background-color: darkblue;
  background-color: var(--background-color);
  /* Resolves to white */
  color: contrast-color(var(--background-color));
}</code></pre>



<p>And the same thing but with <code>lightblue</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --background-color: lightblue;
  background-color: var(--background-color);
  /* Resolves to black */
  color: contrast-color(var(--background-color));
}</code></pre>



<p>First of all, we can absolutely switch this up and use <code>contrast-color()</code> on the <code>background-color</code> property instead (or in-place of any <code>&lt;color&gt;</code>, in fact, like on a border):</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --color: darkblue;
  color: var(--color);
  /* Resolves to white */
  background-color: contrast-color(var(--color));
}</code></pre>



<p>Any valid <code>&lt;color&gt;</code> will work (named, HEX, RGB, HSL, HWB, etc.):</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  /* HSL this time */
  --background-color: hsl(0 0% 0%);
  background-color: var(--background-color);
  /* Resolves to white */
  color: contrast-color(var(--background-color));
}</code></pre>



<p>Need to change the base color on the fly (e.g., on hover)? Easy:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --background-color: hsl(0 0% 0%);
  background-color: var(--background-color);
  /* Starts off white, becomes black on hover */
  color: contrast-color(var(--background-color));

  &amp;:hover {
    /* 50% lighter */
    --background-color: hsl(0 0% 50%);
  }
}</code></pre>



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



<p>Similarly, we could use <code>contrast-color()</code> with the <a href="https://css-tricks.com/almanac/functions/l/light-dark/"><code>light-dark()</code></a> function to ensure accessible color contrast across light and dark modes:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root {
  /* Dark mode if checked */
  &amp;:has(input[type="checkbox"]:checked) {
    color-scheme: dark;
  }

  /* Light mode if not checked */
  &amp;:not(:has(input[type="checkbox"]:checked)) {
    color-scheme: light;
  }

  body {
    /* Different background for each mode */
    background: light-dark(hsl(0 0% 50%), hsl(0 0% 0%));
    /* Different contrasted color for each mode */
    color: light-dark(contrast-color(hsl(0 0% 50%)), contrast-color(hsl(0 0% 0%));
  }
}</code></pre>



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



<p>The interesting thing about APCA is that it accounts for the discrepancies between light mode and dark mode contrast, whereas the current WCAG algorithm often evaluates dark mode contrast inaccurately. This one nuance of many is why we need not only a new color contrast algorithm but also the <code>contrast-color()</code> CSS function to handle all of these nuances (font size, font weight, etc.) for us.</p>



<p>This doesn’t mean that <code>contrast-color()</code> has to ensure accessibility at the expense of our “designed” colors, though. Instead, we can use <code>contrast-color()</code> within the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast" rel="noopener"><code>prefers-contrast: more</code> media query</a> only:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">button {
  --background-color: hsl(270 100% 50%);
  background-color: var(--background-color);
  /* Almost white (WCAG AA: Fail) */
  color: hsl(270 100% 90%);

  @media (prefers-contrast: more) {
    /* Resolves to white (WCAG AA: Pass) */
    color: contrast-color(var(--background-color));
  }
}</code></pre>



<p>Personally, I’m not keen on <code>prefers-contrast: more</code> as a progressive enhancement. Great color contrast benefits everyone, and besides, we can’t be sure that those who need more contrast are actually set up for it. Perhaps they’re using a brand new computer, or they just don’t know how to customize accessibility settings.</p>


<h3 class="wp-block-heading" id="closing-thoughts">Closing thoughts</h3>


<p>So, <code>contrast-color()</code> obviously isn’t useful in its current form as it only resolves to black or white, which might not be accessible. However, if it were improved to resolve to a wider spectrum of colors, that’d be awesome. Even better, if it were to upgrade colors to a certain standard (e.g., WCAG AA) if they don’t already meet it, but let them be if they do. Sort of like a failsafe approach? This means that web browsers would have to take the font size, font weight, element, and so on into account.</p>



<p>To throw another option out there, there’s also the approach that Windows takes for its High Contrast Mode. This mode triggers web browsers to overwrite colors using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors" rel="noopener"><code>forced-colors: active</code></a> media query, which we can also use to make further customizations. However, <a href="https://support.microsoft.com/en-gb/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696" rel="noopener">this effect is quite extreme</a> (even though we <em>can</em> opt out of it using the <code>forced-colors-adjust</code> CSS property and use our own colors instead) and macOS’s version of the feature doesn’t extend to the web.</p>



<p>I think that forced colors is an incredible idea as long as users can set their contrast preferences when they set up their computer or browser (the browser would be more enforceable), and there are a wider range of contrast options. And then if you, as a designer or developer, don’t like the enforced colors, then you have the option to meet accessibility standards so that they don’t get enforced. In my opinion, this approach is the most user-friendly and the most developer-friendly (assuming that you care about accessibility). For <em>complete</em> flexibility, there could be a CSS property for opting out, or something. Just color contrast by default, but you can keep the colors you’ve chosen as long as they’re accessible.</p>



<p>What do you think? Is <code>contrast-color()</code> the right approach, or should the user agent bear some or all of the responsibility? Or perhaps you’re happy for color contrast to be considered manually?</p>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/">Exploring the CSS contrast-color() Function… a Second Time</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 many countries, web accessibility is a human right and the law, and there can be heavy fines for non-compliance. Naturally, this means that text and icons and such must have optimal color contrast in accordance with the benchmarks set by the Web Content Accessibility Guidelines (WCAG). Now, there are quite a few color contrast checkers out there (Figma even has one built-in now), but the upcoming contrast-color() function doesn’t check color contrast, it outright resolves to either black or white (whichever one contrasts the most with your chosen color).
Right off the bat, you should know that we’ve sorta looked at this feature before. Back then, however, it was called color-contrast() instead of contrast-color() and had a much more convoluted way of going about things. It was only released in Safari Technology Preview 122 back in 2021, and that’s still the case at the time I’m writing this (now at version 220).




You’d use it like this:
button {
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}
CodePen Embed Fallback
Here, contrast-color() has determined that white contrasts with darkblue better than black does, which is why contrast-color() resolves to white. Pretty simple, really, but there are a few shortcomings, which includes a lack of browser support (again, it’s only in Safari Technology Preview at the moment).
We can use contrast-color() conditionally, though:
@supports (color: contrast-color(red)) {
  /* contrast-color() supported */
}

@supports not (color: contrast-color(red)) {
  /* contrast-color() not supported */
}
The shortcomings of contrast-color()
First, let me just say that improvements are already being considered, so here I’ll explain the shortcomings as well as any improvements that I’ve heard about.
Undoubtedly, the number one shortcoming is that contrast-color() only resolves to either black or white. If you don’t want black or white, well… that sucks. However, the draft spec itself alludes to more control over the resolved color in the future.
But there’s one other thing that’s surprisingly easy to overlook. What happens when neither black nor white is actually accessible against the chosen color? That’s right, it’s possible for contrast-color() to just… not provide a contrasting color. Ideally, I think we’d want contrast-color() to resolve to the closest accessible variant of a preferred color. Until then, contrast-color() isn’t really usable.
Another shortcoming of contrast-color() is that it only accepts arguments of the <color> data type, so it’s just not going to work with images or anything like that. I did, however, manage to make it “work” with a gradient (basically, two instances of contrast-color() for two color stops/one linear gradient):
CodePen Embed Fallback
<button>
  <span>A button</span>
</button>
button {
  background: linear-gradient(to right, red, blue);

  span {
    background: linear-gradient(to right, contrast-color(red), contrast-color(blue));
    color: transparent;
    background-clip: text;
  }
}
The reason this looks so horrid is that, as mentioned before, contrast-color() only resolves to black or white, so in the middle of the gradient we essentially have 50% grey on purple. This problem would also get solved by contrast-color() resolving to a wider spectrum of colors.
But what about the font size? As you might know already, the criteria for color contrast depends on the font size, so how does that work? Well, at the moment it doesn’t, but I think it’s safe to assume that it’ll eventually take the font-size into account when determining the resolved color. Which brings us to APCA.
APCA (Accessible Perceptual Contrast Algorithm) is a new algorithm for measuring color contrast reliably. Andrew Somers, creator of APCA, conducted studies (alongside many other independent studies) and learned that 23% of WCAG 2 “Fails” are actually accessible. In addition, an insane 47% of “Passes” are inaccessible.
Not only should APCA do a better job, but the APCA Readability Criterion (ARC) is far more nuanced, taking into account a much wider spectrum of font sizes and weights (hooray for me, as I’m very partial to 600 as a standard font weight). While the criterion is expectedly complex and unnecessarily confusing, the APCA Contrast Calculator does a decent-enough job of explaining how it all works visually, for now.
contrast-color() doesn’t use APCA, but the draft spec does allude to offering more algorithms in the future. This wording is odd as it suggests that we’ll be able to choose between the APCA and WCAG algorithms. Then again, we have to remember that the laws of some countries will require WCAG 2 compliance while others require WCAG 3 compliance (when it becomes a standard).
That’s right, we’re a long way off of APCA becoming a part of WCAG 3, let alone contrast-color(). In fact, it might not even be a part of it initially (or at all), and there are many more hurdles after that, but hopefully this sheds some light on the whole thing. For now, contrast-color() is using WCAG 2 only.
Using contrast-color()
Here’s a simple example (the same one from earlier) of a darkblue-colored button with accessibly-colored text chosen by contrast-color(). I’ve put this darkblue color into a CSS variable so that we can define it once but reference it as many times as is necessary (which is just twice for now).
button {
  --background-color: darkblue;
  background-color: var(--background-color);
  /* Resolves to white */
  color: contrast-color(var(--background-color));
}
And the same thing but with lightblue:
button {
  --background-color: lightblue;
  background-color: var(--background-color);
  /* Resolves to black */
  color: contrast-color(var(--background-color));
}
First of all, we can absolutely switch this up and use contrast-color() on the background-color property instead (or in-place of any <color>, in fact, like on a border):
button {
  --color: darkblue;
  color: var(--color);
  /* Resolves to white */
  background-color: contrast-color(var(--color));
}
Any valid <color> will work (named, HEX, RGB, HSL, HWB, etc.):
button {
  /* HSL this time */
  --background-color: hsl(0 0% 0%);
  background-color: var(--background-color);
  /* Resolves to white */
  color: contrast-color(var(--background-color));
}
Need to change the base color on the fly (e.g., on hover)? Easy:
button {
  --background-color: hsl(0 0% 0%);
  background-color: var(--background-color);
  /* Starts off white, becomes black on hover */
  color: contrast-color(var(--background-color));

  &:hover {
    /* 50% lighter */
    --background-color: hsl(0 0% 50%);
  }
}
CodePen Embed Fallback
Similarly, we could use contrast-color() with the light-dark() function to ensure accessible color contrast across light and dark modes:
:root {
  /* Dark mode if checked */
  &:has(input[type="checkbox"]:checked) {
    color-scheme: dark;
  }

  /* Light mode if not checked */
  &:not(:has(input[type="checkbox"]:checked)) {
    color-scheme: light;
  }

  body {
    /* Different background for each mode */
    background: light-dark(hsl(0 0% 50%), hsl(0 0% 0%));
    /* Different contrasted color for each mode */
    color: light-dark(contrast-color(hsl(0 0% 50%)), contrast-color(hsl(0 0% 0%));
  }
}
CodePen Embed Fallback
The interesting thing about APCA is that it accounts for the discrepancies between light mode and dark mode contrast, whereas the current WCAG algorithm often evaluates dark mode contrast inaccurately. This one nuance of many is why we need not only a new color contrast algorithm but also the contrast-color() CSS function to handle all of these nuances (font size, font weight, etc.) for us.
This doesn’t mean that contrast-color() has to ensure accessibility at the expense of our “designed” colors, though. Instead, we can use contrast-color() within the prefers-contrast: more media query only:
button {
  --background-color: hsl(270 100% 50%);
  background-color: var(--background-color);
  /* Almost white (WCAG AA: Fail) */
  color: hsl(270 100% 90%);

  @media (prefers-contrast: more) {
    /* Resolves to white (WCAG AA: Pass) */
    color: contrast-color(var(--background-color));
  }
}
Personally, I’m not keen on prefers-contrast: more as a progressive enhancement. Great color contrast benefits everyone, and besides, we can’t be sure that those who need more contrast are actually set up for it. Perhaps they’re using a brand new computer, or they just don’t know how to customize accessibility settings.
Closing thoughts
So, contrast-color() obviously isn’t useful in its current form as it only resolves to black or white, which might not be accessible. However, if it were improved to resolve to a wider spectrum of colors, that’d be awesome. Even better, if it were to upgrade colors to a certain standard (e.g., WCAG AA) if they don’t already meet it, but let them be if they do. Sort of like a failsafe approach? This means that web browsers would have to take the font size, font weight, element, and so on into account.
To throw another option out there, there’s also the approach that Windows takes for its High Contrast Mode. This mode triggers web browsers to overwrite colors using the forced-colors: active media query, which we can also use to make further customizations. However, this effect is quite extreme (even though we can opt out of it using the forced-colors-adjust CSS property and use our own colors instead) and macOS’s version of the feature doesn’t extend to the web.
I think that forced colors is an incredible idea as long as users can set their contrast preferences when they set up their computer or browser (the browser would be more enforceable), and there are a wider range of contrast options. And then if you, as a designer or developer, don’t like the enforced colors, then you have the option to meet accessibility standards so that they don’t get enforced. In my opinion, this approach is the most user-friendly and the most developer-friendly (assuming that you care about accessibility). For complete flexibility, there could be a CSS property for opting out, or something. Just color contrast by default, but you can keep the colors you’ve chosen as long as they’re accessible.
What do you think? Is contrast-color() the right approach, or should the user agent bear some or all of the responsibility? Or perhaps you’re happy for color contrast to be considered manually?


Exploring the CSS contrast-color() Function… a Second Time originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The contrast-color() function doesn’t check color contrast, but rather it outright resolves to either black or white (whichever one contrasts the most with your chosen color). Safari Technology Preview recently implemented it and we explore its possible uses in this article.
Exploring the CSS contrast-color() Function… a Second Time originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.