15 CSS Properties You Probably Never Use

Originally written by Matthew Inman (Oatmeal)

After writing 5 HTML Elements You Probably Never Use (but perhaps should), I thought creating something similar for CSS was in order. These are all CSS level 2 properties but some of them don't work in all browsers, so make sure and test things out before putting them into use.

1. clip

clip: rect(5px, 40px, 45px, 5px)

From iBloom Studios

A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask). The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify.

They've got a lengthy article all about clip and some examples of it in use.


2. visibility

visibility: (inherit | visible | hidden)

From Macromedia

For practical purposes, the difference between these two properties [visibility and display] is that when you hide information using the visibility property, the browser creates the appropriate amount of space in the browser window for the information when the page loads. When you use the display property, space for the information is not created until the element becomes visible.


3. text-shadow

text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px

From Quirksmode:

The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text.


4. content

content: "Your browser supports content"

Use this property with the :before and :after pseudo-elements to generate content around a CSS selector.

Careful with this one, it goes against the idea of separating content from presentation.

5. quotes

q { quotes: '"' '"' }

From htmldog

[quotes] specifies what form the quotes of the open-quote and close-quote values of the content property should take. Not supported by IE.

A List Apart endorses the revival of the tag using content

6. counter-reset and counter-increment

From the mozilla developer center

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed
on a page using the counter() or counters() function of the content property.

body {
counter-reset: section; /* Set the section counter to 0 */
}
h1:before {
counter-increment: section; /* Increment the section counter */
content: "Section " counter(section) ": "; /* Display the counter */
}



7. marks

@page: { marks: ; }

From quackit.com

The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.


8. page-break-before and page-break-after

page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

These two properties allow you to set the page-breaking behavior of an element when printing the document.

9. orphans and widows
orphans:
widows:

These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.

About.com has a decent article about the CSS orphans property.

10. font-size-adjust
font-size-adjust: number

From w3schools:

The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.

The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.


11. font-stretch

font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

From the W3C

The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest:

1. ultra-condensed
2. extra-condensed
3. condensed
4. semi-condensed
5. normal
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded



12. font-variant
font-variant: (normal | small-caps)

From w3schools

The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.


13. caption-side

caption-side: (top | bottom | left | right)

This is used to define the position of a caption in a table.


14. table-layout

table-layout: (auto | fixed)

According to Quackit.com

The CSS table-layout property allows you to fix the table layout so that the table renders much faster.

Without the table-layout property, on large tables, users won't see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.


15. empty-cells

empty-cells: (show | hide)

Quirksmode has a great explanation of empty-cells in Fun with Tables: which shows a side-by-side comparison of a bunch of CSS table properties and which browsers they are supported in.

Source / Please click at below URL to know about CSS
15 CSS Properties You Probably Never Use (but perhaps should)