web-dev-qa-db-ja.com

Firebugで印刷媒体のCSSを表示する方法は？

Firebugは、HTML要素のスクリーンメディアCSSを表示する優れたツールですが、印刷メディアCSSも見る方法はありますか？または、印刷媒体のCSSを表示する他のツールはありますか？

cssprintingfirebugprint-css
68
Janko Mivšek

これが機能するとは思っていませんでしたが、機能します。 FirebugとWeb Developerの1.5ベータ版をインストールします。 Web Developerからprint cssを選択すると、Firebugのツールがページの新しい印刷バージョンで突然動作します。これまでのところ、両方を同時に実行しても問題は見つかりませんでした。

31
clintm

Web Developer Toolbarはどうですか？
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（および他の一部のブラウザー）では、印刷プレビューを使用して印刷スタイルシートの静的表示を確認できます。 Web開発者ツールバーほど便利ではありませんが、印刷される内容を理解するのに役立ちます。

3
alex

Web開発者向けツールバーをご覧になるとよいでしょう-表示するCSSを選択できます。 firebugと組み合わせて、印刷媒体のCSSを見ることができるはずです。

3
tomjen

Edit 2Arjan の answer を読んだ後、この解決策が正しく対処していないことがわかります@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">

ブラウザがそれを適用します。また、画面専用のものを無効にする必要があります。

もちろん、これはスタイルシートへのリンクが非常に少ない数ページのみをクイックチェックしたい場合にのみ役立ちますが、少なくとも追加のプラグインをインストールする必要はありません。

Edit 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 attribute ）であることに注意してください。これをボタンで使用して、ページのプレビューを表示できます。唯一の欠点は、元のビューを復元するためにページをリロードする必要があることです。

上で指摘したように、このソリューションは@media print内のスタイリングがブラウザーによって適用されないため、このようなhtmlコードでは機能しません。

<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。

SOが使用 のように：

[..] @ media print {＃sidebar、＃nav、[..]、div.vote {display：none;}} [..]

...したがって、FirebugのCSSパネルが何らかの形で表示されることが予想されます。

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

しかし、代わりに@media printは次のように実際にアクティブです。

＃sidebar、＃nav、[..]、div.vote {
 display：none; 
}

（関連する問題レポートも参照してください： CSSパネルには@media UIはありません 。）

3
Arjan

ただし、Web開発者ツールバーには、CSSデバッグの1つの大きな欠点があります。ページを更新するたびに、画面スタイルシートに戻ります。

最近私がしがちなのは、開発中に一時的に印刷スタイルシートのメディアをスクリーンに切り替え、それをライブに戻す前に元に戻すことです。

2
wheresrhys