Issue 321

Chrome 94, more CSS Paint API, gaps, focus outlines, and cascade layers.

 
CSS Layout News
Issue 321
By Rachel Andrew – 22 Sep 2021 – View online →
Welcome to another issue of CSS Layout News. My own layout news is that last week the CSSWG resolved that CSS Multi-column Layout could transition to Candidate Recommendation (CR) status. This is the specification I edit, and I’m very happy to see it move on. I need to spend some more time doing some test suite wrangling, in order that it can eventually become a Recommendation.

Other than that I’m preparing to start my new role at Google, trying not to leave a mass of unclosed issues and PRs from other things in my wake! I’ve been documenting WebCodecs recently on MDN, if you are interested in web audio and video, this API landed in Chrome 94 and is worth checking out. Also, see the article on VideoNG over on the Chrome Developers blog.

Rachel Andrew

📝 CSS-Tricks 269: The Color Blue, Neat Design Patterns, and Problems with Scrolling on the Web

View this newsletter on the web.

[Robin]: Let’s start this week off with something odd and fun. I stumbled upon this interesting form pattern by Hakim El Hattab:

This is neat because I’ve never thought that a focus state could have flair and a personality—I’ve always seen those states as accessibility guides to help people quickly navigate around and understand where they are on the page. But nope! I was dead wrong here: focus states can be bubbly and quirky and weird!

Issue 320

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news!

 
CSS Layout News
Issue 320
By Rachel Andrew – 15 Sep 2021 – View online →
I’ll start this week with some personal news, which, if you follow me on Twitter, you may already know. After 20 years of self-employment (aka refusing to have a proper job), I’ve accepted a new role at Google. I’ll be working on web.dev, and I am really excited about all the great content I can help folk create for the web development community as part of a bigger team.

This newsletter will continue, however! At 320 weekly issues, it would be a terrible shame to break the chain now, so while there is layout news to share, I’ll keep posting it.

📝 CSS-Tricks 268: Just in Time CSS, the EyeDropper API, and the problem with iOS

View this newsletter on the web.

[Robin]: One of the criticisms thrown at writing Atomic CSS is that it generates a ton of classes that your users don’t need. Let’s say you want to add some padding to the top of an element, like this:

<div class="pt-20"></div>

This is all fine and dandy—and it sure is neat that I don’t have to write a custom CSS class just to add padding and all—but with a lot of frameworks you’d have all the classes for up, down, left, and right padding in your CSS like this:

.pr-20 { padding-right: 20px; } .pt-20 { padding-top: 20px; } .pb-20 { padding-bottom: 20px; } .pl-20 { padding-left: 20px; } 

Now let’s say we don’t use the other three classes in our codebase, well, we’re now potentially sending a ton of code down the wire that the user never needs. Multiply that by all the classes in these sorts of frameworks and that could become a genuine performance concern.

This is where tools such as acss.io comes in. As Chris wrote about the other day, with acss.io you can write some HTML…

<div class="C(#333) P(20px)"> text </div>

…and these declarations will then create CSS like this under the hood for you:

.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }

(Those selectors only look weird because you have to escape certain characters in CSS selectors).

It sounds like folks are calling this “Just in Time” CSS and both the idea and the name makes a whole bunch of sense to me. For example, Assembler CSS leans into this hard:

And Tailwind supports it now, too:

My hunch is that this “Just in Time” CSS stuff is how folks will primarily use Atomic CSS in the future—which is good for us as developers and our users. The alternative, if you’re using utility classes / atomic CSS, is to purge the unused stuff. Gotta do one or the other to avoid sending far too much CSS and doing exactly the opposite of what you’re trying to do (ship more CSS instead of less).

Issue 319

Direct from my new shed we have news of Firefox 92, CSS Nesting, and custom media queries.

 
CSS Layout News
Issue 319
By Rachel Andrew – 08 Sep 2021 – View online →
Hello and welcome to the first issue of CSS Layout News coming from my new office shed. I moved in over the weekend, and while I have some work to do to deal with the changing light conditions during online meetings, it’s very nice to be out in the garden.

I also wanted to mention that I’ll be speaking at State of the Browser, which is running online and in person. There are also diversity tickets available if the cost would prevent you from attending, apply for one here.

Rachel Andrew

📝 CSS-Tricks 267: Everything is a Rectangle

View this newsletter on the web.

[Robin]: Everything on the web is a rectangle. No matter what element you choose or what CSS you write, under the hood you’re always filling up the page with squares and rectangles of various shapes and sizes. You can make different shapes in CSS, yes, but for the most part that’s an edge case. And even then you’re not really changing the shape of the box the shape sits in. It’s really just a hack.

In the past, that technical limitation in CSS has bled into the visual design of websites. I think that’s why lately we’ve seen the Great Blobification of the web over the last year or so—super rounded corners and abstract shapes, pastel colors that swirl around on the page.

Perhaps this is a sign that folks are bored of everything being a rectangle?

Things are slowly changing though (technically, if not stylistically across the web). We’ve had clipping and masking in CSS for years now (although I don’t see these things used often enough) and we’ve had SVGs that we can do dazzling things that break the confines of those rectangle-based designs. The biggest change that I haven’t seen enough experiments with, and a tool that can help us break off from the shackles of rectangle-based design, is this: the CSS Paint API.

That’s why I was so excited to read about how Temani Afif made these funky little blob animations:

Temani wrote a while back about using this API to create this nifty fragmentation effect and all this reminds me to look into this API more. It feels like it unlocks a ton of exciting new possibilities in the land of CSS.

Issue 318

Chrome 93, CSS Paint API, fixed backgrounds, and getting spicy with sections.

 
CSS Layout News
Issue 318
By Rachel Andrew – 01 Sep 2021 – View online →
Last week I had a new garden office installed. It’s basically a posh shed, but I’m hoping less spidery than my actual garden shed. In sorting out the room I currently work from I found my copy of The CSS Anthology, 1st edition. It included information about the IE6 peekaboo bug, and how to hide CSS from Netscape 4. That book was written at a time when many people still used tables for layout, and a raft of issues made CSS, for layout in particular, really hard work.

Enjoy the collection of links this week, and assuming the electrician shows up next week will come to you from the bottom of the garden.

Rachel Andrew

📝 CSS-Tricks 266: That Classic Place for WebDev Advice, TikTok

View this newsletter on the web.

[Robin]: I stumbled upon this nifty VS Code plugin called TabOut this week that lets you hit the tab key and jump between quotes in a line of code. It’s a brilliant plugin because I think it does precisely what the tab button should do by default: let you navigate between words within quotes and brackets and what not. I only want to indent the line when I’m at the beginning of the line, but at all other times, it makes sense to jump to the next bit of important information.

Of all the blogs and websites and places that I could have found out about this trick, I least expected it to have come from the @vscode TikTok account.

I know that this solidifies my public persona as a cool teen influencer—but!—this account is great because it’s showed me a bunch of VSCode optimizations that I wasn’t aware of. Like this great setting that folds imports. Once it’s activated you’ll notice that at the top of your files there won’t be a sea of @import declarations. Now they’re all hidden away, available with just a click.

It even works in this little Astro project that I’m working on right now:

See, mom? Doom scrolling through TikTok is useful for my job. So there.

Issue 317

RenderingNG, GridNG, OpenUI, and (the lack of) AVIF in Safari.

 
CSS Layout News
Issue 317
By Rachel Andrew – 25 Aug 2021 – View online →
This week the majority of the articles I’ve collected are about browsers and rendering engines. I do enjoy the fact that so much more browser work is being done in the open these days, with designers and developers being asked for their feedback. So do give that feedback, if you spot something that you have opinions on, it may well make a difference to an emerging part of the web platform.

Also this week, I dug out a copy of the first edition of my book, The CSS Anthology. It included solutions to problems such as, "Some of my content is appearing and disappearing in Internet Explorer 6", and, "How do I hide CSS from Netscape 4?" We have come a long way since 2004.

Rachel Andrew

News

Compat2021: Improving CSS Grid compatibility with GridNG

An update on the work being done by Microsoft on GridNG to reimplement CSS Grid Layout. Details of the bugfixes that are in Edge and Chrome 93, plus a hint that subgrid is on the way. Very exciting!

Online meetup about OpenUI

CSS Cafe presents Melanie Richards & Greg Whitworth – Open UI: Solving a Multi-Decade Problem. Signup and watch online, I’m hoping there will be a recording as it is right in the middle of West Coast/Europe crossover time, where all my meetings live.

📝 CSS-Tricks 265: The Shared Element Transitions API and Origin Trials

View this newsletter on the web.

😯

[Robin]: This week I’ve been thinking about page transitions on the web and this post from Chris earlier this year:

We can technically build page transitions now, even without single-page-app architecture, but what I want are purpose-built APIs that help us do it cleanly (understandable functions) and with both performance (working as quickly as clicking links normally does) and accessibility (like focus handling) in mind.

If you’re building a single-page app anyway, you get the freedom to animate between views because the page never reloads. The danger here is that you might pick a single-page app just for this ability, which is what I mean by having to buy into a site architecture just to achieve this. That feels like an unfortunate trade-off, as single-page apps bring a ton of overhead, like tooling and accessibility concerns, that you wouldn’t have otherwise needed.

Why should we animate pages like this? Isn’t that just a nifty trick and that’s it? Well, it is more complicated than that in this blogger’s opinion, because I think full-page animations are really useful to indicate where you are in the UI.

Here’s an example I think of a lot: when you select something to watch in the HBO Max app for iOS, the whole UI animates to the right and deep down in my bones this feels wrong. Because now all of a sudden that menu (in my mental model of this app) is now off to the right. But it should be off to the left of my screen because when I click the back button I want to swipe this whole UI back to where I just was, sort of like a carousel.

(This rant should’ve been saved for my therapist, huh?)

My point here is that page transitions aren’t only cool kickflips that we can pull off as developers to impress our friends, but they also give users spatial cues about where they currently are in the UI. Bad animations make us disoriented and feel a bit lost, whereas good page animations make you feel confident and focused.

Doing this sort of thing on the web is pretty tricky though but there’s a new proposal called the Shared Element Transitions API which gives us “a high-level way to transition between page states.”

Jake Archibald explains:

When you navigate around apps on your phone, there’s usually some sort of transition, from a simple fade or slide from one screen to another, to more complex transitions that move different elements independently

Although, on the web, we don’t tend to get those kinds of effects. Creating a transition from one page to another after clicking a link is, well, impossible. But, it isn’t exactly easy within a single-page app either.

This new API is designed to make all those transitions much easier for single page apps. In the example below that Jake shares, the API is told which elements are shared across pages—in this case, that’s the header that sticks in place:

The really neat thing about all this, to me at least, isn’t this new fangled API but instead the way that the Chrome team is rolling this out. Because right now you can use this feature today in Chrome via an origin trial.

First, let me explain the problem. Today it’s kinda hard for browser manufacturers to experiment with new features and get feedback from the community but it’s also difficult for them to do that without them shipping broken stuff that they then need to roll back. Origin trials are the Chrome’s team solution to this problem.

The other problem is adoption: lots of us developers won’t even test stuff if it doesn’t have good browser support and we’re not going to build sites that require feature flags enabled in a particular browser. Here’s a great post from the Chrome team that explains all this:

The resulting situation is one in which features shipping on the web take a long time to design, and are then frozen into standards well before they have been significantly road-tested by real web developers.

And so with origin trials

Once your origin has opted into a trial of an experimental feature you can then build demos and prototypes that your friends and beta testing users can try for the duration of the trial without them needing to flip special flags in Chrome.

This sounds like a great idea to me, but how do you use it?

Let’s say you want to experiment with this new transition API, well first you need to register for the trial and it’ll give you a code. You can then add that string to a <meta> tag in the <head> of your website.

And then… that’s it. Developers are told right up front that this origin trial will expire at a certain date, in this case on October 12, 2021. So the incentive here is to play with these features, but not to build your whole application around them because after a certain date they just won’t work anymore. But during this time, folks who use Chrome will have these features enabled for them.

From my perspective, this all seems like a great idea, except I suppose that these features won’t be tested in Safari or Firefox or any other browser for that matter. I guess I do have a tiny concern then that it feels a tiny bit like we’re building a web app for Google.

I look forward to all this drama unfolding next week!

(Editor’s note: he is absolutely not.)