8 Rare and Useful CSS Properties You Probably Don’t Know

CSS is a cascading style sheet used for describing the content on your website. After HTML, CSS is the second essential language every developer learns. But it’s not possible to know all the properties the language offers. As a result of this, we are not able to utilize the full potential of some rare and useful CSS properties.

However, people think that CSS can only give the background color, font, colors, etc. But CSS can do a lot more than that, like animations, transform and many more. In the past few years, CSS has become a lot more potent than before.

Because of this, there are many CSS properties that developers don’t know, or they know but forget to use when needed. So here in this article we will share fifteen rare and useful CSS properties which you can save for future reference.

1. background-blend-mode

The background-blend-mode CSS property defines how the element background images blend with each other and elements background color.

Property Values

Initial	Default value with no blending. It is by default mode.
Inherit	It inherits the parent element blend mode.
<blend-mode>	It defines the that to be applied. It includes normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity.

Note: You can use multiple mode values separated by commas.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

2. clip-path

The clip-path is the CSS property that creates a clipping area that sets what part of the element is to be shown. In other words, it defines which part to be shown and which to be hidden. The parts inside the region are shown, and part outside it are hidden.

Property Values

<clip-source>: It is a URL() referencing a SVG <clipPath> element.

<basic-shape>: It defines a shape whose size and position are defined by <geometry-box>. Also, if no <geometry-box> is given, the border-box is used as a reference.

The values can be:

inset()	It defines an inset rectangle.
circle()	Using radius and position, it defines a circle.
ellipse()	Using radii and position, it defines an ellipse.
polygon()	Using an SVG fill-rule and set of vertices, it defines a polygon.
path()	Using an SVG fill-rule and SVG path definition, it defines shapes.

<geometry-box>: It reacts in two ways: First, if specified in combination with <basic-shape>, this value defines the reference box of the basic shape. And if confined alone, it causes the edges of the specified box to be the clipping path.

The values can be:

margin-box	It uses a margin box as a reference box.
border-box	Uses border box as a reference box.
padding-box	Uses padding box as a reference box.
content-box	It uses the content box as a reference box.
fill-box	It uses a fill box as a reference box.
stroke-box	It uses an object bounding box as a reference box.
view-box	It uses the nearest SVG viewport as a reference box.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

3. counter-increment and counter-reset

The counter-increment property increases or decreases the value of one or more CSS counters. And the counter-reset property creates or resets one or more CSS counters. Both the properties are used together with content property.

Property Values

none	It is the default value. No counters will reset or increment.
id	It defines which counters to reset or increment. The initial default value is 0, and negative numbers are allowed.
initial	It sets this property to its default value.
inherit	It inherits the property from the parent element.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

4. empty-cell

The empty-cell property defines whether the empty cells of table will have a border and background around them.

Property Values

show	It draws the border and background like a table normal cell.
hide	No border and background are drawn.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

5. table-layout

The table-layout sets the algorithm to set the layout of the table rows, cells and columns.

Property Values

auto	It is mainly used value by the browsers. The width of the tables and their cells are automatically adjusted to fit the content.
fixed	Width of table and column sets by the width of the first rows of cell or by the width of table and col.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

6. caption-side

The caption-side property defines the placement of the table’s caption content on the specified side. Its value is specified with the specific keywords.

Property Values

top	It defines that the caption box should be placed above the table.
bottom	It specifies that the caption box should be placed below the table.
block-start and block-edge	It specifies that the caption box should be placed at the block start edge or block end edge of the table, respectively.
inline-start and inline-end	It specifies that the caption box should be placed at the inline start edge or inline end edge of the table, respectively.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

7. font-variant

The font-variant property defines whether the text should appear in the small-caps font or not. In the small-caps font, all the lowercase letters are converted into uppercase letters. However, the best part about this property is that the converted uppercase letters will appear in smaller font-size than normal uppercase letters.

Property Values

normal	The browser displays the normal font. It is by default value.
small-caps	The browser displays a small-cap font.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

8. quote-property

The quote-property specifies the type of quotation marks for the quotation.

Property Values

none	It specifies that the open quote and close quote entity will not generate any quotation marks.
string string string string	It specifies which quotation marks to use. The first two strings define the first level of quotation embedding, and the next two define the next value of embedding.

Note: To see all the entity numbers corresponding to the respective quote style, visit this.

See the Pen Untitled by WidgetCore (@WidgetCore) on CodePen.

Now we have come to the end of this blog. Hopefully, you loved all the rare and useful CSS properties and found them helpful as well. Go and try all the properties by yourself and play with them. It is the only way to understand these properties better. And in the meantime, if you find any other rare and useful CSS property, do share with us in the comment section below.

Happy Coding!