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;
}
- 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;
}
- 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;
}
- 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;
}
- 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 */
}
We can do pretty much everything with CSS.