[Geoff:] This is the first year I’ve lived where it snows in the winter. One morning our family woke up and smushed our faces against the glass door to the backyard to marvel at our mini winter wonderland. I never knew what I was missing!

That’s why CodePen really caught my attention when they recently challenged users to show off their snow code. I spent way, way, way too much time flipping through pens and enjoying all the neat stuff people made. Some pens feature elegant snowflakes lightly falling from the sky, like this one from Jessica Guarato. Some mix it up a bit by adding depth, like this one from Akiro and another from Gabr13l_dev. There’s one from Corey Megown that’s also a bookmarklet you can use to make it snow on any website. Not all snowflakes fall straight to the ground, which Oliver Greening and kaak mimic in their pens. Snowglobes? Sure, why not!

I’m always amazed by the infinite amount of talent and creativity out there. This really is a special community we’re in and we all have so much to learn from one another. Merry Christmas and happy holidays, friends!

A Few Times Container Size Queries Would Have Helped Me Out

Most of the container queries examples I see are some variation of a card component. That’s great, but container queries are good for so many other things. That’s what I really appreciate about this post by Dan Christofi. He takes a few real-life projects he’s worked on and demonstrates how we would have approached them differently if he could have reached for container queries instead. I mean, geez, I probably would’ve never thought to use ’em for something like cleaner SVG strokes!

CSS Infinite Slider Flipping Through Polaroid Images

Temani Afif does it yet again, making a slick slider that flips through a stack of Polariod photos. It’s impressive enough that it’s nothing but HTML and CSS, but just wait until you read how he managed the z-index values for each image directly in the animation’s keyframes — he shuffles those values every bit as much as the slider shuffles through the photos, and it’s a real good lesson in working with stacking orders.

You can’t screenshot or right click this image

Well, file this in “Totally rad experiments not to use in production”. Terence Eden creatively takes two versions of the same image and interlaces them to form a single image that prevents people from right-clicking it. Nevermind whether or not we oughta be preventing that at all. The way Terence creates small gaps in both images — even lines on one, odd lines on the other — then uses JavaScript to repeatedly render one on a <canvas> for a millisecond before wiping it off to display the other image for a millisecond is nothing short of clever.

Digging Deeper Into Container Style Queries

So, in addition to container size queries, we’ll also be getting container style queries at some point. I spent some time reading through Miriam Suzanne’s explainer on container style queries to get a better idea of how they might work when they actually ship. There’s a bunch in there, from combining queries to differences between implicit and explicit queries to how they can be used to toggle styles or as an alternative to the “Custom Property Toggle Hack”.

“You can find us anywhere you get your podcasts.”

This is a great little Mastodon post from @[email protected] that reminds us that on top of those podcast apps that let smash a Subscribe button is good ol’ fashioned RSS. There’s no new underlying technology going on there, nothing special that a closed platform is offering — just the same protocol we’ve used to distribute content for ages. RSS is freely available regardless of where it’s pushing content.

Sponsor

Powered by DigitalOcean

High fives to DigitalOcean for supporting this newsletter! You might know DigitalOcean as the place you can spin up little servers called Droplets that scale in size as you need it, but there’s a whole bunch more cloud computing power at your fingertips, from Kubernates for better uptime, to Spaces for simple object storage, to serverless cloud functions that run on-demand and closer to the edge for blazingly fast speeds.

You, dear CSS-Tricks reader, get a $200 credit just for signing up.

And if running your own cloud hosting ain’t your thing, you can always get truly managed cloud hosting from Cloudways with a free $50 credit to get started. It’s like having your own team of back-end engineers keeping everything running smoothly so you can focus on building cool things.

That’s a wrap!

I can’t believe this is the final newsletter for 2022. I just wanna say a big THANK YOU for subscribing. I’m so glad we were able to kick this back off after a few months off earlier in the year, but mostly thankful for folks like you reading the things we send out each month.

As always, keep in touch and send us anything you think is worth sharing. We’ll see you next time… in 2023! ✌️

[Geoff:] I think like lots of y’all, I’m not sure what to make of social media these days. There are two personal memories I have of when Twitter felt like magic. The first was seeing one of my earliest tweets on the Twitter homepage. The place really felt like a little community back then and even a schmo like me could take a turn on the ol’ Twitter megaphone.

The second is a period of time where I ran a parody account of a celebrity. I clearly labeled the thing a joke but that was before the actual celebrity was on Twitter (and way before verified accounts) and I had an awfully real-sounding handle. I’d pass the time in meetings tweeting to my 50K followers about the fictional exploits of this certain individual.

I’ve never been big on the ol’ social media train, even if I was curious enough to open accounts. I stopped posting (minus auto-tweeted stuff) in 2015 long before Elon took it over. Now I’m seeing lots of people I know searching for Twitter alternatives. There are a couple of classes that they tend to fall into:

1. Those who are looking for a direct Twitter replacement.
2. Those who are looking for a new way to share and be shared with.

Mastodon is the name I hear most in the front-end community and that might be a wonderful place for that group to go. But the self-hosted server aspect and new terms like “fediverse” might be a turn-off for the less tech-savvy. Max Böck has the most articulate explanation that I’ve read so far.

I’ve always wondered if the mass exodus from MySpace to Facebook would have happened in a more fragmented social space. With all the different ways we have to connect with one another these days — Mastodon, cohost, Slack, Discord, Reddit, TikTok, blogs, RSS, IndieWeb, and even email and text groups to name only a few — there are different platforms that cater to different needs down to the niche. With so many options (not to mention integrations), I’d wager the nickel in my pocket that mass adoption of a single platform is suuuuper unlikely.

Maybe we’ll see a move back to personal blogging for posting (and owning) ideas, and RSS for receiving them. A blog is easy enough to spin up these days, no matter how web-savvy someone is. RSS was always the sticking point because many couldn’t wrap their minds around it, but the technology behind it is pretty invisible these days and the variety of RSS reading apps out there is much better than the (wonderful) Google Reader days.

OK, sorry for waxing nostalgic… let’s get on to some links!

CSS Scrollbars and overriding UA styles

I really like this large collection of custom scrollbars that Saleh Mubashar put together. It’s a nifty showcase of creativity! But a handful of comments came in slamming the idea that scrollbars are something that should be styled with CSS. It reminds me of when Chris asked whether UA styles should even be overridden at all. If scrollbars are off-limits, then what about things like buttons and form elements?

As Chris might say, there’s probably a “baby bear” take in the middle. Custom scrollbars might be the “too hot” porridge for some projects, but “too cold” for others. There’s a moving “just right” line that just sorta depends.

What CSS Do You Absolutely Have to Know in 2022?

With all the incredible new things CSS has to offer these days — and it’s a lot! — where does someone even begin to start learning it? That’s what I asked the other day, and you can bet there were all kinds of thoughts on this.

Even with all the shiny new things we have in our CSS arsenal, I find that covering the basics of writing modes, document flow, spacing, and media queries sets a solid stage for writing good style rules and next steps.

Image galleries that think “outside the tile”

Temani Afif wrapped up his epic three-part series where he combines CSS masks and clipping with CSS Grid to create image gallery layouts that are so crafty and go way beyond typical tiles and stacking. Honestly, this is the type of thing where I’d normally be all, welp, that’s over my head, but Temani provides all the diagrams, math, and steps that make it much easier to understand.

Style queries with custom property values?

I wrote up some early thoughts on container-style queries last month and openly wondered what we’d use them for. Well, Miriam Suzanne points out that CSS custom properties can be referenced in a style query. Why is that interesting? Well, not only because that value can update, but it might be yet another way to approach styling different color themes:

@container theme style(--background-color: var(--bg-dark)) {
  /* styles for our dark theme */
}

@container theme style(--background-color: var(--bg-light)) {
  /* styles for our light theme */
}

I wonder what other possibilities this opens up! The demo is Chrome-only with enabled feature flags.

Why you should never use px to set font-size in CSS

Here’s Josh Collinsworth with a remarkable deeeeeeeep dive with an admittedly provocative title. Josh is pretty much giving a full-on advanced course on the differences between px, em, and rem units and how they apply to font sizes. It’s one of those bookmark-worthy pieces I know I’ll reference time and again, particularly when it comes to explaining why a pixel is an unreliable unit for some use cases.

Scroll to Text Fragments

Can’t believe I missed this in the Safari 16.1 release notes! It didn’t slip by Mr. Jim Nielsen, though. The idea that we can link to a specific fragment of text is incredibly useful… even if it looks weird.

But, as Jim says, this is “just oozing with web-iness.” Heck yeah, it is! I can’t tell ya how many times I’ve added arbitrary IDs to content just to get an anchor link. With scroll-to-text fragments, though, that’s no longer an issue! 🎉

Just when you think that links can’t get any cooler…

That’s a wrap, folks! Thanks for hanging out with me in this issue. Remember, you can always keep up with CSS-Tricks happenings in our monthly “Behind the CSScenes” updates. The latest includes an interview with Mojtaba Seyedi, who has contributed a heckuva lot to our Almanac. You might be seeing his name for the first time, but I bet you’ve read and referenced his work a whole bunch and now you get to formally meet him.

I’ll leave you with a little treat for making it all the way to the end: $50 in free Cloudways hosting credit. (Cloudways is now part of the CSS-Tricks family, after all.)

[Geoff:] I’ve developed a habit on CodePen where I start structing my CSS in cascade layers. Because I demo a lot of stuff, I often want the most relevant styles at the very top of the CSS. I’ve usually done that by creating commented sections of “demo styles” and “base styles”.

/* Demo styles */
.example {
  /* demo-specific styles for the element */
}

/* Base styles */
.example {
  /* base styles for the element */
}

There’s nothing inherently wrong with that, at least in a demo sorta evironment. But doing that in production will likely back you into a corner of the Cascade. Layers allow me to keep this organization, but manage specificity so that the base styles are prioritized over the demo styles:

@layer base, demo;

@layer demo {
  .example {
    /* demo-specific styles for element */
  }
}

@layer base { 
  .example {
    /* base styles for the element */
  }
}

What I like about this is that the @layer syntax is self-documenting. No need to distinguish the styles with comments because the layers already do it. But the real power is the fact that my measley little .example class wrapper in the base layer now carries more specificity than the same class, ID, or whatever selector is in the demo layer. That makes a typical demo both a lot easier to understand because the styles are logically organized, and solid as far as preventing weird styling conflicts that would otherwise clutter up the CSS I want to demo and display at the top of the code.

Cascade layers can are useful for many other things! Less intrusive resets! Organizing complex CSS architecture! Overriding styles from third-party tools and frameworks! Designing your own framework! All of which Miriam Suzanne covers in extensive detail in our Complete Guide to CSS Cascade Layers.

Great feature, right? Speaking of new CSS features…

Is there too much CSS?

Whew, here’s a hot one from Sacha Greif speculating whether we’ve gone too hog-wild with all the new CSS features that have shipped the past few years. The learning curve for CSS is a lot bigger than it used to be. Personally, I’m thrilled by all the advancements! But, yes, the rush of new stuff is a lot like drinking from a firehose. Sacha even considers whether CSS is starting to overreach its bounds and stepping on the toes of HTML.

Styling images just with <img>

Um, just wow. If I’m tasked with decorating an image, I might surround it with a <figure> and other divs I can hook into to get fancy results. But Temani Afif does it all on the <img> tag. No classes or IDs. No extra elements. No pseudos. His demos are jaw-dropping when you take that into consideration, but they also show the power of combining CSS gradients and masks, including neat-o hover effects.

This is a three-part series — the first and second ones are out now and the final is slated for this Friday!

Develop Websites With Flexible Managed Cloud Hosting

You want the scale (and speed) of cloud hosting from services like DigitalOcean, AWS, and Google Cloud. But you also want the back-ups, monitoring, SSL, optimized caching, and other benefits of a managed host. Which one do you choose? Both! That’s exactly what Cloudways is designed to do. You get to roll with your choice of cloud hosting for things like speedy CDN delivery, serverless functions, Kubernates, but it’s all baked right into a managed hosting plan that offers quick one-click setup for WordPress (and WooCommerce), Laravel, Magento, and any PHP application.

And, hey, you get a $50 credit just for reading this newsletter! Use code CSSTRICKS and deploy your project in minutes!

Container style queries are coming!

It’s still super early days, of course, but Chrome supports it, Safari supports it, and Firefox is presumably not far behind. The idea is that we can style elements in a container based on the style properties of the container. So, say we have a container called posts. We can write a CSS container query for the background-color of it, then apply styles when the color matches a specific value. Maybe the posts container comes in light and dark background variations and we want the text color to adapt accordingly for better contrast.

.posts {
  container-name: posts;
}

@container posts (background-color: #1b1b1b) {
  /* Change styles when `posts` container has a dark background */
  .post {
    color: #fff;
  }
}

Why We’re Breaking Up With CSS-in-JS

This isn’t the first time a post like this has popped up, but it is notable since it comes from a top maintainer of Emotion, which is a CSS-in-JS framework. Sam Magura goes deep into the decision to drop CSS-in-JS. It’s not that the technology is terrible and everyone should hurry and jump ship — it’s more of a thoughtful decision that comes mostly down to performance and the boosts they got from a more (dare I say) traditional approach to writing CSS.

You’ve gotta read the comments. I’m floored that conventions for writing CSS are still a #HotDrama topic, but lots of folks in that thread are having a friendly debate about the pros and cons of CSS-in-JS, CSS Cascade Layers, CSS Modules, Sass Modules, BEM, Tailwind, and what options we have to wrangle the CSS Cascade.

I dunno. I say CSS is hard at work pumping out all the features we need to do that without automatically reaching for an additive solution. Do what’s best for you and your team — some projects have requirements that call for an extra layer of abstraction or whatever. But to say CSS is somehow broken and needs to propped up with frameworks? Nah.

Learning WordPress all over again

That’s what it seems like many folks in the WordPress community are doing. I really enjoyed Arjun Singh’s ”Getting Started With WordPress Block Development” because reading it took me back to my earliest WordPress days, when I was just figuring out the classic theme template hierarchy. It was a refreshing step back to get “re-introduced” to WordPress. Then Manoj Kumar took that a couple steps further with this two-parter on developing WordPress blocks with content fetched from an external API.

This comes on the heels of WordPress 6.1 which is a significant release because it greatly expands text controls on blocks, including support for fluid typography using the same clamp()-based approach we’ve covered in the past. Ganesh Dahal has the low-down on integrating fluid type and how to set a system of custom font sizes in the WordPress editor.

Beyond that, I’ve been following Tom McFarlin’s recent spate of WordPress-related posts. There’s also a new site by the 10up team that fully documents their best practices for working with WordPress blocks and block themes. It’s opinionated, but rightly so, and with the sort of clear explanations and examples that I really hope to see one day in the WordPress developer docs.

That’s a wrap for this edition of the CSS-Tricks newsletter! Before signing off, remember you can also keep up with the work we’re doing in our monthly Behind the CSScenes updates. You’ll get a peek at what we’re doing to move CSS-Tricks to a new platform and the design work that’s going into it, as well as a chance to meet the guest authors who contribute content to CSS-Tricks. It’s a party over there!

‘Til next time! ✌️

[Geoff:] The news that Adobe is acquiring Figma produced typical knee-jerk reactions in both directions. I’m not here to add to the noise; you already know how you feel about it and my take isn’t any different than what you can already find in your Twitter timeline.

One thing I’ll throw in, though, is how easy it is to feel something when a new software acquisition happens. If the app you’ve come to rely on for your day-to-day work is one you’ve been using for years, you may very well be scared, angry, or sad about the passing of one era into another. That’s because an app — particularly one that’s as ubiquitous and widely used as Figma — is more than an app. It’s how you get things done, and that has an impact on everything from your daily routine to how confident you are in your work. It’s personal.

But it’s also how our industry works. Companies are swallowing other companies all the time. In fact, some companies have an explicit goal to be acquired. Products swap hands so often that they are almost a currency in tech. Figma? That is roughly seven Beats acquisitions. There’s been such a flurry of acquisitions in the WordPress space the past few years that someone designed a WordPress game of Monopoly.

So, those knee-jerk reactions? They’re gonna be the same no matter what — just swap Figma with another product and you’re sure to hear much of the same. It’s a good reminder of how fast things change and the danger of getting too personally attached to a product, tool, service, app, or whatever when it comes to our work.

Let’s move on to some links!

[Geoff]: There’s been a recent resurgence in the Document Outline debate, though this time with a (sorta) resolution. The original idea that we could have an outline algorithm that allows us to use <h1> as a generic heading element anywhere on a page was promising.

There were flaws though. Amelia Bellamy-Royds explored all the problems caused by what she called the “Document Outline Dilemma” in 2017.

But the Document Outline Algorithm was never implemented, as Adrian Roselli told us way back in 2013 and again in 2016:

Disregarding the fact that it was never part of the final W3C spec, that the spec had a warning for three years, that nobody considered the algorithm a bad idea, that screen readers had nothing to do with it, and that browsers not implementing it is different from correctly implementing it, there is one statement that belies the issue at hand.

[…] It presumes that the specification’s primary benefactors are developers when in reality it is about users. It also presumes that it is acceptable to give developers advice (that harms some users) that has never been supported.

“There Is No Document Outline Algorithm”

Fast-forward 6.75 years, and the algorithm has officially been removed from the WHATWG Living Standard. Bruce Lawson called it out in his too-hard-to-not-click article titled, “Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!” He goes on to say:

Here comes the shocker: it has never worked. No web browser has implemented that outlining algorithm. If you used <h1> across your documents, it has always had a flat structure. Nothing has been taken away; this part of the spec has always been a wish, but has never been reality.

Geez Louise! It’s bizarre as heck that a standard we are all supposed to follow for best practices never reflected the reality of how browsers work for so many years. If you’ve ever stumbled (like I have) when asked whether it’s OK to have more than one <h1> on a page, this is why and you can rest easier knowing a line has been drawn in the sand for now.

So, the flat structure we’ve always had? Yeah, keep using that. But definitely dig into those linked posts because there is much more nuance and context in the details and comments.

Writing is a developer’s job, too

That’s what Eluda says in a pretty darn comprehensive collection of writing advice and tips aimed directly at developers. Sure, you may not be responsible for your company’s content style guide, but there’s still plenty of overlap between writing and development.

We’re talking about everything from writing code comments all the way to full-blown documentation, and Eluda gets into nitty-gritty grammar stuff that’ll sharpen your skills and walk you through best practices with plenty of examples.

Semi-related: Kitty Giraudel has a nice new set of guidelines for effectively asking for help.

React Hooks you might not use everyday

You’re probably well aware of the hits, like useEffect and useState. Blessing Ene Anyebe picks out five React Hooks that may be “new” to you.

While all React hooks are interesting in their own way, there are five of them that I really want to show you because they may not pop up in your everyday work — or maybe they do and knowing them gives you some extra superpowers.

That includes useReducer, useRef, UseImperativeHandle, useMemo, and useCallback. Blessing not only does a great job describing what they do, but has handy demos and examples for how to, ahem, use them.

What does your desk say about ya?

I recently moved from California to Colorado and have been wrestling boxes to set up my new office. As I was doing it, I got a little sentimental and starting think about about all the various “offices” I’ve had. As fate might have it, Jim Nielsen published some thoughts around offices. He quotes sage advice from Stephen King’s book, On Writing, to not make a desk the center of life:

Put your desk in the corner, and every time you sit down there to write, remind yourself why it isn’t in the middle of the room. Life isn’t a support-system for art. It’s the other way around.

So, I spent some time reflecting and trying my best to do just that.

What about you? How is your desk arranged? Is there anything about your office that says something about you as a person?

It’s 1997 and you want to build a website…

Jay Hoffman was on the ShopTalk podcast recently, riffing with Chris and Dave on the web history. Right after the episode was published, Jay posted a follow-up that wades through the options for building a website back in 1997. Funny enough, the options themselves aren’t all that different form today: DIY or let someone else do it for you!

But say it’s 1997 you want to do it yourself. It’s not like there’s MDN for advice. Or freeCodeCamp for learning. What do you do? Well, maybe read a book on the subject, like Bebo White’s HTML and the Art of Authoring for the World Wide Web or Laura Lemay’s Teach Yourself Web Publishing with HTML in a Week.

OK, not the DIY type? Here’s a web agency you could reach out to for some help.

stroke-dasharray patterns be weird

The property accepts any number of values to set the length of dashes and gaps on an SVG stroke:

line {
  stroke-dasharray: 5;
}

But more specifically, what we’re really setting there is a pattern of dashes and gaps. That 5 value isn’t just the length of the dashes, but the length of the gaps between them as well. So, what we’re really saying is this:

line {
  stroke-dasharray: 5 5; /* Dashes: 5 units; Gaps: 5 units */
}

That’s what happens any time we declare an odd number of stroke-dasharray values. For example, a three-value pattern like this:

line {
  stroke-dasharray: 5 10 15;
}

…is really equivalent to this:

line {
  stroke-dasharray: 5 10 15 5 10 15;
}

I have a full post for you on it with a big ol’ hat tip to reader Joshua Dance for writing in with the clarification.

Minimal Social Markup

Chances are you have worked with “social markup” before. You know, the metadata in <head> that is supposed to make pretty cards when sharing links.

<head>
  <meta property="og:title" content="The blue sky strategy" />
  <meta property="og:description" content="Less clouds, more blue" />
  <meta property="og:image" content="/sky-with-clouds.jpg" />
  <!-- ... -->
</head>

Jens Oliver Meiert digs in and explains how he arrived at what he thinks is the minimum markup to make it all work. He documents how he had to wrestle with inconsistent standards and implementations of the Open Graph protocol to arrive at his final code, all the way down to quite marks.

One problem relates to a pretty consistent inability of messenger apps (!) to retrieve social images, if the respective attributes aren’t put in quotes—an odd bug given that other information can be pulled.

That’s it for now! We’re hoping to keep this dear newsletter going on a regular basis like before. It’ll probably take a little ramping up though. In the meantime, thanks for hanging out — it feels good to be “back.”

🧡