5 muutettua tiedostoa jossa 1436 lisäystä ja 0 poistoa
+ 312
- 0
cache/2024/a16101277229b3aeca8ac3249c84320c/index.html
Näytä tiedosto
| @@ -0,0 +1,312 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="en"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>An advanced way to use CSS variables (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://gomakethings.com/an-advanced-way-to-use-css-variables/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>An advanced way to use CSS variables</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" title="Lien vers le contenu original">Source originale</a> | |||
| <br> | |||
| Mis en cache le 2024-04-08 | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>Let’s dig in!</p> | |||
| <h2 id="globals-for-system-or-theme-defaults">Globals for system or theme defaults</h2> | |||
| <p>I like to scope design system or theme defaults to the <code>:root</code> element. This makes them accessible to every element and class in the design system.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span> | |||
| <span class="c">/_ Colors _/</span> | |||
| <span class="nv">--color-primary</span><span class="p">:</span> <span class="mh">#0088cc</span><span class="p">;</span> | |||
| <span class="nv">--color-secondary</span><span class="p">:</span> <span class="kc">rebeccapurple</span><span class="p">;</span> | |||
| <span class="nv">--color-black</span><span class="p">:</span> <span class="mh">#272727</span><span class="p">;</span> | |||
| <span class="nv">--color-white</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> | |||
| <span class="c">/_ Sizes _/</span> | |||
| <span class="nv">--size-default</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--size-small</span><span class="p">:</span> <span class="mf">0.875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--size-large</span><span class="p">:</span> <span class="mf">1.25</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="c">/_ Typefaces _/</span> | |||
| <span class="nv">--font-sans</span><span class="p">:</span> <span class="s2">"PT Sans"</span><span class="p">,</span> <span class="n">sans</span><span class="p">;</span> | |||
| <span class="nv">--font-serif</span><span class="p">:</span> <span class="s2">"PT Serif"</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span> | |||
| <span class="nv">--font-mono</span><span class="p">:</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="s2">"Courier New"</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>I typically have variables for <code>--color-*</code>, <code>--size-*</code>, and <code>--font-*</code>, as well as ones to define the max width of containers and how much <code>--spacing</code> to use between paragraphs and various elements.</p> | |||
| <h2 id="styling-elements">Styling elements</h2> | |||
| <p>Let’s look at styles for a <code>button</code> element.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border</span><span class="p">:</span> <span class="mf">0.125</span><span class="kt">rem</span> <span class="kc">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border-radius</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">em</span><span class="p">;</span> | |||
| <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="kc">white</span><span class="p">);</span> | |||
| <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="o">-</span><span class="kc">block</span><span class="p">;</span> | |||
| <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">default</span><span class="p">);</span> | |||
| <span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span> | |||
| <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.2</span><span class="p">;</span> | |||
| <span class="k">padding</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span> <span class="mf">0.6875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nt">button</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>Let’s say we want to add a secondary button style: the <code>.btn-secondary</code> class.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span><span class="p">></span>Primary Button<span class="p"></</span><span class="nt">button</span><span class="p">></span> | |||
| <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-secondary"</span><span class="p">></span>Secondary Button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div> | |||
| <p>Using only globals, we might write the CSS like this.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-secondary</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-secondary</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>It totally works, and we can easily update our global colors later and have them automatically update the button styles.</p> | |||
| <p>But there’s another way we could approach this that I think works a <em>little</em> bit better.</p> | |||
| <h2 id="css-variables-scoped-to-the-element">CSS variables scoped to the element</h2> | |||
| <p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for <a href="https://gomakethings.com/hug-css-how-i-approach-css-architecture/">styles that change with utility classes</a> to the element itself.</p> | |||
| <p>CSS variables scoped to an element can use other CSS variables as their value. But scoping them to the element provides an easy way to modify them.</p> | |||
| <p>Looking at our <code>button</code> again, I’ll often do something like this…</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="nv">--color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="kc">white</span><span class="p">);</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">default</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.6875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bg</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">border</span><span class="p">:</span> <span class="mf">0.125</span><span class="kt">rem</span> <span class="kc">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bg</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">border-radius</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">em</span><span class="p">;</span> | |||
| <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="o">-</span><span class="kc">block</span><span class="p">;</span> | |||
| <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">size</span><span class="p">);</span> | |||
| <span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span> | |||
| <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.2</span><span class="p">;</span> | |||
| <span class="k">padding</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">padding</span><span class="o">-</span><span class="n">y</span><span class="p">)</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">padding</span><span class="o">-</span><span class="n">x</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>Now, to change the <code>button:hover</code> style, I only need to update the <code>--bg-color</code> variable, which controls both the <code>background-color</code> and <code>border-color</code> properties.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p><a href="https://codepen.io/cferdinandi/pen/gOyovdE">Here’s a demo.</a></p> | |||
| <h2 id="a-growing-system">A growing system</h2> | |||
| <p>This approach is a little bit more work up-front, but it has bigger payoffs the more you use it.</p> | |||
| <p>For example, our <code>.btn-secondary</code> class gets shorter.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-secondary</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-secondary</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>With every utility class you add to modify your base styles, using element-scoped CSS variables makes things a bit easier.</p> | |||
| <p>For example, we can add <code>.btn-large</code> and <code>.btn-small</code> classes by doing this…</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-large</span> <span class="p">{</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">large</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.75</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-small</span> <span class="p">{</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">small</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p><a href="https://codepen.io/cferdinandi/pen/vYMpdVV">Here’s another demo.</a></p> | |||
| <h2 id="should-you-always-do-this">Should you always do this?</h2> | |||
| <p>Nope! It’s a lot more work, and sometimes results in code that’s a bit less readable at first glance.</p> | |||
| <p>It’s a good approach to use…</p> | |||
| <ul> | |||
| <li>For properties that will change through modifier or utility classes.</li> | |||
| <li>For design systems where end-users will need to easily override certain styles in ways you can’t predict.</li> | |||
| </ul> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 145
- 0
cache/2024/a16101277229b3aeca8ac3249c84320c/index.md
Näytä tiedosto
| @@ -0,0 +1,145 @@ | |||
| title: An advanced way to use CSS variables | |||
| url: https://gomakethings.com/an-advanced-way-to-use-css-variables/ | |||
| hash_url: a16101277229b3aeca8ac3249c84320c | |||
| archive_date: 2024-04-08 | |||
| og_image: https://gomakethings.com/img/og.png | |||
| description: Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. | |||
| favicon: https://gomakethings.com/img/favicon.ico | |||
| language: en_US | |||
| <p>Let’s dig in!</p> | |||
| <h2 id="globals-for-system-or-theme-defaults">Globals for system or theme defaults</h2> | |||
| <p>I like to scope design system or theme defaults to the <code>:root</code> element. This makes them accessible to every element and class in the design system.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span> | |||
| <span class="c">/_ Colors _/</span> | |||
| <span class="nv">--color-primary</span><span class="p">:</span> <span class="mh">#0088cc</span><span class="p">;</span> | |||
| <span class="nv">--color-secondary</span><span class="p">:</span> <span class="kc">rebeccapurple</span><span class="p">;</span> | |||
| <span class="nv">--color-black</span><span class="p">:</span> <span class="mh">#272727</span><span class="p">;</span> | |||
| <span class="nv">--color-white</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span> | |||
| <span class="c">/_ Sizes _/</span> | |||
| <span class="nv">--size-default</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--size-small</span><span class="p">:</span> <span class="mf">0.875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--size-large</span><span class="p">:</span> <span class="mf">1.25</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="c">/_ Typefaces _/</span> | |||
| <span class="nv">--font-sans</span><span class="p">:</span> <span class="s2">"PT Sans"</span><span class="p">,</span> <span class="n">sans</span><span class="p">;</span> | |||
| <span class="nv">--font-serif</span><span class="p">:</span> <span class="s2">"PT Serif"</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span> | |||
| <span class="nv">--font-mono</span><span class="p">:</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="s2">"Courier New"</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>I typically have variables for <code>--color-*</code>, <code>--size-*</code>, and <code>--font-*</code>, as well as ones to define the max width of containers and how much <code>--spacing</code> to use between paragraphs and various elements.</p> | |||
| <h2 id="styling-elements">Styling elements</h2> | |||
| <p>Let’s look at styles for a <code>button</code> element.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border</span><span class="p">:</span> <span class="mf">0.125</span><span class="kt">rem</span> <span class="kc">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border-radius</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">em</span><span class="p">;</span> | |||
| <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="kc">white</span><span class="p">);</span> | |||
| <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="o">-</span><span class="kc">block</span><span class="p">;</span> | |||
| <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">default</span><span class="p">);</span> | |||
| <span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span> | |||
| <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.2</span><span class="p">;</span> | |||
| <span class="k">padding</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span> <span class="mf">0.6875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nt">button</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>Let’s say we want to add a secondary button style: the <code>.btn-secondary</code> class.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">button</span><span class="p">></span>Primary Button<span class="p"></</span><span class="nt">button</span><span class="p">></span> | |||
| <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn-secondary"</span><span class="p">></span>Secondary Button<span class="p"></</span><span class="nt">button</span><span class="p">></span></code></pre></div> | |||
| <p>Using only globals, we might write the CSS like this.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-secondary</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-secondary</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="k">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>It totally works, and we can easily update our global colors later and have them automatically update the button styles.</p> | |||
| <p>But there’s another way we could approach this that I think works a <em>little</em> bit better.</p> | |||
| <h2 id="css-variables-scoped-to-the-element">CSS variables scoped to the element</h2> | |||
| <p>While global variables scoped to the <code>:root</code> let me define system-wide defaults, I also like to scope variables for <a href="https://gomakethings.com/hug-css-how-i-approach-css-architecture/">styles that change with utility classes</a> to the element itself.</p> | |||
| <p>CSS variables scoped to an element can use other CSS variables as their value. But scoping them to the element provides an easy way to modify them.</p> | |||
| <p>Looking at our <code>button</code> again, I’ll often do something like this…</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="nv">--color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="kc">white</span><span class="p">);</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">default</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.6875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bg</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">border</span><span class="p">:</span> <span class="mf">0.125</span><span class="kt">rem</span> <span class="kc">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bg</span><span class="o">-</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">border-radius</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">em</span><span class="p">;</span> | |||
| <span class="k">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="p">);</span> | |||
| <span class="k">display</span><span class="p">:</span> <span class="kc">inline</span><span class="o">-</span><span class="kc">block</span><span class="p">;</span> | |||
| <span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">size</span><span class="p">);</span> | |||
| <span class="k">font-weight</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span> | |||
| <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.2</span><span class="p">;</span> | |||
| <span class="k">padding</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">padding</span><span class="o">-</span><span class="n">y</span><span class="p">)</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">padding</span><span class="o">-</span><span class="n">x</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>Now, to change the <code>button:hover</code> style, I only need to update the <code>--bg-color</code> variable, which controls both the <code>background-color</code> and <code>border-color</code> properties.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">button</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p><a href="https://codepen.io/cferdinandi/pen/gOyovdE">Here’s a demo.</a></p> | |||
| <h2 id="a-growing-system">A growing system</h2> | |||
| <p>This approach is a little bit more work up-front, but it has bigger payoffs the more you use it.</p> | |||
| <p>For example, our <code>.btn-secondary</code> class gets shorter.</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-secondary</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">secondary</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-secondary</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> | |||
| <span class="nv">--bg-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="kc">color</span><span class="o">-</span><span class="n">primary</span><span class="p">);</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p>With every utility class you add to modify your base styles, using element-scoped CSS variables makes things a bit easier.</p> | |||
| <p>For example, we can add <code>.btn-large</code> and <code>.btn-small</code> classes by doing this…</p> | |||
| <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">btn-large</span> <span class="p">{</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">large</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.875</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.75</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="p">.</span><span class="nc">btn-small</span> <span class="p">{</span> | |||
| <span class="nv">--size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="kc">small</span><span class="p">);</span> | |||
| <span class="nv">--padding-x</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="nv">--padding-y</span><span class="p">:</span> <span class="mf">0.25</span><span class="kt">rem</span><span class="p">;</span> | |||
| <span class="p">}</span></code></pre></div> | |||
| <p><a href="https://codepen.io/cferdinandi/pen/vYMpdVV">Here’s another demo.</a></p> | |||
| <h2 id="should-you-always-do-this">Should you always do this?</h2> | |||
| <p>Nope! It’s a lot more work, and sometimes results in code that’s a bit less readable at first glance.</p> | |||
| <p>It’s a good approach to use…</p> | |||
| <ul> | |||
| <li>For properties that will change through modifier or utility classes.</li> | |||
| <li>For design systems where end-users will need to easily override certain styles in ways you can’t predict.</li> | |||
| </ul> | |||
+ 571
- 0
cache/2024/d90fde4ef3c84ad3d765dda386a97562/index.html
Näytä tiedosto
| @@ -0,0 +1,571 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="en"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Modern CSS patterns in Campfire (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <h1>Modern CSS patterns in Campfire</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" title="Lien vers le contenu original">Source originale</a> | |||
| <br> | |||
| Mis en cache le 2024-04-08 | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>Recently, customers who have purchased a copy of <a href="https://once.com/campfire">ONCE/Campfire</a> were invited to participate in a live walk through the app’s CSS code. Campfire was built with vanilla CSS, fully <a href="https://world.hey.com/dhh/once-1-is-entirely-nobuild-for-the-front-end-ce56f6d7">#nobuild</a> without compiling or preprocessors, and uses the latest <a href="https://web.dev">web platform</a> features available in evergreen browsers—<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS%5Fnesting">CSS nesting</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">:has()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is">:is()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where">:where()</a>; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color%5Fvalue/oklch">wide-gamut colors</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/View%5FTransitions%5FAPI">View Transitions</a> and more.</p> | |||
| <p>In this post we’ll take a look at how we’re using some of these features and share some helpful patterns discovered along the way.</p> | |||
| <hr> | |||
| <h2 id="colors">Colors</h2> | |||
| <p>Campfire uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color%5Fvalue/oklch">oklch()</a> to define colors in CSS. <code class="language-plaintext highlighter-rouge">oklch()</code> offers access to wider color spaces (like <a href="https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/">Display-P3</a>) and greatly improves developer ergonomics when working with colors. For example, let’s take a look at these greys used in Campfire’s UI.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span> | |||
| <span class="py">--lch-gray</span><span class="p">:</span> <span class="m">96%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="py">--lch-gray-dark</span><span class="p">:</span> <span class="m">92%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="py">--lch-gray-darker</span><span class="p">:</span> <span class="m">75%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>At first glance they may seem unfamiliar but they’re actually more readable and quite easy to use once you get acquainted.</p> | |||
| <p>LCH stands for:</p> | |||
| <ul> | |||
| <li><strong>Lightness:</strong> perceptual lightness ranging from 0%—100%;</li> | |||
| <li><strong>Chroma:</strong> the amount of color from pure grey to full saturation, 0–0.5;</li> | |||
| <li><strong>Hue:</strong> the color’s angle on the color wheel, 0–360deg.</li> | |||
| </ul> | |||
| <p>With that in mind, we can read the colors without much effort. We can see that they all share the same hue and chroma, only the lightness differs. It’s apparent just from reading the code that <code class="language-plaintext highlighter-rouge">--lch-gray</code> and <code class="language-plaintext highlighter-rouge">--lch-gray-dark</code> are relatively close in lightness, but <code class="language-plaintext highlighter-rouge">--lch-gray-darker</code> is significantly darker. It’s also simple to adjust them programmatically or manually tweak them without using a color picker and without inadvertently shifting the hue. If you’ve ever tried to do that with RGB colors you know how tricky that can be.</p> | |||
| <p>We started by defining the pure color values above but we wrap them in the <code class="language-plaintext highlighter-rouge">oklch()</code> color function and define a set of abstract custom properties that consume the values for use in our other stylesheets.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-border</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray</span><span class="o">));</span> | |||
| <span class="nt">--color-border-dark</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray-dark</span><span class="o">));</span> | |||
| <span class="nt">--color-border-darker</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray-darker</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>Sure, you might be thinking, grey is easy but what about other colors? Here’s a set based on blue for links and selections.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--lch-blue</span><span class="o">:</span> <span class="err">54</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">23</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--lch-blue-light</span><span class="o">:</span> <span class="err">95</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">03</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--lch-blue-dark</span><span class="o">:</span> <span class="err">80</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">08</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--color-link</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue</span><span class="o">));</span> | |||
| <span class="nt">--color-selected</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue-light</span><span class="o">));</span> | |||
| <span class="nt">--color-selected-dark</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue-dark</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>A quick read of these values reveals that all three are in the same color family, indicated by the same hue angle (255º). Further we can observe that links are medium lightness and saturation. The light variant has a much higher lightness value and much lower saturation making it more grey, while the dark variant is not quite as light or desaturated. We generally use the darker variants for borders around the lighter values.</p> | |||
| <p>And even better, <code class="language-plaintext highlighter-rouge">oklch()</code> makes it trivial to add variants that use alpha transparency, too.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-link-50</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue</span><span class="o">)</span> <span class="o">/</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="o">);</span> | |||
| </code></pre></div></div> | |||
| <hr> | |||
| <h2 id="custom-properties">Custom Properties</h2> | |||
| <p>Variables in CSS are certainly not new but we’ve developed some general usage patterns that make working with them a pleasure. Let’s look at some styles from Campfire’s <code class="language-plaintext highlighter-rouge">buttons.css</code> to demonstrate.</p> | |||
| <h3 id="declared-vs-fallback-values">Declared vs. Fallback values</h3> | |||
| <p>Often when using custom properties in the past, we’d set something up like this in which you declare all the custom properties at the top of the rule (or in <code class="language-plaintext highlighter-rouge">:root</code>) and then use them immediately below. Something like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">);</span> | |||
| <span class="py">--btn-border-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-border</span><span class="p">);</span> | |||
| <span class="py">--btn-border-radius</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> | |||
| <span class="py">--btn-border-size</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> | |||
| <span class="py">--btn-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span> | |||
| <span class="py">--btn-padding</span><span class="p">:</span> <span class="m">0.5em</span> <span class="m">1.1em</span><span class="p">;</span> | |||
| <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-background</span><span class="p">);</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-radius</span><span class="p">);</span> | |||
| <span class="nl">border</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-size</span><span class="p">)</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-color</span><span class="p">);</span> | |||
| <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-color</span><span class="p">);</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">inline-flex</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span> | |||
| <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-padding</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>And that works fine but it feels like a lot of boilerplate and it’s a little defensive in that you may never use those variables again. That’s where fallback values come in handy. Instead of a litany of properties at the top of the rule, we can set the default values inline but expose a custom property that will accept another value when present. It looks like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--btn-color</span><span class="o">,</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--color-text</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>Here <code class="language-plaintext highlighter-rouge">--btn-color</code> is optional. If it’s set, the rule will use that value; if not, it will fall back to <code class="language-plaintext highlighter-rouge">--color-text</code>. The fallback value can be a straight value or another variable. Now we can re-write the rule above like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-background</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">));</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-radius</span><span class="p">);</span> | |||
| <span class="nl">border</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-size</span><span class="p">,</span> <span class="m">2em</span><span class="p">)</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-color</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-border</span><span class="p">));</span> | |||
| <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-color</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">));</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">inline-flex</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span> | |||
| <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-padding</span><span class="p">,</span> <span class="m">0.5em</span> <span class="m">1.1em</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This is tighter and all the default values plus exposed variables are together, inline.</p> | |||
| <p>But how do we decide where to use custom properties? There are really two cases: 1) whenever we need to use the same value in more than one place (<a href="https://en.wikipedia.org/wiki/Don%27t%5Frepeat%5Fyourself">DRY</a>) and 2) when we know a value is going to be changed.</p> | |||
| <p>A good example of the first case is the <code class="language-plaintext highlighter-rouge">--btn-size</code> variable. Almost all of Campfire’s buttons are circles with an icon inside. To make sure they line up nicely with input fields we set their <code class="language-plaintext highlighter-rouge">block-size</code> using this variable.</p> | |||
| <p>Because that size is exposed at the<code class="language-plaintext highlighter-rouge"> :root</code> level we can use it for buttons and input elements. And even better, we can use that value to calculate the height of the chat footer in our layout. No <a href="https://en.wikipedia.org/wiki/Magic%5Fnumber%5F%28programming%29">magic numbers</a> in sight!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span> | |||
| <span class="py">--btn-size</span><span class="p">:</span> <span class="m">2.65em</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nt">body</span> <span class="p">{</span> | |||
| <span class="py">--footer-height</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="n">var</span><span class="p">(</span><span class="n">--block-space</span><span class="p">))</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">)</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--block-space</span><span class="p">));</span> | |||
| <span class="py">grid-template-rows</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span> <span class="n">var</span><span class="p">(</span><span class="n">--footer-height</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>The footer’s height consists of the button’s height plus padding above and below using the global <code class="language-plaintext highlighter-rouge">--block-space</code> variable.</p> | |||
| <p>The other case for custom properties is when we know that we’ll want to change some values to create variants of an element. We think of it like a mini API for our CSS classes. Going back to our button class, we can declare variants simply by changing the value of custom properties instead of redefining a property.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Variants */</span> | |||
| <span class="nc">.btn--reversed</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--negative</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-negative</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nd">:is</span><span class="o">(</span><span class="nc">.btn--reversed</span><span class="o">,</span> <span class="nc">.btn--negative</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="py">--btn-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--borderless</span> <span class="p">{</span> | |||
| <span class="py">--btn-border-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--success</span> <span class="p">{</span> | |||
| <span class="nl">animation</span><span class="p">:</span> <span class="n">success</span> <span class="m">1s</span> <span class="n">ease-out</span><span class="p">;</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">animation</span><span class="p">:</span> <span class="n">zoom-fade</span> <span class="m">300ms</span> <span class="n">ease-out</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>This makes it very clear what’s changed by these variants. Even better, as in the case of <code class="language-plaintext highlighter-rouge">.btn--success</code>, it makes on obvious distinction between changing a default property value and adding a new property (the <code class="language-plaintext highlighter-rouge">animation</code> property in this case).</p> | |||
| <hr> | |||
| <h2 id="css-has">CSS :has()</h2> | |||
| <p>We started using <code class="language-plaintext highlighter-rouge">:has()</code> in the early stages of Campfire’s development because it offers a number of conveniences and opportunities to do with CSS what we previously had to do in server side code. We were so bullish on <code class="language-plaintext highlighter-rouge">:has()</code> that we literally shipped the first beta version of Campfire a week before Firefox shipped its release with support for <code class="language-plaintext highlighter-rouge">:has()</code>—the last of the major browsers to do so.</p> | |||
| <p>You can think of <code class="language-plaintext highlighter-rouge">:has()</code> as a way to query an element about what’s inside it.</p> | |||
| <p>This makes our button class very flexible. You can throw about any combination of things inside it, and it will adjust accordingly. Text only, image and text, image only, inputs (like radio buttons), or multiple images with text.</p> | |||
| <p>For example, when our <code class="language-plaintext highlighter-rouge">.btn</code> class finds an image inside of it (that’s not an avatar photo), it can apply sizing and make sure it gets inverted in dark mode—without needing any kind of special classes.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="err">...</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">-webkit-touch-callout</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> | |||
| <span class="py">user-select</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(</span><span class="nt">img</span><span class="o">)</span><span class="nd">:not</span><span class="o">(</span><span class="nc">.avatar</span><span class="o">))</span> <span class="p">{</span> | |||
| <span class="nl">text-align</span><span class="p">:</span> <span class="n">start</span><span class="p">;</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="m">1.3em</span><span class="p">;</span> | |||
| <span class="py">max-inline-size</span><span class="p">:</span> <span class="n">unset</span><span class="p">;</span> | |||
| <span class="err">@media</span> <span class="err">(</span><span class="py">prefers-color-scheme</span><span class="p">:</span> <span class="n">dark</span><span class="p">)</span> <span class="err">{</span> | |||
| <span class="n">filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">100%</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Most of the buttons in Campfire contain an icon image plus a hidden text element for screen readers.</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">button</span> <span class="ss">class: </span><span class="s2">"btn btn--reversed center"</span><span class="p">,</span> <span class="ss">type: </span><span class="s2">"submit"</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="cp"><%=</span> <span class="n">image_tag</span> <span class="s2">"check.svg"</span><span class="p">,</span> <span class="ss">aria: </span><span class="p">{</span> <span class="ss">hidden: </span><span class="s2">"true"</span> <span class="p">},</span> <span class="ss">size: </span><span class="mi">20</span> <span class="cp">%></span> | |||
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"for-screen-reader"</span><span class="nt">></span>Save changes<span class="nt"></span></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| </code></pre></div></div> | |||
| <p>With <code class="language-plaintext highlighter-rouge">:has()</code> our button class can know if these elements are present and turn it into a circle icon button with the image centered inside it. <em>Notice that we’re using our <code class="language-plaintext highlighter-rouge">--btn-size</code> variable from earlier.</em></p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.for-screen-reader</span><span class="o">)</span><span class="nd">:has</span><span class="o">(</span><span class="nt">img</span><span class="o">))</span> <span class="p">{</span> | |||
| <span class="py">--btn-border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> | |||
| <span class="py">--btn-padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> | |||
| <span class="py">aspect-ratio</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">);</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">);</span> | |||
| <span class="py">place-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="err">></span> <span class="err">\*</span> <span class="err">{</span> | |||
| <span class="py">grid-area</span><span class="p">:</span> <span class="m">1</span><span class="p">/</span><span class="m">1</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Just dump whatever you want into <code class="language-plaintext highlighter-rouge">.btn</code> and it’ll take care of the rest.</p> | |||
| <p>That’s really satisfying to use as a developer but you could do this without a lot of extra effort using utility classes like <code class="language-plaintext highlighter-rouge">.btn--circle-icon</code> or <code class="language-plaintext highlighter-rouge">.btn--icon-and-text</code>. What really opened our eyes was when we were able to replace Ruby on Rails code with just CSS.</p> | |||
| <p>Take, for example, the menu button that toggles the sidebar when using Campfire with a narrow viewport.</p> | |||
| <p>Because the sidebar (which lists all of your chat rooms) is hidden when closed we wanted to display a small dot on the menu button to indicate that you have rooms with new, unread messages in them. Normally we’d have to write some Ruby on Rails code to handle that condition something like this:</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><%</span> <span class="k">if</span> <span class="vi">@room</span><span class="p">.</span><span class="nf">memberships</span><span class="p">.</span><span class="nf">unread</span><span class="p">.</span><span class="nf">any?</span> <span class="cp">%></span> | |||
| // render the dot | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| </code></pre></div></div> | |||
| <p>But with <code class="language-plaintext highlighter-rouge">:has()</code> we can do it with pure CSS alone!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">#sidebar</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:not</span><span class="o">([</span><span class="nt">open</span><span class="o">])</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.unread</span><span class="o">))</span> <span class="o">&</span> <span class="p">{</span> | |||
| <span class="err">&::after</span> <span class="err">{</span> | |||
| <span class="py">--size</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> | |||
| <span class="py">aspect-ratio</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-negative</span><span class="p">);</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">);</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="err">*</span> <span class="m">2</span><span class="p">);</span> | |||
| <span class="nl">content</span><span class="p">:</span> <span class="s1">""</span><span class="p">;</span> | |||
| <span class="nl">flex-shrink</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">);</span> | |||
| <span class="py">inset-block-start</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="p">/</span> <span class="m">-4</span><span class="p">);</span> | |||
| <span class="py">inset-inline-end</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="p">/</span> <span class="m">-4</span><span class="p">);</span> | |||
| <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Here the we’re querying the sidebar element to 1) make sure it isn’t open (because you don’t need to see the dot if you’re already looking at the rooms list) and 2) to see if it has any elements inside it that have the <code class="language-plaintext highlighter-rouge">.unread</code> class. If those are true, draw the dot and position it. Notice that we’re using a custom property (<code class="language-plaintext highlighter-rouge">--size</code>) here for both the dimensions of the dot and to calculate its border radius and position. It’s harmonious and avoids magic numbers.</p> | |||
| <p>Elsewhere, on Campfire’s account profile screen we used <code class="language-plaintext highlighter-rouge">:has()</code> to solve a problem that was nearly impossible to do even with server side code. The screen features a list of all the chat rooms you’re in and a button to toggle the state of each room. If you’ve made the room invisible in your sidebar we also wanted to be able to grey out the row to visually reinforce this critical status.</p> | |||
| <p>The problem is that toggle button is a completely separate element using a different controller, rendered in a <a href="https://turbo.hotwired.dev/handbook/frames">Turbo Frame</a>. It’s the same toggle we show in the room, itself. That means the code that renders the row has no idea what status of the button is, nor does it know when the status changes.</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><li</span> <span class="na">class=</span><span class="s">"flex align-center gap margin-none min-width membership-item"</span><span class="nt">></span> | |||
| <span class="cp"><%=</span> <span class="n">link_to</span> <span class="n">room_path</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">),</span> <span class="ss">class: </span><span class="s2">"overflow-ellipsis fill-shade txt-primary txt-undecorated"</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="nt"><strong></span><span class="cp"><%=</span> <span class="n">room_display_name</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">)</span> <span class="cp">%></span><span class="nt"></strong></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| <span class="nt"><hr</span> <span class="na">class=</span><span class="s">"separator"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> | |||
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"txt-small"</span><span class="nt">></span> | |||
| <span class="cp"><%=</span> <span class="n">turbo_frame_tag</span> <span class="n">dom_id</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">,</span> <span class="ss">:involvement</span><span class="p">)</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="cp"><%=</span> <span class="n">button_to_change_involvement</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">,</span> <span class="n">membership</span><span class="p">.</span><span class="nf">involvement</span><span class="p">)</span> <span class="cp">%></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| <span class="nt"></span></span> | |||
| <span class="nt"></li></span> | |||
| </code></pre></div></div> | |||
| <p>Now we could, of course, use Javascript to get the state, observe changes, and update the view. Or we could re-write this code to re-render the entire row when the notification state changes, but then we’d be writing a duplicate toggle that is only slightly different than the one used elsewhere.</p> | |||
| <p>A third option is to write a single CSS rule!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.membership-item</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.btn.invisible</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.5</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>If the row has a button in toggled to the <code class="language-plaintext highlighter-rouge">.invisible</code> class, dim it.</p> | |||
| <p>Advances in CSS have been slowing replacing Javascript code over the last few years, now it’s coming for server side code!</p> | |||
| <h3 id="one-more">One more?</h3> | |||
| <p>Campfire’s direct message feature, which we call Pings, displays all of your active conversations across the top of the sidebar. Depending on how many people are involved, Campfire displays one, two, three, or four avatars to represent the chat.</p> | |||
| <p>Normally our view template would need to count the number of participants and conditionally apply a class to the element so the CSS knows how to render each layout group. But with <code class="language-plaintext highlighter-rouge">:has()</code> we can effectively count the number of elements and adjust the display accordingly.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Four avatars */</span> | |||
| <span class="nc">.avatar__group</span> <span class="p">{</span> | |||
| <span class="py">--avatar-size</span><span class="p">:</span> <span class="m">2.5ch</span><span class="p">;</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="m">5ch</span><span class="p">;</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> | |||
| <span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span> | |||
| <span class="py">grid-template-rows</span><span class="p">:</span> <span class="n">min-content</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="m">5ch</span><span class="p">;</span> | |||
| <span class="py">place-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="err">.avatar</span> <span class="err">{</span> | |||
| <span class="nl">margin</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="c">/_ Two avatars _/</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(></span> <span class="nd">:last-child:nth-child</span><span class="o">(</span><span class="err">2</span><span class="o">)))</span> <span class="p">{</span> | |||
| <span class="py">--avatar-size</span><span class="p">:</span> <span class="m">3.5ch</span><span class="p">;</span> | |||
| <span class="err">></span> <span class="err">:first-child</span> <span class="err">{</span> | |||
| <span class="py">margin-block-end</span><span class="p">:</span> <span class="m">1.5ch</span><span class="p">;</span> | |||
| <span class="py">margin-inline-end</span><span class="p">:</span> <span class="m">-0.75ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="o">></span> <span class="nd">:last-child</span> <span class="p">{</span> | |||
| <span class="py">margin-block-start</span><span class="p">:</span> <span class="m">1.5ch</span><span class="p">;</span> | |||
| <span class="py">margin-inline-start</span><span class="p">:</span> <span class="m">-0.75ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="c">/_ Three avatars _/</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(></span> <span class="nd">:last-child:nth-child</span><span class="o">(</span><span class="err">3</span><span class="o">)))</span> <span class="p">{</span> | |||
| <span class="err">></span> <span class="err">:last-child</span> <span class="err">{</span> | |||
| <span class="py">margin-inline</span><span class="p">:</span> <span class="m">1.25ch</span> <span class="m">-1.25ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Magic 🪄</p> | |||
| <hr> | |||
| <h2 id="responsive-design">Responsive design</h2> | |||
| <p>In this last section, we’ll take a look at Campfire’s approach to responsive design. The first thing to know is that Campfire has zero/none/nada viewport based <code class="language-plaintext highlighter-rouge">@media</code> queries. There are no attempts to assert that <em>viewports narrower than x are mobile devices</em>. Campfire’s layout fully adapts to whichever device you’re using in whichever configuration or orientation, without attempting to declare any state as “mobile”. Here’s how.</p> | |||
| <h3 id="layout">Layout</h3> | |||
| <p>Campfire has a single <code class="language-plaintext highlighter-rouge">@media</code> breakpoint—one value, used in a number of places.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">100ch</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="o">...</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This breakpoint largely determines how the CSS grid layout must adjust when the viewport is too narrow to display the sidebar alongside the chat transcript. When the document is narrower than 100 characters, it’s not practical to render them side-by-side, so instead Campfire hides the sidebar and reveals a menu button to toggle it.</p> | |||
| <p>Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point. Type is the heart of web pages so it makes sense for the layout to respond to it.</p> | |||
| <h3 id="feature-enhancements">Feature enhancements</h3> | |||
| <p>The other place we use media queries is to respond to the kind of input device the user has. It’s never been fair to assume a device with a narrow viewport has a touch screen, nor that a device with an enormous viewport does not. This blurry line is not getting clearer. But thanks to <code class="language-plaintext highlighter-rouge">@media</code> queries we can actually get useful information about a device’s capabilities. First up, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover">any-hover</a>.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="n">hover</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:not</span><span class="o">(</span><span class="nd">:active</span><span class="o">)</span><span class="nd">:hover</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="c">/* hover effect */</span> | |||
| <span class="p">}</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This queries the user’s device to see if it has any input mechanism that is capable of hovering (probably a mouse). It won’t match on touch screen devices and will opt out of Mobile Safari’s annoying behavior that makes you double-tap things that have a hover effect. Not bad.</p> | |||
| <p>But let’s look at something a little more impressive. Every message line in a Campfire chat has a <strong>•••</strong> button that reveals a menu of extra actions (<em>edit, Boost, copy, share</em>) that you can do.</p> | |||
| <p>On devices with a mouse or trackpad the ideal is to only reveal the menu when you hover over the message but that would make it inaccessible on touch devices. No problem. We can use <code class="language-plaintext highlighter-rouge">any-hover</code> along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer">pointer</a> query to get the behavior we want on each kind of device.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="n">hover</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="nb">pointer</span><span class="p">:</span> <span class="n">fine</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="c">/* Reveal the button only on hover */</span> | |||
| <span class="p">}</span> | |||
| <span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="nb">none</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="nb">pointer</span><span class="p">:</span> <span class="n">coarse</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="c">/_ Show the button all the time _/</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This is especially magical with a device like the iPad Pro. Which can match both queries under certain conditions, and change on-the-fly. When it’s docked on the <a href="https://www.apple.com/ipad-keyboards/">Magic Keyboard</a> with built-in trackpad, it matches the first query and the <strong>•••</strong> buttons are hidden until you hover. Lift it off the Magic Keyboard and it becomes a purely touch device—the <strong>•••</strong> buttons magically appear. It’s very cool.</p> | |||
| <hr> | |||
| <h2 id="whats-next">What’s next?</h2> | |||
| <p>Campfire 1.0 shipped in January 2024 and by March we had already started to work on the next ONCE product. While Campfire supported bleeding edge features when was released the <a href="https://web.dev/blog/web-platform-03-2024/">web platform is rapidly changing</a> and we’re already exploring new features that have gained browser support since then. It’s a fantastic time to be working on the web.</p> | |||
| <p>If you haven’t tried Campfire yet, it’s available now at <a href="https://once.com">once.com</a>, the first of a family of products that you buy once, own forever (including source code), and can do what you want with.</p> | |||
| <hr> | |||
| <h2 id="questions">Questions?</h2> | |||
| <p>Have a question, comment or idea? Want to see more posts like this? Get in touch at <a href="mailto:jz@37signals.com">jz@37signals.com</a> or <a href="https://twitter.com/jasonzimdars">x.com/jasonzimdars</a></p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> | |||
| </svg> Accueil</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> | |||
| </svg> Suivre</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> | |||
| </svg> Pro</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> | |||
| </svg> Email</a> • | |||
| <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> | |||
| </svg> Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend><svg class="icon icon-brightness-contrast"> | |||
| <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> | |||
| </svg> Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 404
- 0
cache/2024/d90fde4ef3c84ad3d765dda386a97562/index.md
Näytä tiedosto
| @@ -0,0 +1,404 @@ | |||
| title: Modern CSS patterns in Campfire | |||
| url: https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/ | |||
| hash_url: d90fde4ef3c84ad3d765dda386a97562 | |||
| archive_date: 2024-04-08 | |||
| og_image: https://dev.37signals.com/assets/images/opengraph/modern-css-patterns-in-campfire.png | |||
| description: An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors. | |||
| favicon: https://dev.37signals.com/assets/images/global/favicon.png | |||
| language: en_US | |||
| <p>Recently, customers who have purchased a copy of <a href="https://once.com/campfire">ONCE/Campfire</a> were invited to participate in a live walk through the app’s CSS code. Campfire was built with vanilla CSS, fully <a href="https://world.hey.com/dhh/once-1-is-entirely-nobuild-for-the-front-end-ce56f6d7">#nobuild</a> without compiling or preprocessors, and uses the latest <a href="https://web.dev">web platform</a> features available in evergreen browsers—<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS%5Fnesting">CSS nesting</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">:has()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is">:is()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where">:where()</a>; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color%5Fvalue/oklch">wide-gamut colors</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/View%5FTransitions%5FAPI">View Transitions</a> and more.</p> | |||
| <p>In this post we’ll take a look at how we’re using some of these features and share some helpful patterns discovered along the way.</p> | |||
| <hr> | |||
| <h2 id="colors">Colors</h2> | |||
| <p>Campfire uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color%5Fvalue/oklch">oklch()</a> to define colors in CSS. <code class="language-plaintext highlighter-rouge">oklch()</code> offers access to wider color spaces (like <a href="https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/">Display-P3</a>) and greatly improves developer ergonomics when working with colors. For example, let’s take a look at these greys used in Campfire’s UI.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span> | |||
| <span class="py">--lch-gray</span><span class="p">:</span> <span class="m">96%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="py">--lch-gray-dark</span><span class="p">:</span> <span class="m">92%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="py">--lch-gray-darker</span><span class="p">:</span> <span class="m">75%</span> <span class="m">0.005</span> <span class="m">96</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>At first glance they may seem unfamiliar but they’re actually more readable and quite easy to use once you get acquainted.</p> | |||
| <p>LCH stands for:</p> | |||
| <ul> | |||
| <li><strong>Lightness:</strong> perceptual lightness ranging from 0%—100%;</li> | |||
| <li><strong>Chroma:</strong> the amount of color from pure grey to full saturation, 0–0.5;</li> | |||
| <li><strong>Hue:</strong> the color’s angle on the color wheel, 0–360deg.</li> | |||
| </ul> | |||
| <p>With that in mind, we can read the colors without much effort. We can see that they all share the same hue and chroma, only the lightness differs. It’s apparent just from reading the code that <code class="language-plaintext highlighter-rouge">--lch-gray</code> and <code class="language-plaintext highlighter-rouge">--lch-gray-dark</code> are relatively close in lightness, but <code class="language-plaintext highlighter-rouge">--lch-gray-darker</code> is significantly darker. It’s also simple to adjust them programmatically or manually tweak them without using a color picker and without inadvertently shifting the hue. If you’ve ever tried to do that with RGB colors you know how tricky that can be.</p> | |||
| <p>We started by defining the pure color values above but we wrap them in the <code class="language-plaintext highlighter-rouge">oklch()</code> color function and define a set of abstract custom properties that consume the values for use in our other stylesheets.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-border</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray</span><span class="o">));</span> | |||
| <span class="nt">--color-border-dark</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray-dark</span><span class="o">));</span> | |||
| <span class="nt">--color-border-darker</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-gray-darker</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>Sure, you might be thinking, grey is easy but what about other colors? Here’s a set based on blue for links and selections.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--lch-blue</span><span class="o">:</span> <span class="err">54</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">23</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--lch-blue-light</span><span class="o">:</span> <span class="err">95</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">03</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--lch-blue-dark</span><span class="o">:</span> <span class="err">80</span><span class="o">%</span> <span class="err">0</span><span class="o">.</span><span class="err">08</span> <span class="err">255</span><span class="o">;</span> | |||
| <span class="nt">--color-link</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue</span><span class="o">));</span> | |||
| <span class="nt">--color-selected</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue-light</span><span class="o">));</span> | |||
| <span class="nt">--color-selected-dark</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue-dark</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>A quick read of these values reveals that all three are in the same color family, indicated by the same hue angle (255º). Further we can observe that links are medium lightness and saturation. The light variant has a much higher lightness value and much lower saturation making it more grey, while the dark variant is not quite as light or desaturated. We generally use the darker variants for borders around the lighter values.</p> | |||
| <p>And even better, <code class="language-plaintext highlighter-rouge">oklch()</code> makes it trivial to add variants that use alpha transparency, too.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-link-50</span><span class="o">:</span> <span class="nt">oklch</span><span class="o">(</span><span class="nt">var</span><span class="o">(</span><span class="nt">--lch-blue</span><span class="o">)</span> <span class="o">/</span> <span class="err">0</span><span class="o">.</span><span class="err">5</span><span class="o">);</span> | |||
| </code></pre></div></div> | |||
| <hr> | |||
| <h2 id="custom-properties">Custom Properties</h2> | |||
| <p>Variables in CSS are certainly not new but we’ve developed some general usage patterns that make working with them a pleasure. Let’s look at some styles from Campfire’s <code class="language-plaintext highlighter-rouge">buttons.css</code> to demonstrate.</p> | |||
| <h3 id="declared-vs-fallback-values">Declared vs. Fallback values</h3> | |||
| <p>Often when using custom properties in the past, we’d set something up like this in which you declare all the custom properties at the top of the rule (or in <code class="language-plaintext highlighter-rouge">:root</code>) and then use them immediately below. Something like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">);</span> | |||
| <span class="py">--btn-border-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-border</span><span class="p">);</span> | |||
| <span class="py">--btn-border-radius</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> | |||
| <span class="py">--btn-border-size</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> | |||
| <span class="py">--btn-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span> | |||
| <span class="py">--btn-padding</span><span class="p">:</span> <span class="m">0.5em</span> <span class="m">1.1em</span><span class="p">;</span> | |||
| <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-background</span><span class="p">);</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-radius</span><span class="p">);</span> | |||
| <span class="nl">border</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-size</span><span class="p">)</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-color</span><span class="p">);</span> | |||
| <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-color</span><span class="p">);</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">inline-flex</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span> | |||
| <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-padding</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>And that works fine but it feels like a lot of boilerplate and it’s a little defensive in that you may never use those variables again. That’s where fallback values come in handy. Instead of a litany of properties at the top of the rule, we can set the default values inline but expose a custom property that will accept another value when present. It looks like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">color</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--btn-color</span><span class="o">,</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--color-text</span><span class="o">));</span> | |||
| </code></pre></div></div> | |||
| <p>Here <code class="language-plaintext highlighter-rouge">--btn-color</code> is optional. If it’s set, the rule will use that value; if not, it will fall back to <code class="language-plaintext highlighter-rouge">--color-text</code>. The fallback value can be a straight value or another variable. Now we can re-write the rule above like this:</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-background</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">));</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-radius</span><span class="p">);</span> | |||
| <span class="nl">border</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-size</span><span class="p">,</span> <span class="m">2em</span><span class="p">)</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-border-color</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-border</span><span class="p">));</span> | |||
| <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-color</span><span class="p">,</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">));</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">inline-flex</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">0.5em</span><span class="p">;</span> | |||
| <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="nl">padding</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-padding</span><span class="p">,</span> <span class="m">0.5em</span> <span class="m">1.1em</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This is tighter and all the default values plus exposed variables are together, inline.</p> | |||
| <p>But how do we decide where to use custom properties? There are really two cases: 1) whenever we need to use the same value in more than one place (<a href="https://en.wikipedia.org/wiki/Don%27t%5Frepeat%5Fyourself">DRY</a>) and 2) when we know a value is going to be changed.</p> | |||
| <p>A good example of the first case is the <code class="language-plaintext highlighter-rouge">--btn-size</code> variable. Almost all of Campfire’s buttons are circles with an icon inside. To make sure they line up nicely with input fields we set their <code class="language-plaintext highlighter-rouge">block-size</code> using this variable.</p> | |||
| <p>Because that size is exposed at the<code class="language-plaintext highlighter-rouge"> :root</code> level we can use it for buttons and input elements. And even better, we can use that value to calculate the height of the chat footer in our layout. No <a href="https://en.wikipedia.org/wiki/Magic%5Fnumber%5F%28programming%29">magic numbers</a> in sight!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span> | |||
| <span class="py">--btn-size</span><span class="p">:</span> <span class="m">2.65em</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nt">body</span> <span class="p">{</span> | |||
| <span class="py">--footer-height</span><span class="p">:</span> <span class="n">calc</span><span class="p">((</span><span class="n">var</span><span class="p">(</span><span class="n">--block-space</span><span class="p">))</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">)</span> <span class="err">+</span> <span class="n">var</span><span class="p">(</span><span class="n">--block-space</span><span class="p">));</span> | |||
| <span class="py">grid-template-rows</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span> <span class="n">var</span><span class="p">(</span><span class="n">--footer-height</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>The footer’s height consists of the button’s height plus padding above and below using the global <code class="language-plaintext highlighter-rouge">--block-space</code> variable.</p> | |||
| <p>The other case for custom properties is when we know that we’ll want to change some values to create variants of an element. We think of it like a mini API for our CSS classes. Going back to our button class, we can declare variants simply by changing the value of custom properties instead of redefining a property.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Variants */</span> | |||
| <span class="nc">.btn--reversed</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--negative</span> <span class="p">{</span> | |||
| <span class="py">--btn-background</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-negative</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nd">:is</span><span class="o">(</span><span class="nc">.btn--reversed</span><span class="o">,</span> <span class="nc">.btn--negative</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="py">--btn-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-text-reversed</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--borderless</span> <span class="p">{</span> | |||
| <span class="py">--btn-border-color</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="nc">.btn--success</span> <span class="p">{</span> | |||
| <span class="nl">animation</span><span class="p">:</span> <span class="n">success</span> <span class="m">1s</span> <span class="n">ease-out</span><span class="p">;</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">animation</span><span class="p">:</span> <span class="n">zoom-fade</span> <span class="m">300ms</span> <span class="n">ease-out</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>This makes it very clear what’s changed by these variants. Even better, as in the case of <code class="language-plaintext highlighter-rouge">.btn--success</code>, it makes on obvious distinction between changing a default property value and adding a new property (the <code class="language-plaintext highlighter-rouge">animation</code> property in this case).</p> | |||
| <hr> | |||
| <h2 id="css-has">CSS :has()</h2> | |||
| <p>We started using <code class="language-plaintext highlighter-rouge">:has()</code> in the early stages of Campfire’s development because it offers a number of conveniences and opportunities to do with CSS what we previously had to do in server side code. We were so bullish on <code class="language-plaintext highlighter-rouge">:has()</code> that we literally shipped the first beta version of Campfire a week before Firefox shipped its release with support for <code class="language-plaintext highlighter-rouge">:has()</code>—the last of the major browsers to do so.</p> | |||
| <p>You can think of <code class="language-plaintext highlighter-rouge">:has()</code> as a way to query an element about what’s inside it.</p> | |||
| <p>This makes our button class very flexible. You can throw about any combination of things inside it, and it will adjust accordingly. Text only, image and text, image only, inputs (like radio buttons), or multiple images with text.</p> | |||
| <p>For example, when our <code class="language-plaintext highlighter-rouge">.btn</code> class finds an image inside of it (that’s not an avatar photo), it can apply sizing and make sure it gets inverted in dark mode—without needing any kind of special classes.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.btn</span> <span class="p">{</span> | |||
| <span class="err">...</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">-webkit-touch-callout</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> | |||
| <span class="py">user-select</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(</span><span class="nt">img</span><span class="o">)</span><span class="nd">:not</span><span class="o">(</span><span class="nc">.avatar</span><span class="o">))</span> <span class="p">{</span> | |||
| <span class="nl">text-align</span><span class="p">:</span> <span class="n">start</span><span class="p">;</span> | |||
| <span class="err">img</span> <span class="err">{</span> | |||
| <span class="nl">filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">0</span><span class="p">);</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="m">1.3em</span><span class="p">;</span> | |||
| <span class="py">max-inline-size</span><span class="p">:</span> <span class="n">unset</span><span class="p">;</span> | |||
| <span class="err">@media</span> <span class="err">(</span><span class="py">prefers-color-scheme</span><span class="p">:</span> <span class="n">dark</span><span class="p">)</span> <span class="err">{</span> | |||
| <span class="n">filter</span><span class="p">:</span> <span class="nb">invert</span><span class="p">(</span><span class="m">100%</span><span class="p">);</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Most of the buttons in Campfire contain an icon image plus a hidden text element for screen readers.</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">button</span> <span class="ss">class: </span><span class="s2">"btn btn--reversed center"</span><span class="p">,</span> <span class="ss">type: </span><span class="s2">"submit"</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="cp"><%=</span> <span class="n">image_tag</span> <span class="s2">"check.svg"</span><span class="p">,</span> <span class="ss">aria: </span><span class="p">{</span> <span class="ss">hidden: </span><span class="s2">"true"</span> <span class="p">},</span> <span class="ss">size: </span><span class="mi">20</span> <span class="cp">%></span> | |||
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"for-screen-reader"</span><span class="nt">></span>Save changes<span class="nt"></span></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| </code></pre></div></div> | |||
| <p>With <code class="language-plaintext highlighter-rouge">:has()</code> our button class can know if these elements are present and turn it into a circle icon button with the image centered inside it. <em>Notice that we’re using our <code class="language-plaintext highlighter-rouge">--btn-size</code> variable from earlier.</em></p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.for-screen-reader</span><span class="o">)</span><span class="nd">:has</span><span class="o">(</span><span class="nt">img</span><span class="o">))</span> <span class="p">{</span> | |||
| <span class="py">--btn-border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> | |||
| <span class="py">--btn-padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> | |||
| <span class="py">aspect-ratio</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">);</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--btn-size</span><span class="p">);</span> | |||
| <span class="py">place-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="err">></span> <span class="err">\*</span> <span class="err">{</span> | |||
| <span class="py">grid-area</span><span class="p">:</span> <span class="m">1</span><span class="p">/</span><span class="m">1</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Just dump whatever you want into <code class="language-plaintext highlighter-rouge">.btn</code> and it’ll take care of the rest.</p> | |||
| <p>That’s really satisfying to use as a developer but you could do this without a lot of extra effort using utility classes like <code class="language-plaintext highlighter-rouge">.btn--circle-icon</code> or <code class="language-plaintext highlighter-rouge">.btn--icon-and-text</code>. What really opened our eyes was when we were able to replace Ruby on Rails code with just CSS.</p> | |||
| <p>Take, for example, the menu button that toggles the sidebar when using Campfire with a narrow viewport.</p> | |||
| <p>Because the sidebar (which lists all of your chat rooms) is hidden when closed we wanted to display a small dot on the menu button to indicate that you have rooms with new, unread messages in them. Normally we’d have to write some Ruby on Rails code to handle that condition something like this:</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><%</span> <span class="k">if</span> <span class="vi">@room</span><span class="p">.</span><span class="nf">memberships</span><span class="p">.</span><span class="nf">unread</span><span class="p">.</span><span class="nf">any?</span> <span class="cp">%></span> | |||
| // render the dot | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| </code></pre></div></div> | |||
| <p>But with <code class="language-plaintext highlighter-rouge">:has()</code> we can do it with pure CSS alone!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">#sidebar</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:not</span><span class="o">([</span><span class="nt">open</span><span class="o">])</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.unread</span><span class="o">))</span> <span class="o">&</span> <span class="p">{</span> | |||
| <span class="err">&::after</span> <span class="err">{</span> | |||
| <span class="py">--size</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> | |||
| <span class="py">aspect-ratio</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> | |||
| <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--color-negative</span><span class="p">);</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">);</span> | |||
| <span class="nl">border-radius</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="err">*</span> <span class="m">2</span><span class="p">);</span> | |||
| <span class="nl">content</span><span class="p">:</span> <span class="s1">""</span><span class="p">;</span> | |||
| <span class="nl">flex-shrink</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">);</span> | |||
| <span class="py">inset-block-start</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="p">/</span> <span class="m">-4</span><span class="p">);</span> | |||
| <span class="py">inset-inline-end</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--size</span><span class="p">)</span> <span class="p">/</span> <span class="m">-4</span><span class="p">);</span> | |||
| <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Here the we’re querying the sidebar element to 1) make sure it isn’t open (because you don’t need to see the dot if you’re already looking at the rooms list) and 2) to see if it has any elements inside it that have the <code class="language-plaintext highlighter-rouge">.unread</code> class. If those are true, draw the dot and position it. Notice that we’re using a custom property (<code class="language-plaintext highlighter-rouge">--size</code>) here for both the dimensions of the dot and to calculate its border radius and position. It’s harmonious and avoids magic numbers.</p> | |||
| <p>Elsewhere, on Campfire’s account profile screen we used <code class="language-plaintext highlighter-rouge">:has()</code> to solve a problem that was nearly impossible to do even with server side code. The screen features a list of all the chat rooms you’re in and a button to toggle the state of each room. If you’ve made the room invisible in your sidebar we also wanted to be able to grey out the row to visually reinforce this critical status.</p> | |||
| <p>The problem is that toggle button is a completely separate element using a different controller, rendered in a <a href="https://turbo.hotwired.dev/handbook/frames">Turbo Frame</a>. It’s the same toggle we show in the room, itself. That means the code that renders the row has no idea what status of the button is, nor does it know when the status changes.</p> | |||
| <div class="language-erb highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><li</span> <span class="na">class=</span><span class="s">"flex align-center gap margin-none min-width membership-item"</span><span class="nt">></span> | |||
| <span class="cp"><%=</span> <span class="n">link_to</span> <span class="n">room_path</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">),</span> <span class="ss">class: </span><span class="s2">"overflow-ellipsis fill-shade txt-primary txt-undecorated"</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="nt"><strong></span><span class="cp"><%=</span> <span class="n">room_display_name</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">)</span> <span class="cp">%></span><span class="nt"></strong></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| <span class="nt"><hr</span> <span class="na">class=</span><span class="s">"separator"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> | |||
| <span class="nt"><span</span> <span class="na">class=</span><span class="s">"txt-small"</span><span class="nt">></span> | |||
| <span class="cp"><%=</span> <span class="n">turbo_frame_tag</span> <span class="n">dom_id</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">,</span> <span class="ss">:involvement</span><span class="p">)</span> <span class="k">do</span> <span class="cp">%></span> | |||
| <span class="cp"><%=</span> <span class="n">button_to_change_involvement</span><span class="p">(</span><span class="n">membership</span><span class="p">.</span><span class="nf">room</span><span class="p">,</span> <span class="n">membership</span><span class="p">.</span><span class="nf">involvement</span><span class="p">)</span> <span class="cp">%></span> | |||
| <span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span> | |||
| <span class="nt"></span></span> | |||
| <span class="nt"></li></span> | |||
| </code></pre></div></div> | |||
| <p>Now we could, of course, use Javascript to get the state, observe changes, and update the view. Or we could re-write this code to re-render the entire row when the notification state changes, but then we’d be writing a duplicate toggle that is only slightly different than the one used elsewhere.</p> | |||
| <p>A third option is to write a single CSS rule!</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.membership-item</span><span class="nd">:has</span><span class="o">(</span><span class="nc">.btn.invisible</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="nl">opacity</span><span class="p">:</span> <span class="m">0.5</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>If the row has a button in toggled to the <code class="language-plaintext highlighter-rouge">.invisible</code> class, dim it.</p> | |||
| <p>Advances in CSS have been slowing replacing Javascript code over the last few years, now it’s coming for server side code!</p> | |||
| <h3 id="one-more">One more?</h3> | |||
| <p>Campfire’s direct message feature, which we call Pings, displays all of your active conversations across the top of the sidebar. Depending on how many people are involved, Campfire displays one, two, three, or four avatars to represent the chat.</p> | |||
| <p>Normally our view template would need to count the number of participants and conditionally apply a class to the element so the CSS knows how to render each layout group. But with <code class="language-plaintext highlighter-rouge">:has()</code> we can effectively count the number of elements and adjust the display accordingly.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Four avatars */</span> | |||
| <span class="nc">.avatar__group</span> <span class="p">{</span> | |||
| <span class="py">--avatar-size</span><span class="p">:</span> <span class="m">2.5ch</span><span class="p">;</span> | |||
| <span class="py">block-size</span><span class="p">:</span> <span class="m">5ch</span><span class="p">;</span> | |||
| <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span> | |||
| <span class="py">gap</span><span class="p">:</span> <span class="m">1px</span><span class="p">;</span> | |||
| <span class="py">grid-template-columns</span><span class="p">:</span> <span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span> | |||
| <span class="py">grid-template-rows</span><span class="p">:</span> <span class="n">min-content</span><span class="p">;</span> | |||
| <span class="py">inline-size</span><span class="p">:</span> <span class="m">5ch</span><span class="p">;</span> | |||
| <span class="py">place-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> | |||
| <span class="err">.avatar</span> <span class="err">{</span> | |||
| <span class="nl">margin</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="c">/_ Two avatars _/</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(></span> <span class="nd">:last-child:nth-child</span><span class="o">(</span><span class="err">2</span><span class="o">)))</span> <span class="p">{</span> | |||
| <span class="py">--avatar-size</span><span class="p">:</span> <span class="m">3.5ch</span><span class="p">;</span> | |||
| <span class="err">></span> <span class="err">:first-child</span> <span class="err">{</span> | |||
| <span class="py">margin-block-end</span><span class="p">:</span> <span class="m">1.5ch</span><span class="p">;</span> | |||
| <span class="py">margin-inline-end</span><span class="p">:</span> <span class="m">-0.75ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="o">></span> <span class="nd">:last-child</span> <span class="p">{</span> | |||
| <span class="py">margin-block-start</span><span class="p">:</span> <span class="m">1.5ch</span><span class="p">;</span> | |||
| <span class="py">margin-inline-start</span><span class="p">:</span> <span class="m">-0.75ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="c">/_ Three avatars _/</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:has</span><span class="o">(></span> <span class="nd">:last-child:nth-child</span><span class="o">(</span><span class="err">3</span><span class="o">)))</span> <span class="p">{</span> | |||
| <span class="err">></span> <span class="err">:last-child</span> <span class="err">{</span> | |||
| <span class="py">margin-inline</span><span class="p">:</span> <span class="m">1.25ch</span> <span class="m">-1.25ch</span><span class="p">;</span> | |||
| <span class="p">}</span> | |||
| <span class="err">}</span> | |||
| <span class="err">}</span> | |||
| </code></pre></div></div> | |||
| <p>Magic 🪄</p> | |||
| <hr> | |||
| <h2 id="responsive-design">Responsive design</h2> | |||
| <p>In this last section, we’ll take a look at Campfire’s approach to responsive design. The first thing to know is that Campfire has zero/none/nada viewport based <code class="language-plaintext highlighter-rouge">@media</code> queries. There are no attempts to assert that <em>viewports narrower than x are mobile devices</em>. Campfire’s layout fully adapts to whichever device you’re using in whichever configuration or orientation, without attempting to declare any state as “mobile”. Here’s how.</p> | |||
| <h3 id="layout">Layout</h3> | |||
| <p>Campfire has a single <code class="language-plaintext highlighter-rouge">@media</code> breakpoint—one value, used in a number of places.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span> <span class="m">100ch</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="o">...</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This breakpoint largely determines how the CSS grid layout must adjust when the viewport is too narrow to display the sidebar alongside the chat transcript. When the document is narrower than 100 characters, it’s not practical to render them side-by-side, so instead Campfire hides the sidebar and reveals a menu button to toggle it.</p> | |||
| <p>Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point. Type is the heart of web pages so it makes sense for the layout to respond to it.</p> | |||
| <h3 id="feature-enhancements">Feature enhancements</h3> | |||
| <p>The other place we use media queries is to respond to the kind of input device the user has. It’s never been fair to assume a device with a narrow viewport has a touch screen, nor that a device with an enormous viewport does not. This blurry line is not getting clearer. But thanks to <code class="language-plaintext highlighter-rouge">@media</code> queries we can actually get useful information about a device’s capabilities. First up, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover">any-hover</a>.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="n">hover</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="o">&</span><span class="nd">:where</span><span class="o">(</span><span class="nd">:not</span><span class="o">(</span><span class="nd">:active</span><span class="o">)</span><span class="nd">:hover</span><span class="o">)</span> <span class="p">{</span> | |||
| <span class="c">/* hover effect */</span> | |||
| <span class="p">}</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This queries the user’s device to see if it has any input mechanism that is capable of hovering (probably a mouse). It won’t match on touch screen devices and will opt out of Mobile Safari’s annoying behavior that makes you double-tap things that have a hover effect. Not bad.</p> | |||
| <p>But let’s look at something a little more impressive. Every message line in a Campfire chat has a <strong>•••</strong> button that reveals a menu of extra actions (<em>edit, Boost, copy, share</em>) that you can do.</p> | |||
| <p>On devices with a mouse or trackpad the ideal is to only reveal the menu when you hover over the message but that would make it inaccessible on touch devices. No problem. We can use <code class="language-plaintext highlighter-rouge">any-hover</code> along with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer">pointer</a> query to get the behavior we want on each kind of device.</p> | |||
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="n">hover</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="nb">pointer</span><span class="p">:</span> <span class="n">fine</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="c">/* Reveal the button only on hover */</span> | |||
| <span class="p">}</span> | |||
| <span class="k">@media</span> <span class="p">(</span><span class="n">any-hover</span><span class="p">:</span> <span class="nb">none</span><span class="p">)</span> <span class="n">and</span> <span class="p">(</span><span class="nb">pointer</span><span class="p">:</span> <span class="n">coarse</span><span class="p">)</span> <span class="p">{</span> | |||
| <span class="c">/_ Show the button all the time _/</span> | |||
| <span class="p">}</span> | |||
| </code></pre></div></div> | |||
| <p>This is especially magical with a device like the iPad Pro. Which can match both queries under certain conditions, and change on-the-fly. When it’s docked on the <a href="https://www.apple.com/ipad-keyboards/">Magic Keyboard</a> with built-in trackpad, it matches the first query and the <strong>•••</strong> buttons are hidden until you hover. Lift it off the Magic Keyboard and it becomes a purely touch device—the <strong>•••</strong> buttons magically appear. It’s very cool.</p> | |||
| <hr> | |||
| <h2 id="whats-next">What’s next?</h2> | |||
| <p>Campfire 1.0 shipped in January 2024 and by March we had already started to work on the next ONCE product. While Campfire supported bleeding edge features when was released the <a href="https://web.dev/blog/web-platform-03-2024/">web platform is rapidly changing</a> and we’re already exploring new features that have gained browser support since then. It’s a fantastic time to be working on the web.</p> | |||
| <p>If you haven’t tried Campfire yet, it’s available now at <a href="https://once.com">once.com</a>, the first of a family of products that you buy once, own forever (including source code), and can do what you want with.</p> | |||
| <hr> | |||
| <h2 id="questions">Questions?</h2> | |||
| <p>Have a question, comment or idea? Want to see more posts like this? Get in touch at <a href="mailto:jz@37signals.com">jz@37signals.com</a> or <a href="https://twitter.com/jasonzimdars">x.com/jasonzimdars</a></p> | |||
+ 4
- 0
cache/2024/index.html
Näytä tiedosto
| @@ -84,6 +84,8 @@ | |||
| <li><a href="/david/cache/2024/c6e0fe933581c74380fa8eaa7f229353/" title="Accès à l’article dans le cache local : Motivation(s) chez Vincent Valentin.">Motivation(s) chez Vincent Valentin.</a> (<a href="https://vincent-valentin.name/articles/motivation-s" title="Accès à l’article original distant : Motivation(s) chez Vincent Valentin.">original</a>)</li> | |||
| <li><a href="/david/cache/2024/d90fde4ef3c84ad3d765dda386a97562/" title="Accès à l’article dans le cache local : Modern CSS patterns in Campfire">Modern CSS patterns in Campfire</a> (<a href="https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/" title="Accès à l’article original distant : Modern CSS patterns in Campfire">original</a>)</li> | |||
| <li><a href="/david/cache/2024/1d60fc5548a6fe61da80a4e16892fa0c/" title="Accès à l’article dans le cache local : Deep Democracy - IAPOP">Deep Democracy - IAPOP</a> (<a href="https://iapop.com/deep-democracy/" title="Accès à l’article original distant : Deep Democracy - IAPOP">original</a>)</li> | |||
| <li><a href="/david/cache/2024/155c5458fcbfb1450f19bc0d268c871e/" title="Accès à l’article dans le cache local : We’ve been waiting 20 years for this">We’ve been waiting 20 years for this</a> (<a href="https://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/" title="Accès à l’article original distant : We’ve been waiting 20 years for this">original</a>)</li> | |||
| @@ -132,6 +134,8 @@ | |||
| <li><a href="/david/cache/2024/ff566a58892db07815a327802fea66d3/" title="Accès à l’article dans le cache local : In Loving Memory of Square Checkbox">In Loving Memory of Square Checkbox</a> (<a href="https://tonsky.me/blog/checkbox/" title="Accès à l’article original distant : In Loving Memory of Square Checkbox">original</a>)</li> | |||
| <li><a href="/david/cache/2024/a16101277229b3aeca8ac3249c84320c/" title="Accès à l’article dans le cache local : An advanced way to use CSS variables">An advanced way to use CSS variables</a> (<a href="https://gomakethings.com/an-advanced-way-to-use-css-variables/" title="Accès à l’article original distant : An advanced way to use CSS variables">original</a>)</li> | |||
| <li><a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" title="Accès à l’article dans le cache local : Coroutines and web components">Coroutines and web components</a> (<a href="https://lorenzofox.dev/posts/component-as-infinite-loop/" title="Accès à l’article original distant : Coroutines and web components">original</a>)</li> | |||
| <li><a href="/david/cache/2024/d74f376e53fc6a1108c59b6e6fa57ba1/" title="Accès à l’article dans le cache local : 25th work anniversary">25th work anniversary</a> (<a href="https://blog.koalie.net/2024/02/29/25th-work-anniversary/" title="Accès à l’article original distant : 25th work anniversary">original</a>)</li> | |||
Loading…