📝 CSS-Tricks 241: The @property is magic

View this newsletter on the web.

[Robin]: I still haven’t found myself reaching for Web Components yet and I’m not sure why. I assume because most of my time is spent with either Static Site Generators or very large Single Page Applications written in React. But the idea makes a ton of sense to me, as Caleb Williams describes in An Introduction to Web Components:

The shadow DOM is an encapsulated version of the DOM. This allows authors to effectively isolate DOM fragments from one another, including anything that could be used as a CSS selector and the styles associated with them. Generally, any content inside of the document’s scope is referred to as the light DOM, and anything inside a shadow root is referred to as the shadow DOM.

Later Caleb writes that “the shadow DOM works sort of like an <iframe>” where you don’t have to worry about any of the styles within it conflicting with anything outside of it and vice versa. Or, to put it another way: browser-native encapsulation like CSS modules. But I’ve been thinking about this stuff because I really enjoyed this other piece by Richard MacManus about How Web Components Are Used at GitHub and Salesforce. For example, it’s interesting to hear that the reason why the front-end team at GitHub reached for web components (they now have more than 50!) is because they don’t use a JavaScript framework like React or Vue.

The GitHub team built components such as the tab-container element and it looks like there’s a great list called github-elements which captures most of them. I’ve been flipping through these and it seems like there’s a ton of stuff to learn here about building great Web Components.

📝 CSS-Tricks 240: The Popup Element

View this newsletter on the web.

[Robin]: The first thing that caught my eye this week was this new HTML element called <popup>. Šime Vidas wrote about this in the Weekly Platform News:

A popup is a temporary (transient) and “light-dismissable” UI element that is displayed on the the “top layer” of all other elements. The goal for the <popup> element is to be fully stylable and accessible by default. A <popup> can be anchored to an activating element, such as a button, but it can also be a standalone element that is displayed on page load (e.g., a teaching UI).

There’s an “intent to prototype” right now which sure is exciting! I think elements like <popup> should replace a ton of third-party code from our codebases and make this pattern more accessible and easier to build.

What new HTML elements might we see in the future like this though?

The answer to that question is most likely to come from design systems (like the Design Systems Repo) where we can see common UI patterns emerge. These components—like modals, toasts, popovers, and tooltips—should lay the groundwork for new HTML elements that we need in the future.

[Chris]: Remember last time Google kicked a new HTML element right to “intent to prototype” out of nowhere? It was <toast> and people were proper pissed off about it. I’m sure I’m missing some nuance here, but at a glance, I’m not seeing the difference in approach. All I’m seeing is excitement from the general community. I only heard one tiny bit of pushback in a private conversation where an engineer was essentially disappointed that new’n’shiny was getting attention when things like <dialog> are a mess. Maybe people are so ready for HTML to start evolving they’ll take whatever they can get.

📝 CSS-Tricks 239: New CSS Tricks and Design Engineers

View this newsletter on the web.

First up this week, Andy Bell wrote this fantastic piece where he dives into a ton of new CSS features that we can use today:

CSS is great and getting better all the time. Over recent years, especially, it has evolved really fast, too. Understandably, some of the really handy powers CSS gives you might have slipped you by because of this, so in this article, I’m going to show you some really handy stuff you can do with modern CSS today, and also share some stuff that we can look forward to in the future.

This is a shocking post to me because there’s just so much stuff that’s been going on in the world of CSS. Here’s a quick list of new-ish features from Andy’s post (I’ve added links that dive into each of these features if you’d like more info):

That’s a lot of new features to keep up with. Most of these I have a pretty good handle on, I think, although I’m probably unaware of the coolest tricks we can pull off with min, max, and clamp. The main thing I was unaware of here was the ex unit, which Andy describes like this:

The ex unit is equal to the height of the lowercase x character — also known as the “x-height” in more traditional typography. This is really useful for working accurately and responsively with the vertical axis of your typography. One really handy use case for this is making an SVG icon the same height as your text.

All of these new abilities that have been added to the CSS language over the past year or so feel like small but important improvements. The way I tend to think of CSS is a language with these big gaps in some places—for example, layout was one of those enormous gaps until CSS Grid shipped and filled it in.

What does the future of CSS look like and where are those gaps today? Well, I think CSS needs container queries but it looks like the hard work of folks like Miriam Suzanne is starting to pay off there; container queries are on the horizon, and I think they’ll change my job as a front-end developer more than any other thing in the next couple of years.

📝 CSS-Tricks 238: Responsible Web Applications

View this newsletter on the web.

Changing list bullet styles

Yep, you can do that now without hacks or employing the somewhat awkward combination pseudo-elements and counters. Your best bet? The ::marker pseudo-element. We just updated the Almanac entry on that for your reference pleasure.

ul li::marker { font-size: 150%; font-weight: bold; color: lightgreen; }

You can also control the text of the marker itself, meaning you can swap out bullets for emoji, or numbers for custom counters. Manuel Matuzović made note of this week that it was just a few years ago this was much more difficult. Go CSS!

Support is pretty darn good and it’s been around for a little while but I always tend to forget about :marker so this is a good reminder to use it more often.

📝 CSS-Tricks 237: The Dreaded Homepage Redesign

View this newsletter on the web.

[Robin]: Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about the entire field of web development is designing the homepage. It’s just the worst.

Why? Well, introductions are hard. If you’re a front-end engineer then you probably want to lead with that and maybe where you’re from. But everyone’s website has that stuff! And they all sound relatively the same:

My name’s X and I’m from Y. I like front-end development, interesting activity Z, and coffee.

I’m not trying to make fun of anyone here—my own website is like this, too. I’m simply underlining how difficult this process is. How do we introduce ourselves? How do explain who we are and what we do without sounding like an absolutely unbearable jerk? How do we make our websites unlike anyone else’s and give a brief peek into who we are and what makes us tick?

My advice (to myself) is this: show me what you care about! That sounds kinda dumb and obvious but I’ve found it to be extremely tricky. Looking at examples can help us though.

I’ve mentioned Cassie’s website multiple times because I think it captures her personality and focus extremely well:

You can tell right off the bat that Cassie cares a lot about SVG and animation. You can tell that she likes the nitty-gritty details of web design and UI development and by the writing you can see that she doesn’t take herself too seriously.

Another example I love is Sarah’s website where she kinda kicks in the door right away and doesn’t faff about:

I like how bold and exciting this is, and it certainly doesn’t feel like I’ve seen a website like this before. I guess that’s what’s exciting about it to me; having to scroll down a bit to see who this person is, and not being told right away.

Another homepage that springs to mind is Michelle Barker’s CSS in Real Life where she writes about front-end topics. I like this one because it’s not about fancy animations or beautiful illustrations but because of that color, that luminescent pink that hops off the page and just sticks in my mind.

A lot of sites are pretty forgettable and the choice of using a

Alternatively, I like the story-based approach of Danielle Baskin’s website that shows everything that she’s been working on lately. The sheer amount of white space is also pretty great and gives you plenty of breathing room to enjoy those lovely typefaces:

These sites are inspiring and worth checking out not because we should copy them though, I just want to make that super clear. Instead we need to ask that super annoying question again: what do I care about? And then, harder still: how do I show folks that I care about that?

I could say “I like typography” in a paragraph but how do we show folks that without necessarily telling them? Probably: beautiful fonts, an interesting layout, attention to small typographic details.

So as I’m designing the homepage of my website I think that I need to take my own advice here. Earlier this weekend I popped open Figma and each time I started to riff on a new idea I would make a new frame and copy my previous design, just like this:

These are all different designs of the same page, with big grey blocks signifying images or UI elements that I don’t need to draw right now. I can’t quite remember when I learned this design “hack” but it’s great because after 30 minutes of trying different ideas you can quickly see how you got to where you are now. (In the past I would constantly move UI elements around the page and often retry things that I’d experimented with a dozen times before—this is a time saver).

All this homepage design work is scary and annoying but also fun at the same time. At least, once you realize that you can be smart about how you show yourself off, you can begin to play with typography and animation and layout. You can begin to think about all the CSS properties and weird things you can experiment with. You can begin to make something magic.

Wait, I have to go build the thing now? Wow, sorry dad.