Can jQuery modify the CSS for a specific media typ

Question

Is it possible for jQuery to modify the CSS for a specific media type (e.g. print)?

My specific problem is that I'm using animate on an element and it's overriding the print stylesheet, which ruins my print layout. Though my problem is slightly different than the general question posed, I think an answer should help me resolve my problem. Any possible workarounds would be helpful also. Much obliged.

Answer 1

Add a css for your media (print) with a specific rule that hides an element (eg #div { display: none; })

In your script, if this :

$('#div').is(':visible')

is true, then your are on a print media (printing).

Answer 2

You don't need to do this with Javascript. Just use the @media rule in your css document. You can write all these stuff in only one css file. Here is the specific W3C Documentation

@media screen {

/* all your fancy screen css with a bunch of animation stuff*/

}

@media print {

/* all your fancy print css just plain */

}

You can write very specific declarations and match all elements to your needs. Btw it's supported down to IE6. Works like a charm in our projects.

@media print {
   body { font-size: 10pt }
}

@media screen {
   body { font-size: 13px }
}

@media screen, print {
   body { line-height: 1.2 }
}