Forum How do I...?

Conditional CSS imports

yet
I have this print-css.rocks lessons

https://github.com/zopyx/print-css-rocks/blob/master/lessons/lesson-footnotes-multi-columns

where I need to inject the specific "prince.css" CSS.

I don't want to include it within the index.html because this should not contain any converter specific CSS.

Passing "-s prince.css" through the commandline also does not help because the CSS file is loaded as first instead of as last CSS (it contains overrides for span.footnote).

Any idea?
dauwhe
Could you just import with a media query. so it's print-only?

@import url("prince.css") print;
yet
nah...as written, the test is for all PrintCSS converters and I need one more extra style specific to Prince
mikeday
You could add it with some JavaScript:
<script>
if (Prince) {
    var style = document.createElement("style");
    document.body.appendChild(style);
    style.textContent = "...";
}
bohwaz
Hi, this is also something that we are missing currently in Prince.

What I want:
- generated PDFs of some of my web pages to be exported as A4 landscape, but not others, where format is defined by other CSS stylesheets
- users being able to print the document in either portrait or landscape of the same web pages

Chrome is not allowing the user to change the portrait/landscape orientation, nor the page size, if I specify it in CSS:

@page {
    size: A4 landscape;
}


This means I cannot leave this CSS rule, or Chrome users will be stuck with A4 landscape. But if I remove it then Prince won't export to A4 landscape. And I can't use Prince command line options for this either, as I don't want *all* of the exported PDF documents to have the same page size/orientation.

It would be much easier if I could instead do this:

@media only prince {
  @page {
    size: A4 landscape;
  }
}


Or something similar.
markbrown
Hi,

Prince has since added the "@supports" rule since this thread started, so you can use that to test for something specific to Prince. For example (picking a property at random):
@supports (-prince-image-magic: snap-to-integer-coords) {
    @page {
        size: A4 landscape;
    }
}


Mark

Edited by markbrown

bohwaz
Ah! I missed that, it's great! Thanks :)