Comic Discussion > QUESTIONABLE CONTENT

Optimized Homepage CSS

(1/3) > >>

bicostp:
In response to the "optimize my CSS" bribe in the Twitter box:


--- Code: ---body{ min-width: 800px; color: #FFF; background: #112b33; font: 11px/1.5em Helvetica, sans-serif; text-align: left; }
table { margin: 2px 0; }
img, table { border: none; }
a { text-decoration: underline; }
a:link { color: #f60; }
a:visited { color: #ff9600; }
a:hover { color: #00c6ff; }
.inline-list { margin-top: 10px; width: 100%; padding: 0px; font-family: Helvetica, arial, sans-serif; }
.inline-list ul, .inline-list li , .inline-list p { display: inline; padding: 10px; font-weight: bold; }
.inline-list a { margin: 4px;  border: none; font-size: 24px; text-decoration: none; background: none; }
.inline-list a:link { color: #f60; }
.inline-list a:visited { color: #f60; }
.inline-list a:hover { color: #00c6ff; }
#comicnav a { margin: 4px;  border: none; font-size: 18px; background: none; }
#comicnav a:link { color: #f60; }
#comicnav a:visited { color: #f60; }
#comicnav a:hover { color: #00c6ff; }
#comicnav { text-align: left; margin: 0; }
#container { width: 800px; background: #555; border-left: 4px #444 solid; border-right: 4px #444 solid; margin-left: auto;  margin-right: auto; }
#comic { float: left; border-top: 4px solid #444; border-right: 4px solid #444; background: #444; width: 600px; }
#strip  { border: 1px solid #000; }
#side { float: right; width: 190px; }
#header { text-align: left; width: 800px;  margin-bottom: 0px; }
#archive, #news { margin-right: 0px; padding: 2px; background: #fff; color: #000; text-align: left; }
#archive { text-align: center; }
#adbar { width: 100%; height: 60px; color: #666; padding-top: 0px; padding-bottom: 2px; overflow: hidden; }
/* fixes for weird browsers */
.clear, #comic img { clear: both; }
#comic img { display: block; }
--- End code ---

29 lines, 1.65k. (As opposed to 200-something at 4k.) Renders the same as it does now in Firefox 2, Firefox 3, Opera 9, and IE 6. (Actually, it's all screwed up in IE 6. But, that piece of crap breaks everything not specifically written for it, including the current page.) I just removed some stuff specific to the old store (forms and shirt boxes), and took care of some redundancy (margin:0, padding:0, repetitive formatting, etc).

championofkhorne:
brilliant

Random832:
I don't know why he's concerned with CSS optimization - the CSS files are cached by users' browsers, and much smaller than, say, the images.

bhtooefr:
The thing about optimizing CSS, though, is it makes changing it easier. The less useless crap in the CSS, the less wading through said crap you have to do when, on a whim, you decide to completely change the site design.

And Jeph never does that. :lol:

Also, a few kilobytes per user that usually gets cached... (although Opera, while extremely aggressive about caching HTML, seems to almost not cache CSS at all...) that does add up when you have ~250,000 viewers.

mrdestructicity:
bicostp already did most of the hard work, but if you wanted to further cut down on the redundancy:


--- Code: ---body { min-width: 800px; color: #FFF; background: #112b33; font: 11px/1.5em Helvetica,Arial,sans-serif; }
table { margin: 2px 0; }
img, table { border: 0; }
a { text-decoration: underline; }
a:link, a:visited { color: #f60; }
a:hover { color: #00c6ff; }
.inline-list { width: 100%; margin-top: 10px; padding: 0; }
.inline-list ul, .inline-list li, .inline-list p { display: inline; padding: 10px; font-weight: bold; }
.inline-list a { margin: 4px; font-size: 24px; text-decoration: none; }
#comicnav { margin: 0; text-align: left; }
#comicnav a { margin: 4px; font-size: 18px; }
#container { width: 800px; margin: 0 auto; border: 4px #444 solid; border-width: 0 4px; background: #555; text-align: center; }
#comic { float: left; width: 600px; border: 4px #444 solid; border-width: 4px 4px 0 0; background: #444; }
#strip  { border: 1px solid #000; }
#side { float: right; width: 190px; text-align: left; }
#header { width: 800px; margin-bottom: 0; text-align: left;  }
#archive, #news { margin-right: 0; padding: 2px; background: #fff; color: #000; text-align: left; }
#adbar { width: 100%; height: 60px; overflow: hidden; padding: 0 0 2px; color: #666;  }
/* fixes for weird browsers */
.clear, #comic img { clear: both; }
#comic img { display: block; }

--- End code ---

Removes a few unnecessary redeclarations and cuts down on the left/right styles by combining them.

Navigation

[0] Message Index

[#] Next page