8 Less Common CSS Properties You May Find Interesting
We're all familiar with the most common CSS properties that we use daily, such as
border. And for most projects, the ones we use all the time are just fine. Of course, there are also those ones that you discover through your IDE's autocomplete feature, which can have some pretty interesting results. Some are immediately obvious to what they do, and some are not.
This property is for those times when your font's default word spacing just isn't what you want it to be. Use this to add more space between words, or to move them closer together, or even have them overlapping each other! A similar property,
letter-spacingis generally seen more often.
I'm sure you've heard of this property before, though most people seem to have no idea what it is for. Probably because the name starts with "a", so it always shows up at the top of every IDE's autocomplete list.
azimuthproperty specifies the location of the sound when the content is being read aloud. For example, you can specify an angle in degrees (deg), or you can use predefined values such as "center" or "left-side". This property is meant to be used with aural stylesheets.
This CSS property specifies which portion of an absolutely positioned box should be visible. You can specify the value using
rect, which will "clip" the box to the shape of the rectangle using the specified coordinates.
This one has a lot of potential for abuse. However, when used wisely, this CSS property can greatly improve various types of user interfaces. For example, if a certain box is meant to be dragged by the user, you could add this style to the handle:
Of course, empty cells are a common occurrence when using tables. With this CSS property you can set the value to either
hide, to specify whether you want empty table cells to be visible or not.
This CSS property specifies the direction of the text in the content. It can be set to either
ltrfor the default direction for English, or to
rtlto have text going from right to left.
This one is kind of similar to
border. However the difference between the two is that with
outline, the outline is drawn outside of the border, and does not have any effect on the box's size or position.
orphansCSS property only applies to paged media. What it does is specify the minimum number of lines inside the element that must be left at the bottom of a page. This This can be helpful to prevent extra lines from screwing up an entire layout.
What other less common CSS properties do you know of? And do you actually use any of them?