Im vorangegangenen, ersten Teil zu Media Queries ging es darum Referenzwerte zu beschaffen um die Unterstützung von CSS-Media-Queries in Browsern testen zu können. Jetzt will ich kurz das Testszenario erläutern.

Einfache Fälle

Im Grunde besteht ein einzelner Test lediglich aus einem DIV-Element mit einer ID und einem Stylesheet der die fragliche Mediaquery oder den Mediatype umfasst:

<div id="screen_test">
   <h2>Screen</h2>
   <pre>@media screen</pre>
</div>
<style>
   #screen_test {
      border: 3px inset black;
      margin: 1em 0px;
      min-height: 40px;
      text-align: center;
   }
   #screen_test h2:befor {
         content:'”Media Type '
      }
   #screen_test h2:after {
         content:'” is not applicable'
      }
   @media screen { 
      #screen_test { 
         background-color: green; 
         border: 3px outset black; 
         color:white; 
      }
      #screen_test h2:after {
         content:'” is applicable'
      }
   }
</style>

Wie man sieht ist da kein großes Geheimnis enthalten: ein wenig Farbe und textuelle Hervorhebung wenn die relevante Mediaquery anwendbar ist sind schon alles.

Variable Tests

Bei den Eigenschaften mit numerischen Wertebereich kommt zu dem beschriebenen Verfahren noch ein wenig Javascript. Damit und mit zusätzlichen Formular-Elementen lässt sich ein Wert, oder auch die gewünschte Einheit auswählen. Der zugehörige CSS-Block wird dann dynamisch erzeugt und dabei an die gewählten Werte angepasst.

Mit den gleichen Funktionen werden automatisch beim Laden der Testseite und bei Änderungen der Fenstergröße die Referenzwerte eingestellt. Wo diese Werte herkommen ist bereits Thema eines vorangegangenes Artikels gewesen.