Как увидеть печатные СМИ CSS в Firebug?

Firebug-отличный инструмент для отображения экрана media CSS для некоторых элементов HTML, но есть ли способ посмотреть на CSS для печати? Или есть какой-либо другой инструмент для просмотра CSS печатных носителей?

9 68
css printing firebug print-css

9 ответов:

Я бы никогда не ожидал, что это сработает, но это так. Установите - оба-бета 1.5 Firebug и веб-разработчика. Когда вы выбираете печать css от веб-разработчика, инструменты в Firebug внезапно работают на новой версии печати страницы. До сих пор я не нашел никаких проблем с запуском обоих одновременно.

31

Как насчет панели инструментов веб-разработчика?
https://addons.mozilla.org/en-US/firefox/addon/60
при установке перейдите в CSS - > Display CSS by media type - > Print

35

Firefox теперь не нужен firebug.

  1. запустите панель инструментов разработчика, нажав Shift+F2
  2. тип media emulate print

тип media reset для того, чтобы вернуться к стандартному виду.

32

используйте плагин веб-разработчика. Затем вы можете выбрать из меню CSS, какой носитель вы хотите, чтобы страница отображалась как.

4

вы можете взглянуть на панель инструментов webdeveloper - она позволяет выбрать, какой CSS вы хотите видеть. В сочетании с firebug, это должно быть возможно, чтобы увидеть печатные СМИ CSS.

3

в Firefox (и другие браузеры), вы можете увидеть статическое отображение таблицы стилей печати с помощью предварительного просмотра. Это далеко не так полезно, как панель инструментов веб-разработчика, но она также может помочь вам понять, что будет напечатано.

3

на самом деле, имейте в виду, что вы можете увидеть @media print CSS, когда вы этого не ожидаете.

как чтобы использовать:

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

...и поэтому можно было бы ожидать, что панель CSS в Firebug каким-то образом покажет:

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

но вместо этого он показывает CSS, как если бы @media print на самом деле активный, как:

#sidebar, #nav, [..], div.vote {
  display: none;
}

(см. также соответствующий отчет о проблеме:панель CSS не имеет @media Интерфейс.)

3

Edit 2 после прочтения Арьян ' s ответ, я понимаю, что это решение не адресует правильно сайты, использующие (или злоупотребляющие)@media print CSS. (См. пример ниже.) Но я думаю, что это решение по-прежнему действует как "неидеальный быстрый и грязный трюк", прежде всего для кода, который вы написали, и что вы заранее знаете, что у него этого нет.

С Firebug, вы также можете редактировать <link rel="stylesheet" type="text/css" ...> и <style> теги для вашего удобства.

например, вы можете переключить оригинал

<link rel="stylesheet" type="text/css" media="print">

до

<link rel="stylesheet" type="text/css" media="screen">

и браузер будет применять его. Вам также придется отключить экран-только те.

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

изменить 1 этот трюк предлагает мне использовать JavaScript для автоматизации этого...

(отказ от ответственности: я буду использовать JQuery для простоты. Я не эксперт по Javascript.)

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

обратите внимание, что по умолчанию media и "screen" (w3.org -медиа атрибут). Это может быть использовано в кнопку предварительный просмотр страницы. Единственным недостатком является то, что вы должны перезагрузить страницу, чтобы восстановить первоначальный вид.

как указано выше, это решение не работает с html-кодом, как это, потому что стиль внутри @media print не будет применяться браузером:

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>
3

панель инструментов веб-разработчика имеет один большой недостаток для отладки CSS: каждый раз, когда вы обновляете страницу, она возвращается к таблице стилей экрана.

то, что я обычно делаю в эти дни, - это временно переключить носитель таблицы стилей печати на экран во время разработки, а затем переключить его обратно перед выходом в эфир.

2