📚 Five Underated CSS Properties You NEED To Try Out!

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