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
Conclusion
I hope that this blog might be useful to write new CSS in your code. In the future, there will be more blogs on new CSS properties.
You may also like
What is Web 4.0? The Internet of Business Possibilities
What is Web 4.0? The new generation of the Web will explore innovative possibilities for every indus...
What is a React Query? Exploring and Understanding it by Basics| Part – 1
React query gives us more powerful features like caching, pa...
What’s New in Laravel 10? : Let’s Have A Quick Look At New Features
Laravel is one of the most famous and extensively employed f...
