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.
The background-blend-mode CSS property defines how the element background images blend with each other and elements background color.
|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.
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.
<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.|
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.
|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.|
The empty-cell property defines whether the empty cells of table will have a border and background around them.
|show||It draws the border and background like a table normal cell.|
|hide||No border and background are drawn.|
The table-layout sets the algorithm to set the layout of the table rows, cells and columns.
|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.|
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.
|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.|
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.
|normal||The browser displays the normal font. It is by default value.|
|small-caps||The browser displays a small-cap font.|
The quote-property specifies the type of quotation marks for the quotation.
|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.
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.