{"id":362778,"date":"2022-01-31T07:16:01","date_gmt":"2022-01-31T15:16:01","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=362778"},"modified":"2022-01-31T07:52:55","modified_gmt":"2022-01-31T15:52:55","slug":"288-dappled-light-with-css-and-fluid-typography","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/288-dappled-light-with-css-and-fluid-typography\/","title":{"rendered":"288: Dappled Light with CSS and Fluid Typography"},"content":{"rendered":"\n

[Robin]:<\/strong> Regular contributor to the blog and all-around outstanding CSS-er, Preethi, had one of those ideas that makes me wake up as if I\u2019ve been splashed with cold water whenever I hear it: what if we made this<\/strong> weird thing with CSS? How would we do that? Is this real-life thing possible in HTML?<\/em><\/p>\n\n\n\n

For me, it\u2019s questions like this that make me excited about CSS.<\/p>\n\n\n\n

So: \u201cthere\u2019s a serene warmth to the early evening sunlight peaking through rustling leaves,\u201d writes Preethi in this post before wondering if it\u2019s possible to make a dappled sunlight effect with CSS<\/a>. Well, it totally is possible! Here\u2019s the example Preethi made:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

See the background light on that wall? In Preethi\u2019s demo, that light is moving and contorting in the background, just like real light. The remarkable thing about this demo though is how that light is made. Just take a gander at the HTML:<\/p>\n\n\n\n

<div class=\"backdrop\">\n  <p class=\"shapes\">🍃<\/p>\n  <p class=\"shapes\">🍂<\/p>\n  <p class=\"shapes\">\\<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
What! That\u2019s sure neat. With those shapes, Preethi distorts the heck out of them with mix-blend-mode<\/code> and the text-shadow<\/code> property to make something I\u2019ve never seen in CSS before. Because it\u2019s folks like Preethi who ask weird questions and make even weirder experiments that eventually lead to our whole industry being pushed forward in weirder and weirder directions. Exciting!<\/p>\n\n\n\n
\n\n\n
Adding Favicons to Hyperlinks<\/h3>\n\n\n
In lots of interfaces, folks use the regular ol\u2019 hyperlink with just text to go to internal webpages and external websites. Some folks will add a little icon to their links to signal to users that \u201chey, you\u2019re going somewhere else when you click this\u201d\u2026<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u2026but on this here website<\/a>, Kiko Beats had added the website\u2019s favicon to the beginning of each link like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This is neat! Although, I do tend to read one of those links as walternating current<\/code> there because of the white background of the Wikipedia favicon. So maybe it\u2019s best to move the favicon to the end? Not sure what the solution there is but I still think this is interesting! Zach Leatherman then went on to explain<\/a> that the technique was using an icon font (which is generally not advised today) and instead he created IndieWeb Avatar<\/a> which lets you use the favicon from a website, like this:<\/p>\n\n\n\n
a[href^=\"https:\/\/twitter.com\"]:before {\n  content: \"\";\n  display: inline-block;\n  vertical-align: text-bottom;\n  width: 1em;\n  height: 1em;\n  margin: 0 .2em;\n  background-size: contain;\n  background-image: url(\"https:\/\/v1.indieweb-avatar.11ty.dev\/https%3A%2F%2Fwww.twitter.com%2F\/\");\n}<\/code><\/pre>\n\n\n\n
That\u2019s\u2026extra neat! Just put it in the indie web avatar URL and the website and it\u2019ll do the rest for you.<\/p>\n\n\n\n
\n\n\n
:where()<\/code> can be overwhelming at first<\/h3>\n\n\n
I agree with Manuel Matuzovic here<\/a>, the new :where<\/code> CSS pseudo-class is a bit confusing when you read examples about how to use it. His example makes a ton of sense though:<\/p>\n\n\n\n
ul:where([class]) {\n  list-style: none;\n}<\/code><\/pre>\n\n\n\n
\u2026this is the same as writing the following\u2026<\/p>\n\n\n\n
ul[class] {\n  list-style: none;\n}<\/code><\/pre>\n\n\n\n
Which means \u201cany <ul><\/code> with a class, remove the list style.\u201c Pretty straightforward stuff. All that where()<\/code> does above there is make the specificity of the rule 0. All that<\/em> means is that it\u2019s now easier to override basically anything else in CSS.<\/p>\n\n\n\n
This is why Elad Shechter has used this pseudo-class liberally in his new CSS reset<\/a>, with one example being this bit:<\/p>\n\n\n\n
:where([draggable=\"true\"]) {\n  -webkit-user-drag: element;\n}<\/code><\/pre>\n\n\n\n
I feel like maybe in the future we should make it an unspoken to only use :where<\/code> in the context of resets or default styles for HTML elements? Otherwise, I can definitely see their usage being pretty confusing.<\/p>\n\n\n\n
\n\n\n
Fluid type sizes and spacing<\/h3>\n\n\n
I\u2019m not sure how popular the \u201cfluid type\u201d method is these days but the idea is this: with CSS we set a min and max font-size for our elements so that we don\u2019t have to have a billion media queries for each individual change we might want to make.<\/p>\n\n\n\n
Today we can do this with the clamp()<\/code> function like this:<\/p>\n\n\n\n
h1 {\n  \/* font-size: clamp(min, ideal, max); *\/\n  font-size: clamp(20px, 10vw, 200px);\n}<\/code><\/pre>\n\n\n\n
That middle value there is the ideal value and we\u2019re using a vw<\/code> unit there to tell the browser that ideally the font-size should respond to the width of the browser (in this case, try to have a value that\u2019s 10% of the width, so if the browser window is 1000px wide, then have a font-size of 100px). Once it hits 200px it\u2019ll stop, and if it gets smaller it\u2019ll stop at 20px.<\/p>\n\n\n\n
Here\u2019s a demo<\/a> where you can play around with the values to get a feel for it.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Nothing shocking here, this stuff has been available for a while but I really like this idea a whole lot! So it was great to read this post from Piper Haywood all about how she sets type using Sass and CSS custom properties<\/a> because I think it adds something new to this technique. Piper uses the looping powers of Sass to create the min and max font-size of every heading element and uses them to create a custom property for each of them.<\/p>\n\n\n\n
First off, Piper sets the ideal heading sizes in a Sass variable:<\/p>\n\n\n\n
$ft-sizes: (\n  h1: 30,\n  h2: 26,\n  h3: 20,\n  h4: 16,\n  small: 12\n);<\/code><\/pre>\n\n\n\n
Okay, weird. Why wouldn\u2019t we do that with custom properties now though? Well, Piper shows us why by looping over them like this:<\/p>\n\n\n\n
:root {\n  @each $name, $size in $ft-sizes {\n    @include sizeVar($name, $size);\n  }\n}<\/code><\/pre>\n\n\n\n
That sizeVar()<\/code> function does some neat magic:<\/p>\n\n\n\n
@mixin sizeVar($name, $size) {\n  $proportion: $size \/ $ft-body;\n  $min: $ft-body-min * $proportion;\n  $max: $ft-body-max * $proportion;\n  $vw: $ft-body-vw * $proportion;\n  --ft-size-#{$name}: clamp(#{$min}, #{$vw}, #{$max});\n}<\/code><\/pre>\n\n\n\n
I\u2019d translate this to: “take two these two numbers and then create a custom property with a fluid type clamp() based on a proportion relative to the size of the heading.” That sounds like a lot but hang on.<\/p>\n\n\n\n
All of this means we can then use these variables like this:<\/p>\n\n\n\n
h1 {\n  font-size: var(--ft-size-h1);\n}\n\nh2 {\n  font-size: var(--ft-size-h2);\n}<\/code><\/pre>\n\n\n\n
We now have a fluid typographic scale that we can use across all our typographic elements and they\u2019ll all scale in proportion to one another without having to have a million confusing clamp()<\/code> functions all over the place. It reminds me that Sass is amazing because I\u2019d never think of something like this.<\/p>\n\n\n\n
Also, even if all this magical Sass stuff here might seem a bit intense I think the real important thing to remember is this: we shouldn\u2019t set type in pixels<\/em>, but in proportions<\/em> instead.<\/p>\n\n\n\n
\n\n\n
The New WebPageTest UI<\/h3>\n\n\n
WebPageTest is a dang useful tool for figuring out how slow your website is and so it was great to read about an update to the interface<\/a>.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
A great tool now has a great UI to go with it. I quickly ran a side project URL through it and it\u2019s all so much slicker and easier to read now. Oof, also that side project clocks in at a 3.1 second start render.<\/p>\n\n\n\n
Please excuse me whilst I go delete everything on that website.<\/p>\n\n\n\n
\n\n\n
clay.css<\/h3>\n\n\n
I love this effect I\u2019ve seen in 3D art circles but I didn\u2019t know it was called claymorphism. Well, here\u2019s a handy micro CSS utility class called clay.css<\/a> that immediately turns your regular ol\u2019 box components into something with a bit more depth and oomph like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
axe DevTools<\/a><\/h2>\n\n\n
Are you testing for accessibility? If not, your website could be inaccessible to people with disabilities.<\/p>\n\n\n\n
The axe DevTools browser extension<\/a> was created to help dev teams easily find and fix accessibility bugs without requiring special knowledge. Get started for free.<\/a><\/p>\n\n\n\n
\n\n\n
@media (pointer: coarse)<\/h3>\n\n\n
For the last link this week, Josh Comeau reminded me earlier this week that this media query exists<\/a>:<\/p>\n\n\n\n
.button {\n  min-height: 32px;\n\t\n  @media (pointer: coarse) {\n    min-height: 48px;\n  }\n}<\/code><\/pre>\n\n\n\n
It detects if the browser is using a touch screen or not so this allows us to target mobile and tablet devices where clicking things is harder with a stubby ol\u2019 finger. But the real magic of Josh\u2019s technique here is when he uses a variable to do all this hard work for us<\/a>, like this:<\/p>\n\n\n\n
:root {\n  --min-tap-target-height: 32px;\n\t\n  @media (pointer: coarse) {\n    --min-tap-target-height: 48px;\n  }\n}\n\n.button { \n  min-height: var(--min-tap-target-height); \n}\n\n.text-input { \n  min-height: var(--min-tap-target-height); \n}<\/code><\/pre>\n\n\n\n
Gah! That\u2019s so smart that I\u2019m annoyed I didn\u2019t think about this. It makes our CSS so much more systematic and clean across the board.<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Jetpack Licensing for Agencies and Professionals<\/a><\/h2>\n\n\n
Jetpack has solved a classic WordPress question: who should purchase the plugin license, the developer or the client? Well, that’s no longer an issue with Jetpack licensing options for agencies and professionals.<\/a> Now, you can bundle Jetpack licenses for all of your clients’ WordPress sites in one account. This way, you only get one invoice for all of the licenses rather than an invoice for each and every client license.<\/p>\n\n\n\n
Plus, you\u2019ll gain access to Jetpack’s easy-to-use license management tools and receive 25% off all of our products. All you need is to sign up and issue 5 licenses within 90 days.<\/p>\n\n\n\n
\n
Sign up today<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
[Chris]:<\/strong> This<\/a> seems like a pretty important thing to know:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
The npx<\/code> thing is an npm utility that means you can use things off npm without having to install them. So here you’re using<\/em> benny-hill<\/code> like it’s a CLI thing, but it’s on-the-fly. This CLI just executes whatever commands it finds after it, while<\/em> playing the Benny Hill theme, obvs. It ain’t much code<\/a>, in case you’re interested in learning how something like that might work. <\/p>\n","protected":false},"excerpt":{"rendered":"
[Robin]: Regular contributor to the blog and all-around outstanding CSS-er, Preethi, had one of those ideas that makes me wake up as if I\u2019ve been splashed with cold water whenever I hear it: what if we made this weird thing with CSS? How would we do that? Is this real-life thing possible in HTML? For […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362778"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/newsletters"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362778\/revisions"}],"predecessor-version":[{"id":362929,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/362778\/revisions\/362929"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=362778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}