CSS Properties You Probably Don’t Know

Tab Size

Most code editors are equipped with Tab Size control that allows developers to specify the code indentation width made with the Tab key. You are also able to customize the indentation of the code embedded on the webpages.

pre {
tab-size: 4;
}

Pointer Events

The pointer-events property allows us to control element behavior under pointer events like dragging, hovering and clicking. In following example, the affected link will do nothing when it is clicked; the link will be completely disabled.

a {
pointer-events: none;
}

Image Orientation

Like in an image editor, now you can change the image orientation by rotating or flipping the image with CSS. here is an example on how we can flip an image horizontally using this property.

img {
image-orientation: flip;
}

Text Rendering

This property will tell browsers how they should render the text within webpages. The text will be optimized for performance, legibility, or precision, which will eventually determine the text quality.

p {
text-rendering: optimizedLegibilty;
}

Image Rendering

image-rendering defines the image quality on webpages, in particular when the image is forcefully resized. With the advent of this property comes a number of new values, and browsers have their own specifications in this matter.

img {
image-rendering: crisp-edges;
}

Writing Mode

Not every language is written from the left to right direction. Some languages are instead written from top to bottom or right to left. To accommodate these languages, writing-mode is introduced to let developers change the content writing direction through CSS.

p {
writing-mode: rl-tb;
}

That’s It For This Article, Share Your Opinions and Suggestions. Don’t Forget To Share With Your Friends..