Five Underated CSS Properties You NEED To Try Out!

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Helloooo! Today I'm gonna be talking about 5 CSS properties (or actually 3 properties, and 2 pseudo classes), that I think deserve more love.

Table Of Contents

1. accent-color
2. caret-color
3. ::selection (pseudo class)
4. user-select
5. :empty (pseudo class)
6. Final Thoughts

accent-color

To start of, this is a great css property just to add a little bit of more detail to your user-interface. This property applies to the input types:

• <progress>
• <input type="checkbox">
• <input type="range">
• <input type="radio">

The accent-color property allows you to very set the accent color (what you often see in radio-buttons, checkboxes, etc) to whatever color you'd like!

Example:

progress { accent-color: red; } input[type=checkbox] { accent-color: red; } input[type=radio] { accent-color: red; } input[type=range] { accent-color: red; } 

caret-color

While barley noticable, the caret-color works perfecly with the accent-color property, and is a very nice little detail you should consider adding and using.

Example:

input { caret-color: red; } 

selection (pseudo class)

While I know this is not really very unknown, I still don't see it used enough. The simple ::selection pseudo element can very easily spice up your website by changing the styles of selected elements.

Example:

::selection { background: red; color: white; } 

backdrop-filter

Like the selection property, this might not be the most unnknown property, but I still don't see it used enough. The backdrop-filter property allows you to apply a variety of filters to the area behind an element.

Options:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• sepia()
• saturate()

Example:

div.background { background: url(image.jpg) no-repeat center; background-size: cover; height: 100px; width: 100px; } div.filterbox { background-color: rgba(255, 255, 255, 0.4); backdrop-filter: sepia(100%); width: 50px; height: 100px; } 

empty (pseudo class)

The empty pseudo class matches every element that has no children. This can be either element nodes or text (includind whitespaces). A fun usecase for this is for example when image is loading.

div { width: 60px; height: 60px; background: grey; } div:empty { border: 2px solid red; } 

Final Thoughts

That's it for today's list, there are of course there are a lot more tha I haven't mentioned, but I appreciate you spending your time reading this post, if you'd like to read more here you go:

🔥 Goodbye Firebase, Hello SupaBase

🏠 Home Page