davidbgk
/
larlet-fr-david-cache
Прати 1
Волим 0
Креирај огранак 0
Код Издања 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
393 Комити
1 Грана
Дрво: 271d694cf3
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from '271d694cf3'
${ noResults }
larlet-fr-david-cache/cache/2024/35c44c8d8b999faa625ed6009da.../index.html

index.html 133KB
Датотека Blame Историја

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang="en">

  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset="utf-8">

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name="viewport" content="width=device-width,initial-scale=1">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Modern CSS For Dynamic Component-Based Architecture (archive) — David Larlet</title>

  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">

  14. <!-- That good ol' feed, subscribe :). -->

  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">

  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">

  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">

  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">

  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">

  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">

  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">

  23. <meta name="msapplication-TileColor" content="#f7f7f7">

  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">

  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">

  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">

  27. <!-- Is that even respected? Retrospectively? What a shAItshow…

  28.   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->

  29. <meta name="robots" content="noai, noimageai">

  30. <!-- Documented, feel free to shoot an email. -->

  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">

  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->

  33. <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>

  34. <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>

  35. <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>

  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>

  39. <script>

  40.     function toggleTheme(themeName) {

  41.         document.documentElement.classList.toggle(

  42.             'forced-dark',

  43.             themeName === 'dark'

  44.         )

  45.         document.documentElement.classList.toggle(

  46.             'forced-light',

  47.             themeName === 'light'

  48.         )

  49.     }

  50.     const selectedTheme = localStorage.getItem('theme')

  51.     if (selectedTheme !== 'undefined') {

  52.         toggleTheme(selectedTheme)

  53.     }

  54. </script>

  55. 

  56.   <meta name="robots" content="noindex, nofollow">

  57.   <meta content="origin-when-cross-origin" name="referrer">

  58.   <!-- Canonical URL for SEO purposes -->

  59.   <link rel="canonical" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/">

  60. 

  61. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">

  62. 

  63. 

  64. <article>

  65.   <header>

  66.     <h1>Modern CSS For Dynamic Component-Based Architecture</h1>

  67.   </header>

  68.   <nav>

  69.     <p class="center">

  70.       <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">

  71.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>

  72.       </svg> Accueil</a> •

  73.       <a href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" title="Lien vers le contenu original">Source originale</a>

  74.       <br>

  75.       Mis en cache le 2024-04-18

  76.     </p>

  77.   </nav>

  78.   <hr>

  79.   <p>The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and <a href="https://webkit.org/blog/13706/interop-2023/">efforts are being made</a> to continue releasing features consistently and synchronously among evergreen browsers.</p>

  80. <p>Today, we will explore modern project architecture, emphasizing theming, responsive layouts, and component design. We'll learn about features to improve code organization and dig into layout techniques such as grid and container queries. Finally, we'll review real-world examples of context-aware components that use cutting-edge CSS techniques. You're sure to be inspired to expand your CSS skills and ready to create scalable, future-friendly web projects.</p>

  81. 

  82. <p>Since the early days of CSS, a convention to tame cross-browser styling inconsistencies has been the CSS reset. This refers to a group of rules that do things like to remove default spacing attributes or enforce inheritance of font styles. It has also grown more flexible in definition, and some folks use it as a place to put baseline global style overrides.</p>

  83. <p>Here are a few handy rules I now place in my reset to take advantage of modern CSS features. A wonderful thing about these rules is they are also progressive enhancements that don't strictly require fallbacks. If they are supported in a browser and are applied, great! And if not, there's no or minimal impact on the user experience.</p>

  84. <p>I set a common baseline for default links, which are scoped to those without a class. This is an assumption that classless links are intended to keep a regular, underlined link appearance. The update is to set the underline to use a relative thickness and increase the underline offset. The visual outcome may be minor, but it can improve the legibility of links, especially when presented in a list or other close-proximity contexts.</p>

  85. <pre class="language-css"><code class="language-css">

  86. <span class="token selector">a:not([class])</span> <span class="token punctuation">{</span>

  87. 

  88.   <span class="token property">text-decoration-thickness</span><span class="token punctuation">:</span> <span class="token function">max</span><span class="token punctuation">(</span>0.08em<span class="token punctuation">,</span> 1px<span class="token punctuation">)</span><span class="token punctuation">;</span>

  89.   <span class="token property">text-underline-offset</span><span class="token punctuation">:</span> 0.15em<span class="token punctuation">;</span>

  90. <span class="token punctuation">}</span></code></pre>

  91. <p>The <code>max()</code> function asks the browser to choose the larger of the presented options, which effectively ensures that in this rule, the underline cannot be thinner than <code>1px</code>.</p>

  92. <p>An exciting cross-browser update as of March 2022 was a switch of the default focus behavior for interactive elements to use <code>:focus-visible</code> by default. Whereas the <code>:focus</code> state applies no matter how an element receives focus, <code>:focus-visible</code> only produces a visible focus state based on the heuristics of the user's input modality. Practically speaking, this means that typically mouse users will not see a visible focus for elements like links or buttons, but a keyboard user who accesses those elements through tabbing will see a visible focus style.</p>

  93. <p>As for our reset, this means our visible focus styles will be attached to only the <code>:focus-visible</code> state.</p>

  94. <pre class="language-css"><code class="language-css"><span class="token selector">:focus-visible</span> <span class="token punctuation">{</span>

  95.   <span class="token property">--outline-size</span><span class="token punctuation">:</span> <span class="token function">max</span><span class="token punctuation">(</span>2px<span class="token punctuation">,</span> 0.15em<span class="token punctuation">)</span><span class="token punctuation">;</span>

  96. 

  97.   <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--outline-width<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--outline-size<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--outline-style<span class="token punctuation">,</span> solid<span class="token punctuation">)</span>

  98.     <span class="token function">var</span><span class="token punctuation">(</span>--outline-color<span class="token punctuation">,</span> currentColor<span class="token punctuation">)</span><span class="token punctuation">;</span>

  99.   <span class="token property">outline-offset</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--outline-offset<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--outline-size<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  100. <span class="token punctuation">}</span></code></pre>

  101. <p>In this rule, custom properties are used to set the various outline attributes. This allows the creation of a common baseline for our application's focus styles while allowing overrides for components as needed.</p>

  102. <p>You might also be less familiar with the <code>outline-offset</code> property, which defines the distance between the element and the outline. This property can use a negative value to inset the outline and place it inside the element. I often do this override for button component styles to ensure the outlines retain accessible contrast against the element.</p>

  103. <blockquote>

  104. <p>I’ve written about <a href="https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/">this outline technique</a> before if you’d like to learn more.</p>

  105. </blockquote>

  106. <p>The last two additions to my reset involve improving the scroll position for targeted or focused elements.</p>

  107. <p>Using <code>scroll-margin</code> properties, you can adjust the scroll position in relation to elements. The "margin" space does not affect the layout, just the offset of the scroll position.</p>

  108. <p>In this rule, the <code>:target</code> selector matches when an element is a target of an anchor link, also known as a "document fragment." The <code>scroll-margin-block-start</code> will allow for room between the target and the top of the viewport.</p>

  109. <pre class="language-css"><code class="language-css">

  110. <span class="token selector">:target</span> <span class="token punctuation">{</span>

  111.   <span class="token property">scroll-margin-block-start</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>

  112. <span class="token punctuation">}</span></code></pre>

  113. <p>The use of <code>scroll-margin-block-end</code> in this next rule allows for room between a focused element and the bottom of the viewport, which helps with tracking visible focus position.</p>

  114. <pre class="language-css"><code class="language-css">

  115. <span class="token selector">:focus</span> <span class="token punctuation">{</span>

  116.   <span class="token property">scroll-margin-block-end</span><span class="token punctuation">:</span> 8vh<span class="token punctuation">;</span>

  117. <span class="token punctuation">}</span></code></pre>

  118. <p>Values for both rules can be adjusted to work best with your application layout. Consider that you might need a little bit of help from JavaScript if you need to <a href="https://www.tpgi.com/prevent-focused-elements-from-being-obscured-by-sticky-headers/#an-alternative-approach">account for sticky headers</a> or footers.</p>

  119. 

  120. <p>Next up are two features with the potential to strongly impact your project architecture: nesting and cascade layers.</p>

  121. 

  122. <p>Native CSS nesting began to be supported in Chromium 112, Safari 16.5, and very newly in Firefox Nightly so stable support should be shortly behind.</p>

  123. <p>For those who have used a preprocessor like Sass or LESS, native nesting will be familiar, but it does have some unique rules.</p>

  124. <p>A nested rule must begin with a symbol, meaning you cannot use an element selector by itself. But the ampersand - <code>&amp;</code> - character is also available and refers to the top-level selector, so that is one way to begin a nested selector. This condition may change as browser engineers and CSSWG members continue troubleshooting how to address <a href="https://www.w3.org/TR/css-nesting-1/#nesting">restrictions on nested rule selectors</a>.</p>

  125. <pre class="language-css"><code class="language-css">

  126. <span class="token selector">.my-element</span> <span class="token punctuation">{</span>

  127.   <span class="token selector">a</span> <span class="token punctuation">{</span>

  128.   <span class="token punctuation">}</span>

  129. <span class="token punctuation">}</span>

  130. 

  131. 

  132. <span class="token selector">.my-element</span> <span class="token punctuation">{</span>

  133.   <span class="token selector">&amp; a</span> <span class="token punctuation">{</span>

  134.   <span class="token punctuation">}</span>

  135. <span class="token punctuation">}</span></code></pre>

  136. <p>Alternatively, selectors such as <code>:is()</code> or <code>:where()</code> can begin a nested rule since they meet the “symbol” requirement. And standard class or attribute selection is also allowed, as well as the other combinators.</p>

  137. <pre class="language-css"><code class="language-css"><span class="token selector">.my-element</span> <span class="token punctuation">{</span>

  138.   <span class="token selector">:is(a, button)</span> <span class="token punctuation">{</span>

  139.   <span class="token punctuation">}</span>

  140. 

  141.   <span class="token selector">.button</span> <span class="token punctuation">{</span>

  142.   <span class="token punctuation">}</span>

  143. 

  144.   <span class="token selector">[data-type]</span> <span class="token punctuation">{</span>

  145.   <span class="token punctuation">}</span>

  146. 

  147.   <span class="token selector">+ .another-element</span> <span class="token punctuation">{</span>

  148.   <span class="token punctuation">}</span>

  149. <span class="token punctuation">}</span></code></pre>

  150. <p>A possible gotcha with nesting selectors is that the compound result creates descendent selectors. In other words, a space character is added between the top-level selector and the nested selector. When you intend to have the nested selector be appended to the top-level selector, the use of the <code>&amp;</code> enables that result.</p>

  151. <pre class="language-css"><code class="language-css"><span class="token selector">.my-element</span> <span class="token punctuation">{</span>

  152.   <span class="token selector">[data-type]</span> <span class="token punctuation">{</span>

  153.   <span class="token punctuation">}</span>

  154. 

  155.   <span class="token selector">&amp;[data-type]</span> <span class="token punctuation">{</span>

  156.   <span class="token punctuation">}</span>

  157. <span class="token punctuation">}</span>

  158. 

  159. 

  160. <span class="token selector">.my-element [data-type]</span> <span class="token punctuation">{</span>

  161. <span class="token punctuation">}</span>

  162. <span class="token selector">.my-element[data-type]</span> <span class="token punctuation">{</span>

  163. <span class="token punctuation">}</span></code></pre>

  164. <p>Use of <code>&amp;</code> also allows nested selectors for pseudo-elements and pseudo-classes.</p>

  165. <pre class="language-css"><code class="language-css"><span class="token selector">.my-element</span> <span class="token punctuation">{</span>

  166.   <span class="token selector">&amp;::before</span> <span class="token punctuation">{</span>

  167.   <span class="token punctuation">}</span>

  168. 

  169.   <span class="token selector">&amp;:hover</span> <span class="token punctuation">{</span>

  170.   <span class="token punctuation">}</span>

  171. <span class="token punctuation">}</span></code></pre>

  172. <p>Review more examples of valid and invalid nesting rules from <a href="https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/">Jen Simmons</a> and <a href="https://developer.chrome.com/articles/css-nesting/">Adam Argyle</a>.</p>

  173. <p>You can safely begin using nesting today without Sass or LESS by incorporating a build tool such as <a href="https://lightningcss.dev/">LightningCSS</a>, which will pre-combine the selectors for your final stylesheet based on your browser targets.</p>

  174. 

  175. <p>In a coordinated cross-browser rollout, the new at-rule of <code>@layer</code> became available as of Chromium 99, Safari 15.4, and Firefox 97 in early 2022. This at-rule is how to manage CSS cascade layers, which allows authors more control over two key features of the "C" in CSS: <em>specificity</em> and <em>order of appearance</em>. This is significant because those are the last two determining factors a browser considers when applying an element's style.</p>

  176. <p>Using <code>@layer</code>, we can define groups of rule sets with a pre-determined order to reduce the likelihood of conflicts. Being able to assign this order largely prevents the need to use <code>!important</code> and enables easier overrides of inherited styles from third-party or framework stylesheets.</p>

  177. <p>The critical rules to understand about cascade layers are:</p>

  178. <ul>

  179. <li>the initial order of layers defines the applied priority order

  180. <ul>

  181. <li>priority increases in order</li>

  182. <li>ex. first layer has less priority than the last layer</li>

  183. </ul>

  184. </li>

  185. <li>less-nested layered styles have priority over deeper nested layer styles</li>

  186. <li>un-layered styles have the highest priority over layered styles</li>

  187. </ul>

  188. <p>In this example, the initial layer order is given as <code>global</code> followed by <code>typography</code>. However, the styles added to those layers are written so that the <code>typography</code> layer is listed first. But, the <code>p</code> will be <code>blue</code> since that style is defined in the <code>typography</code> layer, and the initial layer order defines the typography layer later than the global layer.</p>

  189. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> global<span class="token punctuation">,</span> typography<span class="token punctuation">;</span></span>

  190. 

  191. <span class="token selector">p</span> <span class="token punctuation">{</span>

  192.   <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>

  193. <span class="token punctuation">}</span>

  194. 

  195. <span class="token atrule"><span class="token rule">@layer</span> typography</span> <span class="token punctuation">{</span>

  196.   <span class="token selector">p</span> <span class="token punctuation">{</span>

  197.     <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>

  198.     <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  199.   <span class="token punctuation">}</span>

  200. 

  201.   <span class="token atrule"><span class="token rule">@layer</span> colors</span> <span class="token punctuation">{</span>

  202.     <span class="token selector">p</span> <span class="token punctuation">{</span>

  203.       <span class="token property">color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>

  204.     <span class="token punctuation">}</span>

  205.   <span class="token punctuation">}</span>

  206. <span class="token punctuation">}</span>

  207. 

  208. <span class="token atrule"><span class="token rule">@layer</span> global</span> <span class="token punctuation">{</span>

  209.   <span class="token selector">p</span> <span class="token punctuation">{</span>

  210.     <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>245 30% 30%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  211.   <span class="token punctuation">}</span>

  212. <span class="token punctuation">}</span></code></pre>

  213. <p>The nested layer of <code>color</code> within <code>typography</code> also has lower-priority than the un-nested style. Finally, the paragraph will also have a <code>margin-bottom</code> of <code>2rem</code> since the un-layered style has higher priority over the layered styles.</p>

  214. <blockquote>

  215. <p>Learn more in my <a href="https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/">guide to cascade layers</a>, and watch <a href="https://www.youtube.com/watch?v=zEPXyqj7pEA">Bramus Van Damme’s talk from CSS Day 2022</a>.</p>

  216. </blockquote>

  217. <p>As with many newer features, there is much room for experimentation, and "best practices" or "standards of use" have not been established. Decisions like whether to include cascade layers, what to name them, and how to order them will be very project dependent.</p>

  218. <p>Here’s a layer order I have been trying out in my own projects:</p>

  219. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> reset<span class="token punctuation">,</span> theme<span class="token punctuation">,</span> global<span class="token punctuation">,</span> layout<span class="token punctuation">,</span> components<span class="token punctuation">,</span> utilities<span class="token punctuation">,</span> states<span class="token punctuation">;</span></span></code></pre>

  220. <p>Miriam Suzanne, the spec author for cascade layers, describes a few contexts and other <a href="https://12daysofweb.dev/2022/cascade-layers/">considerations for naming and ordering layers</a>.</p>

  221. <p>Moving to cascade layers is a bit tricky, although a polyfill is available. However, at-rules cannot be detected by <code>@supports</code> in CSS. Even if they could, there's still the issue that un-layered styles that you may not be ready to move to layers would continue to override layer styles.</p>

  222. <p>The desire to detect <code>@layer</code> support and minimize the conflict between layered and un-layered styles was a motivating factor in creating my project <a href="https://supportscss.dev/">SupportsCSS</a>, a feature detection script. It adds classes to <code>&lt;html&gt;</code> to indicate support or lack thereof, which can then be used as part of your progressive enhancement strategy for many modern CSS features, including cascade layers.</p>

  223. 

  224. <p>There are three features I immediately begin using when starting a new project, large or small. The first is custom properties, also known as CSS variables.</p>

  225. <p>The <a href="https://almanac.httparchive.org/en/2022/css#custom-properties">2022 Web Almanac</a> - which sources data from the HTTP Archive dataset and included 8.36M websites - noted that 43% of pages are using custom properties and have at least one <code>var()</code> function. My prediction is that number will continue to grow dramatically now that Internet Explorer 11 has reached end-of-life, as lack of IE11 support prevented many teams from picking up custom properties.</p>

  226. <p>The Almanac results also showed that the ruling type used by custom property values was color, and that is in fact how we’ll begin using them as well.</p>

  227. <p>For the remainder of the examples, we’ll be building up components and branding for our imaginary product Jaberwocky.</p>

  228. <p><img src="https://moderncss.dev/img/posts/32/brand.png" alt=""></p>

  229. <p>We’ll begin by placing the brand colors as custom properties within the <code>:root</code> selector, within our <code>theme</code> layer.</p>

  230. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> theme</span> <span class="token punctuation">{</span>

  231.   <span class="token selector">:root</span> <span class="token punctuation">{</span>

  232. 

  233.     <span class="token property">--primary</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>265<span class="token punctuation">,</span> 38%<span class="token punctuation">,</span> 13%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  234.     <span class="token property">--secondary</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>283<span class="token punctuation">,</span> 6%<span class="token punctuation">,</span> 45%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  235.     <span class="token property">--tertiary</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>257<span class="token punctuation">,</span> 15%<span class="token punctuation">,</span> 91%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  236.     <span class="token property">--light</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>270<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 99%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  237.     <span class="token property">--accent</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>278<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 92%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  238.     <span class="token property">--accent--alt</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>279<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 97%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  239.     <span class="token property">--accent--ui</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>284<span class="token punctuation">,</span> 55%<span class="token punctuation">,</span> 66%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  240.   <span class="token punctuation">}</span>

  241. <span class="token punctuation">}</span></code></pre>

  242. <p>You may also wish to place font sizes or other "tokens" you anticipate re-using in this theme layer. Later, we'll elevate some component properties to this global space. We'll also continue to inject custom properties throughout our layout utilities and component styles to develop an API for them.</p>

  243. <p>Now that we have a brand and color palette, it's time to add the other two features.</p>

  244. <p>First is <code>color-scheme</code>, which allows us to inform the browser whether the default site appearance is <code>light</code> or <code>dark</code> or assign a priority if both are supported. The priority comes from the order the values are listed, so <code>light dark</code> gives "light" priority. The use of <code>color-scheme</code> may affect the color of scrollbars and adjust the appearance of input fields. Unless you provide overrides, it can also adjust the <code>background</code> and <code>color</code> properties. While we are setting it on <code>html</code>, you may also localize it to a certain component or section of a layout. Sara Joy shares more about <a href="https://www.htmhell.dev/adventcalendar/2022/19/">how color-scheme works</a>.</p>

  245. <p>The second property is <code>accent-color</code> which applies your selected color to the form inputs of checkboxes, radio buttons, range, and progress elements. For radio buttons and checkboxes, this means it's used to color the input in the <code>:checked</code> state. This is an impactful step towards theming these tricky-to-style form inputs and may be a sufficient solution instead of completely restyling. Michelle Barker shares more on <a href="https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/">how accent-color works</a>.</p>

  246. <blockquote>

  247. <p>If you do feel you need to have full style control, see my guides to <a href="https://moderncss.dev/pure-css-custom-styled-radio-buttons/">styling radio buttons</a> and <a href="https://moderncss.dev/pure-css-custom-checkbox-style/">styling checkboxes</a>.</p>

  248. </blockquote>

  249. <p>Jaberwocky best supports a <code>light</code> appearance, and will use the darkest purple that is assigned to <code>--accent--ui</code> for the <code>accent-color</code>.</p>

  250. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> theme</span> <span class="token punctuation">{</span>

  251.   <span class="token selector">html</span> <span class="token punctuation">{</span>

  252.     <span class="token property">color-scheme</span><span class="token punctuation">:</span> light<span class="token punctuation">;</span>

  253.     <span class="token property">accent-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--accent--ui<span class="token punctuation">)</span><span class="token punctuation">;</span>

  254.   <span class="token punctuation">}</span>

  255. <span class="token punctuation">}</span></code></pre>

  256. 

  257. <p>There is so much we could cover regarding CSS layout, but I want to share two utilities I use in nearly every project for creating responsive grids. The first solution relies on CSS grid, and the second on flexbox.</p>

  258. 

  259. <p>Using CSS grid, this first utility creates a responsive set of columns that are auto-generated depending on the amount of available inline space.</p>

  260. <p>Beyond defining <code>display: grid</code>, the magic of this rule is in the assignment for <code>grid-template-columns</code> which uses the <code>repeat()</code> function.</p>

  261. <details open>

  262.   <summary>CSS for "CSS Grid Layout"</summary>

  263. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  264.   <span class="token selector">.layout-grid</span> <span class="token punctuation">{</span>

  265.     <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  266.     <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>

  267.       auto-fit<span class="token punctuation">,</span>

  268.       <span class="token function">minmax</span><span class="token punctuation">(</span><span class="token function">min</span><span class="token punctuation">(</span>100%<span class="token punctuation">,</span> 30ch<span class="token punctuation">)</span><span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span>

  269.     <span class="token punctuation">)</span><span class="token punctuation">;</span>

  270.   <span class="token punctuation">}</span>

  271. <span class="token punctuation">}</span>

  272. </code></pre>

  273. </details>

  274. 

  275. <div class="demo">

  276. <div class="demo--content">

  277. <p class="layout-grid-5"><span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span></p>

  278. </div>

  279. </div>

  280. <p>The first parameter within repeat uses the <code>auto-fit</code> keyword, which tells grid to create as many columns as can fit given the sizing definition which follows. The sizing definition uses the grid-specific function of <code>minmax()</code>, which accepts two values that list the minimum and maximum allowed size for the column. For the maximum, we've used <code>1fr</code>, which will allow the columns to stretch out and share the space equitably when more than the minimum is available.</p>

  281. <p>For the minimum, we've included the extra CSS math function of <code>min()</code> to ask the browser to use the smaller computed size between the listed options. The reason is that there is potential for overflow once the available space is more narrow than <code>30ch</code>. By listing <code>100%</code> as an alternate option, the column can fill whatever space is available below that minimum.</p>

  282. <p>The behavior with this minimum in place means that once the available space becomes less than the amount required for multiple elements to fit in the row, the elements will drop to create new rows. So with a minimum of <code>30ch</code>, we can fit at least three elements in a <code>100ch</code> space. However, if that space reduces to <code>70ch</code>, then only two would fit in one row, and one would drop to a new row.</p>

  283. <p>To improve customization, we'll drop in a custom property to define the minimum allowed size for a column, which will function as a "breakpoint" for each column before causing the overflow to become new rows. For the most flexibility, I also like to include a custom property to allow overriding the <code>gap</code>.</p>

  284. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  285.   <span class="token selector">.layout-grid</span> <span class="token punctuation">{</span>

  286.     <span class="token property">--layout-grid-min</span><span class="token punctuation">:</span> 30ch<span class="token punctuation">;</span>

  287.     <span class="token property">--layout-grid-gap</span><span class="token punctuation">:</span> 3vw<span class="token punctuation">;</span>

  288. 

  289.     <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  290.     <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>

  291.       auto-fit<span class="token punctuation">,</span>

  292.       <span class="token function">minmax</span><span class="token punctuation">(</span><span class="token function">min</span><span class="token punctuation">(</span>100%<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-grid-min<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span>

  293.     <span class="token punctuation">)</span><span class="token punctuation">;</span>

  294.     <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-grid-gap<span class="token punctuation">)</span><span class="token punctuation">;</span>

  295.   <span class="token punctuation">}</span>

  296. <span class="token punctuation">}</span></code></pre>

  297. <p>Since this solution uses CSS grid, the grid children are destined to stay in a grid formation. Items that drop to create new rows will remain constrained within the implicit columns formed on the prior rows.</p>

  298. 

  299. <p>Sometimes in a grid with an odd number of children, you may want to allow them to expand and fill any leftover space. For that behavior, we switch our strategy to use flexbox.</p>

  300. <p>The flexbox grid utility shares two common features with the CSS grid utility: defining a minimum "column" size and the <code>gap</code> size. We can set up two global custom properties to keep those initial values in sync. We'll elevate those defaults to our <code>theme</code> layer.</p>

  301. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> theme</span> <span class="token punctuation">{</span>

  302.   <span class="token selector">:root</span> <span class="token punctuation">{</span>

  303. 

  304.     <span class="token property">--layout-column-min</span><span class="token punctuation">:</span> 30ch<span class="token punctuation">;</span>

  305.     <span class="token property">--layout-gap</span><span class="token punctuation">:</span> 3vmax<span class="token punctuation">;</span>

  306.   <span class="token punctuation">}</span>

  307. <span class="token punctuation">}</span></code></pre>

  308. <p>Then in the grid utility and to kick off our flexbox utility, we’ll use those globals as the defaults for the local custom properties.</p>

  309. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  310.   <span class="token selector">.layout-grid</span> <span class="token punctuation">{</span>

  311. 

  312.     <span class="token property">--layout-grid-min</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-column-min<span class="token punctuation">)</span><span class="token punctuation">;</span>

  313.     <span class="token property">--layout-grid-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-gap<span class="token punctuation">)</span><span class="token punctuation">;</span>

  314.   <span class="token punctuation">}</span>

  315. 

  316.   <span class="token selector">.flex-layout-grid</span> <span class="token punctuation">{</span>

  317.     <span class="token property">--flex-grid-min</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-column-min<span class="token punctuation">)</span><span class="token punctuation">;</span>

  318.     <span class="token property">--flex-grid-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-gap<span class="token punctuation">)</span><span class="token punctuation">;</span>

  319. 

  320.     <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--flex-grid-gap<span class="token punctuation">)</span><span class="token punctuation">;</span>

  321.   <span class="token punctuation">}</span>

  322. <span class="token punctuation">}</span></code></pre>

  323. <p>Beyond those custom properties, the base flexbox grid utility simply sets up the display and wrap properties. Wrapping is important so that elements can drop and create new rows as space decreases.</p>

  324. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  325.   <span class="token selector">.flex-layout-grid</span> <span class="token punctuation">{</span>

  326. 

  327. 

  328.     <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  329.     <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>

  330.   <span class="token punctuation">}</span>

  331. <span class="token punctuation">}</span></code></pre>

  332. <p>With CSS grid, the parent controls the child size. But with flexbox, the children control their sizing. Since our utility doesn't know what the flexbox children will be, we'll use the universal selector - <code>*</code> - to select all direct children to apply flexbox sizing. With the <code>flex</code> shorthand, we define that children can grow and shrink and set the <code>flex-basis</code> to the minimum value.</p>

  333. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  334.   <span class="token selector">.flex-layout-grid</span> <span class="token punctuation">{</span>

  335.     <span class="token selector">&gt; *</span> <span class="token punctuation">{</span>

  336.       <span class="token property">flex</span><span class="token punctuation">:</span> 1 1 <span class="token function">var</span><span class="token punctuation">(</span>--flex-grid-min<span class="token punctuation">)</span><span class="token punctuation">;</span>

  337.     <span class="token punctuation">}</span>

  338.   <span class="token punctuation">}</span>

  339. <span class="token punctuation">}</span></code></pre>

  340. <p>As with the previous grid utility, this “min” value will cause elements to wrap to new rows once the available space is reduced. The difference is that the <code>flex-grow</code> behavior will allow children to grow into unused space within the row. Given a grid of three where only two elements can fit in a row, the third will expand to fill the entire second row. And in a grid of five where three elements can align, the remaining two will share the space of the second row.</p>

  341. <details open>

  342.   <summary>CSS for "CSS Flexbox Grid Layout"</summary>

  343. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  344.   <span class="token selector">.flex-layout-grid</span> <span class="token punctuation">{</span>

  345.     <span class="token property">--flex-grid-min</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-column-min<span class="token punctuation">)</span><span class="token punctuation">;</span>

  346.     <span class="token property">--flex-grid-gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--layout-gap<span class="token punctuation">)</span><span class="token punctuation">;</span>

  347. 

  348.     <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  349.     <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span>

  350. 

  351.     <span class="token selector">&gt; *</span> <span class="token punctuation">{</span>

  352.       <span class="token property">flex</span><span class="token punctuation">:</span> 1 1 <span class="token function">var</span><span class="token punctuation">(</span>--flex-grid-min<span class="token punctuation">)</span><span class="token punctuation">;</span>

  353.     <span class="token punctuation">}</span>

  354.   <span class="token punctuation">}</span>

  355. <span class="token punctuation">}</span>

  356. </code></pre>

  357. </details>

  358. 

  359. <div class="demo">

  360. <div class="demo--content">

  361. <p class="flex-layout-grid-679"><span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span></p>

  362. </div>

  363. </div>

  364. <div class="heading-wrapper h3">

  365. <h3 id="prepare-for-container-queries">Prepare for Container Queries</h3>

  366. <a class="anchor" href="#prepare-for-container-queries" aria-labelledby="prepare-for-container-queries"><span hidden>#</span></a></div>

  367. <p>Shortly, we will use container size queries to develop several component styles. Container size queries allow developing rules that change elements based on available space.</p>

  368. <p>To correctly query against the size of flexbox or grid children, we can enhance our utilities to include container definitions.</p>

  369. <p>We’ll default the container name to <code>grid-item</code> while also allowing an override via a custom property. This allows specific container query instances to be explicit about which container they are querying against.</p>

  370. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> layout</span> <span class="token punctuation">{</span>

  371.   <span class="token selector">:is(.layout-grid, .flex-layout-grid) &gt; *</span> <span class="token punctuation">{</span>

  372.     <span class="token property">container</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--grid-item-container<span class="token punctuation">,</span> grid-item<span class="token punctuation">)</span> / inline-size<span class="token punctuation">;</span>

  373.   <span class="token punctuation">}</span>

  374. <span class="token punctuation">}</span></code></pre>

  375. <p>Later examples will demonstrate how to use features of container size queries and make use of these layout utility containers.</p>

  376. <blockquote>

  377. <p><strong>Note</strong>: There is <a href="https://bugs.webkit.org/show_bug.cgi?id=256047">a bug as of Safari 16.4</a> where using containment on a grid using <code>auto-fit</code> collapses widths to zero, so proceed with caution if you use this strategy before the bug is resolved.</p>

  378. </blockquote>

  379. 

  380. <p>We’ve reached the first of four components we’ll develop to showcase even more modern CSS features. While you won’t have a complete framework after four components, you will have a solid foundation to continue building from and some shiny new things in your CSS toolbox!</p>

  381. <p><img src="https://moderncss.dev/img/posts/32/preview-buttons.png" alt=""></p>

  382. <p>Our styles will support the following variations of a button:</p>

  383. <ul>

  384. <li>a button element</li>

  385. <li>a link element</li>

  386. <li>text plus an icon</li>

  387. <li>icon plus text</li>

  388. <li>icon-only</li>

  389. </ul>

  390. <p>There are some reset properties beyond the scope of this article, but the first properties that make a difference in customizing our buttons have to do with color.</p>

  391. <div class="heading-wrapper h3">

  392. <h3 id="custom-property-and-component-apis">Custom Property and Component APIs</h3>

  393. <a class="anchor" href="#custom-property-and-component-apis" aria-labelledby="custom-property-and-component-apis"><span hidden>#</span></a></div>

  394. <p>For both the <code>color</code> and <code>background-color</code> properties, we’ll begin to develop an API for our buttons by leveraging custom properties.</p>

  395. <p>The API is created by first assigning an undefined custom property. Later, we can tap into that API to easily create button variants, including when adjusting for states like <code>:hover</code> or <code>:disabled</code>.</p>

  396. <p>Then, we use the values that will signify the "default" variant for the second value, which is considered the property's fallback. In this case, our lavender <code>--accent</code> property will be the default color. Our <code>--primary</code> for this theme is nearly black, and will be the complimenting default for the <code>color</code> property.</p>

  397. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@layer</span> components</span> <span class="token punctuation">{</span>

  398.   <span class="token selector">.button</span> <span class="token punctuation">{</span>

  399.     <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-color<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  400.     <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-bg<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--accent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  401.   <span class="token punctuation">}</span>

  402. <span class="token punctuation">}</span></code></pre>

  403. <div class="heading-wrapper h3">

  404. <h3 id="creating-variant-styles-with-has">Creating Variant Styles with <code>:has()</code></h3>

  405. <a class="anchor" href="#creating-variant-styles-with-has" aria-labelledby="creating-variant-styles-with-has"><span hidden>#</span></a></div>

  406. <p>Next, we’ll address the presence of an <code>.icon</code> within the button. Detecting presence is a special capability of the very modern feature <code>:has()</code>.</p>

  407. <p>With <code>:has()</code>, we can look inside the button and see whether it has an <code>.icon</code> and if it does, update the button’s properties. In this case, applying flex alignment and a <code>gap</code> value. Because appending the <code>:has()</code> pseudo class will increase the specificity of the base class selector, we’ll also wrap the <code>:has()</code> clause with <code>:where()</code> to null the specificity of the clause to zero. Meaning, the selector will retain the specificity of a class only.</p>

  408. <pre class="language-css"><code class="language-css"><span class="token selector">.button:where(:has(.icon))</span> <span class="token punctuation">{</span>

  409.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  410.   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span>

  411.   <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  412. <span class="token punctuation">}</span></code></pre>

  413. <p>In our markup for the case of the icon-only buttons is an element with the class of <code>.inclusively-hidden</code>, which removes the visible label but still allows an accessible label for assistive technology like screen readers. So, we can look for that class to signify the icon-only variation and produce a circle appearance.</p>

  414. <pre class="language-css"><code class="language-css"><span class="token selector">.button:where(:has(.inclusively-hidden))</span> <span class="token punctuation">{</span>

  415.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>

  416.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span>

  417. <span class="token punctuation">}</span></code></pre>

  418. <p>Next, for buttons without icons, we want to set a minimum inline size, and center the text. We can achieve this by combining the <code>:not()</code> pseudo-class with <code>:has()</code> to create a selector that says “buttons that do not have icons.”</p>

  419. <pre class="language-css"><code class="language-css"><span class="token selector">.button:where(:not(:has(.icon)))</span> <span class="token punctuation">{</span>

  420.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  421.   <span class="token property">min-inline-size</span><span class="token punctuation">:</span> 10ch<span class="token punctuation">;</span>

  422. <span class="token punctuation">}</span></code></pre>

  423. <p>Our final essential button variation is the case of buttons that are not icon-only. This means text buttons and those that include an icon. So, our selector will again combine <code>:not()</code> and <code>:has()</code> to say “buttons that do not have the hidden class,” which we noted was the signifier for the icon-only variant.</p>

  424. <pre class="language-css"><code class="language-css"><span class="token selector">.button:where(:not(:has(.inclusively-hidden)))</span> <span class="token punctuation">{</span>

  425.   <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-padding<span class="token punctuation">,</span> 0.75em 1em<span class="token punctuation">)</span><span class="token punctuation">;</span>

  426.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  427. <span class="token punctuation">}</span></code></pre>

  428. <p>This variant exposes a <code>--button-padding</code> custom property, and sets an explicit <code>border-radius</code>.</p>

  429. <details open>

  430.   <summary>CSS for "Button Component"</summary>

  431. <pre class="language-css"><code class="language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span>

  432.   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-color<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  433.   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-bg<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--accent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  434. <span class="token punctuation">}</span>

  435. 

  436. <span class="token selector">.button:where(:has(.icon))</span> <span class="token punctuation">{</span>

  437.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  438.   <span class="token property">gap</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span>

  439.   <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  440. <span class="token punctuation">}</span>

  441. 

  442. <span class="token selector">.button:where(:has(.inclusively-hidden))</span> <span class="token punctuation">{</span>

  443.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>

  444.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span>

  445. <span class="token punctuation">}</span>

  446. 

  447. <span class="token selector">.button:where(:not(:has(.icon)))</span> <span class="token punctuation">{</span>

  448.   <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  449.   <span class="token property">min-inline-size</span><span class="token punctuation">:</span> 10ch<span class="token punctuation">;</span>

  450. <span class="token punctuation">}</span>

  451. 

  452. <span class="token selector">.button:where(:not(:has(.inclusively-hidden)))</span> <span class="token punctuation">{</span>

  453.   <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--button-padding<span class="token punctuation">,</span> 0.35em 1em<span class="token punctuation">)</span><span class="token punctuation">;</span>

  454.   <span class="token property">border-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  455. <span class="token punctuation">}</span>

  456. </code></pre>

  457. </details>

  458. 

  459. <div class="demo no-resize">

  460. <div class="demo--content">

  461. <div class="demo-container-136">

  462. <button type="button" class="btn-136">Button</button>

  463. <a href="" class="btn-136">Link</a>

  464. <button type="button" class="btn-136">

  465.   Text + Icon Button

  466.   <svg class="icon-136" aria-hidden="true">

  467.     <use href="#star"></use>

  468.   </svg>

  469. </button>

  470. <button type="button" class="btn-136">

  471.   <svg class="icon-136" aria-hidden="true">

  472.     <use href="#star"></use>

  473.   </svg>

  474.   Icon + Text button

  475. </button>

  476. <button type="button" class="btn-136">

  477.   <svg class="icon-136" aria-hidden="true">

  478.     <use href="#star"></use>

  479.   </svg>

  480.   <span class="inclusively-hidden-136">Icon only button</span>

  481. </button>

  482. </div>

  483. </div>

  484. </div>

  485. <p><svg hidden>

  486.   <defs>

  487.     <symbol viewbox="0 0 256 256" id="star">

  488.       <path d="m234 115.5l-45.2 37.6l14.3 58.1a16.5 16.5 0 0 1-15.8 20.8a16.1 16.1 0 0 1-8.7-2.6l-50.5-31.9h-.2L81 227.2a18 18 0 0 1-20.1-.6a18.5 18.5 0 0 1-7-19.6l13.5-53.1L22 115.5a16.8 16.8 0 0 1-5.2-18.1A16.5 16.5 0 0 1 31.4 86l59-3.8l22.4-55.8A16.4 16.4 0 0 1 128 16a16.4 16.4 0 0 1 15.2 10.4l22 55.5l59.4 4.1a16.4 16.4 0 0 1 14.6 11.4a16.8 16.8 0 0 1-5.2 18.1Z"></path>

  489.     </symbol>

  490.   </defs>

  491. </svg></p>

  492. <div class="heading-wrapper h3">

  493. <h3 id="using-custom-properties-api-for-states">Using Custom Properties API for States</h3>

  494. <a class="anchor" href="#using-custom-properties-api-for-states" aria-labelledby="using-custom-properties-api-for-states"><span hidden>#</span></a></div>

  495. <p>While the initial visual appearance is complete, we need to handle for two states: <code>:hover</code> and <code>:focus-visible</code>. Here is where we get to use our custom properties API, with no additional properties required to make the desired changes.</p>

  496. <p>For the <code>:hover</code> state, we are updating the color properties. And for <code>:focus-visible</code>, we're tapping into the API we exposed for that state within our reset. Notably, we're using a negative <code>outline-offset</code> to place it inside the button boundary which helps with ensuring proper contrast.</p>

  497. <pre class="language-css"><code class="language-css"><span class="token selector">.button:hover</span> <span class="token punctuation">{</span>

  498.   <span class="token property">--button-bg</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--accent--alt<span class="token punctuation">)</span><span class="token punctuation">;</span>

  499.   <span class="token property">--button-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary<span class="token punctuation">)</span><span class="token punctuation">;</span>

  500. <span class="token punctuation">}</span>

  501. 

  502. <span class="token selector">.button:focus-visible</span> <span class="token punctuation">{</span>

  503.   <span class="token property">--outline-style</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span>

  504.   <span class="token property">--outline-offset</span><span class="token punctuation">:</span> -0.35em<span class="token punctuation">;</span>

  505. <span class="token punctuation">}</span></code></pre>

  506. 

  507. <p><img src="https://moderncss.dev/img/posts/32/preview-cards.png" alt=""></p>

  508. <p>For the card component, we have three variants and one state to manage:</p>

  509. <ul>

  510. <li>default, small card</li>

  511. <li>“new” style</li>

  512. <li>wide with larger text</li>

  513. <li>focus-visible state</li>

  514. </ul>

  515. <p>We’ll start from the baseline styles that provide the basic positioning and styles of the card elements. The styles don’t match our mocked-up design, but the cards are usable. And that’s pretty critical that our component generally “works” without the latest features! From this base, we can progressively enhance up to our ideal appearance.</p>

  516. <p>Here are a few other details about our cards and expected usage:</p>

  517. <ul>

  518. <li>we’ll place them within our flexbox-based layout grid</li>

  519. <li>the layout grid will be within a wrapping container</li>

  520. </ul>

  521. <p>The cards will anticipate the layout grid and it’s wrapper, which both have been defined as containers with distinct names. That means we can prepare container queries to further adjust the card layouts.</p>

  522. <details false>

  523.   <summary>CSS for "Base Card Styles"</summary>

  524. <pre class="language-css"><code class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span>

  525.   <span class="token property">--card-bg</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--demo-light<span class="token punctuation">)</span><span class="token punctuation">;</span>

  526.   <span class="token property">--dot-color</span><span class="token punctuation">:</span> <span class="token function">color-mix</span><span class="token punctuation">(</span>in hsl<span class="token punctuation">,</span> <span class="token function">var</span><span class="token punctuation">(</span>--demo-primary<span class="token punctuation">)</span><span class="token punctuation">,</span> transparent 95%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  527. 

  528.   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--card-bg<span class="token punctuation">)</span><span class="token punctuation">;</span>

  529.   <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--dot-color<span class="token punctuation">)</span> 10%<span class="token punctuation">,</span> transparent 12%<span class="token punctuation">)</span><span class="token punctuation">,</span>

  530.     <span class="token function">radial-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--dot-color<span class="token punctuation">)</span> 11%<span class="token punctuation">,</span> transparent 13%<span class="token punctuation">)</span><span class="token punctuation">;</span>

  531.   <span class="token property">background-size</span><span class="token punctuation">:</span> 28px 28px<span class="token punctuation">;</span>

  532.   <span class="token property">background-position</span><span class="token punctuation">:</span> 0 0<span class="token punctuation">,</span> 72px 72px<span class="token punctuation">;</span>

  533.   <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  534.   <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">var</span><span class="token punctuation">(</span>--demo-primary<span class="token punctuation">)</span><span class="token punctuation">;</span>

  535.   <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>

  536.   <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  537.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  538.   <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  539.   <span class="token property">align-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>

  540. <span class="token punctuation">}</span>

  541. 

  542. <span class="token selector">.card__number-icon</span> <span class="token punctuation">{</span>

  543.   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  544.   <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>

  545. <span class="token punctuation">}</span>

  546. 

  547. <span class="token selector">.card__number-icon::before</span> <span class="token punctuation">{</span>

  548.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"0"</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-num<span class="token punctuation">)</span><span class="token punctuation">;</span>

  549.   <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--demo-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>

  550.   <span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>

  551.   <span class="token property">font-size</span><span class="token punctuation">:</span> 1.15rem<span class="token punctuation">;</span>

  552. <span class="token punctuation">}</span>

  553. 

  554. <span class="token selector">.card__number-icon::before,

  555. .card__number-icon img</span> <span class="token punctuation">{</span>

  556.   <span class="token property">width</span><span class="token punctuation">:</span> 2.25rem<span class="token punctuation">;</span>

  557.   <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>

  558.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  559.   <span class="token property">place-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  560. <span class="token punctuation">}</span>

  561. 

  562. <span class="token selector">.card__number-icon img</span> <span class="token punctuation">{</span>

  563.   <span class="token property">border</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--demo-tertiary<span class="token punctuation">)</span><span class="token punctuation">;</span>

  564.   <span class="token property">padding</span><span class="token punctuation">:</span> 0.15rem<span class="token punctuation">;</span>

  565. <span class="token punctuation">}</span>

  566. 

  567. <span class="token selector">.card a</span> <span class="token punctuation">{</span>

  568.   <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  569.   <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--demo-primary<span class="token punctuation">)</span><span class="token punctuation">;</span>

  570. <span class="token punctuation">}</span>

  571. 

  572. <span class="token selector">.card a::before</span> <span class="token punctuation">{</span>

  573.   <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>

  574.   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>

  575.   <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  576. <span class="token punctuation">}</span>

  577. 

  578. <span class="token selector">.card :is(h2, h3)</span> <span class="token punctuation">{</span>

  579.   <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span>

  580.   <span class="token property">font-size</span><span class="token punctuation">:</span> 1.25rem<span class="token punctuation">;</span>

  581. <span class="token punctuation">}</span>

  582. 

  583. <span class="token selector">.card a</span> <span class="token punctuation">{</span>

  584.   <span class="token property">font-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>

  585. <span class="token punctuation">}</span>

  586. </code></pre>

  587. </details>

  588. 

  589. <div class="heading-wrapper h3">

  590. <h3 id="styling-based-on-element-presence">Styling Based on Element Presence</h3>

  591. <a class="anchor" href="#styling-based-on-element-presence" aria-labelledby="styling-based-on-element-presence"><span hidden>#</span></a></div>

  592. <p>Let’s start with the “New” card variation. There are two details that change, both based on the presence of the <code>.tag</code> element. The hint about how to handle these styles is that we’re detecting the presence of something, which means we’ll bring in <code>:has()</code> for the job.</p>

  593. <p>The first detail is to add an additional border to the card, which we’ll actually apply with a <code>box-shadow</code> because it will not add length to the card’s box model like a real border would. Also, the card already has a visible, actual border as part of it’s styling, which this variation will retain.</p>

  594. <pre class="language-css"><code class="language-css"><span class="token selector">.card:has(.tag)</span> <span class="token punctuation">{</span>

  595.   <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 0 0 4px <span class="token function">var</span><span class="token punctuation">(</span>--accent<span class="token punctuation">)</span><span class="token punctuation">;</span>

  596. <span class="token punctuation">}</span></code></pre>

  597. <p>The other detail is to adjust the display of the headline, which the “New” tag resides in. This selector will be scoped to assume one of two header tags has been used. We’ll use <code>:is()</code> to efficiently create that group. And since we’ll be adding more headline styling soon, we’ll also try out nesting for this rule.</p>

  598. <pre class="language-css"><code class="language-css"><span class="token selector">.card :is(h2, h3)</span> <span class="token punctuation">{</span>

  599.   <span class="token selector">&amp;:has(.tag)</span> <span class="token punctuation">{</span>

  600.     <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  601.     <span class="token property">gap</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span>

  602.     <span class="token property">justify-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>

  603.   <span class="token punctuation">}</span>

  604. <span class="token punctuation">}</span></code></pre>

  605. <details false>

  606.   <summary>CSS for "'New' Card"</summary>

  607. <pre class="language-css"><code class="language-css"><span class="token selector">.card:has(.tag)</span> <span class="token punctuation">{</span>

  608.   <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 0 0 4px <span class="token function">var</span><span class="token punctuation">(</span>--demo-accent<span class="token punctuation">)</span><span class="token punctuation">;</span>

  609. <span class="token punctuation">}</span>

  610. 

  611. <span class="token selector">.card :is(h2, h3):has(.tag)</span> <span class="token punctuation">{</span>

  612.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  613.   <span class="token property">gap</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span>

  614.   <span class="token property">justify-items</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>

  615. <span class="token punctuation">}</span>

  616. </code></pre>

  617. </details>

  618. 

  619. <p>Our baseline card styles include a method for making the card surface seem clickable even though the link element only wraps the headline text. But when the card link is focused, we want an outline to correctly appear near the perimeter of the card.</p>

  620. <p>We can achieve this without any positioning hackery by using the <code>:focus-within</code> pseudo-class. With <code>:focus-within</code>, we can style a parent element when a child is in a focused state. That let’s us add a regular <code>outline</code> to the card by providing a negative <code>outline-offset</code> to pull it inside the existing border.</p>

  621. <pre class="language-css"><code class="language-css"><span class="token selector">.card:focus-within</span> <span class="token punctuation">{</span>

  622.   <span class="token property">outline</span><span class="token punctuation">:</span> 3px solid #b77ad0<span class="token punctuation">;</span>

  623.   <span class="token property">outline-offset</span><span class="token punctuation">:</span> -6px<span class="token punctuation">;</span>

  624. <span class="token punctuation">}</span></code></pre>

  625. <p>That still leaves us the default outline on the link, which we’ll switch to use a <code>transparent</code> outline. The reason is that we still need to retain the outline for focus visibility for users of forced-colors mode, which removes our defined colors and swaps to a limited palette. In that mode, <code>transparent</code> will be replaced with a solid, visible color.</p>

  626. <pre class="language-css"><code class="language-css"><span class="token selector">.card a:focus-visible</span> <span class="token punctuation">{</span>

  627.   <span class="token property">--outline-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>

  628. <span class="token punctuation">}</span></code></pre>

  629. <p>The final stateful style we’ll add is to include a text underline on the link when it is hovered or has visible focus. This helps identify the purpose as a link.</p>

  630. <pre class="language-css"><code class="language-css"><span class="token selector">.card a:is(:hover, :focus-visible)</span> <span class="token punctuation">{</span>

  631.   <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>

  632. <span class="token punctuation">}</span></code></pre>

  633. <details false>

  634.   <summary>CSS for "Card States"</summary>

  635. <pre class="language-css"><code class="language-css"><span class="token selector">.card:focus-within</span> <span class="token punctuation">{</span>

  636.   <span class="token property">outline</span><span class="token punctuation">:</span> 3px solid #b77ad0<span class="token punctuation">;</span>

  637.   <span class="token property">outline-offset</span><span class="token punctuation">:</span> -6px<span class="token punctuation">;</span>

  638. <span class="token punctuation">}</span>

  639. 

  640. <span class="token selector">.card a:is(:focus, :focus-visible)</span> <span class="token punctuation">{</span>

  641.   <span class="token property">outline</span><span class="token punctuation">:</span> 1px solid transparent<span class="token punctuation">;</span>

  642. <span class="token punctuation">}</span>

  643. 

  644. <span class="token selector">.card a:is(:hover, :focus-visible)</span> <span class="token punctuation">{</span>

  645.   <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>

  646. <span class="token punctuation">}</span>

  647. </code></pre>

  648. </details>

  649. 

  650. <div class="heading-wrapper h3">

  651. <h3 id="context-based-container-queries">Context-Based Container Queries</h3>

  652. <a class="anchor" href="#context-based-container-queries" aria-labelledby="context-based-container-queries"><span hidden>#</span></a></div>

  653. <p>Since we’ve placed our demo cards in the flexbox layout grid, they already seem to be responsive. However, our design mockup included a “wide” card variation that is slightly different than simply stretching out the basic card.</p>

  654. <p>If you recall, we already defined each child of our flexbox grid to be a container. The default container name is <code>grid-item</code>. Additionally, there is a wrapper around the layout grid which also is defined as a container named <code>layout-container</code>. One level of our container queries will be in response to how wide the entire layout grid is, for which we’ll query the <code>layout-container</code>, and the other will respond to the inline size of a unique flex child, which is the <code>grid-item</code> container.</p>

  655. <p><img src="https://moderncss.dev/img/posts/32/spec-cards.png" alt=""></p>

  656. <p>A key concept is that a container query cannot style the container itself. That’s why we haven’t made the actual <code>.card</code> a container, but are looking to its direct ancestor of the <code>grid-item</code> container to attach the container query. The <code>grid-item</code> container will be equivalent to the inline-size of the card itself since it directly wraps the card.</p>

  657. <p>We can also use the new media range query syntax when using container size queries. This enables math operators like <code>&gt;</code> (greater than) to compare values.</p>

  658. <p>We’ll assign the “wide” variation styles when the <code>grid-item</code> container’s inline size is greater than <code>35ch</code>.</p>

  659. <pre class="language-css"><code class="language-css">

  660. <span class="token atrule"><span class="token rule">@container</span> grid-item <span class="token punctuation">(</span>inline-size &gt; 35ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  661.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  662.     <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

  663.     <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  664.     <span class="token property">justify-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>

  665.     <span class="token property">gap</span><span class="token punctuation">:</span> 5cqi<span class="token punctuation">;</span>

  666.   <span class="token punctuation">}</span>

  667. <span class="token punctuation">}</span></code></pre>

  668. <p>The styles switch the grid orientation into columns instead of the default of rows, which places the number and icon container on the starting side. Then, we’ve added some alignment as well as <code>gap</code>.</p>

  669. <p>The <code>gap</code> property slips in another excellent feature from the container queries spec which is container units. The <code>cqi</code> unit we’ve used stands for “container query inline”, so effectively this value will render as 5% of the calculated inline size, expanding for larger spaces and shrinking for smaller spaces.</p>

  670. <p>One more adjustment for this variation is to stack the number and icon, so we'll add those styles to the container query.</p>

  671. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> grid-item <span class="token punctuation">(</span>inline-size &gt; 35ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  672.   <span class="token selector">.card__number-icon</span> <span class="token punctuation">{</span>

  673.     <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

  674.     <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  675.   <span class="token punctuation">}</span>

  676. <span class="token punctuation">}</span></code></pre>

  677. <p>There’s one last adjustment we have, and it will be based on how much room the card grid layout has available. That means we’ll switch and query the <code>layout-container</code>.</p>

  678. <p>The adjustment is to set an <code>aspect-ratio</code> for the default card variations. We’ll also have to add a style to <code>unset</code> the ratio for the wide variation.</p>

  679. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> layout-container <span class="token punctuation">(</span>inline-size &gt; 80ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  680.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  681.     <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 4/3<span class="token punctuation">;</span>

  682.   <span class="token punctuation">}</span>

  683. <span class="token punctuation">}</span>

  684. 

  685. <span class="token atrule"><span class="token rule">@container</span> grid-item <span class="token punctuation">(</span>inline-size &gt; 35ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  686.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  687. 

  688.     <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  689.   <span class="token punctuation">}</span>

  690. <span class="token punctuation">}</span></code></pre>

  691. <p>You may safely use <code>aspect-ratio</code> without worry of content overflow because the ratio is forgiving, and allows content size to take precedence. Unless dimension properties also limit the element size, the <code>aspect-ratio</code> will allow content to increase the element’s size.</p>

  692. <p>That said, we will also place one dimension property of <code>max-width: 100%</code> on the card so that it stays within the confines of the grid item. Flexbox by itself will not force the element to a particular size, so the <code>aspect-ratio</code> could cause it to grow outside the flex item boundary. Adding <code>max-inline-size</code> will keep the growth in check while allowing longer content to increase the height when needed.</p>

  693. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> layout-container <span class="token punctuation">(</span>inline-size &gt; 80ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  694.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  695.     <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 4/3<span class="token punctuation">;</span>

  696.     <span class="token property">max-inline-size</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  697.   <span class="token punctuation">}</span>

  698. <span class="token punctuation">}</span></code></pre>

  699. <details false>

  700.   <summary>CSS for "Card Container Queries"</summary>

  701. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> layout-container <span class="token punctuation">(</span>inline-size &gt; 80ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  702.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  703.     <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 4/3<span class="token punctuation">;</span>

  704.     <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  705.   <span class="token punctuation">}</span>

  706. <span class="token punctuation">}</span>

  707. 

  708. <span class="token atrule"><span class="token rule">@container</span> grid-item <span class="token punctuation">(</span>inline-size &gt; 35ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  709.   <span class="token selector">.card</span> <span class="token punctuation">{</span>

  710.     <span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

  711.     <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>

  712.     <span class="token property">justify-content</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>

  713.     <span class="token property">gap</span><span class="token punctuation">:</span> 5cqi<span class="token punctuation">;</span>

  714.     <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  715.   <span class="token punctuation">}</span>

  716. 

  717.   <span class="token selector">.card__number-icon</span> <span class="token punctuation">{</span>

  718.     <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>

  719.     <span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>

  720.   <span class="token punctuation">}</span>

  721. <span class="token punctuation">}</span>

  722. </code></pre>

  723. </details>

  724. 

  725. <div class="heading-wrapper h3">

  726. <h3 id="container-query-fluid-type">Container Query Fluid Type</h3>

  727. <a class="anchor" href="#container-query-fluid-type" aria-labelledby="container-query-fluid-type"><span hidden>#</span></a></div>

  728. <p>According to our mockup, the last adjustment we need is to increase the font size as the card becomes wider.</p>

  729. <p>We’ll set up a range of allowed values using <code>clamp()</code>. This function accepts three values: a minimum, an ideal, and a maximum. If we provide a dynamic value for the middle ideal, then the browser can interpolate between the minimum and maximum.</p>

  730. <p>We’ll use the <code>cqi</code> unit for the ideal value, which means the <code>font-size</code> will be relative to the inline size of the card. Therefore, narrower cards will render a <code>font-size</code> toward the minimum end of the range, and wider cards will have a <code>font-size</code> toward the maximum end.</p>

  731. <p>A neat thing about container queries is that all elements are style containers by default. This means there is no need to wrap a rule with a container query to use container query units - they are available to all elements!</p>

  732. <pre class="language-css"><code class="language-css"><span class="token selector">.card :is(h2, h3)</span> <span class="token punctuation">{</span>

  733.   <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1.25rem<span class="token punctuation">,</span> 5cqi<span class="token punctuation">,</span> 1.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>

  734. <span class="token punctuation">}</span></code></pre>

  735. <blockquote>

  736. <p>While this technique is more than sufficient for a single component, you may be interested in my article covering <a href="https://moderncss.dev/container-query-units-and-fluid-typography/">three fluid typography techniques</a> applied via a “mixin” using custom properties.</p>

  737. </blockquote>

  738. <p>One last modern CSS feature we'll use to conclude our card styles is an experimental Chrome-only feature. Use of <code>text-wrap: balance</code> will evaluate a text block of up to four lines and "balance" it by inserting visual line breaks. This helps short passages of text, like headlines, have a more pleasing appearance. It's a great progressive enhancement because it looks great if it works and doesn't cause harm if it fails. However, balancing does not change an element's computed width, so a side-effect in some layouts may be an increase in unwanted space next to the text.</p>

  739. <pre class="language-css"><code class="language-css"><span class="token selector">.card :is(h2, h3)</span> <span class="token punctuation">{</span>

  740.   <span class="token property">text-wrap</span><span class="token punctuation">:</span> balance<span class="token punctuation">;</span>

  741. <span class="token punctuation">}</span></code></pre>

  742. <details false>

  743.   <summary>CSS for "Card Fluid Type"</summary>

  744. <pre class="language-css"><code class="language-css"><span class="token selector">.card :is(h2, h3)</span> <span class="token punctuation">{</span>

  745.   <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>1.25rem<span class="token punctuation">,</span> 5cqi<span class="token punctuation">,</span> 1.5rem<span class="token punctuation">)</span><span class="token punctuation">;</span>

  746.   <span class="token property">text-wrap</span><span class="token punctuation">:</span> balance<span class="token punctuation">;</span>

  747. <span class="token punctuation">}</span>

  748. </code></pre>

  749. </details>

  750. 

  751. <p>The pagination component benefits from container size queries since it is expected to modify the visibility of elements depending on the available inline space.</p>

  752. <p><img src="https://moderncss.dev/img/posts/32/preview-pagination.png" alt=""></p>

  753. <p>The default view which appears at the narrowest space will show only the <code>.pagination-label</code> and the arrow icons from the “Previous” and “Next” controls.</p>

  754. <p>In slightly wider spaces, the labels for the “Previous” and “Next” controls will be visible.</p>

  755. <p>Finally, once there is enough inline space, the <code>.pagination-label</code> will be swapped out for the full <code>.pagination-list</code> with numbered links to each page.</p>

  756. <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-container<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Pagination<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  757.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-nav pagination-nav__prev<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  758.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token punctuation">/&gt;</span></span>

  759.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-nav__label<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Previous<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

  760.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

  761. 

  762.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-label<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Page 3 of 8<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

  763. 

  764.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  765.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

  766.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

  767. 

  768.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-nav pagination-nav__next<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  769.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token punctuation">/&gt;</span></span>

  770.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pagination-nav__label<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Next<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

  771.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

  772. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span></code></pre>

  773. <p>We'll first define containment for the <code>.pagination-container</code> to enable this dynamic layout behavior.</p>

  774. <pre class="language-css"><code class="language-css"><span class="token selector">.pagination-container</span> <span class="token punctuation">{</span>

  775.   <span class="token property">container-type</span><span class="token punctuation">:</span> inline-size<span class="token punctuation">;</span>

  776. <span class="token punctuation">}</span></code></pre>

  777. <p>The styles for our default view have already hidden the <code>.pagination-list</code> and <code>.pagination-nav</code> labels. Important to note is that technique for hiding the <code>.pagination-nav</code> labels still makes the text available for users of assistive technology such as screen readers.</p>

  778. <p>Time for the first level of our container size queries, which is simply unsetting the styles currently hiding the <code>.pagination-nav</code> labels.</p>

  779. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 25ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  780.   <span class="token selector">.pagination-nav__label</span> <span class="token punctuation">{</span>

  781.     <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  782.     <span class="token property">overflow</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  783.     <span class="token property">position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  784.     <span class="token property">clip-path</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  785.   <span class="token punctuation">}</span>

  786. <span class="token punctuation">}</span></code></pre>

  787. <p>Following that, we’ll add a container size query to hide the <code>.pagination-label</code> and reveal the full <code>.pagination-list</code>.</p>

  788. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  789.   <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  790.     <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  791.   <span class="token punctuation">}</span>

  792. 

  793.   <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  794.     <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  795.   <span class="token punctuation">}</span>

  796. <span class="token punctuation">}</span></code></pre>

  797. <details false>

  798.   <summary>CSS for "Pagination Container Queries"</summary>

  799. <pre class="language-css"><code class="language-css"><span class="token selector">.pagination-container</span> <span class="token punctuation">{</span>

  800.   <span class="token property">container-type</span><span class="token punctuation">:</span> inline-size<span class="token punctuation">;</span>

  801. <span class="token punctuation">}</span>

  802. 

  803. <span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 25ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  804.   <span class="token selector">.pagination-nav__label</span> <span class="token punctuation">{</span>

  805.     <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  806.     <span class="token property">overflow</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  807.     <span class="token property">position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  808.     <span class="token property">clip-path</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  809.   <span class="token punctuation">}</span>

  810. <span class="token punctuation">}</span>

  811. 

  812. <span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  813.   <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  814.     <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  815.   <span class="token punctuation">}</span>

  816. 

  817.   <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  818.     <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  819.   <span class="token punctuation">}</span>

  820. <span class="token punctuation">}</span>

  821. </code></pre>

  822. </details>

  823. 

  824. <div class="heading-wrapper h3">

  825. <h3 id="using-has-for-quantity-queries">Using <code>:has()</code> for Quantity Queries</h3>

  826. <a class="anchor" href="#using-has-for-quantity-queries" aria-labelledby="using-has-for-quantity-queries"><span hidden>#</span></a></div>

  827. <p>While the pagination layout transition happens smoothly for the current list of items, we have a potential problem. Eventually, the pagination list could grow much larger than ten items, which may lead to overflow if the container isn’t actually wide enough to hold the larger list.</p>

  828. <p>To help manage that condition, we can bring back <code>:has()</code> and use it to create quantity queries, which means modifying styles based on checking the number of items.</p>

  829. <p>We'd like to keep the medium appearance for the pagination component if the list has more than 10 items. To check for that quantity, we can use <code>:has()</code> with <code>:nth-child</code> and check for an 11th item. This signifies that list has at least 11 items, which exceeds the list limit of 10.</p>

  830. <p>We must place this rule within the "large" container query so that it overrides the other styles we planned for lists with 10 or fewer items and doesn't apply too early.</p>

  831. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  832.   <span class="token selector">.pagination-container:has(li:nth-child(11))</span> <span class="token punctuation">{</span>

  833.     <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  834.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  835.     <span class="token punctuation">}</span>

  836. 

  837.     <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  838.       <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>

  839.     <span class="token punctuation">}</span>

  840.   <span class="token punctuation">}</span>

  841. <span class="token punctuation">}</span></code></pre>

  842. <details false>

  843.   <summary>CSS for "Pagination Quantity Queries"</summary>

  844. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  845.   <span class="token selector">.pagination-container:has(li:nth-child(11))</span> <span class="token punctuation">{</span>

  846.     <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  847.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  848.     <span class="token punctuation">}</span>

  849. 

  850.     <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  851.       <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>

  852.     <span class="token punctuation">}</span>

  853.   <span class="token punctuation">}</span>

  854. <span class="token punctuation">}</span>

  855. </code></pre>

  856. </details>

  857. 

  858. <p>You can open your browser dev tools and delete a couple of the list items to see the layout change to reveal the full list again once there are 10 or fewer.</p>

  859. <div class="heading-wrapper h3">

  860. <h3 id="upgrading-to-style-queries">Upgrading to Style Queries</h3>

  861. <a class="anchor" href="#upgrading-to-style-queries" aria-labelledby="upgrading-to-style-queries"><span hidden>#</span></a></div>

  862. <p>So far, we’ve been working with container size queries, but another type is container style queries. This means the ability to query against the computed values of CSS properties of a container.</p>

  863. <p>Just like size queries, style queries cannot style the container itself, just it’s children. But the property you are querying for must exist on the container.</p>

  864. <p>Use of a style query requires the <code>style</code> signifier prior to the query condition. Presently, support for style queries is available in Chromium within the scope of querying for custom property values.</p>

  865. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token function">style</span><span class="token punctuation">(</span><span class="token property">--my-property</span><span class="token punctuation">:</span> true<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  866. 

  867. <span class="token punctuation">}</span></code></pre>

  868. <p>Instead of creating the quantity queries for the pagination component within the size query, we’ll switch and define a custom property for the <code>.pagination-container</code> to be used for a style query. This can be part of the default, non-container query rules for this element.</p>

  869. <pre class="language-css"><code class="language-css"><span class="token selector">.pagination-container:has(li:nth-child(11))</span> <span class="token punctuation">{</span>

  870.   <span class="token property">--show-label</span><span class="token punctuation">:</span> true<span class="token punctuation">;</span>

  871. <span class="token punctuation">}</span></code></pre>

  872. <p>A feature of custom properties is they can be almost any value, so here we’re using it to create a boolean toggle. I’ve picked the name <code>--show-label</code> because when this is true, we will show the <code>.pagination-label</code> instead of the <code>.pagination-list</code>.</p>

  873. <p>Now, while we can’t directly combine size and style container queries, we can nest the style query within the size query. This is important because just as before we also want to ensure these styles only apply for the larger container size query.</p>

  874. <p>The pagination-related styles remain the same; we've just switched the application to use a style query. The style query requires a value for the custom property, so we've borrowed the familiar convention of a boolean value to treat this like a toggle.</p>

  875. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  876.   <span class="token atrule"><span class="token rule">@container</span> <span class="token function">style</span><span class="token punctuation">(</span><span class="token property">--show-label</span><span class="token punctuation">:</span> true<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  877.     <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  878.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  879.     <span class="token punctuation">}</span>

  880. 

  881.     <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  882.       <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>

  883.     <span class="token punctuation">}</span>

  884.   <span class="token punctuation">}</span>

  885. <span class="token punctuation">}</span></code></pre>

  886. <details false>

  887.   <summary>CSS for "Pagination Style Queries"</summary>

  888. <pre class="language-css"><code class="language-css"><span class="token selector">.pagination-container:has(li:nth-child(11))</span> <span class="token punctuation">{</span>

  889.   <span class="token property">--show-label</span><span class="token punctuation">:</span> true<span class="token punctuation">;</span>

  890. <span class="token punctuation">}</span>

  891. 

  892. <span class="token atrule"><span class="token rule">@container</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 40ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  893.   <span class="token atrule"><span class="token rule">@container</span> <span class="token function">style</span><span class="token punctuation">(</span><span class="token property">--show-label</span><span class="token punctuation">:</span> true<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  894.     <span class="token selector">.pagination-list</span> <span class="token punctuation">{</span>

  895.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  896.     <span class="token punctuation">}</span>

  897. 

  898.     <span class="token selector">.pagination-label</span> <span class="token punctuation">{</span>

  899.       <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>

  900.     <span class="token punctuation">}</span>

  901.   <span class="token punctuation">}</span>

  902. <span class="token punctuation">}</span>

  903. </code></pre>

  904. </details>

  905. 

  906. <p>This navigation component is intended to contain a site's primary navigation links and branding. It features a fairly commonplace display of the logo followed by the top-level page links and then supplementary actions for "Login" and "Sign Up" placed on the opposite side.</p>

  907. <p>Once again, this component will benefit from container size and style queries to manage the visibility of elements depending on the amount of available inline space.</p>

  908. <p><img src="https://moderncss.dev/img/posts/32/preview-navigation.png" alt=""></p>

  909. <p>As the space narrows, the horizontal link list is replaced with a button labeled “Menu” which can toggle a dropdown version of the links. At even more narrow spaces, the logo collapses to hide the brand name text and leave only the logomark visible.</p>

  910. <p>To accomplish these views, we’ll leverage named containers to better target the container queries. The navigation wrapper will be named <code>navigation</code> and the area containing the links will be named <code>menu</code>. This allows us to treat the areas independently and contextually manage the behavior.</p>

  911. <p><img src="https://moderncss.dev/img/posts/32/spec-navigation.png" alt=""></p>

  912. <p>Here's our markup outline to help understand the relationships between our elements.</p>

  913. <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  914.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation__brand<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Logo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

  915. 

  916.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation__menu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  917.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">aria-controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#menu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  918.       Menu

  919.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

  920. 

  921.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  922. 

  923.     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>

  924.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  925. 

  926.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation__actions<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

  927. 

  928.   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

  929. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span></code></pre>

  930. <blockquote>

  931. <p>You'll likely find that building with container queries in mind may prompt rethinking your HTML structure and simplifying the hierarchy.</p>

  932. </blockquote>

  933. <p>An important part of our construction that’s already in place for the baseline styles is that the <code>.navigation</code> wrapper is setup to use CSS grid. In order for the <code>.navigation__menu</code> area to have an independent and variable container size to query for, we’ve use a grid column width of <code>1fr</code>. This means it is allowed to use all the remaining space leftover after the logo and actions elements reserve their share, which is accomplished by setting their column size to <code>auto</code>.</p>

  934. <pre class="language-css"><code class="language-css"><span class="token selector">.navigation</span> <span class="token punctuation">{</span>

  935.   <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>

  936.   <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto 1fr auto<span class="token punctuation">;</span>

  937. <span class="token punctuation">}</span></code></pre>

  938. <p>The rest of our initial state is already in place, and presently assumes the most narrow context. The visible elements are the logomark, “Menu” button, and the additional actions. Now, we’ll use container queries to work out the visibility of the medium and large stages.</p>

  939. <p>The first step is defining the containers. We’ll use the <code>container</code> shorthand property, which accepts the container name first and then the container type, with a forward slash (<code>/</code>) as a separator.</p>

  940. <pre class="language-css"><code class="language-css"><span class="token selector">.navigation</span> <span class="token punctuation">{</span>

  941.   <span class="token property">container</span><span class="token punctuation">:</span> navigation / inline-size<span class="token punctuation">;</span>

  942. <span class="token punctuation">}</span>

  943. 

  944. <span class="token selector">.navigation__menu</span> <span class="token punctuation">{</span>

  945.   <span class="token property">container</span><span class="token punctuation">:</span> menu / inline-size<span class="token punctuation">;</span>

  946. <span class="token punctuation">}</span></code></pre>

  947. <p>First, we'll query against the <code>navigation</code> container and allow the brand name to be visible once space allows. This component uses the same accessibly hidden technique as was used for the pagination, so the visibility styles may look familiar. Also, note the use of the media range syntax to apply the styles when the inline-size is greater than or equal to the comparison value.</p>

  948. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> navigation <span class="token punctuation">(</span>inline-size &gt;= 45ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  949.   <span class="token selector">.navigation__brand span</span> <span class="token punctuation">{</span>

  950.     <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  951.     <span class="token property">overflow</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  952.     <span class="token property">position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  953.     <span class="token property">clip-path</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  954.   <span class="token punctuation">}</span>

  955. <span class="token punctuation">}</span></code></pre>

  956. <p>The second stage is to reveal the link list and hide the “Menu” button. This will be based on the amount of space the <code>menu</code> container area has, thanks to the grid flexibility noted earlier.</p>

  957. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> menu <span class="token punctuation">(</span>inline-size &gt;= 60ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  958.   <span class="token selector">.navigation__menu button</span> <span class="token punctuation">{</span>

  959.     <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  960.   <span class="token punctuation">}</span>

  961. 

  962.   <span class="token selector">.navigation__menu ul</span> <span class="token punctuation">{</span>

  963.     <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  964.   <span class="token punctuation">}</span>

  965. <span class="token punctuation">}</span></code></pre>

  966. <details false>

  967.   <summary>CSS for "Navigation Container Queries"</summary>

  968. <pre class="language-css"><code class="language-css"><span class="token selector">.navigation</span> <span class="token punctuation">{</span>

  969.   <span class="token property">container</span><span class="token punctuation">:</span> navigation / inline-size<span class="token punctuation">;</span>

  970. <span class="token punctuation">}</span>

  971. 

  972. <span class="token selector">.navigation__menu</span> <span class="token punctuation">{</span>

  973.   <span class="token property">container</span><span class="token punctuation">:</span> menu / inline-size<span class="token punctuation">;</span>

  974. <span class="token punctuation">}</span>

  975. 

  976. <span class="token atrule"><span class="token rule">@container</span> navigation <span class="token punctuation">(</span>inline-size &gt;= 45ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  977.   <span class="token selector">.navigation__brand span</span> <span class="token punctuation">{</span>

  978.     <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>

  979.     <span class="token property">overflow</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  980.     <span class="token property">position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>

  981.   <span class="token punctuation">}</span>

  982. <span class="token punctuation">}</span>

  983. 

  984. <span class="token atrule"><span class="token rule">@container</span> menu <span class="token punctuation">(</span>inline-size &gt;= 60ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  985.   <span class="token selector">.navigation__menu button</span> <span class="token punctuation">{</span>

  986.     <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  987.   <span class="token punctuation">}</span>

  988. 

  989.   <span class="token selector">.navigation__menu ul</span> <span class="token punctuation">{</span>

  990.     <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  991.   <span class="token punctuation">}</span>

  992. <span class="token punctuation">}</span>

  993. </code></pre>

  994. </details>

  995. 

  996. <blockquote>

  997. <p>Given the demo size constraints, you may not see the list until you resize the demo container larger.</p>

  998. </blockquote>

  999. <div class="heading-wrapper h3">

  1000. <h3 id="improve-scalability-with-quantity-and-style-queries">Improve Scalability With Quantity and Style Queries</h3>

  1001. <a class="anchor" href="#improve-scalability-with-quantity-and-style-queries" aria-labelledby="improve-scalability-with-quantity-and-style-queries"><span hidden>#</span></a></div>

  1002. <p>Depending on the length of the link list, we may be able to reveal it a bit sooner. While we would still need JavaScript to compute the total dimension of the list, we can use a quantity query to anticipate the space to provide.</p>

  1003. <p>Our present container size query for the <code>menu</code> container requires <code>80ch</code> of space. We will add a quantity query to create a condition of whether or not to show the links given a list with six or more items. We'll set the <code>--show-menu</code> property to true if that is met.</p>

  1004. <pre class="language-css"><code class="language-css"><span class="token selector">.navigation__menu:has(:nth-child(6))</span> <span class="token punctuation">{</span>

  1005.   <span class="token property">--show-menu</span><span class="token punctuation">:</span> true<span class="token punctuation">;</span>

  1006. <span class="token punctuation">}</span></code></pre>

  1007. <p>Now we'll add one more container size query with a nested style query. The size query will take advantage of the media range syntax again, this time to create a comparison range. We'll provide both a lower and upper boundary and check if the <code>inline-size</code> is equal to or between those bounds, thanks to this new ability to use math operators for the query.</p>

  1008. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> menu <span class="token punctuation">(</span>40ch &lt;= inline-size &lt;= 60ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1009. 

  1010. <span class="token punctuation">}</span></code></pre>

  1011. <p>Then, within that we nest a style query. The style rules are intended to keep the “Menu” button hidden and the link list visible, so we’ll also include the <code>not</code> operator. That means the rules should apply when the container does <em>not</em> meet the style query condition.</p>

  1012. <pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@container</span> menu <span class="token punctuation">(</span>40ch &lt;= inline-size &lt;= 60ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1013.   <span class="token atrule"><span class="token rule">@container</span> <span class="token keyword">not</span> <span class="token function">style</span><span class="token punctuation">(</span><span class="token property">--show-menu</span><span class="token punctuation">:</span> true<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1014.     <span class="token selector">.navigation__menu button</span> <span class="token punctuation">{</span>

  1015.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  1016.     <span class="token punctuation">}</span>

  1017. 

  1018.     <span class="token selector">.navigation__menu ul</span> <span class="token punctuation">{</span>

  1019.       <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  1020.     <span class="token punctuation">}</span>

  1021.   <span class="token punctuation">}</span>

  1022. <span class="token punctuation">}</span></code></pre>

  1023. <p>Important to note is that the container size query we already wrote for the <code>menu</code> container when it is sized <code>&gt;= 60ch</code> should remain as is, otherwise the display will flip back to prioritizing the “Menu” button above <code>60ch</code>.</p>

  1024. <details false>

  1025.   <summary>CSS for "Navigation Quantity &amp; Style Queries"</summary>

  1026. <pre class="language-css"><code class="language-css"><span class="token selector">.navigation__menu:has(:nth-child(6))</span> <span class="token punctuation">{</span>

  1027.   <span class="token property">--show-menu</span><span class="token punctuation">:</span> true<span class="token punctuation">;</span>

  1028. <span class="token punctuation">}</span>

  1029. 

  1030. <span class="token atrule"><span class="token rule">@container</span> menu <span class="token punctuation">(</span>40ch &lt;= inline-size &lt;= 60ch<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1031.   <span class="token atrule"><span class="token rule">@container</span> <span class="token keyword">not</span> <span class="token function">style</span><span class="token punctuation">(</span><span class="token property">--show-menu</span><span class="token punctuation">:</span> true<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>

  1032.     <span class="token selector">.navigation__menu button</span> <span class="token punctuation">{</span>

  1033.       <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  1034.     <span class="token punctuation">}</span>

  1035. 

  1036.     <span class="token selector">.navigation__menu ul</span> <span class="token punctuation">{</span>

  1037.       <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>

  1038.     <span class="token punctuation">}</span>

  1039.   <span class="token punctuation">}</span>

  1040. <span class="token punctuation">}</span>

  1041. </code></pre>

  1042. </details>

  1043. 

  1044. <div class="heading-wrapper h3">

  1045. <h3 id="container-queries-accessibility-and-fail-safe-resizing">Container Queries, Accessibility, and Fail-Safe Resizing</h3>

  1046. <a class="anchor" href="#container-queries-accessibility-and-fail-safe-resizing" aria-labelledby="container-queries-accessibility-and-fail-safe-resizing"><span hidden>#</span></a></div>

  1047. <p>Since container queries enable independent layout adjustments of component parts, they can help to meet the <a href="https://www.w3.org/WAI/WCAG22/Understanding/reflow.html">WCAG criterion for reflow</a>. The term "reflow" refers to supporting desktop zoom of up to 400% given a minimum resolution of 1280px, which at 400% computes to <code>320px</code> of inline space.</p>

  1048. <blockquote>

  1049. <p>Discussing reflow is not new here on ModernCSS - learn more about reflow and other <a href="https://moderncss.dev/modern-css-upgrades-to-improve-accessibility/">modern CSS upgrades to improve accessibility</a>.</p>

  1050. </blockquote>

  1051. <p>While we don’t have a “zoom” media query, both media queries and container queries that affect the layout approaching <code>320px</code> will have an impact. The goal of the reflow criterion is to prevent horizontal scroll by “reflowing” content into a single column.</p>

  1052. <p>Taking our navigation as an example, here's a video demonstration of increasing zoom to 400%. Notice how the layout changes similarly to narrowing the viewport.</p>

  1053. <video controls>

  1054.   <source src="https://moderncss.dev/img/posts/32/navigation-a11y.mp4" type="video/mp4">

  1055. </source></video>

  1056. <blockquote>

  1057. <p>The advantage of container queries is that they are more likely to succeed under zoom conditions than media queries which may be tied to a presumed set of "breakpoints."</p>

  1058. </blockquote>

  1059. <p>Often, the set of breakpoints frameworks use can begin to fail at the in-between conditions that aren't precisely a match for device dimensions. Those may be hit by zoom or other conditions like split-screen usage.</p>

  1060. <p>Thoughtful usage of container queries makes your components and layouts far more resilient across unknown conditions, whether those conditions are related to device size, user capabilities, or contexts only an AI bot could dream up.</p>

  1061. <div class="heading-wrapper h2">

  1062. <h2 id="supporting-and-using-modern-css-features">Supporting and Using Modern CSS Features</h2>

  1063. <a class="anchor" href="#supporting-and-using-modern-css-features" aria-labelledby="supporting-and-using-modern-css-features"><span hidden>#</span></a></div>

  1064. <p>The previous post in this series is all about <a href="https://moderncss.dev/testing-feature-support-for-modern-css/">testing features support for modern CSS features</a>. However, there’s one consideration that is top of mind for me when choosing what features to begin using.</p>

  1065. <p>When evaluating whether a feature is "safe to use" with your users, considering the impact of the feature you're looking to integrate weighs heavily in the decision. For example, some modern CSS features are "nice to haves" that provide an updated experience that's great when they work but also don't necessarily cause an interruption in the user experience should they fail.</p>

  1066. <p>The features we reviewed today can absolutely have a large impact, but the context of how they are used also matters. The ways we incorporated modern CSS in the components were, by and large, progressive enhancements, meaning they would fail gracefully and have minimal impact.</p>

  1067. <p>It's always important to consider the real users accessing your applications or content. Therefore, you may decide to prepare fallbacks, such as a set of styles that uses viewport units when container queries are unavailable. Or, switching some of the <code>:has()</code> logic to require a few extra classes for applying the styles until you are more comfortable with the level of support.</p>

  1068. <blockquote>

  1069. <p>As a quick measure, <strong>consider whether a user would be prevented from doing the tasks they need to do on your website</strong> if the modern feature fails.</p>

  1070. </blockquote>

  1071. <p>Remember: there's no need to use everything new right away, but learning about what's available is beneficial so you can confidently craft a resilient solution.</p>

  1072. <hr>

  1073. <p>This material was originally presented at CSS Day 2023, and you may <a href="https://noti.st/st3ph/ea40FC/modern-css-for-dynamic-component-based-architecture">review the slides</a>.</p>

  1074. </article>

  1075. 

  1076. 

  1077. <hr>

  1078. 

  1079. <footer>

  1080.   <p>

  1081.     <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">

  1082.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>

  1083.       </svg> Accueil</a> •

  1084.     <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">

  1085.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>

  1086.       </svg> Suivre</a> •

  1087.     <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">

  1088.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>

  1089.       </svg> Pro</a> •

  1090.     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">

  1091.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>

  1092.       </svg> Email</a> •

  1093.     <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">

  1094.         <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>

  1095.       </svg> Légal</abbr>

  1096.   </p>

  1097.   <template id="theme-selector">

  1098.       <form>

  1099.           <fieldset>

  1100.               <legend><svg class="icon icon-brightness-contrast">

  1101.                 <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>

  1102.               </svg> Thème</legend>

  1103.               <label>

  1104.                   <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto

  1105.               </label>

  1106.               <label>

  1107.                   <input type="radio" value="dark" name="chosen-color-scheme"> Foncé

  1108.               </label>

  1109.               <label>

  1110.                   <input type="radio" value="light" name="chosen-color-scheme"> Clair

  1111.               </label>

  1112.           </fieldset>

  1113.       </form>

  1114.   </template>

  1115. </footer>

  1116. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>

  1117. <script>

  1118.     function loadThemeForm(templateName) {

  1119.         const themeSelectorTemplate = document.querySelector(templateName)

  1120.         const form = themeSelectorTemplate.content.firstElementChild

  1121.         themeSelectorTemplate.replaceWith(form)

  1122. 

  1123.         form.addEventListener('change', (e) => {

  1124.             const chosenColorScheme = e.target.value

  1125.             localStorage.setItem('theme', chosenColorScheme)

  1126.             toggleTheme(chosenColorScheme)

  1127.         })

  1128. 

  1129.         const selectedTheme = localStorage.getItem('theme')

  1130.         if (selectedTheme && selectedTheme !== 'undefined') {

  1131.             form.querySelector(`[value="${selectedTheme}"]`).checked = true

  1132.         }

  1133.     }

  1134. 

  1135.     const prefersColorSchemeDark = '(prefers-color-scheme: dark)'

  1136.     window.addEventListener('load', () => {

  1137.         let hasDarkRules = false

  1138.         for (const styleSheet of Array.from(document.styleSheets)) {

  1139.             let mediaRules = []

  1140.             for (const cssRule of styleSheet.cssRules) {

  1141.                 if (cssRule.type !== CSSRule.MEDIA_RULE) {

  1142.                     continue

  1143.                 }

  1144.                 // WARNING: Safari does not have/supports `conditionText`.

  1145.                 if (cssRule.conditionText) {

  1146.                     if (cssRule.conditionText !== prefersColorSchemeDark) {

  1147.                         continue

  1148.                     }

  1149.                 } else {

  1150.                     if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {

  1151.                         continue

  1152.                     }

  1153.                 }

  1154.                 mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))

  1155.             }

  1156. 

  1157.             // WARNING: do not try to insert a Rule to a styleSheet you are

  1158.             // currently iterating on, otherwise the browser will be stuck

  1159.             // in a infinite loop…

  1160.             for (const mediaRule of mediaRules) {

  1161.                 styleSheet.insertRule(mediaRule.cssText)

  1162.                 hasDarkRules = true

  1163.             }

  1164.         }

  1165.         if (hasDarkRules) {

  1166.             loadThemeForm('#theme-selector')

  1167.         }

  1168.     })

  1169. </script>

  1170. </body>

  1171. </html>