davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
65 Commits
1 Branch
Struktur: 4edea9d7d8
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „4edea9d7d8“
${ noResults }
larlet-fr-david-cache/cache/2020/77db8cc6de2906f31a4d37d91a4.../index.html

index.html 8.5KB
Originalformat Blame Verlauf

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

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

  3. <html lang="fr">

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

  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>Currying in CSS? (archive) — David Larlet</title>

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

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

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

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

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

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

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

  20. <meta name="msapplication-TileColor" content="#f0f0ea">

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

  22. <meta name="theme-color" content="#f0f0ea">

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

  24. <link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">

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

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

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

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

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

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

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

  32. 

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

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

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

  36.   <link rel="canonical" href="https://www.trysmudford.com/blog/currying-in-css/">

  37. 

  38. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

  39. 

  40. <article>

  41. <h1>Currying in CSS?</h1>

  42. <h2><a href="https://www.trysmudford.com/blog/currying-in-css/">Source originale du contenu</a></h2>

  43. <p>There were lots of interesting discoveries found whilst developing <a href="https://utopia.fyi/">Utopia</a>. This one came when declaring CSS custom properties.</p>

  44. 

  45. <p>Taking a card as an example, one would often start off with some CSS like this:</p>

  46. 

  47. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">card</span> <span class="p">{</span>

  48.   <span class="k">padding</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>

  49.   <span class="k">background</span><span class="p">:</span> <span class="mh">#FAFAFA</span><span class="p">;</span>

  50. <span class="p">}</span></code></pre></div>

  51. 

  52. <p>Then extract the values out for re-use across the website:</p>

  53. 

  54. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>

  55.   <span class="nv">--card-padding</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>

  56.   <span class="nv">--card-background</span><span class="p">:</span> <span class="mh">#FAFAFA</span><span class="p">;</span>

  57. <span class="p">}</span>

  58. 

  59. <span class="p">.</span><span class="nc">card</span> <span class="p">{</span>

  60.   <span class="k">padding</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">card</span><span class="o">-</span><span class="n">padding</span><span class="p">);</span>

  61.   <span class="k">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">card</span><span class="o">-</span><span class="n">background</span><span class="p">);</span>

  62. <span class="p">}</span></code></pre></div>

  63. 

  64. <p>We’ve simply lifted the values out into the <code>:root</code> and replaced them verbatim with their variable counterparts. Nothing contentious to see here.</p>

  65. 

  66. <p>When working with <a href="https://utopia.fyi/blog/fluid-custom-properties">fluid custom properties</a>, I was desperately trying to refactor the equation to keep it as succinct as possible. It was at this point, I stumbled upon a strange property of custom properties…</p>

  67. 

  68. <blockquote>

  69. <p>The value after the <code>:</code> in the CSS custom property does not have to be valid CSS.</p>

  70. </blockquote>

  71. 

  72. <p>It won’t cause any errors, nor invalidate the custom property. It won’t be evaluated in the browser until used, or more specifically, placed in a <code>calc()</code> function.</p>

  73. 

  74. <h2 id="what-does-this-mean">What does this mean?</h2>

  75. 

  76. <p>This means we can write concise CSS ‘calculations’ without worrying about wrapping every line in <code>calc()</code>s, and providing its wrapped when we use the property, it will be valid. When you finally run <code>calc()</code>, the browser (appears to) gather all the associated parts of the equation, and run them in one go.</p>

  77. 

  78. <p>The <code>--f-2</code> declaration below is not ‘valid’ CSS. But when used in the <code>font-size</code> with a <code>calc()</code>, it becomes valid:</p>

  79. 

  80. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>

  81.   <span class="nv">--f-2</span><span class="p">:</span> <span class="p">((</span><span class="mi">2</span> <span class="o">/</span> <span class="mi">16</span> <span class="o">-</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="o">-</span><span class="n">foot</span><span class="p">))</span> <span class="o">*</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="o">-</span><span class="n">hill</span><span class="p">));</span>

  82. <span class="p">}</span>

  83. 

  84. <span class="nt">body</span> <span class="p">{</span>

  85.   <span class="k">font-size</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="mi">-2</span><span class="p">)</span> <span class="o">*</span> <span class="mi">16</span><span class="p">);</span>

  86. <span class="p">}</span></code></pre></div>

  87. 

  88. <h2 id="so-what">So what?</h2>

  89. 

  90. <p>To me, this feels much like the two distinct actions of:</p>

  91. 

  92. <ol>

  93. <li>Defining a function</li>

  94. <li>Calling that function</li>

  95. </ol>

  96. 

  97. <p>Which is kind of cool. I don’t know whether there’s more here, but I feel like there probably is.</p>

  98. 

  99. <p>Some way of currying in CSS, perhaps? I’ve likened currying to <a href="https://www.trysmudford.com/blog/pedalboard/#closures-and-currying">priming ‘code grenades’</a>, then calling them later? Who knows, I’m definitely gonna keep digging to find out.</p>

  100. </article>

  101. 

  102. 

  103. <hr>

  104. 

  105. <footer>

  106.   <p>

  107.     <a href="/david/" title="Aller à l’accueil">🏠</a> •

  108.     <a href="/david/log/" title="Accès au flux RSS">🤖</a> •

  109.     <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •

  110.     <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •

  111.     <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>

  112.   </p>

  113. </footer>

  114. <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>

  115. </body>

  116. </html>