css - ブラウザで print css を表示する

Question

通常の css で要素を検査するときと同じように、印刷 css を検査する方法を見つけたかったのですが、プラグインなどを探していました。

クロムで印刷をプレビューするときのように、要素を検査できる場所

@media print {
   p{color:red;}
   ..... my css
}
.sharebar {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 195;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

Answer 1

クロムでこれを行います：

1. 開発者ツールを開く
2. [DevTools のカスタマイズと制御] ハンバーガー メニュー ボタンをクリックします。
3. [その他のツール] > [レンダリング設定] を選択します。
4. [レンダリング] タブの [CSS メディアをエミュレート] チェックボックスをオンにして、[印刷] メディア タイプを選択します。

詳細な手順については、こちらを参照してください。

Answer 2

Firefox を使用している場合は、Web 開発者ツールバーを使用してこれを行うことができます (その他にも多くの優れた機能があります!)。

http://chrispederick.com/work/web-developer/

ツールバーをインストールした後、オプションは CSS -> Display Styles By Media Type -> Display Print Styles の下にあります。