{"id":344564,"date":"2021-07-19T05:50:59","date_gmt":"2021-07-19T12:50:59","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=344564"},"modified":"2021-07-19T07:38:02","modified_gmt":"2021-07-19T14:38:02","slug":"260-the-maybe-future-magic-of-css-query-units","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/260-the-maybe-future-magic-of-css-query-units\/","title":{"rendered":"260: The Maybe Future Magic of CSS Query Units"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

[Robin]:<\/strong> Have you ever heard of CSS query units? They aren’t a thing in CSS just yet,<\/strong> but let me set the stage to explain exactly how they would be useful. I only stumbled across the idea because I bumped into an interesting problem when it comes to setting type on the web.<\/p>\n\n\n\n

I was messing around with the fonts on a project and realized that there are a<\/em> lot<\/em> of ways to set the font-size<\/a><\/code> of an element:<\/p>\n\n\n\n

.element { font-size: 16px; }\n.element { font-size: 1em; }\n.element { font-size: 10vw; }\n.element { font-size: 10ch; }\n.element { font-size: 2pt; }\n.element { font-size: 60ex; }<\/code><\/pre>\n\n\n\n
These are collectively known as the lengths of CSS<\/a> but they all fall short in an important way because sometimes when I\u2019m setting the font-size<\/code> of an element\u2014especially when it comes to headings\u2014I\u2019d like to set the font-size<\/code> based on the width of the parent element. <\/p>\n\n\n\n
The examples I\u2019ve seen for container queries<\/a>, although not in browsers yet, could partially help solve this problem. Let\u2019s say we have some HTML such as this\u2026<\/p>\n\n\n\n
<div class=\"container\">\n  <h1>Title<\/h1>\n<\/div><\/code><\/pre>\n\n\n\n
In the future, we\u2019ll be able to write the following CSS\u2026<\/p>\n\n\n\n
.container {\n  contain: layout inline-size;\n}\n\n@container (width > 40em) {\n  h1 { font-size: 1.5em; }\n}<\/code><\/pre>\n\n\n\n
This CSS allows us to set the font-size<\/code> of the <h1><\/code> when the container itself reaches a certain width breakpoint. However! Even though I would be thrilled if we got container queries tomorrow, this doesn\u2019t quite<\/em> solve my problem.<\/p>\n\n\n\n
Let\u2019s say I want this headline on the left to only change its font-size<\/code> based on the width of the div that wraps it (that gray box):<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Today we\u2019d have to use something like Fittext.js<\/a> to detect when the parent element changes size and then jump in and change the font-size<\/code> of that text.<\/p>\n\n\n\n
Sure, we could use a variable unit like this\u2026<\/p>\n\n\n\n
h1 { font-size: 20vw; }<\/code><\/pre>\n\n\n\n
\u2026but that will make the heading keep scaling up and up if the width of the browser window increases. Alternatively, we could use the ever-so-good clamp()<\/code> CSS function<\/a> and set a min, ideal, and max font-size<\/code> on the text:<\/p>\n\n\n\n
h1 { font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem); }<\/code><\/pre>\n\n\n\n
This is very smart and worth keeping in our back pocket but it still<\/em> doesn\u2019t do quite what I\u2019d like to do. I just want the text to scale up in relation to the parent element.<\/p>\n\n\n\n
And this is where CSS query units like qh<\/code> and qw<\/code> come in. Although only in a draft spec right now<\/a> and not any browsers, at some point in the future, we might be able to write CSS like this:<\/p>\n\n\n\n
\/* All this is likely to change, but the spirit is here. *\/\ndiv {\n  contain: layout inline-size;\n}\n\n@container (width > 20em) {\n  h1 { font-size: calc(30qw); }\n}<\/code><\/pre>\n\n\n\n
This will change the size of the <h1><\/code> to scale in proportion to the width of that <div><\/code> above. Perfect! This is exactly what I was thinking of. And I think the reason I\u2019m so excited about this is that it is a relatively simple thing in print but, today on the web, it\u2019s way, way harder than it needs to be.<\/p>\n\n\n\n
I know I\u2019ve only touched on font-size<\/code> here but I can imagine all sorts of other purposes for scaling an element with qh<\/code>, qw<\/code>, or the other units that are available<\/a>. And perhaps these units never land in browsers, but regardless\u2014it\u2019s truly exciting stuff, in this humble blogger\u2019s opinion, and it solves a real problem that I have with CSS today.<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n
Making a CSS-only Clock<\/h3>\n\n\n
Smart stuff from Mate Marschalko where he tries to torture himself by making a clock that works without any JavaScript whatsoever<\/a>. There\u2019s a lot of interesting notes in here\u2014from how he placed the hands of the clock and then animated them to make a digital clock afterward, too.<\/p>\n\n\n\n
\n\n\n
Meta Theme Color<\/h3>\n\n\n
Manuel Matuzovic has been experimenting with the theme-color<\/code> meta tag<\/a> that you can place in the <head><\/code> of your website like this\u2026<\/p>\n\n\n\n
<meta name=\"theme-color\" content=\"#319197\"><\/code><\/pre>\n\n\n\n
\u2026and many browsers and platforms will take that color and apply it to the UI of the browser window. Safari is the latest to do so with there rather controversial design that set the front-end world on fire recently:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This is all neat and very much worth experimenting with. But another interesting note that Manuel points to is how Safari 15 is the first browser to support these new color functions:<\/p>\n\n\n\n
body {\n  background-color: hwb(27 10% 28%);\n  background-color: lch(67.5345% 42.5 258.2);\n  background-color: lab(62.2345% -34.9638 47.7721);\n}<\/code><\/pre>\n\n\n\n
I haven\u2019t read anything about hwb<\/code>, lch<\/code>, or lab<\/code>, and after taking a look at MDN and scanning the super information highway for more information, I\u2019m a little uncertain as to what the benefits of these new color functions have over the ol\u2019 regular rgba<\/code> or the ever-so-useful hsl<\/code><\/a>. Be sure to check in next week once I finish figuring that out.<\/p>\n\n\n\n
\n\n\n
A Bashful Button Worth $8 Million<\/h3>\n\n\n
I really enjoyed this piece from Jason Grigsby where he talks about the cost of having a single button malfunction on a website<\/a>. Jason walks through the accessibility problems, how to fix them, and then gives us this great takeaway:<\/p>\n\n\n\n
Let\u2019s focus on what we can learn from these sites:<\/p>
\u2022 100vh does not necessarily work as you expect it in every context
\u2022 There is no substitute for testing on real devices<\/p><\/blockquote>\n\n\n\n
I love well-researched rants like this and I wish I could read more pieces about websites in this way. <\/p>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n
Better Target Sizes<\/h3>\n\n\n
This is a rather good reminder by Todd Libby that we should take care of the target sizes of links and buttons<\/a>: <\/p>\n\n\n\n
Mice and similar input devices use a pointer on the screen, which is considered \u201cfine\u201d precision because it allows a user to access an element on the screen with exact precision. Fine precision makes it easier to access smaller target sizes in theory. The trouble is, that sort of input device can be tough for some users, whether it\u2019s with gripping the device, or some other cognitive or motor skill. So, even with fine precision, having a clear target is still a benefit.<\/p><\/blockquote>\n\n\n\n
I always notice whenever I hit the wrong button on my phone and each time I do it reminds me that we should make our interfaces as forgiving as possible. <\/p>\n\n\n\n
\n\n\n
hyphenate-limit-chars<\/code><\/h3>\n\n\n
This is an interesting CSS property I\u2019ve never seen before:<\/p>\n\n\n\n
.element {\n  hyphens: auto;\n  hyphenate-limit-chars: 10 3 4;\n}<\/code><\/pre>\n\n\n\n
This is from an almanac post by Idorenyin Udoh<\/a> where he explains how this is another CSS property that we can\u2019t use today because it\u2019s a draft proposal but, heck yes, I love the sound of this:<\/p>\n\n\n\n
In the CSS rule above, the last declaration indicates to the browser that it should hyphenate only words of 10 characters or more and, when it does, three is the minimum number of characters before the hyphen and four is the minimum after the hyphen.<\/p><\/blockquote>\n\n\n\n
Controlling hyphenation on the web has always been a major pain in the peach emoji and so anything that makes this experience even slightly better is a-okay with me. Even if we might have to wait a rather long time for it to land in browsers.<\/p>\n\n\n\n
\n\n\n
The :fullscreen<\/code> CSS pseudo-class<\/h3>\n\n\n
Huh! This is yet another extremely neat CSS property I\u2019d never heard of before: the :fullscreen<\/code> pseudo-class, as Mojtaba Seyedi explains<\/a>:<\/p>\n\n\n\n
The :fullscreen<\/code> CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style elements when they\u2019re in that state and that\u2019s what :fullscreen<\/code> lets us do.<\/p><\/blockquote>\n\n\n\n
You can use it like this:<\/p>\n\n\n\n
section:fullscreen {\n  background: #eee;\n}<\/code><\/pre>\n\n\n\n
And this ties into the FullScreen API<\/a> that I\u2019d never heard of before either. I am learning so many things today! Please make it stop!<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
3 Successful customer-centric monitoring strategies<\/a><\/h2>\n\n\n
Customers are why we make software, and understanding who they are and how they interact with your application is crucial to the success of your business. Follow these 3 monitoring strategies<\/a> to ensure users are having flawless digital experiences.<\/p>\n\n\n\n
\n
Continue reading<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
WooCommerce + MailPoet = Paid Newsletter Subscriptions!<\/a><\/h2>\n\n\n
WooCommerce<\/a> is the premier eCommerce plugin for WordPress. MailPoet<\/a> brings a fancy email builder right into WordPress. Combine the two and you get a powerful way to engage your customers. For one thing, you get extra powerful eCommerce email abilities \u2014 things like abandoned cart emails. Better, you can combine them to make a paid subscription newsletter<\/a>, but powered by your own site!<\/p>\n\n\n\n
\n
Learn about MailPoet<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
[Chris]:<\/strong> As a terrible offender in introducing scope creep to projects, I appreciate this gentle push the other direction<\/a> from Tim Daub:<\/p>\n\n\n\n
I don’t think, however, that scope creep is ever unjustified. Every scope creeper has a reason for creeping. It may be that their proposal is flawed and unnecessarily blown up. But ultimately, assuming that all contributors are good-natured towards the project, I’ve made the experience that a scope creeper (a person that blows up scope) is looking at the problem from a unique point of view and is seeing something others aren’t.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
[Robin]: Have you ever heard of CSS query units? They aren’t a thing in CSS just yet, but let me set the stage to explain exactly how they would be useful. I only stumbled across the idea because I bumped into an interesting problem when it comes to setting type on the web. I was […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/344564"}],"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":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/344564\/revisions"}],"predecessor-version":[{"id":344990,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/344564\/revisions\/344990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=344564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}