Some Trending New CSS Properties

Overview

Web design and development usually consists of long lines of code but some properties act as life-saving tools for many developers. Nowadays, many CSS properties are invented to reduce many lines of CSS properties in our project. In this blog, we will learn some new CSS properties which can help you to reduce the number of CSS code.

Min ()

Many elements are assigned CSS properties like width or min-width to set a normal value or minimum value. But, now we can combine both in only one property using min().
min() has two parameters: initial value & minimum value.

min(initial value, minimum value);

Previously we used to code like this:-

width : 75%;
min-width :600px;

Now using min() , same css is written as:
width: min(75%, 600px);

Max ()

Same as the above example, instead of width or max-width to set a normal value or maximum value, it can be combined in only one max().
max() has two parameters: initial value & maximum value.
max(initial value, maximum value);

Previously we used to code like this:-

width : 75%;
max-width :900px;

Now using max() , same css is written as:

width: max(75%, 900px);

Clamp ()

In clamp, we can combine 3 CSS properties: initial value, minimum value & maximum value.

clamp(minimum value, initial value, maximum value);

Using clamp it is written as,

width:clamp(200px, 75%, 900px);

Browser compatibility for min(), max() and clamp() :-

Column gap

The column-gap property specifies the gap between the columns.
For example, to divide any element into an equal number of columns, use the column-count property.
And then, we can put spacing between those columns by column-gap property.
E.g.:- if we want to divide our

Row gap

The row-gap property specifies the gap between the rows.
For example, to add space between two rows in the grid structure use the row-gap property.
E.g.:- In the grid structure to apply row-gap use the below example