16th Jul 2021

Some Trending New CSS Properties Part -2

Web

Written By, Yash Ganatra

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:-

aspect-ration-1

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:-

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:

aspect-ration-3

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:

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

inset-img

Browser support for inset property:

inset-support

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

For this HTML code we will use is() selector in CSS and check the output

Output:-

is-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.

Output:-

where-output

As the above result we can see “footer a” CSS is overridden by our is() selector CSS.

Browser support for where() selector:-

where-support

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.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd