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!