5 CSS Properties You Probably Did Not Know About

#css #frontend #webdev

I have been studying a lot of new CSS properties in order to up my game as a frontend developer.

I am fascinated by the new CSS properties I have come across and utilized in my recent projects. Therefore, I am going to share 5 CSS properties you probably didn't know about.

1. @media (hover: none) or @media(hover: hover)
How do you know if users are viewing your web application with a touch-screen device (e.g mobile phones) or a non-touch-screen device (e.g desktop/laptop)?

You can determine this by using the media query above.

This is important because some CSS properties like hover may not be so important when applied to touch screen devices. The hover effect is not so obvious on touch screen devices.

@media all and(hover: none) {
apply styles for touch screen devices e.g mobile phones
}

@media all and(hover: hover) {
apply styles for non-touch-screen devices
}

The CSS property in the codepen below will only apply on non-touch-screen devices when users hover on the text. Therefore, if you are viewing this on your mobile phone, the hover effect will not work.

2. selection pseudo-class
The selection pseudo-class lets you define custom colors and background colors that appear when users try to copy texts on your web applications.

3. hyphens
By setting the hyphens property to auto, texts on your webpages will be automatically hyphenated.

In the codepen below, try resizing the browser and see hyphens automatically apply to the texts

4. background-clip
When set to text, the background-clip property is useful for creating linear-gradients on texts.
However, to work on the chrome browser, you need to add the -webkit prefix.

5 @supports
This is a very useful CSS property. It lets you set styles that should only apply when a browser supports a CSS property.

In the codepen below, the @supports property will ensure that the backdrop-filter CSS property will only be applied on browsers that support the property. Hence, if you view the webpage with a browser that doesn't support the property e.g firefox, then the backdrop-filter won't be applied. You will need to set up a default property that should apply. In this case, I used background-color as the fallback property.

Click the button to view the modal

And that's it!

If you find any of these CSS properties interesting, please leave a comment below. I'd also love to learn about new CSS properties that you have come across lately.

Thanks for reading.