Die erste Version des Themes für dieses Blog ist nun aktiviert. Das Thema generiert HTML5 und verwendet einige CSS3 Techniken. Deshalb hatte ich erwartet, dass es momentan mit relativ wenigen Browsern funktionieren wird. Während der Entwicklung habe ich es eigentlich nur mit Safari auf dem Mac, iPhone und iPad getestet.

Bei den ersten Tests mit Firefox habe ich festgestellt, dass abgerundete Ecken (border-radius) und Verläufe (gradient) nicht dargestellt wurden. Warum Firefox immer noch die inzwischen ungültige Syntax für diese Eigenschaften verwendet, obwohl die aktuellen Standardentwürfe schon seit einiger Zeit die neue Syntax vorschlagen, ist mir ein Rätsel.

Mit IE7 habe ich erwartungsgemäß keine abgerundeten Ecken, keine Verläufe und keinen Schlagschatten. Die Hintergrundfarben für den Kalender wurden scheinbar nicht akzeptiert. Ansonsten bin ich aber schon etwas überrascht, wie gut die Darstellung im IE bereits ist.

Das Layout passt sich mit Hilfe von CSS Media Queries an die verschiedenen Bildschirmgrößen an. Der folgende Code zeigt das entsprechende CSS:

@media screen and (max-width:719px) {  /* small */
  ...
}

@media screen and (min-width:720px)
              and (max-width:959px) { /* medium */
  ...
}

@media screen and (min-width:960px) { /* large */
  ...
}

Abhängig von der Bildschirmgröße wird nun eines der drei Layouts gewählt. Das funktioniert in Safari, Chrome und Firefox sogar beim Verändern der Fenstergröße.