“css” Articles

It’s common for a table design to feature alternating row colors, which is pretty trivial to accomplish with CSS. But then if you need to hide some rows later, the striped background gets all messed up.

Or at least it used to. It turns out I completely slept on a cool CSS feature that makes this a non-issue.

Have you ever had to implement a modal dialog with a close button designed to hang off of the corner?

While not a huge lift for most developers, there’s a few steps involved. It also requires extra care to avoid accessibility gotchas. I did this recently and wondered if there was a simpler approach using modern CSS.

Something I started doing lately is using the padding of a <label> element to create the space between it and an <input> instead of a margin or grid/flexbox gap. I’m sure a bunch of people already do this, but it’s something that only recently dawned on me.

The <table> element is one of the oldest and most-common elements on the web. But it's also been long overlooked in terms of receiving new CSS features and quality-of-life improvements, unlike other elements that tend to get more love and attention.

I think it's time for the <table> element to get a few CSS improvements of its own. Here's three features that I'd like to see.

Recently, I added a dark mode setting to my website. Dark mode is a color theme feature that’s pretty common these days. Letting users adjust the color of content so it’s easier to see is a nice usability improvement.

Many developers I follow have written great articles about their implementations, which are full of valuable insight. To name a few: Hidde de Vries, Sarah Fossheim, and Josh Comeau all have smart approaches with valuable takeaways.

However, I decided to take a slightly different approach than a lot of the solutions I’d seen – a progressively-enhanced version that works with or without JavaScript (JS).

When building interfaces, it's common to have a series of SVG (Scalable Vector Graphics) images that need to be aligned in some way, but the composition of the assets doesn't easily allow for it. Sometimes, you know this from the start and can plan accordingly. But other times you have to accommodate graphical changes mid-project that can be a mess to deal with.

In this article I'm going to dive into this issue and show an interesting way we can solve it by laying out our graphics a certain way in Adobe Illustrator and then displaying them on our page by modifying the CSS overflow property.