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

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

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

What the heck is background-attachment local

I recently came across background-attachment: local because of this super amazing trick over on Smashing Magazine that adds a gradient on the sides of a table… only if the table is overflowing. It’s really neat, but while I knew of the scroll and fixed values for background-attachment, I’d never heard of local before.

Read More

Native HTML form validation

HTML can do a boatload of form validation all on it’s own. You probably know that you can put the required attribute and the form won’t submit if that’s missing.

On top of required you can also use type= to define the type, which can help with validation for things like email addresses (<input type="email">).

But what if you want someone’s first name, and you don’t want them to put in numbers or strange symbols? Or what if you want a password that has a minimum length, a mix of upper- and lower-case letters, and a symbol?

You can do all of that with the pattern attribute!

Read More