CSS Properties You Probably Don’t Know
Content
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..