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:

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

.btn {
  padding: .5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
}

And, why not go the extra mile and throw a box shadow on there to boot:

.btn {
  padding: .5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  box-shadow: 0 0 25px -10px currentColor;
}

Of course, we can keep a lot of that on a single button class, and then just manipulate the color with a modifier class, like I’ve done in the Pen below that you can explore.

See the Pen Styling buttons with currentColor by Kevin (@kevinpowell) on CodePen.

While handy, it lets you done some fun things too

It can seem like a nice trick to let you get away with styling a little less, but you can push this to do some really fun things with it! In this CodePen by Benjamin Réthoré, and entire form is styled with it, and in this one by Scott Kellum, he uses it on the html selector itself to do some fun stuff.

Check those out, and then see what you can do with it!

Don't want to miss an article?

While creating my YouTube videos, I come across a lot of fun snippits of information and little known CSS properties that aren't really worth building full videos about. I share the cool little things I run across (like you read in this post), as well as some design tips and tricks, with a new post every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)
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.

Scaling buttons

When working with buttons, it’s really common to see something like this:

<button class="btn btn-xs">xs</button>
<button class="btn btn-sm">small</button>
<button class="btn">default</button>
<button class="btn btn-lg">large</button>
<button class="btn btn-xl">xl</button>

By using em for the padding of my button, when I change the font-size, everything will scale all together. So we could do something like this:

.btn-xs { font-size: .75rem; }
.btn-xl { font-size: 1.5rem; }

And it will work. And when someone is asked to add a new .btn-xxl they’ll probably be able to figure it out relatively quickly.

But we can take advantage of CSS custom properties to make something even better here. As I looked at in a previous article, we can use calc() to create a unitless scale custom property. So we can take advantage of that to make create our button scale.

.btn {
  /* using calc to append 'rem' to a unitless custom property */
  font-size: calc(var(--scale) * 1rem);  

  /* rest of the styles */
}

Now we can do this:

.btn-xs {
  --scale: .75;
}

.btn-sm {
  --scale: .9;
}

.btn-lg {
  --scale: 1.3;
}

.btn-xl {
  --scale: 1.65;
}

Anyone who wants to create a .btn-xxl won’t even have to think twice here. By using CSS Custom Properties, we’re able to explicitly state the purpose of our numbers and help boost the readability of our code, even if it is a bit more abstract in the initial definition of our .btn.

See the Pen Button scale with CSS Custom Properties by Kevin (@kevinpowell) on CodePen.

Another approach

As I looked at in the CSS-Tricks article, custom properties are really handy for “theming” things within your page.

I think that you could easily do away with the need for a set of buttons like we had above. We only really need one button class, that is set up to be able to scale.

.btn { 
  // 1rem becomes the default
  font-size: calc(var(--btn-scale) * 1rem), 1rem;
}

Because we have a fallback to 1rem, it will default to that. But, if we want a larger or smaller button, we can easily do that!

.cta {
  --btn-scale: 1.3;
  /* other styles */
}

.widget {
  --btn-scale: .85;
  /* other styles */
}

By working like this, we can simplify our markup, eliminate a bunch of CSS, and it’s super easy to understand what’s going on.

See the Pen custom property button scale by Kevin (@kevinpowell) on CodePen.

Don't want to miss an article?

While creating my YouTube videos, I come across a lot of fun snippits of information and little known CSS properties that aren't really worth building full videos about. I share the cool little things I run across (like you read in this post), as well as some design tips and tricks, with a new post every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)
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.

The differences between sticky and fixed

position: fixed generally means fixed to the viewport*. You tell it where to position itself, and it stays there as the user scrolls. It is out of the flow of the rest of the document.

On the other hand, sticky scrolls along like anything else until it reaches the offset that you set. At that point, it acts like it’s fixed.

There is a catch though, it must stay within it’s containing block (it’s parent)! Once that containing block scrolls off the page, it leaves with it.

That can cause some problems, but when you know how to use it properly, can open up some doors.

Here are both of them in action, which should help clarify the differences.

See the Pen sticky vs fixed by Kevin (@kevinpowell) on CodePen.

When to use fixed

So with that in mind, we want to use fixed when it must always be on the same place on the page at all times. It simply doesn’t move.

Be careful with fixed though. Using it takes that element out of the document flow. Visitors to your page can see it, but as far as the rest of the content on the page is concerned, it isn’t there.

That means it can potentially cover some elements, hiding them from view. Sometimes it’s not a big deal on desktop, but when you hit mobile and screen real-estate is limited, this can cause problems.

When to use sticky

You’ll want to use sticky when you want something to scroll into view and then stop once it reaches a certain point. In the past we had to use JavaScript to do this. It’s amazing that we can do it with CSS now, and that it’s so simple to use.

Keep in mind that it stays within its parent, so once the parent scrolls off, it’s gone. This isn’t an issue if the parent is the body, but the rest of the time you might not get the effect you are after.

Don't want to miss an article?

While creating my YouTube videos, I come across a lot of fun snippits of information and little known CSS properties that aren't really worth building full videos about. I share the cool little things I run across (like you read in this post), as well as some design tips and tricks, with a new post every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)
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.

When you are learning how to write HTML & CSS, it’s easy to follow along with an instructor or a tutorial and change the color of your nav link. It’s even easy to make a nice 3-column layout when someone is holding your hand through it.

It’s another to actually start creating a layout from scratch, even when you are given a design to follow.

You know HTML & CSS. You’ve followed tutorials online about the basics. HTML and CSS are such simple languages! Why is it so hard to figure out when looking at a layout?

CSS comes across as a simple language because it has such a simple syntax. Suddenly it’s a nightmare when you’re trying to make a layout though! Anyone reading thing knows all too well that CSS can be complicated and even counter-intuitive.

That leads to a lot of frustration.

When we’re new to coding, we’re given a task and we rush to start writing some code. My students do this all the time. It’s also why they make so many mistakes!

They know the HTML & CSS needed to make the layout, just like you do. By jumping right into the deep end though, it all goes to hell.

In this article, I will walk you through the steps I use to analyze a design and to then start coding it. I’m showing this to you because I know that it can help make coding more fun and enjoyable.

It’s also pretty simple. In the end, it all comes down to planning, and planning is an essential skill to have in this industry.

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

Write more effecient CSS with the `+` combinator

The + combinator is amazing but I always forget that it exists. I recently used it when making a few updates to this site, and thought it would be fun to explore why I love it so much.

How the + combinator works

I feel like the MDN describes it perfectly, saying “The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent”.

An example

On my own site, I have the following markup on my articles (such as this one).

<h1>Article title</h1>
<time class="date">March 3 2019</time>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus in ullam voluptatibus consequatur, vel hic?</p>
<p>Quia, ipsam! Dolores corporis ullam, ut natus consequatur, quaerat necessitatibus officiis, incidunt rerum ex ea!</p>
<p>Velit amet blanditiis tempora, incidunt, sint dolor architecto at et similique, ex nulla hic fugiat.</p>

I don’t have classes on any of my paragraphs because I write everything with markup. I could configure things to add something like a .intro to the first paragraph, but there is no need.

I could use something like p:nth-of-type(1) but that would have a lot of potential to break things throughout the rest of a site. In my case, it would affect all my pages, so I’d have to add another selector to ensure I’m on an article.

A great solution is using the + combinator in my CSS selectors:

Read More

CSS remedy - rethinking the approach to CSS resets

Jen Simmons with Mozilla Developer Outreach is spearheading a new approach to the idea behind CSS resets like Eric Myer’s Reset, Normalize, and Bootstrap’s Reboot.

They are calling it CSS Remedy, and instead of trying to get things to behave the same (as it says in their documentation, browsers are much better at that these days), it’s about rethinking how the default styles might look if CSS were created today. This is such a great idea and initiative!

CSS Remedy already has some really good stuff in there right now, so I suggest you go and check it out, but I’ve grabbed a few things out to show you below that will give you a bit of a taste of what they are after.

* { box-sizing: border-box; } /* Switch to border-box for box-sizing. */

body {
  margin: 0; /* Remove the tiny space around the edge of the page */
}

img, video, canvas, audio, iframe, embed, object  { 
  display: block; /* Switch display mode to block, since that's what we usually want for images. */
  vertical-align: middle;  /* If you override, and make an image inline, it's likely you'll want middle vertical alignment. */
}

It’s still in it’s infancy and isn’t ready to be used in production as of yet (February 2019), but I’m really looking forward to where this goes. I’ll be following it closely!

Read More