Skip to Content

My Articles

The evolving state of CSS

Recently I was listening to an episode of the Shop Talk Show podcast where they were talking about the recent State of CSS survey (if you haven't seen this site, even if you're not interested in the results, it's worth checking out because it's so fun!).

It was a fun episode, but on top of that, it made me realize how much CSS has grown up in a short period of time.

It's still not that old of a language, but it seemed to be a little stagnant for awhile, and then suddenly we had all these new features.

Read more

You'd be better at CSS if you knew how it worked

CSS looks so simple. It gives off that impression because the syntax is so basic and easy to understand.

Show the following snippet to someone who has never seen CSS and I bet they can get at least a rough idea of what is going on.

.textbox {
  background: pink;
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

One of the problems with the syntax being so basic is that it gives off the impression that it is a simple language. It's simple in how it's written, but it can be downright complex in how it actually works.

Man sitting at his laptop, clearly frustrated with what is on the screen

People are tricked into thinking it's simple and then, when it doesn't work they expect it to, they say it's broken.

Read more

Initial, Unset and Revert

CSS is an interesting language. It’s fun to see how different solutions arrive to deal with certain situations, and how those solutions sometimes evolve — something like grip-gap evolving into gap and making it’s way into flexbox, for example.

One interesting set of values has always been initial and the much lesser known unset. Both of these don’t exactly work how you think they would though, often giving you unexpected results. It would seem that revert is here to help with that.

In this article, we’ll be taking a look at all three, exploring their similarities and differences, and we'll wrap it up with when revert might come in handy.

Read more

5 awesome DevTool features to help you debug your CSS

When I started created websites for fun in the late 90s, we didn’t have many tools that would help us solve our CSS problems. There was probably some validator out there I didn’t know about (it was just a hobby for me at the time), but it was a lot of simply figuring out what was wrong with your file. Luckily for all of us, it’s so much easier now.

The big shift was in 2005 with the release of Firebug, which was an extension for Firefox which has since turned into the official Firefox devtools.

The reason Firebug was huge is it opened up a new way for us to be able to debug our CSS. Devtools have evolved a lot since then (as has CSS!), so in this post, we’ll be taking a look at 5 awesome devtool features, from ones that make your life so much better and easier to ones that are just really cool.

Read more

The <wbr> tag and when you might want to use it

The <wbr> tag is the type of thing that I originally created my articles for in the first place: An obscure HTML/CSS thing that, while it might not come up often, can really come in handy!

In this post, I'll be exploring what <wbr> does, but more important, a few use cases where you might find it being useful.

Read more

CSS transform and transform-origin

transform is a bit of a strange property

All CSS properties have a range of possible values, but transform is a little different than most, in that its values do completely different types of things. They are all related to transforming our selector, but it’s not really the same as color. Sure, color allows us to set pretty much any color we want, but all of them are just setting a color.

With transform we can do the following:

  • rotate - rotates the element
  • scale - scales the element, making it bigger or smaller
  • translate - move the element around, up, down, left and right
  • skew - skews it, which is like pulling or tilting the element
Read more

What is currentColor?

currentColor is a fantastic CSS value and one that not nearly enough people know about.

currentColor is a value that takes on the value of whatever color is currently set to for that selector, whether it's implicitly set or if it's inherited.

This might sound a bit strange, but here is an example where it can be really useful for buttons that have a border that matches the font color

Read more

Scaling buttons with CSS custom properties

Custom properties are everywhere now, and for good reason as there are so many useful — and fun! — applications that you can do with them!

A couple of weeks ago, I had an article published on CSS-Tricks where I looked at the benefits of locally scoping custom properties. In that article I quickly mentioned how it could be really useful to create a button scale.

The article ended up being really long, so I cut out the part about creating a button scale with custom properties. I think it’s a really fun application though, as there are two different ways you could approach it.

Read more