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
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
