15 CSS Properties You Probably Never Use (but perhaps should)
Posted by Matthew Inman (Oatmeal) on Thu (2/15/07) at 10:17 AM Webdev
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. From quirksmode:
I feel that we shouldn't use theI agree, but there are still some cool things you can do with content using CSS. Check out Curly Quotes from Design Meme.contentdeclaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.
5. quotes
q { quotes: '"' '"' }
From htmldog
[quotes] specifies what form the quotes of theA List Apart endorses the revival of the <q> tag using contentopen-quoteandclose-quotevalues of thecontentproperty should take. Not supported by IE.
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 thecounter()orcounters()function of thecontentproperty.
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: <value>; }
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.
From MSDN
The following examples use the page-break-before attribute and the pageBreakBefore property to start printing on a new page.
This example uses the H3 element as a selector in an embedded style sheet to break the page before all H3 headings.
<STYLE>
H3 { page-break-before: always }
</STYLE>
</HEAD>
<BODY>
<H3>Start New Section on New Page</H3>
9. orphans and widows
orphans: <integer>
widows: <integer>
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:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- 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.
Any other long lost CSS properties you can think of?
38 Comments
You need to be logged in
To add a comment or give something a thumbs up/down, you must either login or sign up for a new account. Fill out the form below and we'll redirect you back to this exact spot.
Great list Matt. One thing I would add is a warning: not all of these attributes are supported in all browsers and even the ones that are may not do the same thing accross the board. Test everything.
Also, why would you link to about.com? That site gets too many SERPs as it is IMO... and usually not "quality".
Wow...you actually found something useful at about.com???
I would have never expected that.
Very informative post though...Now I'll have to go change stuff around in my CSS.
Yikes, I have lost this comment twice now! (grrr.. site not working in Opera!)
So, anyway, what I was going to say is that most of these properties don't work in all browsers so that's why people don't use them! Really this is a list of properties we might be able to use in the future but probably not now becuse they're not supported well enough.
It is nice to know about them though. I have done some work with generated content and the :before selector. It was really extra decorative stuff so it doesn't matter to me if it doesn't look exactly right in IE. I also did some stuff with counters quite a few years ago but back then they were only supported by Mozilla. It's easy to forget about things when you can't actually use them on a real site.
I will have to play with some of these when I get a chance, especially the print stuff. That's something most of us don't pay enough attention to, I'm sure! This list would have been more helpful if the supported browsers were listed for each property :)
Hey Megan, if you're having trouble with the comments you should try changing your account settings to disable the javascript wysiwyg editor.
It's a nice list, though I too would be hesitant to use some of these since I think a certain browser developers all know and dislike doesn't handle them well.
The property I'm wanting IE to adopt more than any other is the border-radius property. It's css3 I think so we may be waiting. That one property is going to eliminate a lot of needless images and open up web design in many ways.
Edited by vangogh99 on Thu (2/15/07) at 01:54 PMGreat list Matt. Regardless of if or if not these things work across all browsers I still think these are great tricks to know. I’m sure not too long down the road there will be some kind of web standards set that will eliminate all this cross browser commotion…
Edited by runningthingz on Thu (2/15/07) at 03:38 PMYeah the only one that's pretty tempting is visibility. i do use that sometimes. for instance, i used it on www.thumbwarz.com to prevent the footer from displaying before it had been positioned
Man I would really like to know how this went from next to nothing for Digg's at around 5 CST to over 1600 when I got to work today...
Not in any way that it is a bad article, I just don't understand that site quite yet. Any thoughts that can be provided on that note would be great.
I have no idea. All I know is that getting on digg frequently coincides with me NOT being near a computer, effectively killing our server and me not knowing about it. Yesterday I was at the computer all day (9am - midnight, basically). I left for about an hour to go exercise and during that hour we got on digg.
I guess what I'm saying is that I've rarely seen a consistent pattern to getting on digg. Sometimes it happens in less than an hour, sometimes it can happen days later. The guys at pronet might have a better explanation for how it all works.
Hey, are you caching at all for the site? Everytime your articles make Digg, SEOmoz crashes (which drives me nuts).
This happened to me the first time I got Dugg and my lack of caching was at fault - db was being queried every single time. Since I fixed the caching issues it's been smooth sailing ever since.
Kudos for the frequent diggs, btw.
Yeah, we are caching but I haven't gotten it's not entirely automated at this point so I have to set up which pages are cached beforehand. Unfortunately there's very little rhyme or reason to when a post makes the digg homepage, so if Im not paying attention our server crashes.
I apologize, I'm trying to find a long term solution.
one thing that may web designers like to implement are round corners on content blocks. I have had mixed results with an all CSS method for this. IE (as usual) has problems displaying complex CSS consistently.
Below is a good tutorial for making round corners without images.
http://www.html.it/articoli/nifty/
I have several of these useful. Thanks for reminding us.
One of my favorites is opacity. You can get some cool effects by
adding opacity on hovering an image against a colored background.
It's well supported. Even IE has its own version that works identically.
Edited by David Hucklesby on Sat (2/17/07) at 09:44 PMvisibility
page-break-before
table-layout
Congratulations by the post!
I enjoyed the list and article a lot, so thank you but really I would only ever use two or three of those properties and they would be:
Font-variant, quote (normally use blockquote though) and table-layout...
Thanks for the article though
I just discovered a new one today that I'd never heard of:
white-space
You can use it to adjust how white space is handled, possible values are normal, pre, and nowrap.
http://www.w3schools.com/css/pr_text_white-space.asp
font-size-adjust does not work properly in mozilla and opera
I just ran across this list. It's a good resource for the future but I agree with most here that it's not wise to use over 60-70% of them if you want cross-browser compatibility.
One thing I'd love to see added, is a browser check. Everyone who finds this interesting will be thinking "Sure it's cool, but probably only works in 1-2 browsers".
Awesome article though, I'll defenitely look into it.. Bookmarked. Thanks alot!