Less familiar but much useful CSS properties

Using CSS is a routine drill for every web designer and developer. Oh, don't tell me you are a web designer and you don't worry about your CSS. Having read this post till the end, you will have an idea about these overlooked CSS properties. These properties can really optimize your style sheet, make your things done easy.

So, here it goes..

1. align-items 

Specifies alignment of content inside the container. 

And values you can use are:

• stretch: contents is stretched to fit the container
• center: content is centered to its container
• flex-start: content at beginning of the container, starting from top-left.
• flex-end: content at endof the container, starting from bottom-left.
• baseline: content is placed at the baseline of the container.

 Supported in IE10+, Firefox, Chrome, Opera

2. backface-visibility

Determines the visibility of backside of the div

This is useful when you perform any transformation on the div like rotate, skew, etc.

 And values you can use are:

• visible: Back-face is visible.
• hidden: Back-face is not visible.

Supported in all major browsers.

2. caption-side

Position of a table's caption

I have seen people creating a row within a table just for putting a caption. Hey, you don't need to do that, when you can use caption-side, provided you are using <caption> tag.

And values you can use are:

•  top: Caption at the top of the table.
•  bottom: Caption at the bottom of the table.

Supported in all major browsers.

3. column-count

Divide the container in number of columns

Want to show newspaper like columned content? Column-count is pretty useful for you.

AVYCUA: (smart-work!)

• number: Specify a number of columns to divide the container in.
• auto: Automatically sets value according to the value of column-width

Supported in IE10+ and rest of the major browsers.

4. column-gap

Specify the gutter width between two columns.

Having used column-count, now you can specify the gutter or margin between columns. You can use column-rule to specify color and width of this gap.

AVYCUA:

• length: Length in pixel to specify the gap.
• normal:  Default length of 1em.

Supported in IE10+ and rest of the major browsers.

5. quotes

Specify the characters to be used as quotation mark.

Did you know, you can use any character as a quotation mark? For example, you can write
«French Quotes» instead of usual "French Quotes". For that you have to use HTML's <q> tag for quotes. This is how you write in CSS:

q
{
quotes: "«" "»";
}

 You can specify four values for this property as,

 quotes: "«" "»" """ """;

Don't get confused by the Braille in the end.The first two values within " " are for outer quotes and next two values specify character for inner quotes. So above string would look like this now:
 «"French" Quotes»

Supported in all major browsers.

 There are more properties than these five which are less used, but the reason I haven't add those here is either those are deprecated or major browsers do not  support.

Enjoy designing!