{"id":359572,"date":"2022-01-10T06:08:24","date_gmt":"2022-01-10T14:08:24","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=359572"},"modified":"2022-01-10T06:08:26","modified_gmt":"2022-01-10T14:08:26","slug":"285-the-year-of-the-container-query","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/285-the-year-of-the-container-query\/","title":{"rendered":"285: The Year of the Container Query"},"content":{"rendered":"\n

[Robin]:<\/strong> My hunch is that 2022 will be The Year of the Container Query.<\/em> Everyone\u2019s excited about them, and for good reason: this new and fancy addition to CSS makes a component respond to whatever container they\u2019re placed in. For the first time ever we\u2019ll be able to create truly isolated components that can shrink and expand depending wherever you put them, like this<\/a>:<\/p>\n\n\n\n

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

See how this weather component has entirely changed because it\u2019s in a sidebar? That\u2019s the power of container queries right there.<\/p>\n\n\n\n

Although there\u2019s no word when they\u2019ll ship in browsers yet, it seems like they\u2019re gathering steam in the community and they\u2019re an official draft spec now<\/a>. I have a feeling that container queries are going to move fast<\/em> and ship in browsers pretty darn quickly (although this is just a hunch).<\/p>\n\n\n\n

But the big news of the week here is that Surma<\/a> made a polyfill<\/a>\u2014a chunk of code that lets other code work on older browsers\u2014and it rather magically allows us to use container queries today!<\/p>\n\n\n\n

To get started, we first need to load the script:<\/p>\n\n\n\n

\/\/ Test if container queries are supported already by the browser\nconst supportsContainerQueries = \"container\" in document.documentElement.style;\n\n\/\/ If not, load the polyfill\nif (!supportsContainerQueries) {\n  import(\"https:\/\/cdn.skypack.dev\/container-query-polyfill\");\n}<\/code><\/pre>\n\n\n\n
(Although I would probably just download the polyfill and throw it in here instead of making another request to a CDN that can break, this is just a quick example.)<\/p>\n\n\n\n
Next up, we can write our HTML\u2026<\/p>\n\n\n\n
<div class=\"weather-wrap\">\n  <dl class=\"weather\">\n    <!-- the rest of our component markup goes here -->\n  <\/dl>\n<\/div><\/code><\/pre>\n\n\n\n
We need that extra div of .weather-wrap<\/code> to apply our container query logic to. Now, we can apply our styles that “activates” the container:<\/p>\n\n\n\n
.weather-wrap {\n  container-type: inline-size;\n  container-name: weather-wrapper;\n}<\/code><\/pre>\n\n\n\n
Two new CSS properties here. Fear not!<\/p>\n\n\n\n
When we say container-type: inline-size<\/code> that translates to “I want this container query to be used on the inline axis (so for English-speaking languages that means left\/right or perhaps you can think of this as width). inline-size<\/code><\/a> is an odd thing that I\u2019m still trying to get my head around (more on that in a future newsletter).<\/p>\n\n\n\n
container-name<\/code> on the other hand is telling the browser that we want to refer to this query as weather-wrapper<\/code> elsewhere in our CSS, like this:<\/p>\n\n\n\n
.weather {\n  display: flex;\n}\n\n@container weather-wrapper size(max-width: 700px) {\n  .weather {\n    flex-direction: column;\n  }\n}<\/code><\/pre>\n\n\n\n
The way I think about it is prep work first: tell the browser you want a wrapper that acts as a container query, then somewhere else in your CSS you can give it instructions. It\u2019s a bit weird but not too<\/em> weird and unfamiliar. If you squint at the code above it does look odd but you can read it and parse it, even if you\u2019ve never seen anything like it before. And that\u2019s neat!<\/p>\n\n\n\n
If you\u2019re interested in reading more about this polyfill then I\u2019d recommend checking out Bramus\u2019s post on the matter<\/a> since it clarified a few things for me.<\/p>\n\n\n\n
This polyfill is so exciting because it makes something that has been theoretical for such a long time suddenly tangible, real. You can go and use them today! And sure, it\u2019s not perfect, but holy hot dang mackerel we have container queries in browsers!<\/p>\n\n\n\n
(Almost.)<\/p>\n\n\n\n
\n\n\n
The UI Fund<\/h3>\n\n\n
Exciting news<\/a>:<\/p>\n\n\n\n
Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.<\/p><\/blockquote>\n\n\n\n
Stuff like this is super helpful to the community and I hope other big browsers would contribute like this or in a similar way. A big reason why so many folks jump onto a particular cool new front-end thing is because there\u2019s a great army of folks who make amazing tutorials and websites and examples to help train us all. And a lot of that work goes unrewarded today.<\/p>\n\n\n\n
\n\n\n
CSS Underlines Are Too Thin and Too Low in Chrome<\/h3>\n\n\n
Not so long ago this was a problem we\u2019d just have to silently weep over and then get on with our day. But I had completely forgotten that we can now wield the power of text-decoration-thickness<\/code> and text-underline-offset<\/code>, as \u0160ime Vidas shows in this great article about how to fix link underlines with CSS<\/a> across browsers.<\/p>\n\n\n\n
This is a sort of funny example where if you set a link in the same typeface, browsers will render it completely differently:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
There\u2019s still a few bugs here though, as Vidas shows. But dang it\u2019s good to have these in your back pocket\u2014especially in odd cases where you want to edit the style on really big links on headers.<\/p>\n\n\n\n
\n\n\n
A Small Guide for Naming Stuff in Front-end Code<\/h3>\n\n\n
Lots good stuff in here.<\/a> Frank Taylor has written his own set of guidelines for when he writes CSS in the future and a lot of it makes a ton of sense to me. Like this:<\/p>\n\n\n\n
In general try to write a class in a way that answers the question, \u201cwhat relies on this class\u201d.<\/p><\/blockquote>\n\n\n\n
This is why Block, Element, Modifier<\/a>, or BEM, became so popular\u2014just from looking at the CSS you could kind of visualize the markup that it applied to under the hood. Here Frank argues that we should write CSS so that we know how it\u2019s being applied, for example by writing something like this:<\/p>\n\n\n\n
<input type=\"submit\" class=\"jsSubmitButton\" \/><\/code><\/pre>\n\n\n\n
We can tell that there are no styles being applied, but that JavaScript is looking for it. I think something like this sounds a little obvious, perhaps a little silly, but it would be extremely helpful to see something like that when it comes to tests. Lots of front-end testing is done by searching for a class\u2014and I\u2019m beginning to think we should start writing something like this:<\/p>\n\n\n\n
<a class=\"test-checkout m-checkout\">Checkout<\/a><\/code><\/pre>\n\n\n\n
To show that, hey, our testing suite is looking for this specific element but also that\u2019s separate from our module styles, m-checkout<\/code>, where colors and fonts and what not can be applied.<\/p>\n\n\n\n
\n\n\n
Future Fonts<\/h3>\n\n\n
This isn\u2019t an ad, but gosh darn it\u2019s sure going to sound like one. I love Future Fonts<\/a>\u2014it\u2019s where you can go and buy fonts from type designers at reduced prices early on in their development and then you\u2019ll get updates as they release changes. It\u2019s such a neat publishing model for fonts.<\/p>\n\n\n\n
If you\u2019re looking for fancy, refined fonts then they have you covered. Or, if you want something completely strange and weird, then they have a ton of fonts that\u2019ll do the trick.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Sponsor<\/p>\n\n\n
Is the new AWS RUM tool an industry game-changer? Let’s find out<\/a><\/h2>\n\n\n
Real User Monitoring for Amazon CloudWatch<\/a> was recently announced at AWS re:Invent 2021, adding to their existing suite of over 200 products and services. But how does it stack up? Today, we\u2019re going to try it out so you don’t have to.<\/p>\n\n\n\n
\n
Read on<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
\"\"<\/a><\/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 Jetpack products. All you need is to sign up and issue 5 licenses within 90 days.<\/p>\n\n\n\n
\n
Sign up<\/a><\/div>\n<\/div>\n\n\n\n
\n\n\n\n
[Chris]:<\/strong> I friggin love URLs. What a great idea right? Toss some content up at a URL, and I can share it with anybody to see. So satisfying. I like that we’re rewarded for doing it. Search engines index them and help other people get to them, provided we’ve done a good job with that content. And that encourages us to maintain them. The bedrock of the web. <\/p>\n\n\n\n
And yet there is all kinds of digital content you can make that produces no URL. A lot of “native” apps are like this. I’m working on a Keynote presentation right now and it has no URL. My notes in Bear have no URL. The videos I’m editing in ScreenFlow have no URL. I wish they did. Not even for indexing reasons, in these cases, as they are all things I’d likely keep private, but for sharability even among my own devices. I get that likely requires kicking the data to the cloud, which has costs among other implications, but I’m all for it. <\/p>\n\n\n\n
When native apps want to really embrace sharability and the power of network effects, they rely on URLs. Most people use TikTok as a native app, but how do they share them between friends? URLs. Figma gives us another taste of how effective a creative tool can be where everything you make has a URL can be. One designer at an organization starts using it and it can go viral inside that organization.<\/a><\/p>\n\n\n\n
URLs are good for us in other even psychological ways. Check out the Manifesto for Ubiquitous Linking<\/a>: <\/p>\n\n\n\n
We also recognize that humans work best in psychological flow. Switching contexts, even to search for information, interferes with flow while consuming precious mental capacity, brain energy and time. Activating an aptly-placed link to information is easier and faster than searching for the information \u2014 and more protective of flow.<\/p>
We affirm that the ability to copy a link to a resource is as important for cognitive productivity as the ability to copy other types of information. This applies to all persistent digital information.<\/p><\/blockquote>\n\n\n\n
Heck yeah, I’ll sign that<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"
[Robin]: My hunch is that 2022 will be The Year of the Container Query. Everyone\u2019s excited about them, and for good reason: this new and fancy addition to CSS makes a component respond to whatever container they\u2019re placed in. For the first time ever we\u2019ll be able to create truly isolated components that can shrink […]<\/p>\n","protected":false},"template":"","acf":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/359572"}],"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":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/359572\/revisions"}],"predecessor-version":[{"id":360954,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/newsletters\/359572\/revisions\/360954"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=359572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}