Skip to Content

My Articles

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

Position fixed vs position sticky

position: fixed has been a staple of CSS for a long time now, and it’s served us well. More recently, we’ve been treated with position: sticky.

Both of them are really similar but there are some important differences. In this post, we’ll be looking at the differences, as well as the use cases for each.

Read more

Creating a website - getting over the anxiety of starting with a blank file

One of my favorite classes to teach at my school is the introduction to HTML & CSS. It’s so much fun seeing people who’ve never even seen a line of code be able to make websites on their own after only a bit of time together.

As much fun as it is once they start to get the hang of it, I also see how daunting it is for them the first time I tell them to make a page from scratch without my help. It also lets me see all the mistakes they make when they start trying to make their very first pages all on their own.

Read more

How to append a unit to a unitless CSS custom property with calc()

I’ve seen complaints that you can’t append a unit to a custom property.

What you can’t do

The complaints seem to come from not being able to do something like this:

.icon {
  --scale: 1;

  /* this doesn't work */
  font-size: var(--scale) + 'px';
}

Granted, that would be awesome if we could do that. But we aren’t writing JavaScript, so we can’t.

Read more