Categories / Tutorials

Counters and Calc(): Two Little-Known CSS Features Explained

Creative Market March 31, 2021 · 4 min read

These days, CSS goes well beyond the rudimentary ability to quickly switch out fonts, layouts, spacing and colors, there are a plethora of features that enable developers to write more efficient and dynamic in-browser code that can augment and enhance styling capabilities.
From building complex animations, gradients, and transforms, to creating sophisticated interfaces with flexible box layouts, these advanced CSS features may escape common usage scenarios, but can nonetheless come in handy when the situation arises.
In this article, we’ll learn how to use calc() and counters, two little-known CSS features that are actually quite useful. Using these features, one can implement dynamic positioning and sizing derived from mixed unit calculations, or functionality based on automatic number generation. Pretty snappy for plain old CSS!

The calc() Function

This function allows for the use of mathematical expressions from within CSS, which is especially useful for determining things like width, height, or font-sizes. Yep, you read that right. Math… in CSS! And this is native functionality, not a preprocessor. To date, four expressions are supported: addition (+), subtraction (-), division (/) and multiplication (*).
Consider the following use case: four containers need to be created inside a wrapper, each taking up 25% of their parent’s total width. Using calc(), we can dynamically allocate the correct space to each–a capability especially useful for designing responsive web pages.

wrapper .col {width: calc(100% / 4)}

That’s it! With that, we can create four equally-sized containers that will resize and maintain their proportions.

See the Pen CSS Calc Feature by Josh Johnson (@secondfret) on CodePen.

Mixing It Up

One of the most powerful aspects of the calc() function is the ability to mix units. For example, in the following CSS code, the container is 75% of the available space minus 30 pixels.

#widthExample {width: calc(75% - 30px)}

This easily solves the problem of not being able to account for pixel-based borders when you’re using percentage-based widths. Say you want each container to take up a third of the parent width, but you have a 1px border on each container. This is simple with calc():

#widthExample {width: calc(100% / 3 - 2px)}

How cool is that? No complicated layout framework required.

But Can I Use It?

Dynamic CSS features are fun, but we all know what’s coming, browser support is going to dampen your good day. Let’s have a look at the CanIUse chart for calc().
can i use
As you can see, it’s not a terrible situation, but it could be a little better. If you’re going to use this in production, you might consider a polyfill to help old browsers.

Counters

Now that you’re a calc() expert, let’s look at our second nifty feature. Counters allow for the automatic incrementing of values based on how many times they’ve been used. Consider the following CSS and HTML code:


body {
   counter-reset: part;
}
h1:before {
   counter-increment: part;
   content: counter(part) ": ";
}

The first section of the CSS reinitializes the variable named “part”, resetting its value to 0, the second section increments the value of the “part” variable, and the third section displays the current counter value followed by a colon.
When loaded in the browser, the following is displayed:

See the Pen Counter Example by Josh Johnson (@secondfret) on CodePen.

As you can see, using counters, we don’t have to manually insert numbers into our code and clutter up our markup. CSS does all the heavy lifting for us!

Browser Support

Counters are supported in all major browsers. More information about the counters can be found at the W3 site’s web page for counters.

Not Just For Simple Styles Anymore

Love it or hate it, CSS is getting more and more dynamic as time goes on. The two features explained above have been around for a while, but newer, even more disruptive features are popping up all the time (CSS variables anyone?).
What do you think about the direction CSS is headed? Do you think features like this should solely be in the realm of JavaScript or are you happy to see CSS becoming more powerful? What other interesting but rarely used CSS features have you found?