Overview
As we have already seen some Trending CSS in our Previous Blog, In this blog we have covered other new properties.
Aspect Ratio:-
Generally we use padding-top CSS for maintaining the aspect ratio of background-images across various screens.
It is calculated in percentage as height / width * 100. if we wanted a 1:1 aspect ratio then we should simply apply CSS padding-top:100%;
If we want aspect ratio like:-
3:4 -> padding-top:75%;
1:2 -> padding-top:50%;
9:4 -> padding-top:56.25%;
E.g:-
But now we can apply our required aspect ratio by using the “Aspect Ratio” property. Below is an example of how we can write this property:-
.example { width: 300px; aspect-ratio:1/1; }It will create 1:1 aspect ratio div which has the same width & same height
Here is a Browser support list for aspect-ratio CSS:
Inset:-
Inset is a shorthand property of top, left, bottom, right properties. It will apply the same as we are giving padding & margin CSS to an element. By using this property our code will get reduced
Code examples for inset property:
inset: 20px; /* value applied to all edges */inset: 10px 15px; /* top/bottom left/right */inset: 15px 20px 25px; /* top left/right bottom */inset: 50px 20px 30px 20px; /* top right bottom left */ /* values in percentage*/inset: 10% 5% 5% 5%; /* Keyword value */inset: auto; /* Global values */inset: inherit; inset: initial; inset: unset;
Here is an example of how we can use the inset property. In the below example, we have applied inset for top/bottom & left/right
Browser support for inset property:
is() Selector:-
When we are sure with our children elements or sub-elements then we can use is() selector. Let’s understand it by one small example
<header class="is-styling"> <p>header content. This <a href="#">contains a link</a>. </header> <div class="is-styling"> <p>div content. This <a href="#">also contains a link</a>. </div> <footer class="is-styling"> <p>footer, also containing <a href="#">a link</a>. </footer>
For this HTML code we will use is() selector in CSS and check the output
:is(header.is-styling, div.is-styling, footer.is-styling) a {
color: red;
}
footer a {
color: blue;
}Output:-
As the above result we can see “footer a” CSS is not overridden by our is() selector CSS.
Browser support for is() selector
where() Selector:-
:where() has no specificity , it can be overridden by any any element let’s see the above example by just changing CSS to where.
:where(header.is-styling, div.is-styling, footer.is-styling) a {
color: red;
}
footer a {
color: blue;
}
Output:-
As the above result we can see “footer a” CSS is overridden by our is() selector CSS.
Browser support for where() selector:-
Read: Introduction to Umbraco
Conclusion
I hope that this blog might be useful to write new CSS in your code. In the future, we will bring 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...
