Use circumstances for CSS comparability features

CSS comparability features have been supported since nearly April 2020, and I wrote an introductory article about them again then. I like to make use of all of them, however my favourite considered one of them is clamp() and it’s the highest used one for me.

On this article, I’ll discover a number of use-cases for comparability features, and clarify every one intimately. Largely, the use circumstances can be about conditions aside from utilizing them for fluid sizing, as that is the preferred use case and I’ll preserve that to the final.

In the event you don’t find out about comparability features, that’s completely positive. I like to recommend studying this introduction article first after which coming again right here for the use circumstances.

Use circumstances for clamp(), max(), and min() CSS features

Fluid sizing and positioning

On this instance, now we have a piece with a cell phone, together with two photos which can be positioned on prime. Initially, it is going to appear like the next determine:

When the width of the container turns into smaller, we need to shrink the dimensions of the photographs to accommodate the accessible house. We will do this by utilizing a proportion worth for the width or the peak (e.g: width: 20%) however this doesn’t give us a lot management.

We would like to have the ability to have a fluid dimension, that respects a minimal and a most worth on the identical time. That is the place clamp come to the rescue!

.section-image {
  width: clamp(70px, 80px + 15%, 180px);
}

By setting a minimal, most popular, and most width, the picture will shrink or develop as per its container width. This is because of utilizing a mixture of a set worth and proportion 80px + 15%.

Examine the video under and see how the thumbnails shrink on resize.

Demo

Ornamental aspect

Have you ever ever wanted so as to add an ornamental aspect to a piece? More often than not, the aspect must be responsive and may should be positioned otherwise primarily based on the viewport dimension.

Take into account the next instance.

There are two ornamental components on each side. On cellular, they’ll occupy an excessive amount of house and so we need to present solely slightly of every one.

To repair that, we will use media queries to offset them on cellular.

.decorative--1 {
  left: 0;
}

.decorative--2 {
  proper: 0;
}

@media (max-width: 600px) {
  .decorative--1 {
    left: -8rem;
  }

  .decorative--2 {
    proper: -8rem;
  }
}

Whereas this works, we will use a media query-less answer with CSS clamp() operate.

@media (max-width: 600px) {
  .decorative--1 {
    left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {
    proper: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }
}

Let me dissect the above CSS to make it simpler for you:

• What we would like is to set the minimal left offset as -8rem, and the utmost worth as 0rem.
• With that, we depart it to CSS clamp() to resolve on the most popular worth and respect the minimal and most values we set.

I used this calculator to get the above clamp() numbers.

Demo

Fluid hero peak

Associated to the earlier instance, a hero part peak might be totally different primarily based on the viewport dimension. In consequence, we have a tendency to alter that by way of a media question or by utilizing viewport items.

.hero {
  min-height: 250px;
}

@media (min-width: 800px) {
  .hero {
    min-height: 500px;
  }
}

We will use a mixture of fastened worth and viewport items, however we should be cautious to not have an enormous peak on bigger viewports, after which we have to set a max peak.

.hero {
  min-height: calc(350px + 20vh);
}

@media (min-width: 2000px) {
  .hero {
    min-height: 600px;
  }
}

With CSS clamp(), we will set a minimal, most popular, and most peak with just one CSS declaration.

.hero {
  min-height: clamp(250px, 50vmax, 500px);
}

When resizing the display screen, you’ll discover that the peak modifications steadily primarily based on the viewport width. Within the instance above, 50vmax means “50% of the viewport’s largest dimension.

Demo

Loading bar

This instance is impressed by this tweet from Andy Bell. I actually like using CSS clamp() for this use case!

The bar thumb is meant to animate from the left to proper and vice versa. In CSS, the thumb might be positioned completely to the left.

.loading-thumb {
  left: 0%;
}

To place the thumb to the far proper, we will use left: 100% however it will introduce a difficulty. The thumb will blow out of the loading bar container.

.loading-thumb {
  left: 100%;
}

That’s anticipated, as a result of 100% on this context begins from the tip of the thumb, thus pushing it out.

We will use CSS calc() to subtract the thumb width and it’ll work, however this isn’t 100% versatile.

.loading-thumb {
  
  left: calc(100% - 40px);
}

Let’s discover higher CSS for that utilizing CSS variables and comparability features.

.loading-thumb {
  --loading: 0%;
  --loading-thumb-width: 40px;
  place: absolute;
  prime: 4px;
  left: clamp(
    0%,
    var(--loading),
    var(--loading) - var(--loading-thumb-width)
  );
  width: var(--loading-thumb-width);
  peak: 16px;
}

Right here is how the above CSS works:

• First, we set a minimal worth of 0%.
• The popular worth is the present worth of the --loading CSS variable.
• The utmost worth represents the present loading minus the thumb width.

CSS clamp() right here present us with three totally different stats for this element. I personally like this answer!

Not solely that, we will lengthen the identical idea for a unique design. Take into account the next determine:

The present progress worth has slightly deal with on prime of it. When the worth is 100%, we want the width to respect that.

As you see within the determine under, the circle should finish on the far proper facet. If we don’t care for that, it is going to find yourself blowing out by half of the deal with width (See the second row with the purple signal).

In such a case, we will use CSS clamp() operate.

.loading-progress {
  width: clamp(10px, var(--loading), var(--loading) - 10px);
}

The minimal worth is the same as half the circle width, the popular worth is the present loading proportion, and the utmost worth is the subtraction end result of the present proportion from half of the circle.

Demo

Dynamic Line separator

Earlier this 12 months, I revealed an article about an attention-grabbing CSS answer for a UI I used to be engaged on.

Take into account the next determine the place now we have a line separator between two sections.

On cellular, that separator ought to change into horizontal as under.

My answer was to make use of a border and flexbox. The thought is {that a} pseudo-element with a border can broaden to fill the accessible house for each the vertical and horizontal states.

.part {
  show: flex;
  flex-direction: column;
  hole: 1rem;
}

.part:earlier than {
  content material: "";
  border: 1px stable #d3d3d3;
  align-self: stretch;
}

@media (min-width: 700px) {
  .part {
    align-items: middle;
    flex-direction: row;
  }
}

We will even do higher by utilizing CSS clamp. Temani Afif recommended an answer that doesn’t want a media question in any respect.

.part {
  --breakpoint: 400px;
  show: flex;
  flex-wrap: wrap;
}

.part:earlier than {
  content material: "";
  border: 2px stable lightgrey;
  width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}

Let’s dissect the above CSS:

• 0px: the minimal worth, used for the vertical separator. It’s zero as a result of we’re utilizing a CSS border as an alternative.
• (var(--breakpoint) - 100%) * 999 a toggle that swap between 0px or 100% primarily based on the viewport width.

Here’s a video:

Conditional border radius

Virtually a 12 months in the past, I noticed a neat CSS trick within the Fb feed CSS. It’s about utilizing CSS max() comparability operate to change the radius of a card from 0px to 8px relying on the viewport width.

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}

Let’s stroll by means of the above CSS intimately.

Let’s dissect the above CSS:

• We now have a max() operate that compares between 0px and the computed worth of the min(). It’ll choose the bigger worth.
• The min() operate compares between 8px and a computed worth from calc((100vw - 4px - 100%) * 9999). It will end in a really massive optimistic or adverse quantity.
• The 9999 is a big quantity to drive the worth to be both 0px or 8px.

With the above, the cardboard may have a zero radius when it’s taking the complete viewport width, or 8px on bigger screens. Neat, proper?

You possibly can learn extra right here concerning the full particulars of the method.

Defensive CSS article header

Whereas constructing the article header for [Defensive CSS][https://defensivecss.dev/], I wanted a means so as to add dynamic padding to the content material whereas sustaining a minimal worth on smaller viewports.

The thought is that the article header isn’t contained with a wrapper aspect, so we want a approach to mimic that the content material is definitely wrapped and aligned with the content material beneath.

To try this, we want a means to make use of the next method in CSS:

dynamic padding = (viewport width – wrapper width) / 2

Because of the CSS max() operate, we will add minimal padding, and a approach to swap to the dynamic padding when wanted.

:root {
  --wrapper-width: 1100px;
  --wrapper-padding: 16px;
  --space: max(
    1rem,
    calc(
      (
          100vw - calc(var(--wrapper-width) - var(--wrapper-padding) *
                2)
        ) / 2
    )
  );
}

.article-header {
  padding-left: var(--space);
}

The thought is that we want the minimal padding to be 1rem, after which will probably be dynamic primarily based on the viewport width.

For extra particulars, you’ll be able to learn the complete article on this method.

Spacing

Generally, we’d want to alter the spacing for a element or a grid primarily based on the viewport width. Not with CSS comparability features! We solely must set it as soon as.

.wrapper {
  show: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: min(2vmax, 32px);
}

To study extra about spacing in CSS, I wrote a deep-dive article on that.