Обнаружение поддержки фонового изображения и фонового цвета при печати из браузера

При печати страницы из браузера она ссылается на таблицу стилей print.css, объявленную с помощью media="print". Браузер отключает некоторые правила CSS, такие как background-image и background-color, в некоторых браузерах есть возможность их включить.

Как сказано в этом ответе, невозможно переопределить это поведение из код страницы.

У меня есть два вопроса по этому поводу:

  • Is there any documentation or good reference about these printing rules ? For example:
    • Which CSS rules are disabled ?
    • Может ли Javascript что-то сделать на странице перед печатью?
  • Есть ли способ обнаружить браузер в режиме печати с помощью Javascript, а затем создать изящную систему деградации?

javascript browser css printing graceful-degradation
person ldiqual    schedule 17.05.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

То, как браузеры печатают страницы, является чем-то вроде черного ящика; Я не смог найти каких-либо конкретных ссылок.

Во всех основных браузерах есть параметры печати для «сжатия» веб-страницы до бумажной страницы (включено по умолчанию) и для печати фоновых изображений и цветов (по умолчанию отключено). Большинство пользователей оставят эти значения по умолчанию как есть, даже если они знают, что эти параметры существуют. Я не видел, чтобы браузеры «отключали» какие-либо другие правила CSS при печати.

Firefox и IE поддерживают onbeforeprint и onafterprint, поэтому вы можете определить, когда выполняется печать с помощью JavaScript, хотя очевидно, что это не кросс-браузерное решение.

Большинство корректировок, необходимых для печати, можно выполнить с помощью CSS (либо в отдельной таблице стилей печати, либо в виде блока @media print { ... } в вашей основной таблице стилей):

  • На CSS-Discuss Wiki есть хорошая страница о том, сколько вы можете контролировать с помощью CSS.

  • Я предлагаю взглянуть на стили печати из HTML5 Boilerplate в качестве хорошей отправной точки.

  • Если у вас есть фоновые изображения, которые необходимо распечатать, вы можете включить на страницу элементы <img>, скрыть их с помощью display: none, а затем сделать их видимыми с помощью display: block (или inline) в CSS для печати.

Если вам нужно серьезно изменить страницу для печати, я предлагаю создать отдельную версию страницы только для печати, а не пытаться внести коррективы с помощью JavaScript.

person Jeffery To    schedule 19.06.2012

arrow_upward
0
arrow_downward

Не уверен насчет первого пункта, но для обнаружения браузера в режиме печати можно сделать то же самое, что и для экрана. Либо используйте Modernizr и условно добавьте классы для поддерживаемых функций, затем создайте целевые правила CSS, например:

body.whateverfeature .yourrule { }

или, если вы хотите протестировать только IE, используйте что-то вроде h5bp:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

person BaronVonKaneHoffen    schedule 18.05.2012
comment
Это не совсем то, о чем я просил. Мне нужен способ определить браузер в режиме печати (да, print.css будет работать, но мне нужно изменить DOM, а CSS не может этого сделать). В IE есть событие onbeforeprint, но есть ли эквивалент в других браузерах? Это тема, которая делает Google немым :S - person ldiqual; 19.05.2012