{"id":14821,"date":"2014-06-11T06:00:37","date_gmt":"2014-06-11T13:00:37","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=14821"},"modified":"2024-03-28T05:05:02","modified_gmt":"2024-03-28T12:05:02","slug":"counters-and-calc-two-little-known-css-features-explained","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained","title":{"rendered":"Counters and Calc(): Two Little-Known CSS Features Explained"},"content":{"rendered":"

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.
\nFrom 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.
\nIn 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!<\/p>\n

<\/span>The calc() Function<\/span><\/h2>\n

\nThis 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!<\/strong> And this is native functionality, not a preprocessor. To date, four expressions are supported: addition (+), subtraction (-), division (\/) and multiplication (*).
\nConsider 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.\n<\/p>\n

wrapper .col {width: calc(100% \/ 4)} <\/code><\/pre>\n
\nThat’s it! With that, we can create four equally-sized containers that will resize and maintain their proportions.\n<\/p>\n
See the Pen CSS Calc Feature<\/a> by Josh Johnson (@secondfret<\/a>) on CodePen<\/a>.<\/p>\n
<\/span>Mixing It Up<\/span><\/h3>\n
\nOne 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.\n<\/p>\n
#widthExample {width: calc(75% - 30px)}<\/code><\/pre>\n
\nThis 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():\n<\/p>\n
#widthExample {width: calc(100% \/ 3 - 2px)}<\/code><\/pre>\n
\nHow cool is that? No complicated layout framework required.\n<\/p>\n
<\/span>But Can I Use It?<\/span><\/h3>\n
\nDynamic 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()<\/a>.
\n\"can
\nAs 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<\/a> to help old browsers.\n<\/p>\n
<\/span>Counters<\/span><\/h2>\n
\nNow 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:\n<\/p>\n
\nbody {\n   counter-reset: part;\n}\nh1:before {\n   counter-increment: part;\n   content: counter(part) \": \";\n}<\/code><\/pre>\n
\nThe 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.
\nWhen loaded in the browser, the following is displayed:\n<\/p>\n
See the Pen Counter Example<\/a> by Josh Johnson (@secondfret<\/a>) on CodePen<\/a>.<\/p>\n
\nAs 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!\n<\/p>\n
<\/span>Browser Support<\/span><\/h3>\n
\nCounters are supported in all major browsers. More information about the counters can be found at the W3 site’s web page for counters<\/a>.\n<\/p>\n
<\/span>Not Just For Simple Styles Anymore<\/span><\/h2>\n
\nLove 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?).
\nWhat 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?<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[305,307,826],"topics":[],"class_list":["post-14821","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-web-design","tag-css","tag-development"],"acf":[],"yoast_head":"\nCounters and Calc(): Two Little-Known CSS Features Explained - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Counters and Calc(): Two Little-Known CSS Features Explained\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-11T13:00:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-28T12:05:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/06\/28014616\/CalcCounters-2.jpg.webp\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained\",\"name\":\"Counters and Calc(): Two Little-Known CSS Features Explained - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/06\\\/28014616\\\/CalcCounters-2.jpg.webp\",\"datePublished\":\"2014-06-11T13:00:37+00:00\",\"dateModified\":\"2024-03-28T12:05:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/06\\\/28014616\\\/CalcCounters-2.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2014\\\/06\\\/28014616\\\/CalcCounters-2.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/counters-and-calc-two-little-known-css-features-explained#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Counters and Calc(): Two Little-Known CSS Features Explained\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Counters and Calc(): Two Little-Known CSS Features Explained - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained","og_locale":"en_US","og_type":"article","og_title":"Counters and Calc(): Two Little-Known CSS Features Explained","og_description":"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","og_url":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-06-11T13:00:37+00:00","article_modified_time":"2024-03-28T12:05:02+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/06\/28014616\/CalcCounters-2.jpg.webp","type":"","width":"","height":""}],"author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained","url":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained","name":"Counters and Calc(): Two Little-Known CSS Features Explained - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/06\/28014616\/CalcCounters-2.jpg.webp","datePublished":"2014-06-11T13:00:37+00:00","dateModified":"2024-03-28T12:05:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/06\/28014616\/CalcCounters-2.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2014\/06\/28014616\/CalcCounters-2.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/counters-and-calc-two-little-known-css-features-explained#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Counters and Calc(): Two Little-Known CSS Features Explained"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/14821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=14821"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/14821\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=14821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=14821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=14821"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=14821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}