it-swarm.com.ru

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

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

68
Janko Mivšek

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

31
clintm

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

35
Mads Mobæk

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

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

Введите media reset для возврата к стандартному виду.

32
Alexander Chzhen

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

4
tvanfosson

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

3
alex

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

3
tomjen

Редактировать 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 - атрибут media ). Это можно использовать в кнопке, чтобы показать предварительный просмотр страницы. Единственным недостатком является то, что вам необходимо перезагрузить страницу, чтобы восстановить исходный вид.

Как указывалось выше, это решение не работает с 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
Alberto

На самом деле, имейте в виду, что вы можете увидеть @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 UI .)

3
Arjan

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

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

2
wheresrhys