homepage Welcome to WebmasterWorld Guest from 54.227.171.163
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Optimizing CSS
Eliminating CSS Bloat
pageoneresults

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



 
Msg#: 123 posted 7:24 am on Mar 18, 2002 (gmt 0)

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

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



 
Msg#: 123 posted 8:07 am on Mar 18, 2002 (gmt 0)

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

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



 
Msg#: 123 posted 9:17 am on Mar 18, 2002 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 123 posted 9:21 am on Mar 18, 2002 (gmt 0)

I've being doing quit alot on CSS size

[webmasterworld.com ]

DaveN

piskie

10+ Year Member



 
Msg#: 123 posted 9:44 am on Mar 18, 2002 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved