DEV Community

Justice-hub
Justice-hub

Posted on

5 CSS properties you don't know

CSS has a large number of properties and you can create amazing things from it.

We are all aware of the basic properties, but do you not know about some of its hidden gems , that'll surely blow your mind?!
In this article, we'll cover some amazing properties which are not commonly used.

  • Caret Color

The caret-color property specifies the color of the cursor(caret) in inputs, textareas, or any element that is editable.
The caret is typically a thin vertical line that flashes to help make it more noticeable.

input {
caret-color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • Backface visibility

The backface-visibility defines whether or not the back face of an element should be visible when facing the user.
The default for backface-visibility is visible. Instead of it being visible, you can even hide it.

.box {
backface-visibility: hidden;
}
Enter fullscreen mode Exit fullscreen mode
  • Tab-size

The tab-size specifies the width of a tab character.
The default value for the tab-size property is 8 space characters, and it can accept any positive integer value.

pre {
tab-size: 16;
}
Enter fullscreen mode Exit fullscreen mode
  • Isolation

The isolation property defines whether an element must create a new stacking content.
Stacking content refers to how elements on a webpage appear to sit on top of other elements.

#element {
isolation: isolate;
}
Enter fullscreen mode Exit fullscreen mode
  • Resize

The resize property defines if and how an element is resizable by the user. You can simply resize the element by clicking and dragging the bottom right corner of the element.
This property does not apply to inline elements or to block elements where overflow is set to visible.

textarea {
resize: none; /* Disables resizability */
}
Enter fullscreen mode Exit fullscreen mode

We can do pretty much everything with CSS.

Top comments (2)

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Knew all of them but isolation. Thank you for making me aware of it! :)

Collapse
 
justice_hub profile image
Justice-hub

It was a pleasure to help you