CSS Comparison Functions

Ahmad Shadeed at Hover '21

Transcript
Accessible Slides

So in this session, I will talk about CSS Comparison Functions.

Let me first give you an introduction about them and about the motivation that actually led us to using them.

So first, let's suppose that we have a component that needs...

like to have a different font size on small and larger screens.

So typically, we will do this, like using CSS media - CSS Media Queries.

So, as you see in this example, I'm changing the font size that's on the screen, or the viewport width.

But with this CSS Comparison functions, things are actually much easier.

This is the same, like this is the same example, but note that we have the "clamp()" function, and we are setting a minimum, and a preferred, and a maximum value without the need to write a CSS media query.

So what about the browser support? It's very good, and the CSS Comparison functions are supported in all major browsers right now, so that's very good.

So let's say: if I want to define the CSS Comparison functions, it's all about comparing multiple values and letting the browser like pick one of them passed, like on a circuit and passed on a certain thing to happen.

So the first one is the "min()" function.

So the min function actually takes two or more values and it will pick the smallest one of them.

So in this example, we have, we have an element with like...it has the min and then 50% and then 500 pixels.

So the browser will have to choose one of these values.

So, how would that work? Okay, so let me show you an interactive demo.

So as you see here, we have the viewport width, and this is the element width.

So when I resize this, the viewport width is less than 1000 pixels, the 50% value will actually be used.

So it's like, if the computed value of 50% is less than this one, then it will be used.

If not, then the second value - which is the 500 pixels - will be used instead.

And then, we also have the "max()" function.

So the max function actually is about picking the maximum of the largest value of a set of or a pair of values.

So this is actually the same example, but let's, see an interactive demo of this.

So, here is the viewport width, as you see, and now the value that is being actually used is the 50%, because it can be used for something larger than 500 pixels.

So I think the idea or let's say the concept is straightforward in such a case.

So whatever we have here, the 50% will actually be the half point.

And then we have the "clamp()" function.

And this is my favorite one, to be honest.

So with clamp, we can actually define a minimum, and a maximum, and a preferred one.

So in this example, we have an element with a minimum width of 200 pixels and a maximum width of 1000 pixels.

So what would happen here is that it would not go below 200, and it won't go above 1000 pixels, and also we will get an in-between value.

So the 50% is actually something between these two.

So, let me show you an interactive demo of this.

So as you see in this example, that width - it has the those for the element.

So when I resize this, the minimum one, our minimum width is 200 pixels, as you see.

So let's get into how the clamp function is calculated.

So, the first thing is that the clamp function is actually a max function within two values.

The first one is the minimum and the second one is actually the min function with a preferred and with a maximum one.

So in this example, the clamp will assume that the viewport width is 1,150 pixels.

So with half of it, it's 575 pixels, and then let's say that the min function will actually be the first one, so it will be like this.

And then this will resolve to the largest one of them.

So that's actually how the clamp function works.

And also there is one nice thing about CSS Comparison functions, which is the ability to use math calculations.

So in this example, notice that we have 10, then we have 1vw plus 1vh, and all of these calculations are built in, so we don't have to use CSS calc, which is very awesome.

When I think about CSS, when, like, when I think about CSS Comparison functions, It's kind of like - how we design now is all about setting defined values.

So we have maybe an extra small, small, medium, and large and maybe an extra large also.

But the future is actually about having a minimum, maximum, and a preferred value.

That's actually how I see the future, which is very exciting, to be honest.

So let's now get into use cases or for CSS Comparison functions.

So when I want to get into use cases the first one - and maybe the most common one - is using it for font size.

So in this example, we have a heading with a font size, and I'm using the clamp function.

So notice that the preferred value is actually a combination of a relative unit and a viewport unit.

So why it does that is because this is actually will we make it accessible to users who actually browse - that it will be be both zoomed also.

Let me show you this in action.

So here is an example.

We have the font size.

Okay.

Everything's good.

The font size at this case is actually static because the maximum size is 50 pixels, but on a resize, notice what will happen.

The font size is actually decreasing.

And it will read the 16 pixels.

And that's also, that's the role of using CSS comparison functions.

I really like this and I think that this thing is very, very useful.

Next, we also have a very important note, which is to avoid using the min function for font size because it's bad for accessibility.

So in this example, using the min as a value for the font size can actually work when we are browsing in the landscape mode, but it can actually be very bad if we were viewing the webpage from a mobile device.

So another use-case that I really like for CSS comparison functions is using it to set the gradient size.

So in this example, I'm using the max function, Notice that I have a percentage value and I also have a viewport unit.

So let's see this in action.

Here is the example we have - notice that the size of the gradient is actually at, to this point over there, but when I resize this it's kind of taking 50% of the height.

But when it's larger, it's taking 70 or 60%, which is awesome.

Okay, so, another use case is actually using, using it with vertical padding.

So in this example, I'm using the clamp function, so I have a minimum, a maximum, and a preferred value and the padding is - actually will change based on the viewport width or height, because I'm using the vmax in such a case.

So let me show you an interactive demo of this.

Here we go.

So, notice that the padding is actually shrinking and also the font size, which is very useful.

And then we can also CSS comparison functions for Grid Gap.

So in this example, the grid gap like a clamp function.

So this clamp function actually has a minimum of 1rem and a maximum of 24 pixels.

So let me show you this in action.

There we go, as you see, the space between the those cards is actually getting smaller or it's actually getting larger when the viewport size is larger.

So this is very useful and we also have the minimum size so that's what I really like about CSS conversion functions is actually that we kinda provide the browser with a set of instructions, I would say, and it will pick one of them based on the circumstance . We can also use the min or the maximum or the clamp or whatever for the vertical spacing.

So in this example, I'm using the min function as a value for the vertical spacing between design and between design elements.

So as you see, we like having the spacing between these two items, so it's actually getting smaller for the smaller devices, and so on for the other ones.

And the fallback - we kind of have two ways of doing this.

So we can either by doing it with the good old way of setting the padding, like maybe with a media query.

And so, and we can enhance with the clamp function, or we can use a much better thing, which is using CSS "@support" rule.

So in this example, we have the clamp function.

So we need to test for it, and if it works, then we will actually use it for the hero element or for whatever.

And that's all! I hope you enjoyed this talk and learned at least one something or something new.

Thank you.

Thank you very, very much for listening to my talk and see you later.

Bye bye!

CSS Comparison Functions

Ahmad Shadeed

@shadeed9 • www.ishadeed.com

The motivation for CSS comparison functions

It’s all about comparing multiple values.

Image comparing how the same element appears differently on a small screen vs a large screen. In both examples, sample text reads

UX Design
Make it easier to search and filter

The text in the large screen version is in larger font size and sits within a box that is longer in width and taller in height than the small screen version

How we used to do this

Changing a CSS property's value based on the viewport width

@media (min-width: 600px) {
    .title {
        font-size: 2rem;
    }
}

CSS Comparison Functions to the rescue!

By using CSS Comparison functions, we can reduce writing

media query-less CSS

.title {
  font-size: clamp(1rem, (2vw + 1rem), 2rem)
};

.title {
    font-size: 1rem;
}

@media (min-width: 600px) {
    .title {
        font-size: 2rem;
    }
}

What about the browser support?

Browser Support

The browser support is quite good.

Screenshot of support metrics for the CSS math functions of min(), max() and clamp() measured across a range of browsers . Ex: IE, Edge, Firefox, Safari, Opera Mobile, Chrome for Android, etc. Scores are quite high across the board.

https://caniuse.com/?search=min()

What are CSS Comparison Functions?

It’s all about comparing multiple values and representing one of them based on the used function.

The min() Function

The min() function contains one or more comma-separated calculations and represents the smallest value of them.

Consider the following example.

.element {
  width: min(50%, 500px);
};

The browser will compare between the 50% and 500px. The one that is smaller will be used.

Interactive CodePen Demo showing how screen elements respond during resizing, according to values assigned using the min()function

The max() Function

The max() function contains one or more comma-separated calculations and represents the largest value of them.

Consider the following example.

.element {
  width: max(50%, 500px);
};

The browser will compare between the 50% and 500px. The one that is larger will be used.

Interactive CodePen demo showing how screen elements respond during resizing, according to values assigned using the max()function

The clamp() Function

What clamp() do is that it clamps a value between two de ned values, minimum and maximum. It takes three parameters (min value, preferred value, max value).

.element {
    width: clamp(200px, 50%, 1000px);
}

What’s happening above with the clamp values?

✦ The width will never go below 200px
✦ The preferred value is 50% and will only work if the viewport width is greater than 200px and less than 1000px.
✦ The width won’t go above 1000px

Interactive CodePen demo showing how screen elements respond during resizing, according to values assigned using the clamp()function

How clamp() Is Calculated?

Assuming that the viewport width is 1150px.


.element {
    width: clamp(200px, 50%, 1000px);
   /* Assuming the viewport width is 1150px */
    width: max(200px, min(575px, 1000px));
}

How clamp() Is Calculated?

Assuming that the viewport width is 1150px.


.element {
    width: clamp(200px, 50%, 1000px);
    /* Assuming the viewport width is 1150px */
    width: max(200px, min(575px, 1000px));
    /* Resolves to */
    width: max(200px, 575px);
}

How clamp() Is Calculated?

Assuming that the viewport width is 1150px.


.element {
    width: clamp(200px, 50%, 1000px);
    /* Assuming the viewport width is 1150px */
    width: max(200px, min(575px, 1000px));
    /* Resolves to */
    width: max(200px, 575px);
    /* Resolves to */
    width: 575px;
}

Math Expressions

We can use math expressions without calc().


.title {
    /* Force the font-size to stay between 12px and 100px */
    font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

Now vs The Future

Two pictographs comparing "how we design now" with "the future."
On the now pictograph, a one dimensional line connects plot points representing the following sizes:: X-small, small, medium, and large. The points increase in size correlating with their respective descriptor

On the future pictograph, a two-dimensional line bar expands from the start point labelled 'minimum' to gradually increase in size as it encompasses the area of three plotted points representing the following values: minimum, recommended, and maximum

Use Cases for CSS Comparison Functions

Headings Font Size

Image of a blog post discussing CSS comparison functions. A highlighted code snippet demonstrates how the min, max, and clamp functions relate to the font size of the text used in the blog's header

Interactive CodePen demo showing how a text header element reading "CSS is awesome"responds to the clamp function, staying static upon resizing within its preferred values, and then decreasing as the viewport shrinks, but does not go smaller than 16px, as per its clamp values.

Use Cases for CSS Comparison Functions

Don’t use min() for font-size. It’s risky for accessibility.

Image of two devices with different screen sizes. The first is similar to a smartphone screen and has a viewport width of 375px, the second is similar to a desktop screen and has a much larger viewport width of 800px. The text on the smaller screen is very small and difficult to read

Use Cases for CSS Comparison Functions

Gradient Size

.element {
    background: linear-gradient(0deg, #000, transparent max(20%, 20vw));
}

Interactive CodePen demo of how this code affects gradient size.As the image is zoomed in closer, the height of the gradient responds

Use Cases for CSS Comparison Functions

Vertical Padding

.hero {
 padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Image showing how vertical padding interacts with the clamp function parameters set on the earlier sample blog post header

Interactive CodePen demo showing how the padding shrinks as it is resized

Use Cases for CSS Comparison Functions

Dynamic Grid Gap

Image of an grid gap interface with the gap set to

Interactive CodePen demo of how the gap spacing shrinks and expands on resizing

Use Cases for CSS Comparison Functions

Dynamic margin

h1,
h2,
h3,
h4,
h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

Use Cases for CSS Comparison Functions

Dynamic margin

Image comparing a tablet and mobile landscape view of a dummy page, highlighting the margins between elements and how they are smaller on mobile devices

Fallback

We can add fallback manually..

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Fallback

…or by using CSS @supports rule


.hero {
    /* Default, for non-supporting browsers */
    padding: 4rem 1rem;
}


@supports (width: clamp(10px, 5vw, 50px)) {
    /* An enhancement for supporting browsers */
    .hero {
        padding: clamp(2rem, 10vmax, 10rem) 1rem;
    }
}