Hello Reader,
A few weeks ago, my dad and my 10-year-old son were working on a puzzle together.
My dad mentioned that it was a pretty hard puzzle for a kid, and he was impressed with my son's patience with it (he isn’t always the most patient type 😆).
The reason I bring this up at all is because one of the reasons that I often tell people I like CSS is because it’s like a puzzle.
Just like with a real puzzle, where you do have a finished version to guide you, with CSS we have a layout that we’re trying to create.
That layout might be in a design file, or maybe even only in our head, and we’re trying to put the pieces together to make it all work.
But with an actual puzzle, the advantage is that you know exactly what the final result will be.
It’s a nice, static image.
Even 3D puzzles, which are definitely harder, have a final “state” that we aim for.
With CSS, though, we have our static image of what things should look like in our Figma file, but that isn’t what the finished page will look like.
- The viewport size can change.
- The user can zoom in our out.
- They might go into a reader mode
- Extensions might change the color scheme
- The list goes on and on...
Things need to be fluid and adaptable… so, in a way, it’s like trying to make a puzzle where the pieces can move around and change sizes, while still all fitting together.
On top of that the design file we have isn’t the finished result that we are aiming for, but simply a guide to help point us in the right direction.
In other words, it’s really hard!
I do still see CSS as a puzzle, but one where we can’t know what the final result will ever actually be because of all the unknown variables that influence the size and scale of all the pieces we’re trying to fit together.
It almost sounds like that should make it impossible, but I think that’s what makes it the most fun!
When we use CSS to style a page or even a simple component, it’s so much more engaging than just plugging bits into a puzzle, as we also have to be aware of what might change and whether those changes might break things.
If you’re newer to CSS, the hard part is often not even being aware of everything you need to be aware of, but it’s one of those things that you learn with experience and experimentation.
And even once you know what you should be aware of, there are still little surprises that pop up from time to time.
While that can be frustrating in the moment, if it were too easy, it wouldn’t be any fun!
🙋♂️ What I’ve been up to this week
Quick accessibility wins that are easy to implement
Accessibility can be a deep topic, but there is a lot of low-hanging fruit that is easy to get right.
In this video, I look at real-life websites that are getting some of those things shockingly wrong, explore some tools to help us find the issues, and how we can avoid them in the first place.
⚡ HTML & CSS Tip of the Week
The fieldset and legend element
If you make websites—and I have to assume you at least dabble in development if you’re reading this—changes are you’ve created a <form></form> or two.
One thing not enough people use within their forms are <fieldset></fieldset> elements, which I give a quick overview in this article.
|
|
🎙️ Podcast
Navigating CSS Layout Decisions
Inspired by recent articles from Andy Bell and Alex Riviere (linked in the links section below), I explore a bit of my own decision-making process when deciding between Flexbox and Grid.
This leads to me talking about intrinsic and content-first layouts as well, and how the most important thing is that we're thinking about the decisions that we're making.
LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB
|
|
🔗 Other awesome stuff around from the web
First up, if you like this newsletter, you might want to also sign up for OddNews, which is OddBird studio’s newsletter (you can sub to their RSS feed… and yes, I’m working on adding one for this newsletter too).
In their most recent issue, they link to some great stuff on their continued talks on fluid typography and anchor positioning, but if you scroll on down a bit, you’ll find a great breakdown of CSS Custom Functions, which are now experimental in Chrome Canary if you want to play around with them.
⚡ Quick links
🏁
Have a fantastic week!
Kevin
P.S. If, unlike me who has fun with the challenges of getting my layouts to behave, you get more frustrated trying to figure it all out, my course CSS Demystified might what you're looking for.
It's all about better understanding the how and why behind the way CSS works, and building up a better foundation so that you can start writing CSS with confidence.