Sven Rautenberg: Wo gelten Javascript-Definitionen (IE ist doof...)

Moin!

Zweiter Anlauf, nachdem ich eben noch einen Workaround versuchte... :)

Also: Ich habe eine Seite, auf der ich '@media screen' mehrere Layer übereinander positioniere und nacheinander zeige (zum Blättern per Mausklick). Dazu werden erst alle Layer per screen-CSS auf hidden gesetzt, und der erste Layer dann per Javascript angezeigt, wenn die Seite geladen ist.

Für den Druck gibts ein Extra-Stylesheet, welches alle Layer untereinander zeigt, so daß fortlaufender Text angezeigt wird - genau so, wie eine lange HTML-Seite auch aussehen würde (abzüglich ein paar Deko-Grafiken und Navigation, welches beim Drucken keinen Sinn macht. Außerdem ist die Schriftart größer ;) ). Das Print-CSS setzt dieselben Layer auf sichtbar.

Opera macht alles super: Die Screen-Darstellung zeigt jeweils nur einen Layer an, und die Druckdarstellung zeigt alle Layer untereinander an - egal, wohin ich geblättert habe.

Der IE 5 und 6 (vermutlich auch 5.5) verhält sich da unintelligenter.

Die Stylesheets für screen und print erkennt und verarbeitet er korrekt. Nur in einem einzigen Punkt schießt er über das Ziel hinaus: Er übernimmt den Status der Visibility, die ich auf der Screen-Darstellung per Javascript gesetzt habe, auch für den Druck. Das bedeutet: Im Druck wird für alle Layer Platz reserviert, aber nur der auf dem Bildschirm zuletzt angezeigte Layer wird auch tatsächlich angezeigt.

Frage: Wie kriege ich den IE davon überzeugt, daß er für die Druckdarstellung ausschließlich die Print-CSS benutzt und nicht noch die Styleänderungen von Javascript berücksichtigt?

Oder andere Frage: Wie kriege ich Javascript davon überzeugt, daß es nur die Styles für das Medium Screen ändert, nicht aber für das Medium Print. Denn wenn ich die Seite direkt lade und die IE6-Druckvorschau ansehe, dann hat noch kein Javascript einen Layer versteckt. Erst beim Blättern werden Layer per Javascript auf "hidden" gesetzt, was eben nicht nur auf screen wirkt, sondern auch auf print.

Grundsätzliche Frage: Muß der User-Agent beim Rendern von Seiten für verschiedene Medien, speziell Print, Javascript berücksichtigen? Opera scheint einfach unter Abschaltung von Javascript die Seite neu zu rendern (mit den richtigen CSS-Dateien). IE übernimmt einfach den status quo der Sichtbarkeiten. Wer hat Recht? Haben möglicherweise beide Recht, weil's vom W3C nicht definiert ist?

"Für sachdienliche Hinweise ist keine Belohnung in Höhe von 10.000 € ausgesetzt. Bitte wenden Sie sich nicht an die nächste Polizeidienstelle, sondern an das SelfHTML-Aufnahmestudio in Deutschland, in Österreich und in der Schweiz!" :)

- Sven Rautenberg

  1. Hallo,

    Frage: Wie kriege ich den IE davon überzeugt, daß er für die Druckdarstellung ausschließlich die Print-CSS benutzt und nicht noch die Styleänderungen von Javascript berücksichtigt?

    Vielleicht kann man mittels <body onbeforeprint="fkt1()" onafterprint="fkt2()"> eine Anpassung erreichen.

    MfG, Thomas

    1. Moin!

      Frage: Wie kriege ich den IE davon überzeugt, daß er für die Druckdarstellung ausschließlich die Print-CSS benutzt und nicht noch die Styleänderungen von Javascript berücksichtigt?

      Vielleicht kann man mittels <body onbeforeprint="fkt1()" onafterprint="fkt2()"> eine Anpassung erreichen.

      Bähhh. Nicht-Standard-Eventhandler passen mir gefühlsmäßig garnicht.

      Interessanterweise hat Microsoft genau mein Problem als Beispiel für die Anwendung genommen (http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeprint.asp). Vermutlich wissen die, daß sie dort ein Problem haben. <eg>

      Paßt mir trotzdem irgendwie nicht. Wäre schön, wenn's da einen Standard vom W3C gibt, gegen den Microsoft verstößt, dann hätten wir wieder einen Fall mehr für die Sammlung - und ich würde es einfach ignorieren. :)

      - Sven Rautenberg

  2. Hallo Sven

    Der Mozilla verhält sich in dem Fall genau so, wie der IE und da man stylesheets auch für ein Medium ändern kann, denke ich, dass es die beiden Browser richtig machen.
    Ein kleines Beispiel, wie man das Problem (W3C-Konform) umgehen kann:

    <html>
      <head>
        <title></title>
        <style>
     @media screen {
      #test {position:absolute; display:block; top:10px; left:10px; background-color:#FF0000}
     }
     @media print {
      #test {position:absolute; display:block; top:10px; left:10px; background-color:#00FF00}
     }
        </style>
      </head>
      <body onload="document.styleSheets[0].cssRules[0].cssRules[0].style.display = 'none'">
     <div id="test">test</div>
      </body>
    </html>

    Bei Laden wird der Divtag ausgeblendet. Erscheint aber trozdem in der Druckvorschau.
    Das ist sicher nicht die eleganteste Möglichkeit Stylesheets für ein bestimmtes Mediun an zu sprechen, aber ich habe mich mit dem Thema bislang nur am Rande beschäftigt.

    Das Beispiel habe ich nur auf dem Mozilla getestet (mangels IE)

    Grüße

    Daniel

    1. Moin!

      Der Mozilla verhält sich in dem Fall genau so, wie der IE und da man stylesheets auch für ein Medium ändern kann, denke ich, dass es die beiden Browser richtig machen.

      Naja, zumindest kann ich sowohl die eine als auch die andere Darstellungsweise nachvollziehen.

      Ein kleines Beispiel, wie man das Problem (W3C-Konform) umgehen kann:

      Feines Beispiel. Gefällt mir wesentlich besser, als die onbeforeprint-Variante. Zumal die wahrscheinlich für Mozilla unbekannt wäre. Proprietäre Programmierung ist für die Tonne. :)

      <body onload="document.styleSheets[0].cssRules[0].cssRules[0].style.display = 'none'">

      Sehr spannend, was es im DOM alles so gibt. Jetzt muß ich das 'nur noch' auf meine Situation ummünzen: Da werden je zwei Stylesheets für screen und print per <link> eingebunden, und möglicherweise noch spezieller Kram in <style>.

      Wo kann ich denn da näher nachforschen, bzw. wo hast du diese Info her? Google spuckt bei "document.styleSheets" ziemlich viel, aber auch ziemlich unkonkretes Zeugs aus.

      Danke soweit erstmal!

      - Sven Rautenberg

      1. Hallo

        Wo kann ich denn da näher nachforschen, bzw. wo hast du diese Info her? Google spuckt bei "document.styleSheets" ziemlich viel, aber auch ziemlich unkonkretes Zeugs aus.

        Die noch unvollständige Doku des von Mozilla unterstützten DOMs:
        http://www.mozilla.org/docs/dom/domref/

        Und die W3C empfehlung zum Zugriff auf StyleSheets.
        http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/

        Wobei letztere etwas unverständlicher aber dafür ausführlicher ist.

        Grüße

        Daniel