CSS-TRICKS

<p>Shape master Temani Afif has what might be <a href="https://css-generators.com" rel="noopener">the largest collection of CSS shapes</a> on the planet with all the tools to generate them on the fly. There&#8217;s a mix of clever techniques he&#8217;s typically used to make those shapes, &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/svg-to-css-shape-converter/">SVG to CSS Shape Converter</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>Shape master Temani Afif has what might be <a href="https://css-generators.com" rel="noopener">the largest collection of CSS shapes</a> on the planet with all the tools to generate them on the fly. There&#8217;s a mix of clever techniques he&#8217;s typically used to make those shapes, <a href="https://css-tricks.com/author/afiftemani/">many of which he&#8217;s covered here at CSS-Tricks over the years</a>.</p>



<p>Some of the more complex shapes were commonly clipped with the <code>path()</code> function. That makes a lot of sense because it literally accepts SVG <code>path</code> coordinates that you can draw in an app like Figma and export.</p>



<p>But Temani has gone all-in on the newly-released <code>shape()</code> function which recently rolled out in both Chromium browsers and Safari. That includes <a href="https://css-generators.com/svg-to-css/" rel="noopener">a brand-new generator that converts <code>path()</code> shapes in <code>shape()</code> commands</a> instead.</p>



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



<p>So, if we had a shape that was originally created with an SVG <code>path</code>, like this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.shape {
  clip-path: path(
    M199.6,18.9
    c-4.3-8.9-12.5-16.4-22.3-17.8
    c-11.9-1.7-23.1,5.4-32.2,13.2
    c-9.1,7.8-17.8,16.8-29.3,20.3
    c-20.5,6.2-41.7-7.4-63.1-7.5
    c38.7,27,24.8,33,15.2,43.3
    c-35.5,38.2-0.1,99.4,40.6,116.2
    c32.8,13.6,72.1,5.9,100.9-15
    c27.4-19.9,44.3-54.9,47.4-88.6
    c0.2-2.7,0.4-5.3,0.5-7.9
    c204.8,38,203.9,27.8,199.6,18.9
    z
  );
}</code></pre>



<p>&#8230;the generator will spit this out:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.shape {
  clip-path: shape(
    from 97.54% 10.91%,
    curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,
    curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,
    curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,
    curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,
    curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,
    curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,
    curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,
    curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,
    curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,
    curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,
    close
  );
}</code></pre>



<p>Pretty cool!</p>



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



<p>Honestly, I&#8217;m not sure how often I&#8217;ll need to convert <code>path()</code> to <code>shape()</code>. Seems like a stopgap sorta thing where the need for it dwindles over time as <code>shape()</code> is used more often — and it&#8217;s not like the existing <code>path()</code> function is broken or deprecated&#8230; it&#8217;s just different. But still, I&#8217;m using the generator a LOT as <a href="https://css-tricks.com/css-shape-commands/">I try to wrap my head around <code>shape()</code> commands</a>. Seeing the commands in context is invaluable which makes it an excellent learning tool.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/svg-to-css-shape-converter/">SVG to CSS Shape Converter</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>


Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There’s a mix of clever techniques he’s typically used to make those shapes, many of which he’s covered here at CSS-Tricks over the years.
Some of the more complex shapes were commonly clipped with the path() function. That makes a lot of sense because it literally accepts SVG path coordinates that you can draw in an app like Figma and export.
But Temani has gone all-in on the newly-released shape() function which recently rolled out in both Chromium browsers and Safari. That includes a brand-new generator that converts path() shapes in shape() commands instead.




So, if we had a shape that was originally created with an SVG path, like this:
.shape {
  clip-path: path(
    M199.6,18.9
    c-4.3-8.9-12.5-16.4-22.3-17.8
    c-11.9-1.7-23.1,5.4-32.2,13.2
    c-9.1,7.8-17.8,16.8-29.3,20.3
    c-20.5,6.2-41.7-7.4-63.1-7.5
    c38.7,27,24.8,33,15.2,43.3
    c-35.5,38.2-0.1,99.4,40.6,116.2
    c32.8,13.6,72.1,5.9,100.9-15
    c27.4-19.9,44.3-54.9,47.4-88.6
    c0.2-2.7,0.4-5.3,0.5-7.9
    c204.8,38,203.9,27.8,199.6,18.9
    z
  );
}
…the generator will spit this out:
.shape {
  clip-path: shape(
    from 97.54% 10.91%,
    curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,
    curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,
    curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,
    curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,
    curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,
    curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,
    curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,
    curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,
    curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,
    curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,
    close
  );
}
Pretty cool!
CodePen Embed Fallback
Honestly, I’m not sure how often I’ll need to convert path() to shape(). Seems like a stopgap sorta thing where the need for it dwindles over time as shape() is used more often — and it’s not like the existing path() function is broken or deprecated… it’s just different. But still, I’m using the generator a LOT as I try to wrap my head around shape() commands. Seeing the commands in context is invaluable which makes it an excellent learning tool.
SVG to CSS Shape Converter originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Shape master Temani Afif has what might be the largest collection of CSS shapes on the planet with all the tools to generate them on the fly. There’s a mix of clever techniques he’s typically used to make those shapes, …
SVG to CSS Shape Converter originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

SVG to CSS Shape Converter

<p>Answering a reader's question about how to create a complex numbering system with CSS list counters.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-readers-question-on-nested-lists/">A Reader&#8217;s Question on Nested Lists</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 couple of days back, among the tens of crypto-scams that flood our contact inbox, we found an interesting question on nested lists from one of our readers.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I have a problem (related to list-numbering) that seems commonplace, but I can&#8217;t seem to solve it or find any solution for. If any of your geniuses can answer this, I&#8217;m sure there are going to be a lot of people interested.</p>



<span id="more-386580"></span>
</blockquote>



<p>Styling lists? Enough to catch my attention. After all, I just completed <a href="https://css-tricks.com/styling-counters-in-css/">an entire guide about CSS counters</a>. The message continues:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Here&#8217;s the problem. It&#8217;s a routine numbering sequence, of different levels, found in (for example) [government], legislation, and in my case, condominium bylaws. I have five levels represented by the first number at each level of 1., (1), (a) (lower-alpha), (i) (lower-roman), (A) (upper-alpha). Of course, I have 5 levels here, but if you could demonstrate a solution for 3 levels.</p>
</blockquote>



<p>Fair enough! So, what we are looking to achieve is a nested list, where each sublist marker/counter is of a different kind. The example linked in the message is the following:</p>



<pre rel="Plain Text" class="wp-block-csstricks-code-block language-none" data-line=""><code markup="tt">8 The strata corporation must repair and maintain all of the following:
    (a) common assets of the strata corporation;
    (b) common property that has not been designated as limited common property;
    (c) limited common property, but the duty to repair and maintain it is restricted to
        (i) repair and maintenance that in the ordinary course of events occurs less often than once a year, and
        (ii) the following, no matter how often the repair or maintenance ordinarily occurs:
            (A) the structure of a building;
            (B) the exterior of a building;
            (C) chimneys, stairs, balconies and other things attached to the exterior of a building;
            (D) doors, windows and skylights on the exterior of a building or that front on the common property;</code></pre>



<p>While simple at first glance, it still has some nuance, so let&#8217;s try to come up with the most maintainable solution here.</p>


<h3 class="wp-block-heading" id="the-ugly-way">The ugly way</h3>


<p>My first approach to this problem was no approach at all; I just opened CodePen, wrote up the HTML, and tried to get my CSS to work towards the final result. After translating the Markdown into&nbsp;<code>ol</code>&nbsp;and&nbsp;<code>li</code>&nbsp;elements, and with no special styling on each list, the base list would look like the following:</p>



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



<p>Once there, my first instinct was to select each&nbsp;<code>ol</code>&nbsp;element and then change its&nbsp;<code><a href="https://css-tricks.com/almanac/properties/l/list-style/">list-style-type</a></code>&nbsp;to the desired one. To target each level, I selected each&nbsp;<code>ol</code>&nbsp;depending on its number of&nbsp;<code>ol</code>&nbsp;ancestors, then let the specificity handle the rest:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">ol {
  list-style-type: decimal; /* Unnecessary; just for demo */
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol ol ol ol {
  list-style-type: upper-alpha;
}</code></pre>



<p>And as you can see, this works&#8230; But we can agree it&#8217;s an ugly way to go about it.</p>



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


<h2 class="wp-block-heading" id="nesting-to-the-rescue">Nesting to the rescue</h2>


<p>Luckily, CSS nesting has been baseline for a couple of years now, so we could save ourselves a lot of&nbsp;<code>ol</code>&nbsp;selectors by just nesting each element inside the next one.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">ol {
  list-style-type: decimal;
  
  ol {
    list-style-type: lower-alpha;
     
    ol {
      list-style-type: lower-roman;
          
       ol {
        list-style-type: upper-alpha;
      }
    }
  }
}
</code></pre>



<p>While too much nesting is usually frowned upon, I think that, for this case in particular, it makes the CSS clearer on what it intends to do — especially since the CSS structure matches the HTML itself, and it also keeps all the list styles in one place. All to the same result:</p>



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


<h3 class="wp-block-heading" id="it-s-legal">It&#8217;s legal</h3>


<p>I don&#8217;t know anything about legal documents, nor do I intend to learn about them. However, I do know the law, and by extension, lawyers are finicky about how they are formatted because of legal technicalities and whatnot. The point is that for a legal document, those parentheses surrounding each list marker — like <code>(A)</code> or <code>(ii)</code> — are more than mere decoration and have to be included in our lists, which our current solution doesn&#8217;t.</p>



<p>A couple of years back, we would have needed to set a counter for each list and then include the parentheses along the&nbsp;<a href="https://css-tricks.com/almanac/functions/c/counter/"><code>counter()</code></a>&nbsp;output; repetitive and ugly. Nowadays, we can use the&nbsp;<a href="https://css-tricks.com/almanac/rules/c/counter-style/"><code>@counter-style</code></a>&nbsp;at rule, which as its name implies, allows us to create custom counter styles that can be used (among other places) in the&nbsp;<code>list-style-type</code>&nbsp;property.</p>



<p>In case you&#8217;re unfamiliar with the&nbsp;<code>@counter-style</code>&nbsp;syntax, what we need to know is that it can be used to extend predefined counter styles (like&nbsp;<code>decimal</code>&nbsp;or&nbsp;<code>upper-alpha</code>), and attach to them a different&nbsp;<code>suffix</code>&nbsp;or&nbsp;<code>prefix</code>. For example, the following counter style extends the common&nbsp;<code>decimal</code>&nbsp;style and adds a&nbsp;dash (<code>-</code>)&nbsp;as a&nbsp;<code>prefix</code>&nbsp;and a&nbsp;colon (<code>:</code>)&nbsp;as a suffix.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@counter-style my-counter-style {
  system: extends decimal;
  prefix: "- ";
  suffix: ": ";
}

ol {
  list-style-type: my-counter-style;
}</code></pre>



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



<p>In our case, we&#8217;ll need four counter styles:</p>



<ul class="wp-block-list">
<li>A decimal marker, without the ending dot. The initial submission doesn&#8217;t make it clear if it&#8217;s with or without the dot, but let&#8217;s assume it&#8217;s without.</li>



<li>A lower alpha marker, enclosed in parentheses.</li>



<li>A lower Roman marker, also enclosed in parentheses.</li>



<li>An upper alpha marker, enclosed in parentheses as well.</li>
</ul>



<p>All these would translate to the following&nbsp;<code>@counter-style</code>&nbsp;rules:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@counter-style trimmed-decimal {
  system: extends decimal;
  suffix: " ";
}

@counter-style enclosed-lower-alpha {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-lower-roman {
  system: extends lower-roman;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-upper-alpha {
  system: extends upper-alpha;
  prefix: "(";
  suffix: ") ";
}</code></pre>



<p>And then, we just gotta replace each with its equivalent in our initial&nbsp;<code>ol</code>&nbsp;declarations:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">ol {
  list-style-type: trimmed-decimal;

  ol {
    list-style-type: enclosed-lower-alpha;

    ol {
      list-style-type: enclosed-lower-roman;

      ol {
        list-style-type: enclosed-upper-alpha;
      }
    }
  }
}</code></pre>



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


<h3 class="wp-block-heading" id="it-should-work-without-css-">It should work without CSS!</h3>


<p>Remember, though, it&#8217;s a legal document, so what happens if the internet is weak enough so that only the HTML loads correctly, or if someone checks the page from an old browser that doesn&#8217;t support nesting or&nbsp;<code>@counter-style</code>?</p>



<p>Thinking only about the list, in most websites, it would be a mild annoyance where the markers go back to decimal, and you have to go by padding to know where each sublist starts. However, in a legal document, it can be a big deal. How big? I am no lawyer, so it beats me, but we still can make sure the list keeps its original numbering even without CSS.</p>



<p>For the task, we can use the HTML&nbsp;<code>type</code> attribute. It&#8217;s similar to CSS&nbsp;<code>list-style-type</code>&nbsp;but with its own limited uses. First, its use with&nbsp;<code>ul</code>&nbsp;elements is deprecated, while it can be used in&nbsp;<code>ol</code> elements&nbsp;to keep the lists correctly numbered even without CSS, like in legal or technical documents such as ours. It has the following values:</p>



<ul class="wp-block-list">
<li><code>"1"</code>&nbsp;for decimal numbers (default)</li>



<li><code>"a"</code>&nbsp;for lowercase alphabetic</li>



<li><code>"A"</code>&nbsp;for uppercase alphabetic</li>



<li><code>"i"</code>&nbsp;for lowercase Roman numbers</li>



<li><code>"I"</code>&nbsp;for uppercase Roman numbers</li>
</ul>



<p>Inside our HTML list, we would assign the correct numbering for each&nbsp;<code>ol</code>&nbsp;level:</p>



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



<p>Depending on how long the document is, it may be more the hassle than the benefit, but it is still good to know. Although this kind of document doesn&#8217;t change constantly, so it wouldn&#8217;t hurt to add this extra safety net.</p>



<p>Welp, that was kinda too much for a list! But that&#8217;s something intrinsic to legal documents. Still, I think it&#8217;s the simplest way to achieve the initial reader&#8217;s goal. Let me know in the comments if you think this is overengineered or if there is an easier way.</p>


<h3 class="wp-block-heading" id="more-on-lists">More on lists!</h3>


    		
    <div class="in-article-cards">
      <article class="in-article-card " id="mini-post-386580">

  <time datetime="2011-09-05" title="Originally published May 19, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Apr 23, 2021  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/properties/l/list-style/">
      list-style    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/properties/l/list-style/" class="almanac-example">
      <code class="language-css">ul { list-style: square outside none; }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/lists/" rel="tag">lists</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/saracope/" aria-label="Author page of Sara Cope">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/82ba1e1fe4aca49cdcd66ff387fee32e787abbd0ae6d42750be22ea7c89a5102 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/saracope/">
      Sara Cope    </a>
  </div>

</article>
<article class="in-article-card " id="mini-post-386580">

  <time datetime="2025-01-16" title="Originally published May 19, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Jan 28, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/rules/c/counter-style/">
      @counter-style    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/rules/c/counter-style/" class="almanac-example">
      <code class="language-css">@counter-style apple-counter { ... }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/lists/" rel="tag">lists</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/monknow/" aria-label="Author page of Juan Diego Rodríguez">
      <img data-recalc-dims="1" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/juan-diego-rodriguez-80x80.png?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/monknow/">
      Juan Diego Rodríguez    </a>
  </div>

</article>
<article class="in-article-card guides" id="mini-post-386580">

  <time datetime="2025-03-17" title="Originally published May 19, 2025">
    <strong>
                
        Article
      </strong>

    on

    May 7, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/styling-counters-in-css/">
      Styling Counters in CSS    </a>
  </h3>

  
      <div class="tags">
      <a href="https://css-tricks.com/tag/lists/" rel="tag">lists</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/monknow/" aria-label="Author page of Juan Diego Rodríguez">
      <img data-recalc-dims="1" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/juan-diego-rodriguez-80x80.png?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/monknow/">
      Juan Diego Rodríguez    </a>
  </div>

</article>
    </div>
  
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/a-readers-question-on-nested-lists/">A Reader&#8217;s Question on Nested Lists</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


A couple of days back, among the tens of crypto-scams that flood our contact inbox, we found an interesting question on nested lists from one of our readers.
I have a problem (related to list-numbering) that seems commonplace, but I can’t seem to solve it or find any solution for. If any of your geniuses can answer this, I’m sure there are going to be a lot of people interested.





Styling lists? Enough to catch my attention. After all, I just completed an entire guide about CSS counters. The message continues:
Here’s the problem. It’s a routine numbering sequence, of different levels, found in (for example) [government], legislation, and in my case, condominium bylaws. I have five levels represented by the first number at each level of 1., (1), (a) (lower-alpha), (i) (lower-roman), (A) (upper-alpha). Of course, I have 5 levels here, but if you could demonstrate a solution for 3 levels.
Fair enough! So, what we are looking to achieve is a nested list, where each sublist marker/counter is of a different kind. The example linked in the message is the following:
8 The strata corporation must repair and maintain all of the following:
    (a) common assets of the strata corporation;
    (b) common property that has not been designated as limited common property;
    (c) limited common property, but the duty to repair and maintain it is restricted to
        (i) repair and maintenance that in the ordinary course of events occurs less often than once a year, and
        (ii) the following, no matter how often the repair or maintenance ordinarily occurs:
            (A) the structure of a building;
            (B) the exterior of a building;
            (C) chimneys, stairs, balconies and other things attached to the exterior of a building;
            (D) doors, windows and skylights on the exterior of a building or that front on the common property;
While simple at first glance, it still has some nuance, so let’s try to come up with the most maintainable solution here.
The ugly way
My first approach to this problem was no approach at all; I just opened CodePen, wrote up the HTML, and tried to get my CSS to work towards the final result. After translating the Markdown into ol and li elements, and with no special styling on each list, the base list would look like the following:
CodePen Embed Fallback
Once there, my first instinct was to select each ol element and then change its list-style-type to the desired one. To target each level, I selected each ol depending on its number of ol ancestors, then let the specificity handle the rest:
ol {
  list-style-type: decimal; /* Unnecessary; just for demo */
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol ol ol ol {
  list-style-type: upper-alpha;
}
And as you can see, this works… But we can agree it’s an ugly way to go about it.
CodePen Embed Fallback
Nesting to the rescue
Luckily, CSS nesting has been baseline for a couple of years now, so we could save ourselves a lot of ol selectors by just nesting each element inside the next one.
ol {
  list-style-type: decimal;
  
  ol {
    list-style-type: lower-alpha;
     
    ol {
      list-style-type: lower-roman;
          
       ol {
        list-style-type: upper-alpha;
      }
    }
  }
}

While too much nesting is usually frowned upon, I think that, for this case in particular, it makes the CSS clearer on what it intends to do — especially since the CSS structure matches the HTML itself, and it also keeps all the list styles in one place. All to the same result:
CodePen Embed Fallback
It’s legal
I don’t know anything about legal documents, nor do I intend to learn about them. However, I do know the law, and by extension, lawyers are finicky about how they are formatted because of legal technicalities and whatnot. The point is that for a legal document, those parentheses surrounding each list marker — like (A) or (ii) — are more than mere decoration and have to be included in our lists, which our current solution doesn’t.
A couple of years back, we would have needed to set a counter for each list and then include the parentheses along the counter() output; repetitive and ugly. Nowadays, we can use the @counter-style at rule, which as its name implies, allows us to create custom counter styles that can be used (among other places) in the list-style-type property.
In case you’re unfamiliar with the @counter-style syntax, what we need to know is that it can be used to extend predefined counter styles (like decimal or upper-alpha), and attach to them a different suffix or prefix. For example, the following counter style extends the common decimal style and adds a dash (-) as a prefix and a colon (:) as a suffix.
@counter-style my-counter-style {
  system: extends decimal;
  prefix: "- ";
  suffix: ": ";
}

ol {
  list-style-type: my-counter-style;
}
CodePen Embed Fallback
In our case, we’ll need four counter styles:
A decimal marker, without the ending dot. The initial submission doesn’t make it clear if it’s with or without the dot, but let’s assume it’s without.
A lower alpha marker, enclosed in parentheses.
A lower Roman marker, also enclosed in parentheses.
An upper alpha marker, enclosed in parentheses as well.
All these would translate to the following @counter-style rules:
@counter-style trimmed-decimal {
  system: extends decimal;
  suffix: " ";
}

@counter-style enclosed-lower-alpha {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-lower-roman {
  system: extends lower-roman;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-upper-alpha {
  system: extends upper-alpha;
  prefix: "(";
  suffix: ") ";
}
And then, we just gotta replace each with its equivalent in our initial ol declarations:
ol {
  list-style-type: trimmed-decimal;

  ol {
    list-style-type: enclosed-lower-alpha;

    ol {
      list-style-type: enclosed-lower-roman;

      ol {
        list-style-type: enclosed-upper-alpha;
      }
    }
  }
}
CodePen Embed Fallback
It should work without CSS!
Remember, though, it’s a legal document, so what happens if the internet is weak enough so that only the HTML loads correctly, or if someone checks the page from an old browser that doesn’t support nesting or @counter-style?
Thinking only about the list, in most websites, it would be a mild annoyance where the markers go back to decimal, and you have to go by padding to know where each sublist starts. However, in a legal document, it can be a big deal. How big? I am no lawyer, so it beats me, but we still can make sure the list keeps its original numbering even without CSS.
For the task, we can use the HTML type attribute. It’s similar to CSS list-style-type but with its own limited uses. First, its use with ul elements is deprecated, while it can be used in ol elements to keep the lists correctly numbered even without CSS, like in legal or technical documents such as ours. It has the following values:
"1" for decimal numbers (default)
"a" for lowercase alphabetic
"A" for uppercase alphabetic
"i" for lowercase Roman numbers
"I" for uppercase Roman numbers
Inside our HTML list, we would assign the correct numbering for each ol level:
CodePen Embed Fallback
Depending on how long the document is, it may be more the hassle than the benefit, but it is still good to know. Although this kind of document doesn’t change constantly, so it wouldn’t hurt to add this extra safety net.
Welp, that was kinda too much for a list! But that’s something intrinsic to legal documents. Still, I think it’s the simplest way to achieve the initial reader’s goal. Let me know in the comments if you think this is overengineered or if there is an easier way.
More on lists!
ul { list-style: square outside none; }
    
  
      
lists    
    
  
    
      Sara Cope    
  
@counter-style apple-counter { ... }
    
  
      
lists    
    
  
    
      Juan Diego Rodríguez    
  
lists    
    
  
    
      Juan Diego Rodríguez    
  
A Reader’s Question on Nested Lists originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Answering a reader's question about how to create a complex numbering system with CSS list counters.
A Reader’s Question on Nested Lists originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

A Reader’s Question on Nested Lists

<p>Some weekend reading on the heels of <a href="https://accessibility.day" rel="noopener">Global Accessibility Awareness Day (<abbr>GAADM</abbr>)</a>, which took place yesterday. The Email Markup Consortium (<abbr>EMC</abbr>) released its 2025 study on the accessibility in HTML emails, and the <abbr>TL;DR</abbr> is &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/html-email-accessibility-report-2025/">HTML Email Accessibility Report 2025</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>Some weekend reading on the heels of <a href="https://accessibility.day" rel="noopener">Global Accessibility Awareness Day (<abbr>GAADM</abbr>)</a>, which took place yesterday. The Email Markup Consortium (<abbr>EMC</abbr>) released its 2025 study on the accessibility in HTML emails, and the <abbr>TL;DR</abbr> is not totally dissimilar from what we heard from <a href="https://webaim.org/projects/million/" rel="noopener">WebAIM’s annual web report</a>:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>This is the third full year for this report and we are disappointed to see the same issues as we have in previous years. The top 10 issues haven’t changed order since last year, apart from the addition of color contrast, which can be put down to a change in the testing and reporting.</p>
</blockquote>



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



<p>The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility checks — and they were all written by the same author representing two different brands. And, further, that author represents one of the companies that not only sponsors the study, but develops the automated testing tool powering the analysis.</p>



<p>Automated testing is the key here. That’s needed for a project looking at hundreds of thousands of emails, but it won’t surface everything, as noted:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Email that pass our checks may still have accessibility issues that we cannot pick up through automated testing. For example, we check if an alt attribute is present on an image, but we do not check if the text is suitable for that image in the context of that message.</p>
</blockquote>



<p>The most common issues relate to internationalization, like leaving out the <code>lang</code> (96% of emails) and <code>dir</code> (98% of emails) attributes. But you’ll be familiar with most of what rounds up the top 10, because it lines up with WebAIM’s findings:</p>



<ul class="wp-block-list">
<li>Links must have discernible text</li>



<li>Element has insufficient color contrast</li>



<li>Images must have alternate text</li>



<li>Link text should be descriptive</li>



<li>Links must be distinguishable without relying on color</li>
</ul>



<p>I appreciate that the report sheds a light on what accessibility features are supported by specific email clients, such as Gmail. The report outlines a set of 20 HTML, CSS, and ARIA features they look for and found that only one email client (SFR Mail?) of the 44 evaluated supports all of the features. Apple Mail and Samsung Email are apparently close behind, but the other 41? Not so much.</p>



<p>So, yeah. Email has a ways to go, like a small microcosm of the web itself.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/html-email-accessibility-report-2025/">HTML Email Accessibility Report 2025</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>


Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report:
This is the third full year for this report and we are disappointed to see the same issues as we have in previous years. The top 10 issues haven’t changed order since last year, apart from the addition of color contrast, which can be put down to a change in the testing and reporting.




The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility checks — and they were all written by the same author representing two different brands. And, further, that author represents one of the companies that not only sponsors the study, but develops the automated testing tool powering the analysis.
Automated testing is the key here. That’s needed for a project looking at hundreds of thousands of emails, but it won’t surface everything, as noted:
Email that pass our checks may still have accessibility issues that we cannot pick up through automated testing. For example, we check if an alt attribute is present on an image, but we do not check if the text is suitable for that image in the context of that message.
The most common issues relate to internationalization, like leaving out the lang (96% of emails) and dir (98% of emails) attributes. But you’ll be familiar with most of what rounds up the top 10, because it lines up with WebAIM’s findings:
Links must have discernible text
Element has insufficient color contrast
Images must have alternate text
Link text should be descriptive
Links must be distinguishable without relying on color
I appreciate that the report sheds a light on what accessibility features are supported by specific email clients, such as Gmail. The report outlines a set of 20 HTML, CSS, and ARIA features they look for and found that only one email client (SFR Mail?) of the 44 evaluated supports all of the features. Apple Mail and Samsung Email are apparently close behind, but the other 41? Not so much.
So, yeah. Email has a ways to go, like a small microcosm of the web itself.
HTML Email Accessibility Report 2025 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is …
HTML Email Accessibility Report 2025 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

HTML Email Accessibility Report 2025

<p>Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items in a CSS carousel?</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/scroll-driven-animations-inside-a-css-carousel/">Scroll-Driven Animations Inside a CSS Carousel</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>I was reflecting on what I learned about <a href="https://css-tricks.com/css-carousels/">CSS Carousels</a> recently. There&#8217;s a lot they can do right out of the box (and some things <a href="https://www.sarasoueidan.com/blog/css-carousels-accessibility/" rel="noopener">they don&#8217;t</a>) once you define a scroll container and hide the overflow.</p>



<p>Hey, isn&#8217;t there another fairly new CSS feature that works with scroll regions? Oh yes, that&#8217;s <a href="https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/">Scroll-Driven Animations</a>. Shouldn&#8217;t that mean we can trigger an animation while scrolling through the items in a CSS carousel?</p>



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



<p>Why yes, that&#8217;s exactly what it means. At least in Chrome at the time I&#8217;m playing with this:</p>



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



<p>It&#8217;s as straightforward as you might expect: define your keyframes and apply them on the carousel items:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@keyframes foo {
  from {
    height: 0;
  }
  to {
    height: 100%;
    font-size: calc(2vw + 1em);
  }
}

.carousel li {
  animation: foo linear both;
  animation-timeline: scroll(inline);
}</code></pre>



<p>There are more clever ways to animate these things of course. But what&#8217;s interesting to me is that this demo now combines CSS Carousels <em>with</em> Scroll-Driven Animations. The only rub is that the demo also slaps <a href="https://css-tricks.com/almanac/properties/s/scroll-snap-type/">CSS Scroll Snapping</a> in there with smooth scrolling, which is effectively wiped out when applying the scroll animation.</p>



<p>I thought I might work around that with a <code>view()</code> timeline instead. That certainly makes for a smoother animation that is applied to each carousel item as they scroll into view, but no dice on smooth scrolling.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_raarBPV" src="//codepen.io/anon/embed/preview/raarBPV?height=750&amp;theme-id=1&amp;slug-hash=raarBPV&amp;default-tab=result" height="750" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed raarBPV" title="CodePen Embed raarBPV" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/scroll-driven-animations-inside-a-css-carousel/">Scroll-Driven Animations Inside a CSS Carousel</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 was reflecting on what I learned about CSS Carousels recently. There’s a lot they can do right out of the box (and some things they don’t) once you define a scroll container and hide the overflow.
Hey, isn’t there another fairly new CSS feature that works with scroll regions? Oh yes, that’s Scroll-Driven Animations. Shouldn’t that mean we can trigger an animation while scrolling through the items in a CSS carousel?




Why yes, that’s exactly what it means. At least in Chrome at the time I’m playing with this:
CodePen Embed Fallback
It’s as straightforward as you might expect: define your keyframes and apply them on the carousel items:
@keyframes foo {
  from {
    height: 0;
  }
  to {
    height: 100%;
    font-size: calc(2vw + 1em);
  }
}

.carousel li {
  animation: foo linear both;
  animation-timeline: scroll(inline);
}
There are more clever ways to animate these things of course. But what’s interesting to me is that this demo now combines CSS Carousels with Scroll-Driven Animations. The only rub is that the demo also slaps CSS Scroll Snapping in there with smooth scrolling, which is effectively wiped out when applying the scroll animation.
I thought I might work around that with a view() timeline instead. That certainly makes for a smoother animation that is applied to each carousel item as they scroll into view, but no dice on smooth scrolling.
CodePen Embed Fallback
Scroll-Driven Animations Inside a CSS Carousel originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items in a CSS carousel?
Scroll-Driven Animations Inside a CSS Carousel originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Scroll-Driven Animations Inside a CSS Carousel

<p>What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/this-isnt-supposed-to-happen-troubleshooting-the-impossible/">This Isn’t Supposed to Happen: Troubleshooting the Impossible</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>I recently rebuilt my portfolio (<a href="http://johnrhea.com" rel="noopener">johnrhea.com</a>). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all…</p>



<p>The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox, but if the same code is on two different servers it should work the same in Chrome (or Firefox) no matter which server you look at, right? <em>Right?</em></p>



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



<p>First, the dynamically generated stars wouldn’t appear and when you tried to play the game mode, it was just blank. No really terrible website enemies appeared, nor could they shoot any bad experience missiles at you, at least, not in the game mode, but I guess my buggy website literally sent a bad experience missile at you. Over on the page showing my work, little cars were supposed to zoom down the street, but they didn’t show up, either.</p>



<figure class="wp-block-video"><video controls src="https://css-tricks.com/wp-content/uploads/2025/05/cars.mov" playsinline></video></figure>



<p>Let me tell you, there was no crying or tears of any kind. I was very strong and thrilled, just thrilled, to accept the challenge of figuring out what was going on. I frantically googled things like “What could cause JavaScript to act differently on two servers?”, “Why would a server change how JavaScript works?”, and “Why does everyone think I’m crying when I’m clearly not?” But to no avail.</p>



<p>There were some errors in the console, but not ones that made sense. I had an SVG element that we’ll call <code>car</code> (because that’s what I named it). I created it in vanilla JavaScript, added it to the page, and zoomed it down the gray strip approximating a street. (It’s a space theme where you can explore planets. It’s really cool. I swear.) I was setting transforms on <code>car</code> using <code>car.style.transform</code> and it was erroring out. <code>car.style</code> was undefined.</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" fetchpriority="high" decoding="async" width="993" height="211" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/error.png?resize=993%2C211&#038;ssl=1" alt="Uncaught TypeError: Cannot set properties of undefined." class="wp-image-386430" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/error.png?w=993&amp;ssl=1 993w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/error.png?resize=300%2C64&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/error.png?resize=768%2C163&amp;ssl=1 768w" sizes="(min-width: 735px) 864px, 96vw" /></figure>



<p>I went back to my code on my laptop. Executes flawlessly. No errors.</p>



<p>To get past the initial error, I switched it from&nbsp;<code>car.style</code> to using <code>setAttribute</code> e.g. <code>car.setAttribute('style', 'transform: translate(100px, 200px)');</code>. This just got me to the next error. <code>car</code> was erroring out on some <code>data-*</code> attributes I was using to hold information about the <code>car</code>, e.g. <code>car.dataset.xspeed</code> would also come back undefined when I tried to access them. This latter technology has been supported in SVG elements since 2015, yet it was not working on the server, and worked fine locally. What the Hoobastank could be happening? (Yes, I’m referencing the 1990s band and, no, they have nothing to do with the issue. I just like saying… errr… writing… their name.)</p>



<p>With search engines not being much help (mostly because the problem isn’t supposed to exist), I contacted my host thinking maybe some kind of server configuration was the issue. The very polite tech tried to help, checking for server errors and other simple misconfigurations, but there were no issues he could find. After reluctantly serving as my coding therapist and listening to my (tearless) bemoaning of ever starting a career in web development, he basically said they support JavaScript, but can’t really go into custom code, so best of luck. Well, thanks for nothing, person whom I will call Truckson! (That’s not his real name, but I thought “Carson” was too on the nose.)</p>



<p>Next, and still without tears, I tried to explain my troubles to ChatGPT with the initial prompt: “Why would JavaScript on two different web servers act differently?” It was actually kind of helpful with a bunch of answers that turned out to be very wrong.</p>



<ul class="wp-block-list">
<li>Maybe there was an inline SVG vs SVG in an <code>img</code> issue? That wasn’t it.</li>



<li>Could the browser be interpreting the page as plain text instead of HTML through some misconfiguration? Nope, it was pulling down HTML, and the headers were correct.</li>



<li>Maybe the browser is in quirks mode? It wasn’t.</li>



<li>Could the SVG element be created incorrectly? You can’t create an SVG element in HTML using <code>document.createElement('svg')</code> because SVG actually has a different namespace. Instead, you have to use <code>document.createElementNS("http://www.w3.org/2000/svg", 'svg');</code> because SVG and HTML use similar, but very different, standards. Nope, I’d used the <code>createElementNS</code> function and the correct namespace.</li>
</ul>



<p class="is-style-explanation"><strong>Sidenote:</strong> At several points during the chat session, ChatGPT started replies with, “Ah, now we&#8217;re getting spicy &#x1f525;” as well as, “Ah, this is a juicy one. &#x1f347;” (emojis included). It also used the word “bulletproof” a few times in what felt like a tech-bro kind of way. Plus there was a “BOOM. &#x1f4a5; That’s the smoking gun right there”, as well as an “Ahhh okay, sounds like there&#8217;s still a small gremlin in the works.” I can’t decide whether I find this awesome, annoying, horrible, or scary. Maybe all four?</p>



<p>Next, desperate, I gave our current/future robot overlord some of my code to give it context and show it that none of these were the issue. It still harped on the misconfiguration and kept having me output things to check if the car element was an SVG element. Again, locally it was an SVG element, but on the server it came back that it wasn’t.</p>



<ul class="wp-block-list">
<li>Maybe using <code>innerHTML</code> to add some SVG elements to the car element garbled the <code>car</code> element into not being an SVG element? ChatGPT volunteered to rewrite a portion of code to fix this. I put the new code into my system. It worked locally! Then I uploaded it to the server and… no dice. Same error was still happening.</li>
</ul>



<p>I wept openly. I mean… I swallowed my emotions in a totally healthy and very manly way. And that’s the end of the article, no redemption, no solution, no answer. Just a broken website and the loud sobs of a man who doesn’t cry… ever…</p>



<p>…You still here?</p>



<p>Okay, you’re right. You know I wouldn’t leave you hanging like that. After the non-existent sob session, I complained to ChatGPT, it again gave me some console logs including having the <code>car</code> element print out its namespace and that’s when the answer came to me. You see the namespace for an SVG is this:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">http://www.w3.org/2000/svg</code></pre>



<p>What it actually printed was this:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">https://www.w3.org/2000/svg</code></pre>



<p>One letter. That’s the difference.</p>



<p>Normally you want everything to be secure, but that’s not really how namespaces work. And while the differences between these two strings is minimal, I might as well have written <code>document.createElementNS("Gimme-them-SVGzers", "svg");</code>. <em>Hey, W3C, can I be on the namespace committee?</em></p>



<p>But why was it different? You’d be really mad if you read this far and it was just a typo in my code. Right?</p>



<p>You’ve invested some time into this article, and I already did the fake-out of having no answer. So, having a code typo would probably lead to riots in the streets and hoards of bad reviews.</p>



<p>Don’t worry. The namespace was correct in my code, so where was that errant “s” coming from?</p>



<p>I remembered turning on a feature in my host’s optimization plugin: automatically fix insecure pages. It goes through and changes insecure links to secure ones. In 99% of cases, it’s the right choice. But apparently it also changes namespace URLs in JavaScript code.</p>



<p>I turned that feature off and suddenly I was traversing the galaxy, exploring planets with cars zooming down gray pseudo-elements, and firing lasers at really terrible websites instead of having a really terrible website. There were no tears (joyful or otherwise) nor were there celebratory and wildly embarrassing dance moves that followed.</p>



<p>Have a similar crazy troubleshooting issue? Have you solved an impossible problem? Let me know in the comments.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/this-isnt-supposed-to-happen-troubleshooting-the-impossible/">This Isn’t Supposed to Happen: Troubleshooting the Impossible</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 recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all…
The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox, but if the same code is on two different servers it should work the same in Chrome (or Firefox) no matter which server you look at, right? Right?




First, the dynamically generated stars wouldn’t appear and when you tried to play the game mode, it was just blank. No really terrible website enemies appeared, nor could they shoot any bad experience missiles at you, at least, not in the game mode, but I guess my buggy website literally sent a bad experience missile at you. Over on the page showing my work, little cars were supposed to zoom down the street, but they didn’t show up, either.




Let me tell you, there was no crying or tears of any kind. I was very strong and thrilled, just thrilled, to accept the challenge of figuring out what was going on. I frantically googled things like “What could cause JavaScript to act differently on two servers?”, “Why would a server change how JavaScript works?”, and “Why does everyone think I’m crying when I’m clearly not?” But to no avail.
There were some errors in the console, but not ones that made sense. I had an SVG element that we’ll call car (because that’s what I named it). I created it in vanilla JavaScript, added it to the page, and zoomed it down the gray strip approximating a street. (It’s a space theme where you can explore planets. It’s really cool. I swear.) I was setting transforms on car using car.style.transform and it was erroring out. car.style was undefined.




I went back to my code on my laptop. Executes flawlessly. No errors.
To get past the initial error, I switched it from car.style to using setAttribute e.g. car.setAttribute('style', 'transform: translate(100px, 200px)');. This just got me to the next error. car was erroring out on some data-* attributes I was using to hold information about the car, e.g. car.dataset.xspeed would also come back undefined when I tried to access them. This latter technology has been supported in SVG elements since 2015, yet it was not working on the server, and worked fine locally. What the Hoobastank could be happening? (Yes, I’m referencing the 1990s band and, no, they have nothing to do with the issue. I just like saying… errr… writing… their name.)
With search engines not being much help (mostly because the problem isn’t supposed to exist), I contacted my host thinking maybe some kind of server configuration was the issue. The very polite tech tried to help, checking for server errors and other simple misconfigurations, but there were no issues he could find. After reluctantly serving as my coding therapist and listening to my (tearless) bemoaning of ever starting a career in web development, he basically said they support JavaScript, but can’t really go into custom code, so best of luck. Well, thanks for nothing, person whom I will call Truckson! (That’s not his real name, but I thought “Carson” was too on the nose.)
Next, and still without tears, I tried to explain my troubles to ChatGPT with the initial prompt: “Why would JavaScript on two different web servers act differently?” It was actually kind of helpful with a bunch of answers that turned out to be very wrong.
Maybe there was an inline SVG vs SVG in an img issue? That wasn’t it.
Could the browser be interpreting the page as plain text instead of HTML through some misconfiguration? Nope, it was pulling down HTML, and the headers were correct.
Maybe the browser is in quirks mode? It wasn’t.
Could the SVG element be created incorrectly? You can’t create an SVG element in HTML using document.createElement('svg') because SVG actually has a different namespace. Instead, you have to use document.createElementNS("http://www.w3.org/2000/svg", 'svg'); because SVG and HTML use similar, but very different, standards. Nope, I’d used the createElementNS function and the correct namespace.
Sidenote: At several points during the chat session, ChatGPT started replies with, “Ah, now we’re getting spicy 🔥” as well as, “Ah, this is a juicy one. 🍇” (emojis included). It also used the word “bulletproof” a few times in what felt like a tech-bro kind of way. Plus there was a “BOOM. 💥 That’s the smoking gun right there”, as well as an “Ahhh okay, sounds like there’s still a small gremlin in the works.” I can’t decide whether I find this awesome, annoying, horrible, or scary. Maybe all four?
Next, desperate, I gave our current/future robot overlord some of my code to give it context and show it that none of these were the issue. It still harped on the misconfiguration and kept having me output things to check if the car element was an SVG element. Again, locally it was an SVG element, but on the server it came back that it wasn’t.
Maybe using innerHTML to add some SVG elements to the car element garbled the car element into not being an SVG element? ChatGPT volunteered to rewrite a portion of code to fix this. I put the new code into my system. It worked locally! Then I uploaded it to the server and… no dice. Same error was still happening.
I wept openly. I mean… I swallowed my emotions in a totally healthy and very manly way. And that’s the end of the article, no redemption, no solution, no answer. Just a broken website and the loud sobs of a man who doesn’t cry… ever…
…You still here?
Okay, you’re right. You know I wouldn’t leave you hanging like that. After the non-existent sob session, I complained to ChatGPT, it again gave me some console logs including having the car element print out its namespace and that’s when the answer came to me. You see the namespace for an SVG is this:
http://www.w3.org/2000/svg
What it actually printed was this:
https://www.w3.org/2000/svg
One letter. That’s the difference.
Normally you want everything to be secure, but that’s not really how namespaces work. And while the differences between these two strings is minimal, I might as well have written document.createElementNS("Gimme-them-SVGzers", "svg");. Hey, W3C, can I be on the namespace committee?
But why was it different? You’d be really mad if you read this far and it was just a typo in my code. Right?
You’ve invested some time into this article, and I already did the fake-out of having no answer. So, having a code typo would probably lead to riots in the streets and hoards of bad reviews.
Don’t worry. The namespace was correct in my code, so where was that errant “s” coming from?
I remembered turning on a feature in my host’s optimization plugin: automatically fix insecure pages. It goes through and changes insecure links to secure ones. In 99% of cases, it’s the right choice. But apparently it also changes namespace URLs in JavaScript code.
I turned that feature off and suddenly I was traversing the galaxy, exploring planets with cars zooming down gray pseudo-elements, and firing lasers at really terrible websites instead of having a really terrible website. There were no tears (joyful or otherwise) nor were there celebratory and wildly embarrassing dance moves that followed.
Have a similar crazy troubleshooting issue? Have you solved an impossible problem? Let me know in the comments.
This Isn’t Supposed to Happen: Troubleshooting the Impossible originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.
This Isn’t Supposed to Happen: Troubleshooting the Impossible originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

This Isn’t Supposed to Happen: Troubleshooting the Impossible

<p>I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole 'nother thing to manage.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/using-pages-cms-for-static-site-content-management/">Using Pages CMS for Static Site Content Management</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>


Friends, I’ve been on the hunt for a decent content management system for static sites for… well, about as long as we’ve all been calling them “static sites,” honestly.
I know, I know: there are a ton of content management system options available, and while I’ve tested several, none have really been the one, y’know? Weird pricing models, difficult customization, some even end up becoming a whole ‘nother thing to manage.
Also, I really enjoy building with site generators such as Astro or Eleventy, but pitching Markdown as the means of managing content is less-than-ideal for many “non-techie” folks.
A few expectations for content management systems might include:
Easy to use: The most important feature, why you might opt to use a content management system in the first place.
Minimal Requirements: Look, I’m just trying to update some HTML, I don’t want to think too much about database tables.
Collaboration: CMS tools work best when multiple contributors work together, contributors who probably don’t know Markdown or what GitHub is.
Customizable: No website is the same, so we’ll need to be able to make custom fields for different types of content.
Not a terribly long list of demands, I’d say; fairly reasonable, even. That’s why I was happy to discover Pages CMS.




According to its own home page, Pages CMS is the “The No-Hassle CMS for Static Site Generators,” and I’ll to attest to that. Pages CMS has largely been developed by a single developer, Ronan Berder, but is open source, and accepting pull requests over on GitHub.
Taking a lot of the “good parts” found in other CMS tools, and a single configuration file, Pages CMS combines things into a sleek user interface.
Pages CMS includes lots of options for customization, you can upload media, make editable files, and create entire collections of content. Also, content can have all sorts of different fields, check the docs for the full list of supported types, as well as completely custom fields.
There isn’t really a “back end” to worry about, as content is stored as flat files inside your git repository. Pages CMS provides folks the ability to manage the content within the repo, without needing to actually know how to use Git, and I think that’s neat.
User Authentication works two ways: contributors can log in using GitHub accounts, or contributors can be invited by email, where they’ll receive a password-less, “magic-link,” login URL. This is nice, as GitHub accounts are less common outside of the dev world, shocking, I know.
Oh, and Pages CMS has a very cheap barrier for entry, as it’s free to use.
Pages CMS and Astro content collections
I’ve created a repository on GitHub with Astro and Pages CMS using Astro’s default blog starter, and made it available publicly, so feel free to clone and follow along.
I’ve been a fan of Astro for a while, and Pages CMS works well alongside Astro’s content collection feature. Content collections make globs of data easily available throughout Astro, so you can hydrate content inside Astro pages. These globs of data can be from different sources, such as third-party APIs, but commonly as directories of Markdown files. Guess what Pages CMS is really good at? Managing directories of Markdown files!
Content collections are set up by a collections configuration file. Check out the src/content.config.ts file in the project, here we are defining a content collection named blog:
import { glob } from 'astro/loaders';
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
// Load Markdown in the `src/content/blog/` directory.
loader: glob({ base: './src/content/blog', pattern: '**/*.md' }),
  // Type-check frontmatter using a schema
  schema: z.object({
    title: z.string(),
   description: z.string(),
    // Transform string to Date object
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    heroImage: z.string().optional(),
  }),
});

export const collections = { blog };
The blog content collection checks the /src/content/blog directory for files matching the **/*.md file type, the Markdown file format. The schema property is optional, however, Astro provides helpful type-checking functionality with Zod, ensuring data saved by Pages CMS works as expected in your Astro site.
Pages CMS Configuration
Alright, now that Astro knows where to look for blog content, let’s take a look at the Pages CMS configuration file, .pages.config.yml:
content:
  - name: blog
    label: Blog
    path: src/content/blog
    filename: '{year}-{month}-{day}-{fields.title}.md'
    type: collection
    view:
      fields: [heroImage, title, pubDate]
    fields:
      - name: title
        label: Title
        type: string

      - name: description
        label: Description
        type: text

      - name: pubDate
        label: Publication Date
        type: date
        options:
          format: MM/dd/yyyy

      - name: updatedDate
        label: Last Updated Date
        type: date
        options:
          format: MM/dd/yyyy

      - name: heroImage
        label: Hero Image
        type: image

      - name: body
        label: Body
        type: rich-text

  - name: site-settings
    label: Site Settings
    path: src/config/site.json
    type: file
    fields:
      - name: title
        label: Website title
        type: string

      - name: description
        label: Website description
        type: string
        description: Will be used for any page with no description.

      - name: url
        label: Website URL
        type: string
        pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$

      - name: cover
        label: Preview image
        type: image
        description: Image used in the social preview on social networks (e.g. Facebook, Twitter...)

media:
  input: public/media
  output: /media
There is a lot going on in there, but inside the content section, let’s zoom in on the blog object.
- name: blog
  label: Blog
  path: src/content/blog
  filename: '{year}-{month}-{day}-{fields.title}.md'
  type: collection
  view:
    fields: [heroImage, title, pubDate]
  fields:
    - name: title
      label: Title
      type: string

    - name: description
      label: Description
      type: text

    - name: pubDate
      label: Publication Date
      type: date
      options:
        format: MM/dd/yyyy

    - name: updatedDate
      label: Last Updated Date
      type: date
      options:
        format: MM/dd/yyyy

    - name: heroImage
      label: Hero Image
      type: image

    - name: body
      label: Body
      type: rich-text
We can point Pages CMS to the directory we want to save Markdown files using the path property, matching it up to the /src/content/blog/ location Astro looks for content.
path: src/content/blog
For the filename we can provide a pattern template to use when Pages CMS saves the file to the content collection directory. In this case, it’s using the file date’s year, month, and day, as well as the blog item’s title, by using fields.title to reference the title field. The filename can be customized in many different ways, to fit your scenario.
filename: '{year}-{month}-{day}-{fields.title}.md'
The type property tells Pages CMS that this is a collection of files, rather than a single editable file (we’ll get to that in a moment).
type: collection
In our Astro content collection configuration, we define our blog collection with the expectation that the files will contain a few bits of meta data such as: title, description, pubDate, and a few more properties.
We can mirror those requirements in our Pages CMS blog collection as fields. Each field can be customized for the type of data you’re looking to collect. Here, I’ve matched these fields up with the default Markdown frontmatter found in the Astro blog starter.
fields:
  - name: title
    label: Title
    type: string

  - name: description
    label: Description
    type: text

  - name: pubDate
    label: Publication Date
    type: date
    options:
      format: MM/dd/yyyy

  - name: updatedDate
    label: Last Updated Date
    type: date
    options:
      format: MM/dd/yyyy

  - name: heroImage
    label: Hero Image
    type: image

  - name: body
    label: Body
    type: rich-text
Now, every time we create a new blog item in Pages CMS, we’ll be able to fill out each of these fields, matching the expected schema for Astro.
Aside from collections of content, Pages CMS also lets you manage editable files, which is useful for a variety of things: site wide variables, feature flags, or even editable navigations.
Take a look at the site-settings object, here we are setting the type as file, and the path includes the filename site.json.
- name: site-settings
  label: Site Settings
  path: src/config/site.json
  type: file
  fields:
    - name: title
      label: Website title
      type: string

    - name: description
      label: Website description
      type: string
      description: Will be used for any page with no description.

    - name: url
      label: Website URL
      type: string
      pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$

    - name: cover
      label: Preview image
      type: image
      description: Image used in the social preview on social networks (e.g. Facebook, Twitter...)
The fields I’ve included are common site-wide settings, such as the site’s title, description, url, and cover image.
Speaking of images, we can tell Pages CMS where to store media such as images and video.
media:
  input: public/media
  output: /media
The input property explains where to store the files, in the /public/media directory within our project.
The output property is a helpful little feature that conveniently replaces the file path, specifically for tools that might require specific configuration. For example, Astro uses Vite under the hood, and Vite already knows about the public directory and complains if it’s included within file paths. Instead, we can set the output property so Pages CMS will only point image path locations starting at the inner /media directory instead.
To see what I mean, check out the test post in the src/content/blog/ folder:
---
title: 'Test Post'
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
pubDate: 05/03/2025
heroImage: '/media/blog-placeholder-1.jpg'
---
The heroImage now property properly points to /media/... instead of /public/media/....
As far as configurations are concerned, Pages CMS can be as simple or as complex as necessary. You can add as many collections or editable files as needed, as well as customize the fields for each type of content. This gives you a lot of flexibility to create sites!
Connecting to Pages CMS
Now that we have our Astro site set up, and a .pages.config.yml file, we can connect our site to the Pages CMS online app. As the developer who controls the repository, browse to https://app.pagescms.org/ and sign in using your GitHub account.
You should be presented with some questions about permissions, you may need to choose between giving access to all repositories or specific ones. Personally, I chose to only give access to a single repository, which in this case is my astro-pages-cms-template repo.




After providing access to the repo, head on back to the Pages CMS application, where you’ll see your project listed under the “Open a Project” headline.




Clicking the open link will take you into the website’s dashboard, where we’ll be able to make updates to our site.
Creating content
Taking a look at our site’s dashboard, we’ll see a navigation on the left side, with some familiar things.





Blog is the collection we set up inside the .pages.config.yml file, this will be where we we can add new entries to the blog.
Site Settings is the editable file we are using to make changes to site-wide variables.
Media is where our images and other content will live.
Settings is a spot where we’ll be able to edit our .pages.config.yml file directly.
Collaborators allows us to invite other folks to contribute content to the site.
We can create a new blog post by clicking the Add Entry button in the top right




Here we can fill out all the fields for our blog content, then hit the Save button.
After saving, Pages CMS will create the Markdown file, store the file in the proper directory, and automatically commit the changes to our repository. This is how Pages CMS helps us manage our content without needing to use git directly.
Automatically deploying
The only thing left to do is set up automated deployments through the service provider of your choice. Astro has integrations with providers like Netlify, Cloudflare Pages, and Vercel, but can be hosted anywhere you can run node applications.
Astro is typically very fast to build (thanks to Vite), so while site updates won’t be instant, they will still be fairly quick to deploy. If your site is set up to use Astro’s server-side rendering capabilities, rather than a completely static site, the changes might be much faster to deploy.
Wrapping up
Using a template as reference, we checked out how Astro content collections work alongside Pages CMS. We also learned how to connect our project repository to the Pages CMS app, and how to make content updates through the dashboard. Finally, if you are able, don’t forget to set up an automated deployment, so content publishes quickly.
Using Pages CMS for Static Site Content Management originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole 'nother thing to manage.
Using Pages CMS for Static Site Content Management originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Using Pages CMS for Static Site Content Management

<p>What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/orbital-mechanics-or-how-i-optimized-a-css-keyframes-animation/">Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)</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>I recently updated my portfolio at <a href="https://johnrhea.com" rel="noopener">johnrhea.com</a>. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet.</p>



<p>Initially, I just plopped the animations into the new site, only changing the units (<code>em</code> units to viewport units using some complicated math that I was very, very proud of) so that they would scale properly because I’m… <em>efficient</em> with my time. However, on mobile, the planet would move up a few pixels and down a few pixels as the moons orbited around it. I suspected the plopped-in animation was the culprit (it wasn’t, but at least I got some optimized animation and an article out of the deal).</p>



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



<p>Here’s the original animation:</p>



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



<p>My initial animation for the moon ran for 60 seconds. I’m folding it inside a disclosure widget because, at 141 lines, it’s stupid long (and, as we’ll see, emphasis on the <em>stupid</em>). Here it is in all its “glory”:</p>



<details >
  <summary>
          Open code      </summary>
  

<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 60s infinite;
}

@keyframes moon-one {
  0% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  9.9% {
    z-index: 2;
  }
  10% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  15% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  19.9% {
    z-index: -1;
  }
  20% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  29.9% {
    z-index: 2;
  }
  30% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  35% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  39.9% {
    z-index: -1;
  }
  40% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  45% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  55% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  59.9% {
    z-index: -1;
  }
  60% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  65% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  69.9% {
    z-index: 2;
  }
  70% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  79.9% {
    z-index: -1;
  }
  80% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  85% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  89.9% {
    z-index: 2;
  }
  90% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  95% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
}</code></pre>


</details>


<p>If you look at the keyframes in that code, you’ll notice that the <code>0%</code> to <code>20%</code> keyframes are exactly the same as <code>20%</code> to <code>40%</code> and so on up through <code>100%</code>. Why I decided to repeat the keyframes five times infinitely instead of just repeating one set infinitely is a decision lost to antiquity, like six years ago in web time. We can also drop the duration to 12 seconds (one-fifth of sixty) if we were doing our due diligence.</p>



<p>I could thus delete everything from <code>20%</code> on, instantly dropping the code down to 36 lines. And yes, I realize gains like this are unlikely to be possible on most sites, but this is the first step for optimizing things.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  9.9% {
    z-index: 2;
  }
  10% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  15% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  19.9% {
    z-index: -1;
  }
  20% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
}</code></pre>



<p>Now that we’ve gotten rid of 80% of the overwhelming bits, we can see that there are five main keyframes and two additional ones that set the <code>z-index</code> close to the middle and end of the animation (these prevent the moon from dropping behind the planet or popping out from behind the planet too early). We can change these five points from <code>0%</code>, <code>5%</code>, <code>10%</code>, <code>15%</code>, and <code>20%</code> to <code>0%</code>, <code>25%</code>, <code>50%</code>, <code>75%</code>, and <code>100%</code> (and since the <code>0%</code> and the former <code>20%</code> are the same, we can remove that one, too). Also, since the <code>10%</code> keyframe above is switching to <code>50%</code>, the <code>9.9%</code> keyframe can move to <code>49.9%</code>, and the <code>19.9%</code> keyframe can switch to <code>99.9%</code>, giving us this:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}</code></pre>



<p>Though I was very proud of myself for my math wrangling, numbers like <code>-3.51217391vw</code> are really, really unnecessary. If a screen was one thousand pixels wide, <code>-3.51217391vw</code> would be <code>35.1217391</code> pixels. No one ever needs to go down to the precision of a ten-millionth of a pixel. So, let&#8217;s round everything to the tenth place (and if it’s a <code>0</code>, we’ll just drop it). We can also skip <code>z-index</code> in the <code>75%</code> and <code>25%</code> keyframes since it doesn’t change.</p>



<p>Here’s where that gets us in the code:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.5vw, 3.5vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5vw, 6.5vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1vw, 2.5vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}</code></pre>



<p>After all our changes, the animation still looks pretty close to what it was before, only way less code:</p>



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



<p>One of the things I don’t like about this animation is that the moon kind of turns at its zenith when it crosses the planet. It would be much better if it traveled in a straight line from the upper right to the lower left. However, we also need it to get a little larger, as if the moon is coming closer to us in its orbit. Because both translation and scaling were done in the <code>transform</code> property, I can’t translate and scale the moon independently.</p>



<p>If we skip either one in the <code>transform</code> property, it resets the one we skipped, so I’m forced to guess where the mid-point should be so that I can set the scale I need. One way I’ve solved this in the past is to add a wrapping element, then apply <code>scale</code> to one element and <code>translate</code> to the other. However, now that we have individual <code>scale</code> and <code>translate</code> properties, a better way is to separate them from the <code>transform</code> property and use them as separate properties. Separating out the translation and scaling shouldn&#8217;t change anything, unless the original order they were declared on the <code>transform</code> property was different than the order of the singular properties.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    translate: -3.5vw 3.5vw;
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    translate: 1vw 2.5vw;
    scale: 0.25;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}</code></pre>



<p>Now that we can separate the <code>scale</code> and <code>translate</code> properties and use them independently, we can drop the <code>translate</code> property in the <code>25%</code> and <code>75%</code> keyframes because we don’t want them placed precisely in that keyframe. We want the browser’s interpolation to take care of that for us so that it translates smoothly while scaling.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    scale: 1.5;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    scale: 0.25;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}</code></pre>



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



<p>Lastly, those different timing functions don’t make a lot of sense anymore because we’ve got the browser working for us, and if we use an <code>ease-in-out</code> timing function on everything, then it should do exactly what we want.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">#moon1 {
  animation: moon-one 12s infinite ease-in-out;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
  }
  25% {
    scale: 1.5;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
  }
  75% {
    scale: 0.25;
  }
  99.9% {
    z-index: -1;
  }
}</code></pre>



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



<p>And there you go: 141 lines down to 28, and I think the animation looks even better than before. It will certainly be easier to maintain, that’s for sure.</p>



<p>But what do you think? Was there an optimization step I missed? Let me know in the comments.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/orbital-mechanics-or-how-i-optimized-a-css-keyframes-animation/">Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)</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 recently updated my portfolio at johnrhea.com. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet.
Initially, I just plopped the animations into the new site, only changing the units (em units to viewport units using some complicated math that I was very, very proud of) so that they would scale properly because I’m… efficient with my time. However, on mobile, the planet would move up a few pixels and down a few pixels as the moons orbited around it. I suspected the plopped-in animation was the culprit (it wasn’t, but at least I got some optimized animation and an article out of the deal).




Here’s the original animation:
CodePen Embed Fallback
My initial animation for the moon ran for 60 seconds. I’m folding it inside a disclosure widget because, at 141 lines, it’s stupid long (and, as we’ll see, emphasis on the stupid). Here it is in all its “glory”:
#moon1 {
  animation: moon-one 60s infinite;
}

@keyframes moon-one {
  0% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  9.9% {
    z-index: 2;
  }
  10% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  15% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  19.9% {
    z-index: -1;
  }
  20% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  29.9% {
    z-index: 2;
  }
  30% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  35% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  39.9% {
    z-index: -1;
  }
  40% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  45% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  55% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  59.9% {
    z-index: -1;
  }
  60% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  65% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  69.9% {
    z-index: 2;
  }
  70% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  79.9% {
    z-index: -1;
  }
  80% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  85% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  89.9% {
    z-index: 2;
  }
  90% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  95% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
}
If you look at the keyframes in that code, you’ll notice that the 0% to 20% keyframes are exactly the same as 20% to 40% and so on up through 100%. Why I decided to repeat the keyframes five times infinitely instead of just repeating one set infinitely is a decision lost to antiquity, like six years ago in web time. We can also drop the duration to 12 seconds (one-fifth of sixty) if we were doing our due diligence.
I could thus delete everything from 20% on, instantly dropping the code down to 36 lines. And yes, I realize gains like this are unlikely to be possible on most sites, but this is the first step for optimizing things.
#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  9.9% {
    z-index: 2;
  }
  10% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  15% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  19.9% {
    z-index: -1;
  }
  20% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
}
Now that we’ve gotten rid of 80% of the overwhelming bits, we can see that there are five main keyframes and two additional ones that set the z-index close to the middle and end of the animation (these prevent the moon from dropping behind the planet or popping out from behind the planet too early). We can change these five points from 0%, 5%, 10%, 15%, and 20% to 0%, 25%, 50%, 75%, and 100% (and since the 0% and the former 20% are the same, we can remove that one, too). Also, since the 10% keyframe above is switching to 50%, the 9.9% keyframe can move to 49.9%, and the 19.9% keyframe can switch to 99.9%, giving us this:
#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5.01043478vw, 6.511304348vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1.003478261vw, 2.50608696vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}
Though I was very proud of myself for my math wrangling, numbers like -3.51217391vw are really, really unnecessary. If a screen was one thousand pixels wide, -3.51217391vw would be 35.1217391 pixels. No one ever needs to go down to the precision of a ten-millionth of a pixel. So, let’s round everything to the tenth place (and if it’s a 0, we’ll just drop it). We can also skip z-index in the 75% and 25% keyframes since it doesn’t change.
Here’s where that gets us in the code:
#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    transform: translate(-3.5vw, 3.5vw) scale(1.5);
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    transform: translate(-5vw, 6.5vw) scale(1);
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    transform: translate(1vw, 2.5vw) scale(0.25);
    z-index: -1;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}
After all our changes, the animation still looks pretty close to what it was before, only way less code:
CodePen Embed Fallback
One of the things I don’t like about this animation is that the moon kind of turns at its zenith when it crosses the planet. It would be much better if it traveled in a straight line from the upper right to the lower left. However, we also need it to get a little larger, as if the moon is coming closer to us in its orbit. Because both translation and scaling were done in the transform property, I can’t translate and scale the moon independently.
If we skip either one in the transform property, it resets the one we skipped, so I’m forced to guess where the mid-point should be so that I can set the scale I need. One way I’ve solved this in the past is to add a wrapping element, then apply scale to one element and translate to the other. However, now that we have individual scale and translate properties, a better way is to separate them from the transform property and use them as separate properties. Separating out the translation and scaling shouldn’t change anything, unless the original order they were declared on the transform property was different than the order of the singular properties.
#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    translate: -3.5vw 3.5vw;
    z-index: 2;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    translate: 1vw 2.5vw;
    scale: 0.25;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}
Now that we can separate the scale and translate properties and use them independently, we can drop the translate property in the 25% and 75% keyframes because we don’t want them placed precisely in that keyframe. We want the browser’s interpolation to take care of that for us so that it translates smoothly while scaling.
#moon1 {
  animation: moon-one 12s infinite;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
    animation-timing-function: ease-in;
  }
  25% {
    scale: 1.5;
    animation-timing-function: ease-out;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
    animation-timing-function: ease-in;
  }
  75% {
    scale: 0.25;
    animation-timing-function: ease-out;
  }
  99.9% {
    z-index: -1;
  }
}
CodePen Embed Fallback
Lastly, those different timing functions don’t make a lot of sense anymore because we’ve got the browser working for us, and if we use an ease-in-out timing function on everything, then it should do exactly what we want.
#moon1 {
  animation: moon-one 12s infinite ease-in-out;
}

@keyframes moon-one {
  0%, 100% {
    translate: 0 0;
    scale: 1;
    z-index: 2;
  }
  25% {
    scale: 1.5;
  }
  49.9% {
    z-index: 2;
  }
  50% {
    translate: -5vw 6.5vw;
    scale: 1;
    z-index: -1;
  }
  75% {
    scale: 0.25;
  }
  99.9% {
    z-index: -1;
  }
}
CodePen Embed Fallback
And there you go: 141 lines down to 28, and I think the animation looks even better than before. It will certainly be easier to maintain, that’s for sure.
But what do you think? Was there an optimization step I missed? Let me know in the comments.
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

<p>Okay, nobody is an exaggeration, but have you seen the stats for <code>hwb()</code>? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering why that is.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/why-is-nobody-using-the-hwb-color-function/">Why is Nobody Using the hwb() Color Function?</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>Okay,&nbsp;<em>nobody</em>&nbsp;is an exaggeration, but have you seen the stats for&nbsp;<code>hwb()</code>? They show a steep decline, and after working&nbsp;<em>a lot</em>&nbsp;on color in the <a href="https://css-tricks.com/almanac/">CSS-Tricks almanac</a>, I’ve just been wondering why that is.</p>



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



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1960" height="1196" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?resize=1960%2C1196&#038;ssl=1" alt="Chrome Platform Status for hwb(), showing a steep decline in usage from 0.4 percent of all page loads in 2024 to less than .2 perfect in 2025." class="wp-image-386469" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?w=1960&amp;ssl=1 1960w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?resize=300%2C183&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?resize=1024%2C625&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?resize=768%2C469&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-10.43.24%E2%80%AFAM.png?resize=1536%2C937&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p><code>hwb()</code>&nbsp;is a color function in the sRGB color space, which is the same color space used by&nbsp;<a href="https://css-tricks.com/almanac/functions/r/rgb"><code>rgb()</code></a>,&nbsp;<a href="https://css-tricks.com/almanac/functions/h/hsl/"><code>hsl()</code></a>&nbsp;and the older hexadecimal color format (e.g. <code>#f8a100</code>). <code>hwb()</code> is supposed to be more intuitive and easier to work with than&nbsp;<code>hsl()</code>. I kinda get why it&#8217;s considered &#8220;easier&#8221; since you specify how much black or white you want to add to a given color. But, how is&nbsp;<code>hwb()</code>&nbsp;more <em>intuitive</em> than&nbsp;<code>hsl()</code>?</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p><code>hwb()</code>&nbsp;accepts three values, and similar to&nbsp;<code>hsl()</code>, the first value specifies the color&#8217;s hue (between&nbsp;<code>0deg</code>&#8211;<code>360deg</code>), while the second and third values add whiteness (<code>0</code>&nbsp;&#8211;&nbsp;<code>100</code>) and blackness (<code>0</code>&nbsp;&#8211;&nbsp;<code>100</code>) to the mix, respectively.</p>
</blockquote>



<p>According to Google, the term “intuitive” means “<em>what one feels to be true even without conscious reasoning; instinctive</em>.” As such, it does truly seem that&nbsp;<code>hwb()</code>&nbsp;is more&nbsp;intuitive&nbsp;than&nbsp;<code>hsl()</code>, but it’s only a slight notable difference that makes that true.</p>



<p>Let’s consider an example with a color. We&#8217;ll declare <em>light orange</em>&nbsp;in both&nbsp;<code>hsl()</code>&nbsp;and&nbsp;<code>hwb()</code>:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* light orange in hsl */
.element-1 {
  color: hsl(30deg 100% 75%);
}

/* light orange in hwb() */
.element-2 {
  color: hwb(30deg 50% 0%);
}</code></pre>



<p>These two functions produce the exact same color, but while <code>hwb()</code> handles ligthness with two arguments, <code>hsl()</code> does it with just one, leaving one argument for the saturation. By comparison, <code>hwb()</code> provides no clear intuitive way to set just the saturation. I&#8217;d argue that makes the <code>hwb()</code> function less intuitive than <code>hsl()</code>.</p>



<p>I think another reason that <code>hsl()</code> is generally more intuitive than <code>hwb()</code> is that&nbsp;<a href="https://en.wikipedia.org/wiki/HSL_and_HSV" rel="noopener">HSL as a color model was created in the 1970s</a>&nbsp;while&nbsp;<a href="https://en.wikipedia.org/wiki/HWB_color_model#:~:text=It%20was%20developed%20by%20HSV%E2%80%99s%20creator%20Alvy%20Ray%20Smith%20in%201996" rel="noopener">HWB as a color model was created in 1996</a>.&nbsp;We&#8217;ve had much more time to get acquainted with <code>hsl()</code> than we have <code>hwb()</code>. <code>hsl()</code>&nbsp;was implemented by browsers&nbsp;<a href="https://caniuse.com/?search=hsl" rel="noopener">as far back as 2008</a>, Safari being the first and other browsers following suit. Meanwhile,&nbsp;<code>hwb()</code>&nbsp;<a href="https://caniuse.com/?search=hwb" rel="noopener">gained support as recently</a> <a href="https://caniuse.com/?search=hwb" rel="noopener">as 2021</a>! That’s more than a 10-year gap between functions when it comes to using them and being familiar with them.</p>



<p>There&#8217;s also the fact that other color functions that are used to represent colors in other color spaces — such as <a href="https://css-tricks.com/almanac/functions/l/lab/"><code>lab()</code></a>,&nbsp;<a href="https://css-tricks.com/almanac/functions/l/lch/"><code>lch()</code></a>,&nbsp;<a href="https://css-tricks.com/almanac/functions/o/oklab/"><code>oklab()</code></a>, and&nbsp;<code><a href="https://css-tricks.com/almanac/functions/o/oklch/">oklch()</a></code> — offer more advantages, such as access to more colors in the color gamut and perceptual uniformity. So, maybe being&nbsp;<em>intuitive</em> is coming at the expense of having a more robust feature set, which could explain why you might go with a less intuitive function that doesn&#8217;t use sRGB.</p>



<p>Look, I can get around the idea of controlling how white or black you want a color to look based on personal preferences, and for designers, it’s maybe easier to mix colors that way. But I&nbsp;<em>honestly</em>&nbsp;would not opt for this as my go-to color function in the sRGB color space because&nbsp;<code>hsl()</code>&nbsp;does something similar using the same hue, but with saturation and lightness as the parameters which is far more intuitive than what <code>hwb()</code> offers.</p>



<p>I see our web friend, Stefan Judis, preferring&nbsp;<code>hsl()</code>&nbsp;over&nbsp;<code>hwb()</code><a href="https://www.stefanjudis.com/blog/hwb-a-color-notation-for-humans/" rel="noopener"> in his article on&nbsp;<code>hwb()</code></a>.</p>



<p><a href="https://github.com/w3c/csswg-drafts/issues/6940#issue-1099121498" rel="noopener">Lea Verou even brought up the idea of removing <code>hwb()</code></a> from the spec&nbsp;in 2022, but&nbsp;<a href="https://github.com/w3c/csswg-drafts/issues/6940#issuecomment-1028283127" rel="noopener">a decision was made to leave it as it was</a> since browsers were already implementing the function. And although,I was initially pained by the idea of keeping <code>hwb()</code> around, I also quite understand the feeling of working on something, and then seeing it thrown in the bin. Once we&#8217;ve introduced something, it&#8217;s always tough to walk it back, especially when it comes to maintaining backwards compatibility, which is a core tenet of the web.</p>



<p>I would like to say something though:&nbsp;<code>lab()</code>,&nbsp;<code>lch()</code>,&nbsp;<code>oklab()</code>,&nbsp;<code>oklch()</code>&nbsp;are already here and are better color functions than <code>hwb()</code>. I, for one, would encourage using them over <code>hwb()</code> because <a href="https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/" rel="noopener">they support <em>so many more</em>&nbsp;colors</a>&nbsp;that are simply missing from the&nbsp;<code>hsl()</code>&nbsp;and&nbsp;<code>hwb()</code>&nbsp;functions.</p>



<p>I’ve been exploring colors for quite some time now, so any input would be extremely helpful. What color functions are you using in your everyday website or web application, and why?</p>


<h3 class="wp-block-heading" id="more-on-color">More on color</h3>


    		
    <div class="in-article-cards">
      <article class="in-article-card " id="mini-post-386463">

  <time datetime="2025-02-20" title="Originally published May 7, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Feb 22, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/h/hsl/">
      hsl()    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/functions/h/hsl/" class="almanac-example">
      <code class="language-css">.element { color: hsl(90deg, 50%, 50%); }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sunkanmifafowora/" aria-label="Author page of Sunkanmi Fafowora">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sunkanmifafowora/">
      Sunkanmi Fafowora    </a>
  </div>

</article>
<article class="in-article-card " id="mini-post-386463">

  <time datetime="2025-03-04" title="Originally published May 7, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Mar 4, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/l/lab/">
      lab()    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/functions/l/lab/" class="almanac-example">
      <code class="language-css">.element { color: lab(50% 50% 50% / 0.5); }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sunkanmifafowora/" aria-label="Author page of Sunkanmi Fafowora">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sunkanmifafowora/">
      Sunkanmi Fafowora    </a>
  </div>

</article>
<article class="in-article-card " id="mini-post-386463">

  <time datetime="2025-03-12" title="Originally published May 7, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Mar 12, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/l/lch/">
      lch()    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/functions/l/lch/" class="almanac-example">
      <code class="language-css">.element { color: lch(10% 0.215 15deg); }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sunkanmifafowora/" aria-label="Author page of Sunkanmi Fafowora">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sunkanmifafowora/">
      Sunkanmi Fafowora    </a>
  </div>

</article>
<article class="in-article-card " id="mini-post-386463">

  <time datetime="2025-04-29" title="Originally published May 7, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    Apr 29, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/o/oklab/">
      oklab()    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/functions/o/oklab/" class="almanac-example">
      <code class="language-css">.element { color: oklab(25.77% 25.77% 54.88%; }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/sunkanmifafowora/" aria-label="Author page of Sunkanmi Fafowora">
      <img alt='' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/7a0804d8152c56694fa36cce088c9564c8504d3d71f0f12527afb0ad3bc88dab 2x' class='avatar avatar-80 photo' height='80' width='80' />    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/sunkanmifafowora/">
      Sunkanmi Fafowora    </a>
  </div>

</article>
<article class="in-article-card " id="mini-post-386463">

  <time datetime="2025-04-03" title="Originally published May 7, 2025">
    <strong>
                
      Almanac
      </strong>

    on

    May 10, 2025  </time>

  <h3>
    <a href="https://css-tricks.com/almanac/functions/o/oklch/">
      oklch()    </a>
  </h3>

      <a href="https://css-tricks.com/almanac/functions/o/oklch/" class="almanac-example">
      <code class="language-css">.element { color: oklch(70% 0.15 240); }</code>
    </a>
  
      <div class="tags">
      <a href="https://css-tricks.com/tag/color/" rel="tag">color</a>    </div>
  
  <div class="author-row">
    <a href="https://css-tricks.com/author/gabrielshoyombo/" aria-label="Author page of Gabriel Shoyombo">
      <img data-recalc-dims="1" loading="lazy" decoding="async" alt="" class="avatar avatar-80 photo avatar-default" height="80" src="https://i0.wp.com/css-tricks.com/wp-content/cache/breeze-extra/gravatars/gabriel-shoyombo-80x80.jpeg?resize=80%2C80&#038;ssl=1" width="80">    </a>
  
    <a class="author-name" href="https://css-tricks.com/author/gabrielshoyombo/">
      Gabriel Shoyombo    </a>
  </div>

</article>
    </div>
  
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/why-is-nobody-using-the-hwb-color-function/">Why is Nobody Using the hwb() Color Function?</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>


Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering why that is.








hwb() is a color function in the sRGB color space, which is the same color space used by rgb(), hsl() and the older hexadecimal color format (e.g. #f8a100). hwb() is supposed to be more intuitive and easier to work with than hsl(). I kinda get why it’s considered “easier” since you specify how much black or white you want to add to a given color. But, how is hwb() more intuitive than hsl()?
hwb() accepts three values, and similar to hsl(), the first value specifies the color’s hue (between 0deg–360deg), while the second and third values add whiteness (0 – 100) and blackness (0 – 100) to the mix, respectively.
According to Google, the term “intuitive” means “what one feels to be true even without conscious reasoning; instinctive.” As such, it does truly seem that hwb() is more intuitive than hsl(), but it’s only a slight notable difference that makes that true.
Let’s consider an example with a color. We’ll declare light orange in both hsl() and hwb():
/* light orange in hsl */
.element-1 {
  color: hsl(30deg 100% 75%);
}

/* light orange in hwb() */
.element-2 {
  color: hwb(30deg 50% 0%);
}
These two functions produce the exact same color, but while hwb() handles ligthness with two arguments, hsl() does it with just one, leaving one argument for the saturation. By comparison, hwb() provides no clear intuitive way to set just the saturation. I’d argue that makes the hwb() function less intuitive than hsl().
I think another reason that hsl() is generally more intuitive than hwb() is that HSL as a color model was created in the 1970s while HWB as a color model was created in 1996. We’ve had much more time to get acquainted with hsl() than we have hwb(). hsl() was implemented by browsers as far back as 2008, Safari being the first and other browsers following suit. Meanwhile, hwb() gained support as recently as 2021! That’s more than a 10-year gap between functions when it comes to using them and being familiar with them.
There’s also the fact that other color functions that are used to represent colors in other color spaces — such as lab(), lch(), oklab(), and oklch() — offer more advantages, such as access to more colors in the color gamut and perceptual uniformity. So, maybe being intuitive is coming at the expense of having a more robust feature set, which could explain why you might go with a less intuitive function that doesn’t use sRGB.
Look, I can get around the idea of controlling how white or black you want a color to look based on personal preferences, and for designers, it’s maybe easier to mix colors that way. But I honestly would not opt for this as my go-to color function in the sRGB color space because hsl() does something similar using the same hue, but with saturation and lightness as the parameters which is far more intuitive than what hwb() offers.
I see our web friend, Stefan Judis, preferring hsl() over hwb() in his article on hwb().
Lea Verou even brought up the idea of removing hwb() from the spec in 2022, but a decision was made to leave it as it was since browsers were already implementing the function. And although,I was initially pained by the idea of keeping hwb() around, I also quite understand the feeling of working on something, and then seeing it thrown in the bin. Once we’ve introduced something, it’s always tough to walk it back, especially when it comes to maintaining backwards compatibility, which is a core tenet of the web.
I would like to say something though: lab(), lch(), oklab(), oklch() are already here and are better color functions than hwb(). I, for one, would encourage using them over hwb() because they support so many more colors that are simply missing from the hsl() and hwb() functions.
I’ve been exploring colors for quite some time now, so any input would be extremely helpful. What color functions are you using in your everyday website or web application, and why?
More on color
.element { color: hsl(90deg, 50%, 50%); }
    
  
      
color    
    
  
    
      Sunkanmi Fafowora    
  
.element { color: lab(50% 50% 50% / 0.5); }
    
  
      
color    
    
  
    
      Sunkanmi Fafowora    
  
.element { color: lch(10% 0.215 15deg); }
    
  
      
color    
    
  
    
      Sunkanmi Fafowora    
  
.element { color: oklab(25.77% 25.77% 54.88%; }
    
  
      
color    
    
  
    
      Sunkanmi Fafowora    
  
.element { color: oklch(70% 0.15 240); }
    
  
      
color    
    
  
    
      Gabriel Shoyombo    
  
Why is Nobody Using the hwb() Color Function? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering why that is.
Why is Nobody Using the hwb() Color Function? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Why is Nobody Using the hwb() Color Function?

<p>Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/gsap-is-now-completely-free-even-for-commercial-use/">GSAP is Now Completely Free, Even for Commercial Use!</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>Back in October, the folks behind the GreenSock Animation Platform (GSAP) <a href="https://css-tricks.com/combining-forces-gsap-webflow/">joined forces with Webflow</a>, the visual website builder. Now, the team&#8217;s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now <em>freely available</em> to everyone.</p>



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



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Thanks to&nbsp;<a href="https://webflow.com/" rel="noopener">Webflow</a>&nbsp;GSAP is now&nbsp;<strong>100% free</strong>&nbsp;including <em>all</em> of the bonus plugins like&nbsp;<a href="https://gsap.com/docs/v3/Plugins/SplitText" rel="noopener">SplitText</a>,&nbsp;<a href="https://gsap.com/docs/v3/Plugins/MorphSVGPlugin" rel="noopener">MorphSVG</a>, and all the others that were exclusively available to Club GSAP members. That&#8217;s right, the entire GSAP toolset is free,&nbsp;<strong>even for commercial use!</strong>&nbsp;&#x1f92f;</p>
</blockquote>



<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/lfVA-5qHiUM?si=AcBc7SUyUmuEZH4K" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>



<p>Webflow is celebrating over on <a href="https://webflow.com/blog/gsap-becomes-free" rel="noopener">their blog</a> as well:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>With Webflow’s support, the GSAP team can continue to lead the charge in product and industry innovation while allowing even more developers the opportunity to harness the full breadth of GSAP-powered motion.</p>
</blockquote>



<p>Check out the GSAP blog to read more about the announcement, then go animate something awesome and share it with us!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/gsap-is-now-completely-free-even-for-commercial-use/">GSAP is Now Completely Free, Even for Commercial Use!</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>


Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.





Thanks to Webflow GSAP is now 100% free including all of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members. That’s right, the entire GSAP toolset is free, even for commercial use! 🤯




Webflow is celebrating over on their blog as well:
With Webflow’s support, the GSAP team can continue to lead the charge in product and industry innovation while allowing even more developers the opportunity to harness the full breadth of GSAP-powered motion.
Check out the GSAP blog to read more about the announcement, then go animate something awesome and share it with us!
GSAP is Now Completely Free, Even for Commercial Use! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.
GSAP is Now Completely Free, Even for Commercial Use! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

GSAP is Now Completely Free, Even for Commercial Use!

<p>Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the <code>animation-timeline</code> property. Here’s yet another way.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/">Modern Scroll Shadows Using Scroll-Driven Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>



<p>Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s&nbsp;<a href="https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/">one of his all-time favorite CSS tricks</a>), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element.</p>



<p>Geoff covered a&nbsp;<a href="https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/#aa-add-scroll-shadows-to-a-scroll-container">newer approach</a>&nbsp;that uses the&nbsp;<code><a href="https://css-tricks.com/almanac/properties/a/animation-timeline/">animation-timeline</a></code> property. Using&nbsp;<code>animation-timeline</code>, we can tie CSS animation to the scroll position. His example uses pseudo-elements to render the scroll shadows, and&nbsp;animation-range&nbsp;to animate the opacity of the pseudo-elements based on scroll.</p>



<p>Here’s yet another way. Instead of using shadows, let’s use a CSS <code>mask</code>&nbsp;to fade out the edges of the scrollable element. This is a slightly different visual metaphor that works great for horizontally scrollable elements — places where your scrollable element doesn’t have a distinct border of its own. This approach still uses&nbsp;<code>animation-timeline</code>, but we’ll use custom properties instead of pseudo-elements. Since we’re fading, the effect also works regardless of whether we’re on a dark or light background.</p>



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


<h2 class="wp-block-heading" id="getting-started-with-a-scrollable-element">Getting started with a scrollable element</h2>


<p>First, we’ll define our scrollable element with a mask that fades out the start and end of the container. For this example, let’s consider the infamous table that can’t be responsive and has to be horizontally scrollable on mobile.</p>



<p>Let’s add the mask. We can use the shorthand and find the mask as a linear gradient that fades out on either end. A mask lets the table fade into the background instead of overlaying a shadow, but you could use the same technique for shadows.</p>



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



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.scrollable {
  mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}</code></pre>


<h2 class="wp-block-heading" id="defining-the-custom-properties-and-animation">Defining the custom properties and animation</h2>


<p>Next, we need to define our custom properties and the animation. We’ll define two separate properties,&nbsp;<code>--left-fade</code>&nbsp;and&nbsp;<code>--right-fade</code>, using&nbsp;<code><a href="https://css-tricks.com/almanac/rules/p/property/">@property</a></code>. Using&nbsp;<code>@property</code>&nbsp;is necessary here to specify the&nbsp;<em>syntax</em>&nbsp;of the properties so that browsers can animate the property’s values.</p>



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

@property --right-fade {
  syntax: "&lt;length>";
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%, 100% {
    --left-fade: 3rem;
  }
  0%, 90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}</code></pre>



<p>Instead of using multiple animations or&nbsp;<code>animation-range</code>, we can define a single animation where&nbsp;<code>--left-fade</code>&nbsp;animates from&nbsp;<code>0</code>&nbsp;to&nbsp;<code>3rem</code>&nbsp;between 0-10%, and&nbsp;<code>--right-fade</code>&nbsp;animates from&nbsp;<code>3rem</code>&nbsp;to&nbsp;<code>0</code>&nbsp;between 90-100%. Now we update our mask to use our custom properties and tie the&nbsp;<code>scroll-timeline</code>&nbsp;of our element to its own&nbsp;<code>animation-timeline</code>.</p>


<h2 class="wp-block-heading" id="putting-it-all-together">Putting it all together</h2>


<p>Putting it all together, we have the effect we’re after:</p>



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



<p>We’re still waiting for some browsers (Safari) to support&nbsp;<code>animation-timeline</code>, but this gracefully degrades to simply not fading the element at all.</p>




<baseline-status class="wp-block-css-tricks-baseline-status" featureId="scroll-driven-animations"></baseline-status>


<h2 class="wp-block-heading" id="wrapping-up">Wrapping up</h2>


<p>I like this implementation because it combines two newer bits of CSS — animating custom properties and&nbsp;<code>animation-timeline</code>&nbsp;— to achieve a practical effect that’s more than just decoration. The technique can even be used with scroll-snap-based carousels or cards:</p>



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



<p>It works regardless of content or background and doesn’t require JavaScript. It exemplifies just how far CSS has come lately.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/">Modern Scroll Shadows Using Scroll-Driven Animations</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</p>


Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element.
Geoff covered a newer approach that uses the animation-timeline property. Using animation-timeline, we can tie CSS animation to the scroll position. His example uses pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements based on scroll.
Here’s yet another way. Instead of using shadows, let’s use a CSS mask to fade out the edges of the scrollable element. This is a slightly different visual metaphor that works great for horizontally scrollable elements — places where your scrollable element doesn’t have a distinct border of its own. This approach still uses animation-timeline, but we’ll use custom properties instead of pseudo-elements. Since we’re fading, the effect also works regardless of whether we’re on a dark or light background.



Getting started with a scrollable element
First, we’ll define our scrollable element with a mask that fades out the start and end of the container. For this example, let’s consider the infamous table that can’t be responsive and has to be horizontally scrollable on mobile.
Let’s add the mask. We can use the shorthand and find the mask as a linear gradient that fades out on either end. A mask lets the table fade into the background instead of overlaying a shadow, but you could use the same technique for shadows.
CodePen Embed Fallback
.scrollable {
  mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000);
}
Defining the custom properties and animation
Next, we need to define our custom properties and the animation. We’ll define two separate properties, --left-fade and --right-fade, using @property. Using @property is necessary here to specify the syntax of the properties so that browsers can animate the property’s values.
@property --left-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --right-fade {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes scrollfade {
  0% {
    --left-fade: 0;
  }
  10%, 100% {
    --left-fade: 3rem;
  }
  0%, 90% {
    --right-fade: 3rem;
  }
  100% {
    --right-fade: 0;
  }
}
Instead of using multiple animations or animation-range, we can define a single animation where --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we update our mask to use our custom properties and tie the scroll-timeline of our element to its own animation-timeline.
Putting it all together
Putting it all together, we have the effect we’re after:
CodePen Embed Fallback
We’re still waiting for some browsers (Safari) to support animation-timeline, but this gracefully degrades to simply not fading the element at all.



Wrapping up
I like this implementation because it combines two newer bits of CSS — animating custom properties and animation-timeline — to achieve a practical effect that’s more than just decoration. The technique can even be used with scroll-snap-based carousels or cards:
CodePen Embed Fallback
It works regardless of content or background and doesn’t require JavaScript. It exemplifies just how far CSS has come lately.
Modern Scroll Shadows Using Scroll-Driven Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Modern Scroll Shadows Using Scroll-Driven Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Modern Scroll Shadows Using Scroll-Driven Animations

<p>The CSS <code>shape()</code> function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the <code>clip-path</code> property.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-shape-commands/">CSS shape() Commands</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 CSS <code>shape()</code> function recently gained support in both <a href="https://developer.chrome.com/blog/css-shape" rel="noopener">Chromium</a> and <a href="https://webkit.org/blog/16794/the-css-shape-function/" rel="noopener">WebKit</a> browsers. It&#8217;s a way of drawing complex shapes when clipping elements with the <code><a href="https://css-tricks.com/almanac/properties/c/clip-path/">clip-path</a></code> property. We&#8217;ve had the ability to draw basic shapes for years — think <code>circle</code>, <code>ellipse()</code>, and <code>polygon()</code> — but no &#8220;easy&#8221; way to draw more complex shapes.</p>



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



<p>Well, that&#8217;s not entirely true. It&#8217;s true there was no &#8220;easy&#8221; way to draw shapes, but we&#8217;ve had the <code>path()</code> function for some time, which we can use to draw shapes using SVG commands directly in the function&#8217;s arguments. This is an example of an SVG path pulled straight from WebKit&#8217;s blog post linked above:</p>



<pre rel="SVG" class="wp-block-csstricks-code-block language-svg" data-line=""><code markup="tt">&lt;svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
  &lt;path fill="black" d="M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z " />
&lt;/svg></code></pre>



<p>Which means we can yank those <code>&lt;path&gt;</code> coordinates and drop them into the <code>path()</code> function in CSS when clipping a shape out of an element:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.clipped {
  clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z");
}</code></pre>



<p><em>I totally understand what all of those letters and numbers are doing.</em> Just kidding, I&#8217;d have to read up on that somewhere, like Myriam Frisano&#8217;s more recent <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/" rel="noopener">&#8220;Useful Recipes For Writing Vectors By Hand&#8221;</a> article. There&#8217;s a steep learning curve to all that, and not everyone — including me — is going down that nerdy, albeit interesting, road. Writing SVG by hand is a niche specialty, not something you&#8217;d expect the average front-ender to know. I doubt I&#8217;m alone in saying I&#8217;d rather draw those vectors in something like Figma first, export the SVG code, and copy-paste the resulting paths where I need them.</p>



<p>The <code>shape()</code> function is designed to be more, let&#8217;s say, CSS-y. We get new commands that tell the browser where to draw lines, arcs, and curves, just like <code>path()</code>, but we get to use plain English and native CSS units rather than unreadable letters and coordinates. That opens us up to even using CSS <code>calc()</code>-ulations in our drawings!</p>



<p>Here&#8217;s a fairly simple drawing I made from a couple of elements. You&#8217;ll want to view the demo in either Chrome 135+ or Safari 18.4+ to see what&#8217;s up.</p>



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



<p>So, instead of all those wonky coordinates we saw in <code>path()</code>, we get new terminology. This post is really me trying to wrap my head around what those new terms are and how they&#8217;re used.</p>



<p>In short, you start by telling <code>shape()</code> where the starting point should be when drawing. For example, we can say &#8220;<code>from top left</code>&#8221; using directional keywords to set the origin at the top-left corner of the element. We can also use CSS units to set that position, so &#8220;<code>from 0 0</code>&#8221; works as well. Once we establish that starting point, we get a set of commands we can use for drawing lines, arcs, and curves.</p>



<p>I figured a table would help.</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Command</th><th>What it means</th><th>Usage</th><th>Examples</th></tr></thead><tbody><tr><td><code>line</code></td><td>A line that is drawn using a coordinate pair</td><td>The <code>by</code> keyword sets a coordinate pair used to determine the length of the line.</td><td><code>line by -2px 3px</code></td></tr><tr><td><code>vline</code></td><td>Vertical line</td><td>The <code>to</code> keyword indicates where the line should end, based on the current starting point.<br><br>The <code>by</code> keyword sets a coordinate pair used to determine the length of the line.</td><td><code>vline to 50px</code></td></tr><tr><td><code>hline</code></td><td>Horizontal line</td><td>The <code>to</code> keyword indicates where the line should end, based on the current starting point.<br><br>The <code>by</code> keyword sets a coordinate pair used to determine the length of the line.</td><td><code>hline to 95%</code></td></tr><tr><td><code>arc</code></td><td>An arc (oh, really?!). An elliptical one, that is, sort of like the rounded edges of a heart shape.</td><td>The <code>to</code> keyword indicates where the arc should end.<br><br>The <code>with</code> keyword sets a pair of coordinates that tells the arc how far right and down the arc should slope.<br><br>The&nbsp;<code>of</code>&nbsp;keyword specifies the size of the ellipse that the arc is taken from. The first value provides the horizontal radius of the ellipse, and the second provides the vertical radius.&nbsp;I&#8217;m a little unclear on this one, even after playing with it.</td><td><code>arc to 10% 50% of 1%</code></td></tr><tr><td><code>curve</code></td><td>A curved line</td><td>The <code>to</code> keyword indicates where the curved line should end.<br><br>The <code>with</code> keyword sets &#8220;control points&#8221; that affect the shape of the curve, making it deep or shallow.</td><td><code>curve to 0% 100% with 50% 0%</code></td></tr><tr><td><code>smooth</code></td><td>Adds a smooth Bézier curve command to the list of path data commands</td><td>The <code>to</code> keyword indicates where the curve should end.<br><br>The <code>by</code> keyword sets a coordinate pair used to determine the length of the curve.<br><br>The&nbsp;<code>with</code>&nbsp;keyword specifies control points for the curve.</td><td><code>smooth by 50% 50% with 50% 5%</code></td></tr></tbody></table></figure>



<p>The <a href="https://drafts.csswg.org/css-shapes-2/#funcdef-shape" rel="noopener">spec</a> is dense, as you might expect with a lot of moving pieces like this. Again, these are just my notes, but let me know if there&#8217;s additional nuance you think would be handy to include in the table.</p>



<p>Oh, another fun thing: you can adjust the <code>shape()</code> on hover/focus. The only thing is that I was unable to <code>transition</code> or animate it, at least in the current implementation.</p>



<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_XJJRGdj" src="//codepen.io/anon/embed/preview/XJJRGdj?height=500&amp;theme-id=1&amp;slug-hash=XJJRGdj&amp;default-tab=css,result" height="500" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed XJJRGdj" title="CodePen Embed XJJRGdj" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/css-shape-commands/">CSS shape() Commands</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 CSS shape() function recently gained support in both Chromium and WebKit browsers. It’s a way of drawing complex shapes when clipping elements with the clip-path property. We’ve had the ability to draw basic shapes for years — think circle, ellipse(), and polygon() — but no “easy” way to draw more complex shapes.




Well, that’s not entirely true. It’s true there was no “easy” way to draw shapes, but we’ve had the path() function for some time, which we can use to draw shapes using SVG commands directly in the function’s arguments. This is an example of an SVG path pulled straight from WebKit’s blog post linked above:
<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="black" d="M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z " />
</svg>
Which means we can yank those <path> coordinates and drop them into the path() function in CSS when clipping a shape out of an element:
.clipped {
  clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z");
}
I totally understand what all of those letters and numbers are doing. Just kidding, I’d have to read up on that somewhere, like Myriam Frisano’s more recent “Useful Recipes For Writing Vectors By Hand” article. There’s a steep learning curve to all that, and not everyone — including me — is going down that nerdy, albeit interesting, road. Writing SVG by hand is a niche specialty, not something you’d expect the average front-ender to know. I doubt I’m alone in saying I’d rather draw those vectors in something like Figma first, export the SVG code, and copy-paste the resulting paths where I need them.
The shape() function is designed to be more, let’s say, CSS-y. We get new commands that tell the browser where to draw lines, arcs, and curves, just like path(), but we get to use plain English and native CSS units rather than unreadable letters and coordinates. That opens us up to even using CSS calc()-ulations in our drawings!
Here’s a fairly simple drawing I made from a couple of elements. You’ll want to view the demo in either Chrome 135+ or Safari 18.4+ to see what’s up.
CodePen Embed Fallback
So, instead of all those wonky coordinates we saw in path(), we get new terminology. This post is really me trying to wrap my head around what those new terms are and how they’re used.
In short, you start by telling shape() where the starting point should be when drawing. For example, we can say “from top left” using directional keywords to set the origin at the top-left corner of the element. We can also use CSS units to set that position, so “from 0 0” works as well. Once we establish that starting point, we get a set of commands we can use for drawing lines, arcs, and curves.
I figured a table would help.

CommandWhat it meansUsageExamples

lineA line that is drawn using a coordinate pairThe by keyword sets a coordinate pair used to determine the length of the line.line by -2px 3px
vlineVertical lineThe to keyword indicates where the line should end, based on the current starting point.
The by keyword sets a coordinate pair used to determine the length of the line.vline to 50px
hlineHorizontal lineThe to keyword indicates where the line should end, based on the current starting point.
The by keyword sets a coordinate pair used to determine the length of the line.hline to 95%
arcAn arc (oh, really?!). An elliptical one, that is, sort of like the rounded edges of a heart shape.The to keyword indicates where the arc should end.
The with keyword sets a pair of coordinates that tells the arc how far right and down the arc should slope.
The of keyword specifies the size of the ellipse that the arc is taken from. The first value provides the horizontal radius of the ellipse, and the second provides the vertical radius. I’m a little unclear on this one, even after playing with it.arc to 10% 50% of 1%
curveA curved lineThe to keyword indicates where the curved line should end.
The with keyword sets “control points” that affect the shape of the curve, making it deep or shallow.curve to 0% 100% with 50% 0%
smoothAdds a smooth Bézier curve command to the list of path data commandsThe to keyword indicates where the curve should end.
The by keyword sets a coordinate pair used to determine the length of the curve.
The with keyword specifies control points for the curve.smooth by 50% 50% with 50% 5%





The spec is dense, as you might expect with a lot of moving pieces like this. Again, these are just my notes, but let me know if there’s additional nuance you think would be handy to include in the table.
Oh, another fun thing: you can adjust the shape() on hover/focus. The only thing is that I was unable to transition or animate it, at least in the current implementation.
CodePen Embed Fallback
CSS shape() Commands originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The CSS shape() function recently gained support in both Chromium and WebKit browsers. It's a way of drawing complex shapes when clipping elements with the clip-path property.
CSS shape() Commands originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS shape() Commands

<p>The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/state-of-devs-a-survey-for-every-developer/">State of Devs: A Survey for Every Developer</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>I don’t know if I should say this on a website devoted to programming, but I sometimes feel like *lowers voice* <em>coding is actually the least interesting part of our lives</em>.</p>



<p>After all, last time I got excited meeting someone at a conference it was because we were both into bouldering, not because we both use React. And <em>The Social Network</em> won an Oscar for the way it displayed interpersonal drama, not for its depiction of Mark Zuckerberg’s PHP code.&nbsp;</p>



<p>Yet for the past couple years, I’ve been running developer surveys (such as the <a href="https://2024.stateofjs.com/" rel="noopener">State of JS</a> and <a href="https://2024.stateofcss.com/" rel="noopener">State of CSS</a>) that <em>only</em> ask about code. It was time to fix that.&nbsp;</p>



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


<h3 class="wp-block-heading" id="a-new-kind-of-survey"><strong>A new kind of survey</strong></h3>


<p>The <a href="https://survey.devographics.com/en-US/survey/state-of-devs/2025?source=css_tricks" rel="noopener">State of Devs survey</a> is now open to participation, and unlike previous surveys it covers everything <em>except</em> code: career, workplace, but also health, hobbies, and more.&nbsp;</p>



<p>I’m hoping to answer questions such as:</p>



<ul class="wp-block-list">
<li>What are developers’ favorite recent movies and video games?</li>



<li>What kind of physical activity do developers practice?</li>



<li>How much sleep are we all getting?</li>
</ul>



<p>But also address more serious topics, including:</p>



<ul class="wp-block-list">
<li>What do developers like about their workplace?</li>



<li>What factors lead to workplace discrimination?</li>



<li>What global issues are developers most concerned with?</li>
</ul>


<h3 class="wp-block-heading" id="reaching-out-to-new-audiences"><strong>Reaching out to new audiences</strong></h3>


<p>Another benefit from branching out into new topics is the chance to reach out to new audiences.</p>



<p>It’s no secret that people who don’t fit the mold of the average developer (whether because of their gender, race, age, disabilities, or a myriad of other factors) often have a harder time getting involved in the community, and this also shows up in our data.&nbsp;</p>



<p>In the past, we’ve tried various <a href="https://dev.to/sachagreif/state-of-js-2024-outreach-and-diversity-report-n0e" rel="noopener">outreach strategies</a> to help address these imbalances in survey participation, but the results haven’t always been as effective as we’d hoped.&nbsp;</p>



<p>So this time, I thought I’d try something different and have the survey itself include more questions relevant to under-represented groups, asking about workplace discrimination:</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1664" height="1484" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?resize=1664%2C1484&#038;ssl=1" alt="Question: Have you ever experiences discrimination in the workplace based on any of the following factors?" class="wp-image-386358" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?w=1664&amp;ssl=1 1664w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?resize=300%2C268&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?resize=1024%2C913&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?resize=768%2C685&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.32.57%E2%80%AFAM.png?resize=1536%2C1370&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>As well as actions taken in response to said discrimination:</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1662" height="1494" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?resize=1662%2C1494&#038;ssl=1" alt="Question: Have you taken any of the following actions in response to workplace issues?" class="wp-image-386359" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?w=1662&amp;ssl=1 1662w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?resize=300%2C270&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?resize=1024%2C920&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?resize=768%2C690&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.33.33%E2%80%AFAM.png?resize=1536%2C1381&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>Yet while obtaining a more representative data sample as a result of this new focus would be ideal, it isn’t the only benefit.&nbsp;</p>



<p>The most vulnerable among us are often the proverbial canaries in the coal mine, suffering first from issues or policies that will eventually affect the rest of the community as well, if left unchecked.&nbsp;</p>



<p>So, facing these issues head-on is especially valuable now, at a time when &#8220;DEI&#8221; is becoming a new taboo, and a lot of the important work that has been done to make things slightly better over the past decade is at risk of being reversed.</p>


<h3 class="wp-block-heading" id="the-big-questions"><strong>The big questions</strong></h3>


<p>Finally, the survey also tries to go beyond work and daily life to address the broader questions that keep us up at night:</p>



<figure class="wp-block-image size-full"><img data-recalc-dims="1" loading="lazy" decoding="async" width="1656" height="1448" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?resize=1656%2C1448&#038;ssl=1" alt="Question: What global issues are currently most concerning to you?" class="wp-image-386360" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?w=1656&amp;ssl=1 1656w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?resize=300%2C262&amp;ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?resize=1024%2C895&amp;ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?resize=768%2C672&amp;ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/Screenshot-2025-04-29-at-8.34.22%E2%80%AFAM.png?resize=1536%2C1343&amp;ssl=1 1536w" sizes="auto, (min-width: 735px) 864px, 96vw" /></figure>



<p>There’s been talk in recent years about keeping the workplace free of politics. And why I can certainly see the appeal in that, in 2025, it feels harder than ever to achieve that ideal. At a time when people are losing rights and governments are sliding towards authoritarianism, should we still pretend that everything is fine? Especially when you factor in the fact that the tech community is now a major political player in its own right…</p>



<p>So while I didn’t push too far in that direction for this first edition of the survey, one of my goals for the future is to get a better grasp of where exactly developers stand in terms of ideology and worldview. Is this a good idea, or should I keep my distance from any hot-button issues? Don’t hesitate to <a href="https://github.com/Devographics/surveys/issues/288" rel="noopener">let me know what you think</a>, or suggest any other topic I should be asking about next time.&nbsp;</p>



<p>In the meantime, <a href="https://survey.devographics.com/en-US/survey/state-of-devs/2025?source=css_tricks" rel="noopener">go take the survey</a>, and help us get a better picture of who exactly we all are!</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/state-of-devs-a-survey-for-every-developer/">State of Devs: A Survey for Every Developer</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 don’t know if I should say this on a website devoted to programming, but I sometimes feel like *lowers voice* coding is actually the least interesting part of our lives.
After all, last time I got excited meeting someone at a conference it was because we were both into bouldering, not because we both use React. And The Social Network won an Oscar for the way it displayed interpersonal drama, not for its depiction of Mark Zuckerberg’s PHP code. 
Yet for the past couple years, I’ve been running developer surveys (such as the State of JS and State of CSS) that only ask about code. It was time to fix that. 



A new kind of survey
The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 
I’m hoping to answer questions such as:
What are developers’ favorite recent movies and video games?
What kind of physical activity do developers practice?
How much sleep are we all getting?
But also address more serious topics, including:
What do developers like about their workplace?
What factors lead to workplace discrimination?
What global issues are developers most concerned with?
Reaching out to new audiences
Another benefit from branching out into new topics is the chance to reach out to new audiences.
It’s no secret that people who don’t fit the mold of the average developer (whether because of their gender, race, age, disabilities, or a myriad of other factors) often have a harder time getting involved in the community, and this also shows up in our data. 
In the past, we’ve tried various outreach strategies to help address these imbalances in survey participation, but the results haven’t always been as effective as we’d hoped. 
So this time, I thought I’d try something different and have the survey itself include more questions relevant to under-represented groups, asking about workplace discrimination:




As well as actions taken in response to said discrimination:




Yet while obtaining a more representative data sample as a result of this new focus would be ideal, it isn’t the only benefit. 
The most vulnerable among us are often the proverbial canaries in the coal mine, suffering first from issues or policies that will eventually affect the rest of the community as well, if left unchecked. 
So, facing these issues head-on is especially valuable now, at a time when “DEI” is becoming a new taboo, and a lot of the important work that has been done to make things slightly better over the past decade is at risk of being reversed.
The big questions
Finally, the survey also tries to go beyond work and daily life to address the broader questions that keep us up at night:




There’s been talk in recent years about keeping the workplace free of politics. And why I can certainly see the appeal in that, in 2025, it feels harder than ever to achieve that ideal. At a time when people are losing rights and governments are sliding towards authoritarianism, should we still pretend that everything is fine? Especially when you factor in the fact that the tech community is now a major political player in its own right…
So while I didn’t push too far in that direction for this first edition of the survey, one of my goals for the future is to get a better grasp of where exactly developers stand in terms of ideology and worldview. Is this a good idea, or should I keep my distance from any hot-button issues? Don’t hesitate to let me know what you think, or suggest any other topic I should be asking about next time. 
In the meantime, go take the survey, and help us get a better picture of who exactly we all are!
State of Devs: A Survey for Every Developer originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 
State of Devs: A Survey for Every Developer originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

State of Devs: A Survey for Every Developer

<p>Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/revisiting-image-maps/">Revisiting Image Maps</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 mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work.
Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a way to incorporate their retro ’90s style into his design without making it a pastiche. But that wasn’t my only challenge. I also needed to achieve that ’90s feel by using up-to-the-minute code to maintain accessibility, performance, responsiveness, and semantics.








Designing for Mike was like a trip back to when mainstream website design seemed more spontaneous and less governed by conventions and best practices. Some people describe these designs as “whimsical”:
adjective
spontaneously fanciful or playful
given to whims; capricious
quaint, unusual, or fantastic
— Collins English Dictionary
But I’m not so sure that’s entirely accurate. “Playful?” Definitely. “Fanciful?” Possibly. But “fantastic?” That depends. “Whimsy” sounds superfluous, so I call it “expressive” instead.
Studying design from way back, I remembered how websites often included graphics that combined branding, content, and navigation. Pretty much every reference to web design in the ’90s — when I designed my first website — talks about Warner Brothers’ Space Jam from 1996.
Warner Brothers’ Space Jam (1996)



So, I’m not going to do that.
Brands like Nintendo used their home pages to direct people to their content while making branded visual statements. Cheestrings combined graphics with navigation, making me wonder why we don’t see designs like this today. Goosebumps typified this approach, combining cartoon illustrations with brightly colored shapes into a functional and visually rich banner, proving that being useful doesn’t mean being boring.
Left to right: Nintendo, Cheestrings, Goosebumps.



In the ’90s, when I developed graphics for websites like these, I either sliced them up and put their parts in tables or used mostly forgotten image maps.
A brief overview of properties and values
Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements. They were popular for graphics, maps, and navigation, but their use declined with the rise of CSS, SVG, and JavaScript.
<map> adds clickable areas to a bitmap or vector image.
<map name="projects">
  ...
</map>
That <map> is linked to an image using the usemap attribute:
<img usemap="#projects" ...>
Those elements can have separate href and alt attributes and can be enhanced with ARIA to improve accessibility:
<map name="projects">
  <area href="" alt="" … />
  ...
</map>
The shape attribute specifies an area’s shape. It can be a primitive circle or rect or a polygon defined by a set of absolute x and y coordinates:
<area shape="circle" coords="..." ... />
<area shape="rect" coords="..." ... />
<area shape="poly" coords="..." ... />
Despite their age, image maps still offer plenty of benefits. They’re lightweight and need (almost) no JavaScript. More on that in just a minute. They’re accessible and semantic when used with alt, ARIA, and title attributes. Despite being from a different era, even modern mobile browsers support image maps.
Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in April 2025, but you can see examples from this article on CodePen.



My design for Mike Worth includes several graphic navigation elements, which made me wonder if image maps might still be an appropriate solution.
Image maps in action
Mike wants his website to showcase his past work and the projects he’d like to do. To make this aspect of his design discoverable and fun, I created a map for people to explore by pressing on areas of the map to open modals. This map contains numbered circles, and pressing one pops up its modal.




My first thought was to embed anchors into the external map SVG:
<img src="projects.svg" alt="Projects">

<svg ...>
  ...
  <a href="...">
    <circle cx="35" cy="35" r="35" fill="#941B2F"/>
    <path fill="#FFF" d="..."/>
  </a>
</svg>
This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element. But image maps work perfectly, even though specifying their coordinates can be laborious. Fortunately, plenty of tools are available, which make defining coordinates less tedious. Upload an image, choose shape types, draw the shapes, and copy the markup:
<img src="projects.svg" usemap="#projects-map.svg">

<map name="projects-map.svg">
  <area href="" alt="" coords="..." shape="circle">
  <area href="" alt="" coords="..." shape="circle">
  ...
</map>
Image maps work well when images are fixed sizes, but flexible images present a problem because map coordinates are absolute, not relative to an image’s dimensions. Making image maps responsive needs a little JavaScript to recalculate those coordinates when the image changes size:
function resizeMap() {
  const image = document.getElementById("projects");
  const map = document.querySelector("map[name='projects-map']");
  
  if (!image || !map || !image.naturalWidth) return;
  
  const scale = image.clientWidth / image.naturalWidth;
  map.querySelectorAll("area").forEach(area => {
  
    if (!area.dataset.originalCoords) {
      area.dataset.originalCoords = area.getAttribute("coords");
    }

    const scaledCoords = area.dataset.originalCoords
    
    .split(",")
    .map(coord => Math.round(coord * scale))
    .join(",");
    area.setAttribute("coords", scaledCoords);
  });
}

["load", "resize"].forEach(event =>
  window.addEventListener(event, resizeMap)
);
I still wasn’t happy with this implementation as I wanted someone to be able to press on much larger map areas, not just the numbered circles.
Every <path> has coordinates which define how it’s drawn, and they’re relative to the SVG viewBox:
<svg width="1024" height="1024">
  <path fill="#BFBFBF" d="…"/>
</svg>
On the other hand, a map’s <area> coordinates are absolute to the top-left of an image, so <path> values need to be converted. Fortunately, Raphael Monnerat has written PathToPoints, a tool which does precisely that. Upload an SVG, choose the point frequency, copy the coordinates for each path, and add them to a map area’s coords:
<map>
  <area href="" shape="poly" coords="...">
  <area href="" shape="poly" coords="...">
  <area href="" shape="poly" coords="...">
  ...
</map>
More issues with image maps
Image maps are hard-coded and time-consuming to create without tools. Even with tools for generating image maps, converting paths to points, and then recalculating them using JavaScript, they could be challenging to maintain at scale.
<area> elements aren’t visible, and except for a change in the cursor, they provide no visual feedback when someone hovers over or presses a link. Plus, there’s no easy way to add animations or interaction effects.
But the deal-breaker for me was that an image map’s pixel-based values are unresponsive by default. So, what might be an alternative solution for implementing my map using CSS, HTML, and SVG?




Anchors positioned absolutely over my map wouldn’t solve the pixel-based positioning problem or give me the irregular-shaped clickable areas I wanted. Anchors within an external SVG wouldn’t work either.
But the solution was staring me in the face. I realized I needed to:
Create a new SVG path for each clickable area.
Make those paths invisible.
Wrap each path inside an anchor.
Place the anchors below other elements at the end of my SVG source.
Replace that external file with inline SVG.




I created a set of six much larger paths which define the clickable areas, each with its own fill to match its numbered circle. I placed each anchor at the end of my SVG source:
<svg … viewBox="0 0 1024 1024">

  
  <g>...</g>

  `
  <g id="links">`
    <a href="..."><path fill="#B48F4C" d="..."/></a>`
    <a href="..."><path fill="#6FA676" d="..."/></a>`
    <a href="..."><path fill="#30201D" d="..."/></a>`
    ...
  </g>
</svg>
Then, I reduced those anchors’ opacity to 0 and added a short transition to their full-opacity hover state:
#links a {
  opacity: 0;
  transition: all .25s ease-in-out;
}

#links a:hover {
  opacity: 1;
}
While using an image map’s <area> sadly provides no visual feedback, embedded anchors and their content can respond to someone’s action, hint at what’s to come, and add detail and depth to a design.




I might add gloss to those numbered circles to be consistent with the branding I’ve designed for Mike. Or, I could include images, titles, or other content to preview the pop-up modals:
<g id="links">
  <a href="…">
    <path fill="#B48F4C" d="..."/>
    <image href="..." ... />
  </a>
</g>
Try it for yourself:
CodePen Embed Fallback
Expressive design, modern techniques
Designing Mike Worth’s website gave me a chance to blend expressive design with modern development techniques, and revisiting image maps reminded me just how important a tool image maps were during the period Mike loves so much.
Ultimately, image maps weren’t the right tool for Mike’s website. But exploring them helped me understand what I really needed: a way to recapture the expressiveness and personality of ’90s website design using modern techniques that are accessible, lightweight, responsive, and semantic. That’s what design’s about: choosing the right tool for a job, even if that sometimes means looking back to move forward.
Biography: Andy Clarke
Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.
Andy’s written several industry-leading books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. He’s also worked with businesses of all sizes and industries to achieve their goals through design.
Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.
Revisiting Image Maps originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
Revisiting Image Maps originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Revisiting Image Maps

<p>Brad Frost is running this new little podcast called <em><a href="https://smashingconf.com/open-up" rel="noopener">Open Up</a></em>. Folks write in with questions about the &#8220;other&#8221; side of web design and front-end development — not so much about tools and best practices as it is about &#8230;</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/open-up-with-brad-frost-episode-2/">Open Up With Brad Frost, Episode 2</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>Brad Frost is running this new little podcast called <em><a href="https://smashingconf.com/open-up" rel="noopener">Open Up</a></em>. Folks write in with questions about the &#8220;other&#8221; side of web design and front-end development — not so much about tools and best practices as it is about the things that surround the work we do, like what happens if you get laid off, or AI takes your job, or something along those lines. You know, the <em>human</em> side of what we do in web design and development.</p>



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



<p>Well, it just so happens that I&#8217;m co-hosting the show. In other words, I get to sprinkle in a little advice on top of the wonderful insights that Brad expertly doles out to audience questions.</p>



<p>Our second episode just published, and I thought I&#8217;d share it. We&#8217;re finding our sea legs with this whole thing and figuring things out as we go. We&#8217;ve opened things up (get it?!) to a live audience and even pulled in one of Brad&#8217;s friends at the end to talk about the changing nature of working on a team and what it looks like to collaborate in a remote-first world.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=bquVF5Cibaw
</div></figure>



<p></p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/open-up-with-brad-frost-episode-2/">Open Up With Brad Frost, Episode 2</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>


Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the “other” side of web design and front-end development — not so much about tools and best practices as it is about the things that surround the work we do, like what happens if you get laid off, or AI takes your job, or something along those lines. You know, the human side of what we do in web design and development.




Well, it just so happens that I’m co-hosting the show. In other words, I get to sprinkle in a little advice on top of the wonderful insights that Brad expertly doles out to audience questions.
Our second episode just published, and I thought I’d share it. We’re finding our sea legs with this whole thing and figuring things out as we go. We’ve opened things up (get it?!) to a live audience and even pulled in one of Brad’s friends at the end to talk about the changing nature of working on a team and what it looks like to collaborate in a remote-first world.

https://www.youtube.com/watch?v=bquVF5Cibaw





Open Up With Brad Frost, Episode 2 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the “other” side of web design and front-end development — not so much about tools and best practices as it is about …
Open Up With Brad Frost, Episode 2 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Open Up With Brad Frost, Episode 2

<p>The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation. </p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/anchor-positioning-just-dont-care-about-source-order/">Anchor Positioning Just Don&#8217;t Care About Source Order</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>Ten divs walk into a bar:</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>1&lt;/div>
&lt;div>2&lt;/div>
&lt;div>3&lt;/div>
&lt;div>4&lt;/div>
&lt;div>5&lt;/div>
&lt;div>6&lt;/div>
&lt;div>7&lt;/div>
&lt;div>8&lt;/div>
&lt;div>9&lt;/div>
&lt;div>10&lt;/div></code></pre>



<p>There&#8217;s not enough chairs for them to all sit at the bar, so you need the tenth div to sit on the lap of one of the other divs, say the second one. We can visually cover the second div with the tenth div but have to make sure they are sitting next to each other in the HTML as well. The order matters.</p>



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



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>1&lt;/div>
&lt;div>2&lt;/div>
&lt;div>10&lt;/div>&lt;!-- Sitting next to Div #2-->
&lt;div>3&lt;/div>
&lt;div>4&lt;/div>
&lt;div>5&lt;/div>
&lt;div>6&lt;/div>
&lt;div>7&lt;/div>
&lt;div>8&lt;/div>
&lt;div>9&lt;/div></code></pre>



<p>The tenth div needs to sit on the second div&#8217;s lap rather than next to it. So, perhaps we redefine the relationship between them and make this a parent-child sorta thing.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>1&lt;/div>
&lt;div class="parent">
  2
  &lt;div class="child">10&lt;/div>&lt;!-- Sitting in Div #2's lap-->
&lt;/div>
&lt;div>3&lt;/div>
&lt;div>4&lt;/div>
&lt;div>5&lt;/div>
&lt;div>6&lt;/div>
&lt;div>7&lt;/div>
&lt;div>8&lt;/div>
&lt;div>9&lt;/div></code></pre>



<p>Now we can do a little tricky positioning dance to contain the tenth div inside the second div in the CSS:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent {
  position: relative; /* Contains Div #10 */
}

.child {
  position: absolute;
}</code></pre>



<p>We can inset the child&#8217;s position so it is pinned to the parent&#8217;s top-left edge:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="3,4"><code markup="tt">.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}</code></pre>



<p>And we can set the child&#8217;s width to 100% of the parent&#8217;s size so that it is fully covering the parent&#8217;s lap and completely obscuring it.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="5"><code markup="tt">.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
}</code></pre>



<p>Cool, it works!</p>



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



<p>Anchor positioning simplifies this process a heckuva lot because it just doesn&#8217;t care where the tenth div is in the HTML. Instead, we can work with our initial markup containing 10 in<em>div</em>iduals exactly as they entered the bar. You&#8217;re going to want to follow along in the latest version of Chrome since anchor positioning is only supported there by default at the time I&#8217;m writing this.</p>



<pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt">&lt;div>1&lt;/div>
&lt;div class="parent">2&lt;/div>
&lt;div>3&lt;/div>
&lt;div>4&lt;/div>
&lt;div>5&lt;/div>
&lt;div>6&lt;/div>
&lt;div>7&lt;/div>
&lt;div>8&lt;/div>
&lt;div>9&lt;/div>
&lt;div class="child">10&lt;/div></code></pre>



<p>Instead, we define the second div as an <strong>anchor</strong> element using the <code><a href="https://css-tricks.com/almanac/properties/a/anchor-name/">anchor-name</a></code> property. I&#8217;m going to continue using the <code>.parent</code> and <code>.child</code> classes to keep things clear.</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.parent {
  anchor-name: --anchor; /* this can be any name formatted as a dashed ident */
}</code></pre>



<p>Then we connect the child to the parent by way of the <code><a href="https://css-tricks.com/almanac/properties/p/position-anchor/">position-anchor</a></code> property:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">.child {
  position-anchor: --anchor; /* has to match the `anchor-name` */
}</code></pre>



<p>The last thing we have to do is position the child so that it covers the parent&#8217;s lap. We have the <code><a href="https://css-tricks.com/almanac/properties/p/position-area/">position-area</a></code> property that allows us to center the element over the parent:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="3"><code markup="tt">.child {
  position-anchor: --anchor;
  position-area: center;
}</code></pre>



<p>If we want to completely cover the parent&#8217;s lap, we can set the child&#8217;s size to match that of the parent using the <code><a href="https://css-tricks.com/almanac/functions/a/anchor-size/">anchor-size()</a></code> function:</p>



<pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line="4"><code markup="tt">.child {
  position-anchor: --anchor;
  position-area: center;
  width: anchor-size(width);
}</code></pre>



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



<p>No punchline — just one of the things that makes anchor positioning something I&#8217;m so excited about. The fact that it eschews HTML source order is so CSS-y because it&#8217;s another separation of concerns between content and presentation.</p>
<hr />
<p><small><a rel="nofollow" href="https://css-tricks.com/anchor-positioning-just-dont-care-about-source-order/">Anchor Positioning Just Don&#8217;t Care About Source Order</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>


Ten divs walk into a bar:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
There’s not enough chairs for them to all sit at the bar, so you need the tenth div to sit on the lap of one of the other divs, say the second one. We can visually cover the second div with the tenth div but have to make sure they are sitting next to each other in the HTML as well. The order matters.




<div>1</div>
<div>2</div>
<div>10</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
The tenth div needs to sit on the second div’s lap rather than next to it. So, perhaps we redefine the relationship between them and make this a parent-child sorta thing.
<div>1</div>
<div class="parent">
  2
  <div class="child">10</div>
</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
Now we can do a little tricky positioning dance to contain the tenth div inside the second div in the CSS:
.parent {
  position: relative; /* Contains Div #10 */
}

.child {
  position: absolute;
}
We can inset the child’s position so it is pinned to the parent’s top-left edge:
.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
And we can set the child’s width to 100% of the parent’s size so that it is fully covering the parent’s lap and completely obscuring it.
.child {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
}
Cool, it works!
CodePen Embed Fallback
Anchor positioning simplifies this process a heckuva lot because it just doesn’t care where the tenth div is in the HTML. Instead, we can work with our initial markup containing 10 individuals exactly as they entered the bar. You’re going to want to follow along in the latest version of Chrome since anchor positioning is only supported there by default at the time I’m writing this.
<div>1</div>
<div class="parent">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div class="child">10</div>
Instead, we define the second div as an anchor element using the anchor-name property. I’m going to continue using the .parent and .child classes to keep things clear.
.parent {
  anchor-name: --anchor; /* this can be any name formatted as a dashed ident */
}
Then we connect the child to the parent by way of the position-anchor property:
.child {
  position-anchor: --anchor; /* has to match the `anchor-name` */
}
The last thing we have to do is position the child so that it covers the parent’s lap. We have the position-area property that allows us to center the element over the parent:
.child {
  position-anchor: --anchor;
  position-area: center;
}
If we want to completely cover the parent’s lap, we can set the child’s size to match that of the parent using the anchor-size() function:
.child {
  position-anchor: --anchor;
  position-area: center;
  width: anchor-size(width);
}
CodePen Embed Fallback
No punchline — just one of the things that makes anchor positioning something I’m so excited about. The fact that it eschews HTML source order is so CSS-y because it’s another separation of concerns between content and presentation.
Anchor Positioning Just Don’t Care About Source Order originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation. 
Anchor Positioning Just Don’t Care About Source Order originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.