Optimizing CSS

Eliminating CSS Bloat

[pageoneresults]

I've been following papabaer's and everyone else's input on CSS and wanted to get some more information on using the shorthand version. It seems that our CSS can become bloated just like our html can.

The more reading I do, the more I come across the shorthand versions and that they are more compatible than the longhand. Papabaer, or anyone else who has mastered the shorthand version, can you give us some basic examples to start?

An example that needs to be optimized...

h1, h2, h3, h4, h5, h6{
font-family:"verdana", arial, helvetica, sans-serif;
color:#226099;
font-size:15px;
text-align:left;
margin-top:0px;
margin-bottom:-5px;
background:none repeat;
}

[DrDoc]

1) font-family and font-size can go under the property "font".

2) text-align .. Well, left is default .. so strip that alltogether

3) margin .. why "margin-bottom: -5px"?

4) No background .. and you want it repeated? I'm confused ..

So, how about this??

h1, h2, h3, h4, h5, h6{
font:15px verdana, geneva, arial, helvetica, sans-serif;
color:#226099;
margin-top:0px;
}

[pageoneresults]

Thanks DrDoc. You said...

3) margin .. why "margin-bottom: -5px"?

4) No background .. and you want it repeated? I'm confused ...

I noticed when viewing in Opera that the space below the <h1> was a little much. When I assigned the negative value, the space of course was reduced by that much.

The none repeat is something I picked up from the W3C CSS Validator. Im assuming that transparent can be used instead. I was just following their guidelines.

On a side note. Finally became <font> free this morning! Just became a fan of the <span class> tag, what a wonderful thing!

I also noticed that the site is loading quicker now. I know you might think I'm crazy, but I've seen some browser delays in IE and eliminating the <font> tags seems to have minimized the delay. Is that possible? Probable?

[DaveN]

I've being doing quit alot on CSS size

[webmasterworld.com ]

DaveN

[piskie]

By shortening the CSS terms, the amount of code saved is minimal. Some older browsers only recognise the full terms. I don't think it worthwhile to dissenfranchise the older browsers (few though they are) for such a small amount of code saving.