Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[bicostp]

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

Code: [Select]

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

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: [Select]

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

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

[championofkhorne]

the only failure of this thread is that you are doing this for free

[bicostp]

Not necessarily.

http://twitter.com/jephjacques/status/1267403869

The last bit is probably why nobody responded.

(And it only took about 10 minutes anyway.)

[pwhodges]

Combining different styles that happen to be similar (e.g. left and right) is not necessarily entirely good CSS practice, though, because it may complicate future changes which don't choose to keep that symmetry.

[Random832]

Code: [Select]

[code]
a { text-decoration: underline; }
a:link, a:visited { color: #f60; }
a:hover { color: #00c6ff; }

Now - it's poor practice to use just "a" or "a:hover", since this also applies to <a name=...> tags that aren't links. (this is what is happening when you go to some sites and entire paragraphs light up yellow/underlined when you mouse over them).

Code: [Select]

a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }

But since you are not using these - if you can guarantee you won't want to use them in the future, you can simply

Code: [Select]

a { text-decoration: underline; color: #f60; }
a:hover { color: #00c6ff; }

----

Code: [Select]

#comicnav a { margin: 4px; font-size: 18px; }

Narrowly scoped like this, it's ok if it can be guaranteed there will be no non-link anchors.

----

Other issues: there's no such thing as an ".inline-list ul", you need "ul.inline-list" to catch a <ul class="inline-list">. ".inline-list ul" would catch nested lists inside an .inline-list, but there aren't any of those, so removing for the sake of optimization. There are also no paragraphs inside inline-lists, so removing ".inline-list p".

body { min-width: 800px } has no effect since container { width: 800px } already stretches it

The "/1.5em" on body is the abbreviated line-height - line-height should really be unitless (1.5em binds the line spacing it to that font size rather than letting child elements change the font size and keep a sensible line spacing) but this has an effect on the spacing of the navigation bars that it'll take some time to figure out how to duplicate this with margin and padding properties. So leaving it alone.

I can see no reason for the clear: both on #comic img, since there are no floaters within its parent element - obviously this should be restored if this is something I did not forsee - what browser was this meant to address a problem with?

----

Code: [Select]

body { color: #fff; background: #112b33; font: 11px/1.5em Helvetica,Arial,sans-serif; }
table { margin: 2px 0; }
img, table { border: 0; }
a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }
.inline-list { width: 100%; margin-top: 10px; padding: 0; }
.inline-list li { 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 { clear: both; }
#comic img { display: block; }[/code]

----

Combining different styles that happen to be similar (e.g. left and right) is not necessarily entirely good CSS practice, though, because it may complicate future changes which don't choose to keep that symmetry.

It's no harder to change "0 4px" to "0 4px 0 10px" than it is to change "0 4px 0 4px" to "0 4px 0 10px".

[pwhodges]

It's no harder to change "0 4px" to "0 4px 0 10px" than it is to change "0 4px 0 4px" to "0 4px 0 10px".

Granted; I was thinking of something different and not quite relevant.  I should concentrate more.

[bicostp]

Good call.

I think the last two lines were to fix issues with IE 6 and Safari.

Unfortunately, IE 6 doesn't render either of our chopped-up CSS pages correctly; it needs a left margin, and the sidebar doesn't show up where it's supposed to. Pretty simple fix to track down; it just needs center text alignment declared. It also messes up the right float, so the sidebar doesn't fit where it's supposed to.

This centers properly but doesn't put the sidebar where it belongs:

Code: [Select]

body { text-align: center; background: #112b33; font: 11px/1.5em Helvetica,Arial,sans-serif; }
table { margin: 2px; }
img, table { border: 0; }
a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }
.inline-list { width: 100%; margin-top: 10px; padding: 0; }
.inline-list li { 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: left;}
#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; color:#FFF; margin: 0px; }
#header { width: 800px; margin-bottom: 0; text-align: left; }
#archive, #news { margin-right: 0; padding: 2px; background: #fff; }
#adbar { width: 100%; height: 60px; overflow: hidden; padding: 0 0 2px; color: #666; }
/* fixes for weird browsers */
.clear { clear: both; }
#comic img { display: block; }