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

List attributes you didn't know existed

I think most people know that you can change the type of an <ol>, so you can get something like this:

  1. List Item
  2. List Item
  3. List Item

But, did you know you can also easily reverse the order of a list so it counts down instead of up? Or, what about starting it at a different number (or letter)?

Read More

The ::first-letter pseudo-element

I can’t figure out why I don’t see more use of ::first-letter other than people not knowing about it. Things like drop caps and initial letters are super common print, and have been forever. There are a few places I see it pop up on the web, but it’s far and few between.

And while there is the possibility of an initial-letter property (it’s partially supported by Safari at the time of writing), we can pull off the effect we need with the ::first-letter pseudo-element really easily.

Read More

The Do's and Don'ts of letter-spacing

Another week, another article about something design related! If you missed the past few, I strongly suggest checking them out, as these little things can make a big impact on your overall design. And, have you noticed that they’re all typography related?

People don’t give typography enough credit! I’ll save the rest of that rant for another day though. For the time being, let’s look into what you should, and shouldn’t, use letter-spacing for on the web.

Read More

Using a typographic scale

Continuing my look at design tips that can help out front-end devs a little, one issue that I see cropping up often is a lack of contrast with font sizes. And by contrast, often I’ll see some color differences or something simple, but almost all the font sizes are the same, or there is no flow or rythm to the design. Having a typographic scale can help with this.

There are a lot of very in-depth and, sometimes overly complicated examinations of using a modular scale on the web. It can find it’s way into line-height, and even your padding and margins. It can reach into all aspects of your design, and for those who aren’t already knowledeable on the subject, it can be overwhelming. If you want to get deeper into the design world, it’s probably worth exploring. But if you’re a dev who just wants to make their site look a little better, you don’t have to go crazy.

Here, I’m going to look at the simple basics of it by looking at:

Read More

You need to fix your `line-height`

I’ve been doing some diggin into my audience lately, and the most common issue is one relating to design. So because of that, I’m going to start talking a little bit more about design stuff here, but from the point of view of a developer, since that’s what most of you are. Little tips and tricks that can help you improve your designs, whether it’s small tweaks to work you’re doing, or just for your own personal projects.

In this article, we’re looking at line-height. It’s one of the problems that I see plague pretty much every site I see that didn’t have the direct input of a designer, and it has a massive impact on the aesthtic, and more importantly, the readability of a site.

Sometimes it’s a question of someone just not even bothering with it, but more often, it’s a bad use of it once we’re outside the ‘normal’ or body text. So to help you out, we’ll be looking at:

Read More