Heya,

Is it possible to target specific browsers with different css? The case im facing is that it appears Chrome and Safari dont add additional header/footer information to the page, so I can place content within the @footer without having to worry. However firefox prints its own header and footer (including url, page title and page numbers) which is then cutting off content ive placed in the @footer.

Ideally i would be able to add something like:

@-moz-document url-prefix() {

or

@supports (-moz-appearance:none) {

to identify the browser, and tailor the page margins accordingly, but neither of these solutions are working. At the moment i am just supporting the worst case, which is making the bottom of the pages on Chrome and Safari look massive. Is this even something i can do?

The @supports approach sounds like a good place to start, is the rule failing to apply in Firefox?

@mikeday, it appears any rules declared inside the @supports declaration are ignored

Just when printing, or all the time? Do you get different results when checking other properties?

@mikeday, it consistently ignored all rules i added inside the @supports block when viewing the html as a pdf (im unsure what other times you mean). I will experiment with some other properties and let you know

I just tested this in Firefox and it worked as expected:

<style>
@supports (color: red) {
    p { color: red }
}
@supports (-moz-appearance:none) {
    body::before { content: "We are in Firefox!" }
}
</style>
<p>Hello</p>

The paragraph shows up red in Firefox and Chrome (and Prince!) but the extra message only shows up in Firefox.

@mikeday oh wow ok, I was using it like this:

@supports (-moz-appearance:none) {
    @page: {
        margin-bottom: 20mm;
    }
}

Is it that i was nesting the @page style?

@page isn't followed by a colon unless it's a page class like @page:left or @page:right, is that it?

@mikeday, thats my fault, i free typed instead of copy paste, true code is:

@supports (-moz-appearance:none) {
  @page {
    margin-bottom: 30mm;
  }
}

This seems to work for me, at least when I change the margin-bottom from 1mm to 100mm and back and print from Firefox the resulting PDF appears to have more space at the bottom.

Unfortunately browsers don't support many other properties on @page like borders, but it's a start.

@mikeday perhaps my css preprocessor is doing something nasty to the code coming out of scss. Thanks for all your help, ill come if i can prove that its not something to do with my implementation!

@mikeday, out of curiosity, do you know at which version this feature might have become supported by Prince? Im wondering if I'm using one thats particularly out of date (im on v11.1)

Edited 21 Oct 2020 by haxxxton

Prince 11 supports @supports, although you might want to upgrade to Prince 13 for other new features and improvements.

Prince does not support the -moz-appearance property of course.