All geek questions in one place

CSS @media print rule no longer works?

Previously, the following code works fine for both Firefox and Google Chrome, when I print to “hide” an element,

<!DOCTYPE html> <html><head><title>Test</title> <style type="text/css"> @media print { .noprint { display: none; } } </style> </head> <body> <span class="noprint">abc</span> </body></html>

But now this does not work for both browsers. However, if I switch to this,

 <!DOCTYPE html> <html><head><title>Test</title> <style type="text/css" media="print"> .noprint { display: none; } </style> </head> <body> <span class="noprint">abc</span> </body></html>

It will work in Firefox, but not in Google Chrome. Which solution works regardless of browser? (Or is there something wrong with my code?)

+7
source share
4 answers

If you use @media print, you need to add! important in your styles, or the page will use elements of inline styles.

eg.

 @media print { .myelement1, .myelement2 { display: none !important; } }
+8
source

You do not know what the problem is with Google Chrome, but today I again tested the version of Google Chrome 31.0.1650 , the solution with < style media="print" > works well.

And the "@media print" rule still doesn't work.

+3
source

"@media print" and < style media="print" > work fine on Chrome 39.0.2171.95 (64-bit) Mac OS and Firefox 34.0.5 Mac OS

0
source

"@media print" && Lt; style media = "print"> version 76.0.3809.100 (Official assembly) does not work. only style media = "print"

-1
source

Source: https://habr.com/ru/post/958717/

More articles:


All Articles