Tuesday, January 27, 2009

Combine CSS for different media

Instead of adding a separate <link> tag for the print-view stylesheet like this:

<link href="base.css" type="text/css" rel="stylesheet" />
<link href="print.css" type="text/css" rel="stylesheet" media="print" />

just add "@media" blocks at the bottom of the main stylesheet.
The bottom of base.css in the above example would then have something like this (the styles listed here are for illustration only):

@media print {
.noprint { display:none; }
.printonly { display:block; }
body { width:780px; }
}

See article on the David Walsh Blog...
Read Eric Meyer's article about using print stylesheets...

Wednesday, January 14, 2009

Web development tools

Firebug is a must when debugging CSS or trying out styles on the fly.

I didn't know it could also check page weight--just enable the Net panel and it will give you a table of all requests made by the page, along with stats (size and time) for each request.

Team System comparison tools