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

No comments:

Post a Comment