Hello Reader,

Last week, I talked about how CSS is like a strange puzzle.

Like a regular puzzle, when we write CSS, we need to figure out how to fit all the pieces together properly.

But it’s made more complicated because each piece can change it’s size and position.

Despite that, we still need everything to fit together.

There are so many variables at play at any given time that it sometimes feels like we’re just hoping for the best.

And in a way, we are only hoping for the best because as hard as we might try, it’s the user on the other end who has the final control over everything.

What do I mean by that?

Here’s a quick, incomplete list of things that can impact how things look that we, as the author of how the page is supposed to look, have no control over:

• The operating system
• The browser
• Viewport size
• System settings, like light/dark and even font size adjustments

And that doesn’t even include things like the limitations of certain devices, like the colors they can display or the device's pixel density.

When we create a page with CSS, we cannot know what the end user is seeing.

Once you come to terms with that, it can change how you approach writing CSS!

That’s why I strongly believe that one of the most common reasons people struggle with CSS is that they approach writing it with the wrong mindset.

People approach it trying to tell the browser exactly what to do, throwing things like width: 100vw in where it’s not needed (and causing problems), or trying to force things to behave in overly specified ways, which lead to issues.

Instead of forcing the issue, we need to write code that can adapt to whatever is thrown at it.

The absolute simplest example of this is something like a container/wrapper class, where instead of declaring a fixed width for our layout (like we might have done in the late 90s and into the 2000s), we instead use a max-width.

We want to set a maximum size on our layout, but we need it to be able to adapt to when a user is on a smaller device, or has a smaller browser window opened on their desktop.

And while that is a simple thing that most people understand, a lot of people stop there.

However, every line of CSS we write should take that same approach!

We need to set constraints and push things in the right direction instead of simply assigning an absolute value and then getting frustrated when we run into problems.

Instead of getting frustrated because we feel that what we wrote should work, we need to step back and consider why it’s not.

After all, a website without CSS is already responsive*, so we need to work with the browser and remember that when problems happen, we wrote the code that caused those problems.

*most of the time. Images, iframes, and other replaced elements do need a little help from us.

🙋‍♂️ What I’ve been up to this week

Responsive Bento Grid

​

This was a bit of a longer video than I’d planned it to be, but I had fun exploring custom properties in building out this Frontend Mentor Bento grid challenge 🙂.

⚡ Quick tips of the week

• ​Level up your responsive type (YT Short)
• ​Input type=”number” (HTML & CSS Tip of the week)

🎙️ Podcast Modern CSS quick hits Modern CSS quick hits: range... Nov 21 · General Musings with Kev... 24:32   ​ A bit of a quick hits, mixed bad this week, where I talk a little about masonry again, as well as random(), animation-composition: accumulate, and modern CSS in general, as well as picking up from a previous episode where I talked about progress, this time remembering that it’s often non-linear. LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS​

​

🔗 Other awesome stuff around from the web

• ​The select element can now be styled with custom CSS​
• ​Holographic Masks​
• ​You should know this before choosing Next.js​
• ​Grid First, Flex Third followed by If it works, it’s right​
• ​Google Being Forced To Sell Chrome is Not Good for the Web and a follow-up Podcast with full transcript **What Happens If They Sell Chrome?​

🏁

On a completely different note, if ever you’ve been wondering why we have logical properties like margin-block-start, and even shorthands like padding-inline, but we have no way to make the margin, padding, or inset shorthands behave in a logical way, you can help fund the initiative to make it happen!

Have a fantastic week!
Kevin

P.S. A quick reminder, to check out CSS Demystified, if you are interested in it 🙂

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205