Welcome to WebmasterWorld Guest from 54.198.46.95

Forum Moderators: not2easy

Message Too Old, No Replies

Optimizing CSS

Eliminating CSS Bloat

     
7:24 am on Mar 18, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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;
}

8:07 am on Mar 18, 2002 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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;
}

9:17 am on Mar 18, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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?

9:21 am on Mar 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've being doing quit alot on CSS size

[webmasterworld.com ]

DaveN

9:44 am on Mar 18, 2002 (gmt 0)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month