Samstag, 4. Februar 2012

HTML5 Cross Browser Polyfills

Eine schöne Sammlung von Javascript Bibliotheken um älteren Browsern fehlende Fähigkeiten nachzurüsten, findet sich auf den Wiki-Seiten der Modernizr-Bibliothek auf Github.

Media Queries

Ich bin letztens darüber gestolpert, dass per Media Query eingeschränkte Stylesheets einer HTML-Seite auch dann geladen werden, wenn die Query gar nicht zutrifft. Das Verhalten mag richtig sein, da sich die Bedingungen der Media Queries dynamisch ändern können, es stört jedoch genau dann wenn sich sie Stylesheets explizit ausschließen, bzw. auf bestimmten Zielgeräten nie auftreten können. Eine Möglichkeit dieses Problem zu umgehen wäre die Modernizer.load Methode. Damit können externe Dateien abhängig von der Gültigkeit eines Modernizr Tests (z.B. einer Media Query) geladen werden.
Modernizr.load({
  test: Modernizr.mq('only screen and (max-width: 640px)'),
  yep : 'css/small.css',
});
Das Problem das das Dokument erst einmal ohne stylesheet angezeigt wird, kann man umgehen, indem man den Body im Quellcode auf visibility:hidden; und dann im geladenen Stylesheet auf visibility:visible setzt. Damit wird die Seite erst bei geladenen Stylesheet angezeigt. Das könnte man dann auch schöner animieren.