The Cascade
When someone makes a website for the first time they’ll have to wrap their head around this: HTML is for meaning CSS is for presentation JavaScript is for interaction The lines are clearly drawn at the beginning but any web developer knows that this isn’t really the case. You can really mess up the meaning of a HTML document with CSS for example, but I especially disagree with that last bit.…
I love the <style> tag and I love CSS. I still think the way that styles cascade and can’t error out is ingeniously resilient. But, in this blogger’s opinion, the cascade has always had this glaring, terrible flaw. Let me explain: many years ago, I decided to avoid creating any more CSS files. These projects are admittedly very small but as soon you go down the path of creating a bunch of CSS…
Pals! Friends! Future Acquaintances Whomst I Shall Inevitably Disappoint! Last week I was working on the new introduction to my website and I was having a blast. It’s a mini-manifesto in the style of HyperCard that describes what I hope to do with my career and my website. Look at all those illustrations and icons! I found an archive of things that came bundled with macOS—before Jobs shuttered the…
Friends! Colleagues! Patrons of this fine newsletter! I saw a post today that hit me like a ton of bricks. But first, some context. Many moons ago I was experimenting with blend modes in CSS, working on a hacky demo where the text color of an element would adapt to its background. This could be handy in all sorts of situations like design systems or allowing folks to create their own themes on a…
Pals! Comrades! This week I have two links that pair well together. First, here’s Stephanie Eckles’s excellent post about 12 modern CSS upgrades where I just learned about the outline-offset property, which I had no idea existed at all: .element { outline : 2px dashed blue ; outline-offset : 0.5em ; } This lets us effectively add padding around an element and move the outline which is often why I…
Yesterday I got coffee with a pal who I used to work with on a design systems team that no longer exists. And, as we were talking, we both realized that everyone we worked with no longer even does design systems work these days. They might still be interested in the subject, might still write about it, but they no longer actively work on a team that’s dedicated to design systems. That’s weird! Why…
Friends! Stardate: 2015. Month: September. I was stood in line for coffee in Portland and if you looked closely enough then you’d notice my gentle swaying from side to side because I was struggling: the city was an open oven — I was wearing shorts (my sincerest apologies) — and my hangover was all-encompassing, overwhelming, intergalactic. I was also coming apart at the seams from anxiety and…
E-pals! One of my favorite things about the web is how the addition of a tiny and almost insignificant new property can delete hundreds of lines of extraneous code that we’ve had to write for a decade or more. I strongly believe that replacing a whole bunch of CSS with a single line of HTML is more comforting than taking a long hot bath on a mountain top. i. # Here, let me prepare your bath this…
i. # Despite being famous around the world as a “CSS entrepreneur” and being “extremely annoying about fonts” I must admit to a mistake here and there. Like this week where I was reading CSSmas 2023 , Sarah Gebauer’s excellent series of blog posts, and I discovered a worrying initial-letter shaped hole in my CSS databanks. What the heck is this thing ? Let’s take a look:…
Two quick things this week. First, my favorite CSS trick I’ve seen in a while followed by even more thoughts about web components. (I am sorry that I have become a total shill for Big Web Component). i. # My favorite snippet of the week is courtesy of David Darnes who has a neat idea : a tiny scroll to top link that reveals itself as you scroll, but does so with the following CSS... a { margin-top…
This weekend is a quick one with just five things to read since I’m still recovering from all the pies and baked goods of Thanksgiving. The brisk and biting cold air has returned to San Francisco and so I’m writing this from a cafe whilst bundled in the biggest sweater you can possibly imagine. It is glorious. I am happy. Okay, onwards! Let’s get this show on the road. i. # Josh Comeau’s…
First a quick note, then some excellent feedback from readers. Then, finally, the future. i. # This week I spotted a great reminder from Michelle Barker about how CSS nesting is widely available : In case you missed it, nesting is now supported natively in CSS in all major browsers! Nesting is a popular feature of preprocessors like Sass and has been, in my opinion, on of the main reasons to keep…
Friends! Last week I rambled out loud about web components and how their true magic lies in extending HTML. Heck, Jeremy even called them “HTML web components” in a blog post which feels like the perfect framing for them. You might have noticed how I’ve written several hundred words about the subject already and have not once mentioned Shadow DOM, slots, or templates. And that’s because before we…
Friends! I’m a few days late with this edition so let’s jump straight in. i. # Sometimes text can look weird and, depending on how many lines and the length of the words in a sentence, the text can look unbalanced. Widows and orphans, etc. Thankfully, there’s two handy tools we have for controlling these things in CSS: text-wrap: balance; and text-wrap: pretty; . To be perfectly honest I had…
Friends! This week, two things. i. # It took me a long time to figure out why color-mix() is so neat and why I’d need it as a developer. But it wasn’t until I spotted this demo on MDN where it made a lot more practical sense to me — mixing a splash of white into a color. Often I want to tweak a color by opacity, but being able to mix a dash of white or black into a color seems really helpful and…
Friends! This weekend I’ve come down with a bad cough/flu so I’m going to keep typing and then stop when I stop. Apologies in advance if this whole thing is more of a surrealist poem than a typical newsletter. Okay, let’s do this! (cough) i. # Last weekend we talked about colors in CSS but I missed some important notes about oklch() and uniform perceived brightness . That’s kind of a big deal…
I’ve got a terrible thing to admit. It’s something unforgivable, something so dark and heinous that I’ve waited years to tell you all out of fear of blackmail or just overwhelming, incomprehensible shame. Here it is, and I’m sorry in advance: I still use hex values, like #FFF, in my CSS. I know, I know! I should be using hsla() right? Or...uhhhh...lch()? Wait, no, I got this, I got this. It’s…
Friends! Welcome to The Cascade, a newsletter about the past, present, and future of CSS. I’m your host, Robin Rendle , and to kick things off we’re gonna talk about what scares me most about CSS in 2023. Lots of newish things in CSS mostly are mostly cool and not scary at all. Take nesting for instance, now available in Safari Technology Preview , where soon enough we’ll be able to write CSS like…