CSS functions that save your life

Using CSS you cannot write functions to connect with database or an API call. But there are some built-in functions that helps to code better as a Front-end developer.

I skip some basic functions that every frontend devs know. So lets talk about some cool features that you probably not heard of.

Note: This is for devs who don't care about IE and old browsers support.

env()

The env() CSS function can be used to insert the value of a user agent defined environment variable into your CSS, in a similar to the var() function and custom properties.

Using env() will save your site from hiding to from funky notch and dot

<meta name="viewport" content="viewport-fit=cover" />

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

The safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display. For rectangular viewports, like your average laptop monitor, their value is equal to zero. For non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible.

clamp()

@media query is the part where people hate about writing frontend code. If you already know about min() and max() functions then you might know how they helped to write @media queries.

Eg: min() function uses the minimum rendered value at any point of time.

img{
    width: min(75%, 600px); // similar to width = 75% and max-width = 600px
}

Although min() and max() function can have more than one value, it's hard for us to keep track which variables will be called on which condition. So on combining both min() and max() function comes clamp() function.

p{
    font-size: clamp(2rem, 5vw, 8rem); // (min, normal, max)
}

Note: You need not to use calc() inside these functions. You can directly use operations of variables.

:out-of-range and :in-range

:out-of-range matches an element when the value of its value attribute is outside the range limitations specified on it. Any other element that does not have data range limitations or that is not a form control element can not be selected with :out-of-range. Similarly :in-range can be used for to apply inside range.

/* Selects any <input>, but only when it has a range
   specified, and its value is inside that range */
input:in-range {
  border-color: green;
}

:has()

The :has() pseudo-class takes a relative selector list as an argument. In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like document.querySelector(); this was due to performance concern

/* Selects any <a>, as long as it has an <img> element directly inside it  */
/* Note that this is not supported in any browser yet */
let test = document.querySelector('a:has(> img)');

Hope you had a gained some new knowledge on these CSS functions and pseudo class. Share this blog if you found it interesting.