css - 印刷メディアとデフォルト レイアウトに同じ CSS スタイルシートを使用する方法はありますか?

Question

デフォルトの画面レイアウトと同じスタイルシートを印刷メディアに使用する方法を探しています。私にとっての利点は、CSS を更新するたびに 2 つのファイルを更新する必要がないことです。スタイルシートを 1 つ用意して、何らかの方法で印刷メディアに特別なルールを指定することを希望しています... それは不可能かもしれませんが、質問をそこに出そうと思いました。

Answer 1

スタイルをすべてのメディアで同じにしたい場合は、スタイルシートで共通のスタイルを通常どおり (つまり、メディア ルールではなく) 定義してから、メディア固有の要素を関連するルールに入れます。

いくつかのスタイルをメディアのサブセットに適用したい場合は、次のようにすることができます:

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}

関連する W3C ページへのリンクは次のとおりです。

Answer 2

次の構文がありますが、すべてのブラウザーでサポートされているかどうかは正直わかりません (サポートされているはずです)。

@media print {
    body {
        background: #fff;
        color: #000;
    }
    /* etc */
}

W3 の CSS2 標準のメディア部分を参照してください。