[CSS Variables and Functions] var, calc(), min(), max(), clamp()

Hello.
With the end of support for IE 11, CSS features that we previously avoided out of consideration for IE can now be used without any problems. Personally, I'm very happy about this.

CSS evolution is incredibly fast, and recently, variables and functions have become available in CSS as well.
In this article, I would like to introduce five of them: "var, calc(), min(), max(), and clamp()".

var (CSS Custom Properties)

These are also referred to as CSS variables or cascading variables.
Just like in PHP or JavaScript, you can define variables using only CSS.

/* Variable declaration */
/* Defining in :root makes it available everywhere (global variable) */
:root {
  --wrapperWidth: 1024px;
}

/* Usage */
.wrapper {
  max-width: var(--wrapperWidth);
}

Personally, I feel that CSS variables work very well with responsive design, and I use them as shown below.

The following is an example of "creating a square box and centering the text inside both horizontally and vertically."

/* Combination of media queries and variables */
:root {
  --boxSize: 44px;
}
@media (min-width: 768px){
  :root {
    --boxSize: 64px;
  }
}
@media (min-width: 1024px){
    :root {
      --boxSize: 84px;
    }
}

/* Using the variable */
.box {
  width: var(--boxSize);
  height: var(--boxSize);
  line-height: var(--boxSize);
  text-align:center;
}

The key point is changing the variable's value based on the window size using media queries.
When you want to change the size, you only need to modify the variable's value, which keeps the scope of changes minimal.

calc() function

The calc() function has been available for quite some time, so many of you might already be familiar with it.
You can specify the width of a div and other properties by calculating them, such as 100% / 3.

index.html

<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>

style.css

.calc {
　width: 900px;
}
.calc > div {
　width: calc(100% / 3); /* 900px / 3 = 300px */
}

Combining calc() and var()

This is a combination of calc and var that I personally use often when arranging boxes horizontally with flexbox.
It's like making the margin a variable and building the CSS around that axis.

index.html

<div class="calc">
　<div>BOX A</div>
　<div>BOX B</div>
　<div>BOX C</div>
</div>

style.css

.calc {
　--margin: 50px;
　width: 1000px;
}
.calc > div {
　/*
　　Calculation formula when --margin is 50px: (1000px - 100px) / 3
　　Calculation formula when --margin is 100px: (1000px - 200px) / 3
　　If you define the calculation formula, you only need to change the variable value.
 */
　width: calc((100% - (var(--margin)) * 2) / 3);
}
.calc > div + div {
　margin-left: var(--margin);
}

/* Change the variable value with a media query */
@media (min-width: 1024px){
　.calc {
　　--margin: 100px;
　}
}

Doing it this way makes it feel quite like programming, doesn't it?

min() function

You can now easily write in a single line the combination of width: 100% and max-width: 500px that was previously used to define the maximum width.

index.html

<div class="min">
　<p>width: min(100%, 500px)</p>
　<p>If "100%" is smaller than "500px", "100%" is applied.</p>
　<p>If "100%" is larger than "500px", "500px" is applied.</p>
</div>

style.css

/* Traditional way */
.min {
　width: 100%;
　max-width: 500px;
}

/* New way */
.min {
　width: min(100%, 500px);
}

max() function

You can now easily write in a single line the combination of width: 65% and min-width: 200px that was previously used to define the minimum width.

index.html

<div class="max">
　<p>width: max(65%, 200px)</p>
　<p>If "65%" is larger than "200px", "65%" is applied.</p>
　<p>If "65%" is smaller than "200px", "200px" is applied.</p>
</div>

style.css

/* Traditional way */
.min {
　width: 70%;
　min-width: 320px;
}

/* New way */
.min {
　width: max(70%, 320px);
}

clamp() function

clamp is a bit complex, but it's a function that allows you to set three values: minimum, preferred, and maximum.
Let's use it with font-size for an easy-to-understand example.

index.html

<div class="clamp">
  <p class="clamp-text">font-size: clamp(12px, 7vw, 32px)</p>
  <p>In the above example, the preferred size is 7vw, the minimum size is 12px, and the maximum size is 32px.</p>
</div>

style.css

.clamp-text {
　font-size: clamp(12px, 7vw, 32px);
}

Previously, I used to switch font sizes finely with media queries during responsive design, but if you use clamp well, that might no longer be necessary.

I'm glad IE is gone

What do you think?
Don't you feel that development has become much easier now that we no longer need to support IE?
When I first used the combination of var and calc mentioned above, I was moved by how cool CSS can be written when IE is not a consideration.

I hope that IE rests in peace and never returns to this world again (Namu...).