CSS: @media print

Eigentlich ist es schon ein alter Hut über die CSS-Format-Definitionen für unterschiedliche Ausgabe-Medien nachzudenken, wenn ... ja wenn nicht gerade mal wieder ein Problem damit verbunden wäre.

Wozu braucht man überhaupt alternative CSS-Formate? Zum Beispiel, um das Layout zurechtzurücken, weil beim Drucken das Seitenverhältnis des Ausgabemediums "Papier" meist hochkant (Portrait) statt wie beim Bildschirm quer (Landscape) normal ist. Oder weil man transparente Bilder hat, deren Transparenz beim Ausdruck schlicht in schwarz oder weiß umgesetzt wird und auf die man daher beim Ausdruck gerne verzichten möchten (display:none). Oder weil man seine Adresse noch schön auf den Ausdruck platzieren möchte, also noch etwas hinzufügen möchte, was auf dem Bildschirm nicht drauf ist. Oder oder oder...

Bei einem meiner Projekte habe ich die Textausgabe in einen Bereich geschrieben, der sich dynamisch an die Fenstergröße anpasst (und einen Scroll-Schieber hat, wenn der Text zu groß wird). Ist ja eigentlich ganz einfach: Man legt einen Event onload in den body-Tag und fragt die Bildschirmgröße mit window.innerHeight bzw. document.documentElement.clientHeight ab und setzt die style.height-Eigenschaft des Bereichs auf einen entsprechende Wert:

wh=window.innerHeight || document.documentElement.clientHeight;
h=(675>wh)?500:wh-150;
document.getElementById('content').style.height=h+'px';

Geht passabel in allen aktuellen Browsern. Und nun wird es spannend! Beim Ausdruck wird natürlich nur der Inhalt ausgedruckt, der in dem Bereich auf dem Bildschirm auch sichtbar ist (wie so ein Screenshot). Will man den ganzen Text ausdrucken, weil das Papier ja auch hochkant genug Platz hätte, dann müsste man für den Ausdruck eine CSS-Format-Definition @media print mit einer größeren Höhe (height) für diesen Bereich anlegen bzw. eventuell auch eine mit kleinerer Höhe für den @media screen. Aber wie macht man das, den Style für eine Ausgabe dynamisch zurecht zu schneidern?

Zunächst die Information, dass man nicht nur auf den Style eines DOM-Elements zugreifen kann, sondern auch auf die Stylesheet-Objects. Leider wiedermal Browser spezifisch. Kurze Übersicht über die Methoden und Attribute findet man hier. Das Konzept und Beispiele findet man hier.

Nun noch die "missing-information", wie man das mit den @media-Zuordnungen macht. Vorher noch kurz die Anmerkung, dass man den <style>-Tags bzw. dem <link>-Tags id-Attribute zuordnenen kann und so etwas einfacher die Referenz herstellt:

if (isie) { // isie muss man irgendwo als Funktion schreiben
   s=document.styleSheets['default'];  // default ist die id der style-Eintragung
   s.cssText+='@media screen {#content,{height:'+h+'px;}}';
   s.cssText+='@media print {#content{height:1000px;}}';
   }  
else {
   s=document.getElementById('default').sheet;
   s.insertRule('@media screen {#content{height:'+h+'px;}}',s.cssRules.length);
   s.insertRule('@media print {#content{height:1000px;}}',s.cssRules.length);
   }

Damit hätte man für IE und FF eine Lösung. Andere Browser hab ich nun nicht ausprobiert.