@media print

[Gregor Traven]

Hi

When I use @media print in my css, the browser doesn't even consider the
values in this print section which were already defined furthermore in css.
For example: if I have h1 {font-size:25px} then h1 {font-size:10px} in
@media print section won't have any effect. Only the properties that haven't
been used in css work if I define them in @media print section of css. Why
is this so and can I do something to change it?

Thanks for answering

Gregor

 

[Jukka K. Korpela]

When I use @media print in my css, the browser doesn't even consider
the values in this print section which were already defined furthermore
in css.

I don't quite follow; what does "already defined furthermore" mean?

For example: if I have h1 {font-size:25px} then h1
{font-size:10px} in @media print section won't have any effect.

It depends on the order. When rendering on print media, both rules are
considered. Since they are otherwise equal, the one that comes later wins,
by CSS rules. The @media print thing does not, somewhat unintuitively,
affect the specificity.

So if you have

h1 { font-size: 25px; }
@media print {
h1 { font-size: 10px } }

(which is poor practice in an author style sheet - px units are not
suitable for setting font size)

then the font size for h1 is 10px on print media, 25px on other media.
If you swap the order, then the size is 25px for all media.

If you wish to make the print-specific rule take priority independently of
the order, use can declare it important:

@media print {
h1 { font-size: 10px !important; } }

 

[Toby Inkster]

When I use @media print in my css, the browser doesn't even consider the
values in this print section which were already defined furthermore in css.

URL?

 

[Gregor Traven]

I don't quite follow; what does "already defined furthermore" mean?


It depends on the order. When rendering on print media, both rules are
considered. Since they are otherwise equal, the one that comes later wins,
by CSS rules. The @media print thing does not, somewhat unintuitively,
affect the specificity.

So if you have

h1 { font-size: 25px; }
@media print {
h1 { font-size: 10px } }

(which is poor practice in an author style sheet - px units are not
suitable for setting font size)

then the font size for h1 is 10px on print media, 25px on other media.
If you swap the order, then the size is 25px for all media.

If you wish to make the print-specific rule take priority independently of
the order, use can declare it important:

@media print {
h1 { font-size: 10px !important; } }

Thanks very much, what you wrote answered my question perfectly.

Gregor