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.

Safari 3 Hack

Daran hat man sich schon gewöhnt: Alle Browser rendern ein wenig anders - haben etwas andere Metriken, und selbst wenn man alles absolut positioniert, sind kleine Unterschiede auszugleichen. Wer möchte, kann ja mal ein simples Formular mit mehreren div-, input- und textarea-Tags machen und sie so anordnen, dass sie alle genau untereinander liegen und das Ganze per CSS. Und dann mal im Firefox, im IE und im Safari anschauen und dann mal ausmessen, wo man so ankommt. Viel Spass dabei :)

Klar, man kann ein Javascript schreiben, das dann alles richtet. Aber eigentlich will man ja die Darstellung (Layout) nur per CSS richten. Dafür gibt es die CSS-Hacks. Kleine Ungereimtheiten zwischen den Browsern werden genutzt, um Browser-spezifische Angaben zu machen. Beispiel für ein FF/IE-Hack:

.class1 { width:200px; width:expression('202px'); }

Da der FF nichts mit dem expression-Ausdruck anfangen kann, nimmt er für width den Wert 200px an; der IE wiederum interprtiert width:expression und ändert, nachdem er zunächst für width 200px eingetragen hat, den Wert für width auf 202px ab. Alternativ kann der IE auch per bedingter Kommentierung sein CSS laden:

<!--[if IE]>
<style type="text/css">@import url(internet_explorer.css);</style>
<![endif]-->

Wenn man ein wenig googelt, findet man immer wieder Seiten, wo solche Wunderdinge beschrieben werden. Und auch für den Safari gibt es solche Hacks. Oft liest man von #-Zeichen, die man in das CSS hineinsetzt, die dann den Safari daran hindern, die besteffenden Anweisungen zu interprtieren. Leider funktioniert das ab Safari 3 nicht mehr! Die wohl zur Zeit beste Lösung ist auf eine propietäre Selector-Beschreibung zurück zu greifen (ist allerdings für Opera 9 auch zutreffend):

.class1 { width:200px; width:expression('202px'); } @media screen and (-webkit-min-device-pixel-ratio:0) { .class1 { width:205px; } }

Die @media ...-Eintragung enthält dann die spezielle Safari 3 CSS.