How can I write css for media print using JavaScript, due to special css for ie8 compatibility mode?

Question

I am setting up some css for @media print and I had to make use of IE conditionals to get it cross-browser compatible. Looking here and elsewhere, it seems there's no IE conditionals that detect IE 8 compatibility mode. The only way to do so is make use of meta tags or JavaScript, correct?

I know how to detect compatibility mode in JavaScript. My question is how do I write one particular line of css for @media print using JavaScript. If i have to, I'll settle for linking to a separate stylesheet. But I managed to get my current print media stylesheet cross-browser compatible, with the notable exception of ie 8 compatibility mode. If I can just add what I need in JavaScript, instead of creating a separate stylesheet for IE 8 compatibility mode, that would be great. Either way, I would like to know how I can add @media print css for IE 8 compatibility mode using Javascript?

Thank you!

yunzen · Accepted Answer · 2019-06-05 07:49:57Z

1

Have you tried just to add inline style tag:

var sheet = document.createElement('style')
sheet.innerHTML = "@media print { h1 {color: gray;} } /* just an example */";
document.body.appendChild(sheet);

edited Jun 5, 2019 at 7:49

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

answered Nov 9, 2011 at 22:41

Pavel Podlipensky

8,2795 gold badges46 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user717236 Over a year ago

Thank you. Can you give me an example of how to formulate the innerHMTL? Is it something like "<@media print { #div_test { display:none; } }";

user717236 Over a year ago

I would just add that it should be added to the head, not to the body. But I think that should do it; not tested on all browsers, though. Thank you.

Pavel Podlipensky Over a year ago

The code of innerHTML depends on what do you want to have in your print @media query

yunzen Over a year ago

I added an example into the innerHTML. Just to make the format clear

Collectives™ on Stack Overflow

How can I write css for media print using JavaScript, due to special css for ie8 compatibility mode?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related