Как посмотреть печатные СМИ CSS в Firebug? - PullRequest
Новая
       32

Как посмотреть печатные СМИ CSS в Firebug?

68 голосов
/ 19 апреля 2009

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

Ответы [ 9 ]

35 голосов
/ 19 апреля 2009

А как насчет панели инструментов веб-разработчика?
https://addons.mozilla.org/en-US/firefox/addon/60
после установки перейдите в CSS -> Показать CSS по типу носителя -> Печать

32 голосов
/ 02 ноября 2016

Firefox теперь не нуждается в firebug.

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

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

31 голосов
/ 16 декабря 2009

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

4 голосов
/ 19 апреля 2009

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

3 голосов
/ 22 мая 2012

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

С помощью 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 голосов
/ 02 мая 2010

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

Как SO использует : 

[..]@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;
}

image

(См. Также отчет о проблемах: Панель CSS не имеет @media UI .)

3 голосов
/ 19 апреля 2009

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

3 голосов
/ 19 апреля 2009

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

2 голосов
/ 19 апреля 2009

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

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

...