{"id":3007,"date":"2023-11-17T14:45:27","date_gmt":"2023-11-17T13:45:27","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3007"},"modified":"2023-11-17T14:45:27","modified_gmt":"2023-11-17T13:45:27","slug":"how-to-use-the-css-calc-function-to-optmise-our-stylesheet","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/11\/17\/how-to-use-the-css-calc-function-to-optmise-our-stylesheet\/","title":{"rendered":"How to use the CSS calc() function to optmise our stylesheet"},"content":{"rendered":"\n

<\/p>\n\n\n\n

The calc() function in CSS allows us to perform mathematical calculations directly in CSS expressions. It can be used to calculate values ??for various CSS properties such as width, height, padding, etc.<\/p>\n\n\n\n

The syntax of the calc() function is relatively simple. We can use mathematical operations such as addition (+), subtraction (-), multiplication (*), and division (\/) to calculate values. Here is an example:<\/p>\n\n\n\n

div {\r\n  width: calc(100% - 20px);\r\n  height: calc(50vh + 10%);\r\n}\r\n<\/code><\/pre>\n\n\n\n
This example sets the width of the div element to 100% of the available width minus 20 pixels. The height is set at 50% of the available amount plus 10%.<\/p>\n\n\n\n
The calc() function also supports the use of units such as pixels (px), percent (%), viewport height (vh), and viewport width (vw). We can also combine different units in one calculation.<\/p>\n\n\n\n
\/\/ combine different units\nheight: calc(50vh - 20px);\n\n\/\/With different units and operations\nfont-size: calc(16px + 2vw);\n\n\/\/In combination with variables\r\n:root {\r\n  --margin: 10px;\r\n}\r\nmargin: calc(var(--margin) * 2);\r<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Fazit:<\/h4>\n\n\n\n
The calc() function is particularly useful if we want to create responsive designs or calculate dynamic values ??based on other CSS properties.<\/p>\n\n\n\n
but, It is important to note that the calc() function cannot be used in all CSS properties. For example, it cannot be used in properties such as content<\/strong>, display<\/strong> or position<\/strong>.<\/span><\/em><\/p>\n\n\n\n
Using the calc() function can greatly improve the flexibility and convenience of creating CSS layouts, as it allows complex calculations to be performed directly in CSS<\/p>\n\n\n\n
<\/p>\n\n\n\n
Let\u2019s see one last time the\u00a0calc()<\/kbd>\u00a0function in use.<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Title of the document<\/title>\r\n    <style>\r\n      .content-container {\r\n        display: flex;\r\n        padding: 40px 0;\r\n        background-color: #d7dade;\r\n      }\r\n      .right {\r\n        width: 100px;\r\n        background-color: #759ac9;\r\n      }\r\n      .left {\r\n        width: calc(100% - 100px);\r\n        background-color: #7cd47b;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"content-container\">\r\n      <div class=\"left\">Some text<\/div>\r\n      <div class=\"right\">Some text<\/div>\r\n    <\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n\n\n\n
Result:<\/h5>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In the example above, we set the\u00a0display<\/a>\u00a0property of the container to \u201cflex\u201d. For the right\u00a0<div><\/a>\u00a0element, we specified the width, while for the left <div>, we used the\u00a0calc()<\/kbd>\u00a0function to calculate its width.<\/p>\n","protected":false},"excerpt":{"rendered":"
The calc() function in CSS allows us to perform mathematical calculations directly in CSS expressions. It can be used to calculate values ??for various CSS properties such as width, height, padding, etc. The syntax of the calc() function is relatively simple. We can use mathematical operations such as addition (+), subtraction (-), multiplication (*), and […]<\/p>\n","protected":false},"author":1,"featured_media":3009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[89],"tags":[757,758,760,759],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3007"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3007"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3007\/revisions"}],"predecessor-version":[{"id":3010,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3007\/revisions\/3010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/3009"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}