{"id":181,"date":"2014-12-04T09:43:38","date_gmt":"2014-12-04T09:43:38","guid":{"rendered":"http:\/\/www.sircodex.com\/?p=181"},"modified":"2014-12-04T09:43:38","modified_gmt":"2014-12-04T09:43:38","slug":"css3-gems-the-calc-function","status":"publish","type":"post","link":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/","title":{"rendered":"CSS3 Gems: The calc() Function"},"content":{"rendered":"
There are many hidden gems in the modular CSS3 specifications. In this post we\u2019ll look at calc(); an incredibly useful property which may change the way you approach layout design.<\/p>\n

The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition\/animation times or sound frequencies. However, it allows you to mix measurement types \u2014 a powerful concept in CSS.<\/p>\n

Consider a website layout containing two floated elements. You want both elements to be an equal width separated by a 60px horizontal margin. Sounds easy? It\u2019s not a problem in fixed-width design; if the page width is 960px, both elements will be 450px.<\/p>\n

But what about fluid or responsive layouts? It\u2019s not possible to determine the page width so most developers would set each element to, say, 45%. The 10% margin will only be 60px if the page happens to be 600px; a wider or narrower browser window will enlarge or contract the margin accordingly.<\/p>\n

Fortunately, the new calc() function allows us to calculate widths. In this case, we want both elements to be 50% minus 30px, e.g.<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n<\/td>\n
\n
\n
#element<\/code>1<\/code>, #element<\/code>2<\/code> { <\/code><\/div>\n
\u00a0\u00a0<\/code>float<\/code>: <\/code>left<\/code>;<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: calc(<\/code>50%<\/code> - <\/code>30px<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
#element<\/code>2<\/code> { <\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: <\/code>60px<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Perhaps you want a margin which is relative to the font size \u2014 such as 4em? No problem:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n<\/td>\n
\n
\n
#element<\/code>1<\/code>, #element<\/code>2<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: calc(<\/code>50%<\/code> - <\/code>2em<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Or maybe you want a 2px border around both elements:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
#element<\/code>1<\/code>, #element<\/code>2<\/code> { <\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: calc(<\/code>50%<\/code> - <\/code>2em<\/code> - <\/code>4px<\/code>);<\/code><\/div>\n
\u00a0\u00a0<\/code>border<\/code>: <\/code>2px<\/code> solid<\/code> #000<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

I recommend you keep calculations simple, but it\u2019s possible to use complex formulas, e.g.<\/p>\n

 #element1, #element2 { width: calc((50% + 2em)\/2 + 14px); } <\/code><\/pre>\n
Browser Support<\/h2>\n
The calc() function is a W3C recommendation so guess which browser offers native support?<\/p>\n
You\u2019re wrong. At the time of writing, it\u2019s just Internet Explorer 9. Firefox also supports it with a prefix; -moz-calc(). It\u2019s not been implemented in webkit (Chrome and Safari) or Opera yet but, it\u2019s so useful, I suspect we won\u2019t need to wait long.<\/p>\n
Fortunately, you can use progressive enhancement in your stylesheets:<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
#element<\/code>1<\/code>, #element<\/code>2<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: <\/code>45%<\/code>; <\/code>\/* all browsers *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: -moz-calc(<\/code>50%<\/code> - <\/code>30px<\/code>); <\/code>\/* Firefox 4+ *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: calc(<\/code>50%<\/code> - <\/code>30px<\/code>); <\/code>\/* IE9+ and future browsers *\/<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
Remember that you\u2019d also need to adjust margins accordingly, e.g.<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
#element<\/code>2<\/code> {<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: <\/code>10%<\/code>; <\/code>\/* all browsers *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: -moz-calc(<\/code>60px<\/code>); <\/code>\/* Firefox 4+ *\/<\/code><\/div>\n
\u00a0\u00a0<\/code>margin-left<\/code>: calc(<\/code>60px<\/code>); <\/code>\/* IE9+ and future browsers *\/<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
CSS3 min() and max()<\/h2>\n
If you like calc(), you\u2019ll love the min() and max() functions. They accept two or more comma-separated values and return the minimum or maximum accordingly, e.g.<\/p>\n
\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n<\/td>\n
\n
\n
#myelement {<\/code><\/div>\n
\u00a0\u00a0<\/code>width<\/code>: max(<\/code>300px<\/code>, <\/code>30%<\/code>, <\/code>30em<\/code>);<\/code><\/div>\n
\u00a0\u00a0<\/code>font-size<\/code>: min(<\/code>10px<\/code>, <\/code>0.6em<\/code>);<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
The functions will be especially useful when using relative font sizes to ensure text does not become too large or small.<\/p>\n
Unfortunately, min() and max() are not currently supported in any of the latest browsers. Let\u2019s hope they appear soon.<\/p>\n
Source Link: http:\/\/www.sitepoint.com\/css3-calc-function\/<\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
There are many hidden gems in the modular CSS3 specifications. In this post we\u2019ll look at calc(); an incredibly useful property which may change the way you approach layout design. The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition\/animation times or sound frequencies. However, it allows you to mix measurement types […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-181","post","type-post","status-publish","format-standard","hentry","category-css3"],"aioseo_notices":[],"yoast_head":"\nCSS3 Gems: The calc() Function - Sir Codex<\/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:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Gems: The calc() Function - Sir Codex\" \/>\n<meta property=\"og:description\" content=\"There are many hidden gems in the modular CSS3 specifications. In this post we\u2019ll look at calc(); an incredibly useful property which may change the way you approach layout design. The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition\/animation times or sound frequencies. However, it allows you to mix measurement types […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\" \/>\n<meta property=\"og:site_name\" content=\"Sir Codex\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sircodex\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-04T09:43:38+00:00\" \/>\n<meta name=\"author\" content=\"Sir Codex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sir Codex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\"},\"author\":{\"name\":\"Sir Codex\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185\"},\"headline\":\"CSS3 Gems: The calc() Function\",\"datePublished\":\"2014-12-04T09:43:38+00:00\",\"dateModified\":\"2014-12-04T09:43:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\"},\"wordCount\":395,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.sircodex.com\/#organization\"},\"articleSection\":[\"CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\",\"url\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\",\"name\":\"CSS3 Gems: The calc() Function - Sir Codex\",\"isPartOf\":{\"@id\":\"https:\/\/www.sircodex.com\/#website\"},\"datePublished\":\"2014-12-04T09:43:38+00:00\",\"dateModified\":\"2014-12-04T09:43:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sircodex.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Gems: The calc() Function\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sircodex.com\/#website\",\"url\":\"https:\/\/www.sircodex.com\/\",\"name\":\"Sir Codex\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.sircodex.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sircodex.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sircodex.com\/#organization\",\"name\":\"Sir Codex\",\"url\":\"https:\/\/www.sircodex.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png\",\"contentUrl\":\"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png\",\"width\":300,\"height\":100,\"caption\":\"Sir Codex\"},\"image\":{\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sircodex\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185\",\"name\":\"Sir Codex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sircodex.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g\",\"caption\":\"Sir Codex\"},\"sameAs\":[\"https:\/\/www.sircodex.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Gems: The calc() Function - Sir Codex","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:\/\/www.sircodex.com\/css3-gems-the-calc-function\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 Gems: The calc() Function - Sir Codex","og_description":"There are many hidden gems in the modular CSS3 specifications. In this post we\u2019ll look at calc(); an incredibly useful property which may change the way you approach layout design. The CSS3 calc() function is primarily used to calculate lengths, numbers, angles, transition\/animation times or sound frequencies. However, it allows you to mix measurement types […]","og_url":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/","og_site_name":"Sir Codex","article_publisher":"https:\/\/www.facebook.com\/sircodex","article_published_time":"2014-12-04T09:43:38+00:00","author":"Sir Codex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sir Codex","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#article","isPartOf":{"@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/"},"author":{"name":"Sir Codex","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185"},"headline":"CSS3 Gems: The calc() Function","datePublished":"2014-12-04T09:43:38+00:00","dateModified":"2014-12-04T09:43:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/"},"wordCount":395,"commentCount":0,"publisher":{"@id":"https:\/\/www.sircodex.com\/#organization"},"articleSection":["CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/","url":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/","name":"CSS3 Gems: The calc() Function - Sir Codex","isPartOf":{"@id":"https:\/\/www.sircodex.com\/#website"},"datePublished":"2014-12-04T09:43:38+00:00","dateModified":"2014-12-04T09:43:38+00:00","breadcrumb":{"@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sircodex.com\/css3-gems-the-calc-function\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sircodex.com\/"},{"@type":"ListItem","position":2,"name":"CSS3 Gems: The calc() Function"}]},{"@type":"WebSite","@id":"https:\/\/www.sircodex.com\/#website","url":"https:\/\/www.sircodex.com\/","name":"Sir Codex","description":"","publisher":{"@id":"https:\/\/www.sircodex.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sircodex.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sircodex.com\/#organization","name":"Sir Codex","url":"https:\/\/www.sircodex.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png","contentUrl":"https:\/\/www.sircodex.com\/wp-content\/uploads\/2014\/12\/sircodex-logo.png","width":300,"height":100,"caption":"Sir Codex"},"image":{"@id":"https:\/\/www.sircodex.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sircodex"]},{"@type":"Person","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/550a1adc056d25be02d44628e082a185","name":"Sir Codex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sircodex.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5a02c801748dce6377c95d052991d753?s=80&d=mm&r=g","caption":"Sir Codex"},"sameAs":["https:\/\/www.sircodex.com"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/181"}],"collection":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":1,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/181\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/posts\/181\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/media?parent=181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/categories?post=181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sircodex.com\/wp-json\/wp\/v2\/tags?post=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}