Gibt es eine Möglichkeit, dasselbe CSS-Stylesheet für Druckmedien und das Standardlayout zu verwenden?

Question

Ich suche nach einer Möglichkeit, das gleiche Stylesheet für Printmedien zu verwenden wie für das Standardlayout auf dem Bildschirm. Der Vorteil für mich wird sein, dass ich nicht jedes Mal zwei Dateien aktualisieren muss, wenn ich das CSS aktualisiere. Ich würde lieber ein Stylesheet haben und spezielle Regeln für Printmedien festlegen, indem ich sie irgendwie beschreibe ... Das ist vielleicht nicht möglich, aber ich dachte, ich würde die Frage da draußen stellen.

Answer 1

Es gibt diese Syntax, obwohl ich ehrlich gesagt nicht wissen, ob es in allen Browsern unterstützt wird (sollte es sein):

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

die media part of the CSS2 standard at W3 See.

Answer 2

Wenn Sie möchten, dass die Stile auf allen Medien gleich sind, definieren Sie einfach die gängigen Stile im Stylesheet als normal (d. H. Nicht in einer Medienregel) und legen Sie dann die medienspezifischen Elemente in die relevanten Regeln.

Wenn Sie einige Stile wollen auf eine Teilmenge von Medien anwenden, können Sie es wie folgt tun:

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

Hier ist ein Link auf die relevant W3C page