Elliot Swan

Top 6 Under-used CSS Properties 10:28 am

My list of the top 6 under-used CSS properties:

• 6) content: Now, some would probably say that using this would be placing content in your styles. I say no, not necessarily, it can be great for added accessibility. You can use this to grab content that already exists, and then style it. For example in my Recent Ramblings bar I use the following CSS:

  
  html > body a#openit:hover:after {
  content: "AccessKey: ["attr(accesskey)"] ";
  margin-left: 20px;
  color: #799074;
  font: 11px times new roman;
  }
  
  html > body a#openit:focus:after {
  content: "AccessKey: ["attr(accesskey)"] ";
  margin-left: 20px;
  color: #799074;
  font: 11px times new roman;
  }
  

  This grabs the AccessKey attribute and displays and styles it. Simple as that.

• 5) position: fixed; Why? Because it can be so freaking cool, that’s why.
• 4) opacity: This is a CSS3 property, but is supported by both FireFox and Safari. IE (of course) has it’s own little alternative filter that does the trick just as well, though it won’t validate. What I like to to do is give IE users an extra stylesheet with all their filters, that way it doesn’t clutter up my nice stylesheet. Opera, unfortunately, does not support opacity: at all.
• 3) line-height: When you’ve got a text heavy site, line-height is a must. Ever heard of whitespace? Stick some between those lines.
• 2) text-align: This has got to be one of the oldest and most under-used CSS properties. Remember when A List Apart launched the redesign with the centered headlines? Everybody thought it was the coolest thing ever, and all they did was specify text-align: center;. I mean believe it or not, it wasn’t rocket science. But it looked pretty sweet, didn’t it?
• 1) display: none; I’m thinking it’s a shame MySpace blocks that, because if everybody (except for Mike and Keegan) used it on everything in their profiles, the web would be a much better place.