Pixelmass: px als Einheit in Styleangaben

Lange Zeit schon gilt die Verwendung von px in Styleangaben, etwa bei der Festlegung von Schriftgrößen, als unfein. Nun gibt es verschiedene Gründe, die Sorge vor px als Masseinheit neu zu überdenken.

Alle modernen Browser haben mittlerweile leistungsfähige Zoom-Funktionen. Wenn die Anpassung für die zwei aktuellsten Browser einer Familie reicht, dann muß das Verhalten des alten IE 6 hier gar nicht mehr weiter betrachtet werden, px ist skalierbar, wäre sogar barrierefrei.

liquid layout?

Natürlich besteht die Sorge, nur mit Pixelangaben ein eher statisches Layout zu erhalten. Hier gibt es zwei Gegenargumente, zunächst zahlreiche letztlich nicht ganz verlässliche “liquid” layouts, deren abenteuerliches Floaten nur schwer vorhersehbar ist. Modernes HTML und CSS wird mitunter zur Herausforderung für aktuelle Browser, ist nicht mehr wartungsarm. Dann die Option, per JavaScript auf die Anforderungen der jeweiligen Browser zu reagieren, Styleswitcher einzusetzen.

Um die Möglichkeiten auch eher einfacher Mittel mal am konkreten Beispiel zu zeigen, eine Skalierung für den IE 6, basierend auf diesen Überlegungen aus dem Jahre 2003 zum Thema Web Typographie.

if(document.defaultCharset && !window.XMLHttpRequest && screen.availHeight >1000)
{
document.write('<style type="text/css">'+
'* html body  {zoom:'+
parseInt(document.getElementsByTagName('html')[0].currentStyle.fontSize)/12)+
';}';
document.write('<\/style>');
}

Zunächst wird sichergestellt, dass nur Internet Explorer bis zur Version 6 angesprochen werden. Dies geschieht durch den Test der JavaScript-Fähigkeiten verläßlicher als mittels Abfrage des user-agent, vgl. auch Browsererkennung durch JavaScript. Die mögliche Größe des Viewport kann an der Stelle auch noch geschätzt werden, auch um ggf. Stylevarianten anzubieten.

Dann wird die Styleeigenschaft fontSize des html-Element abgefragt, was ausser bei den IEs z.B. auch bei Opera möglich ist.
So erhalten wir die Information über die ausgewählte Scriftgröße. Falls nun der Bildschirm groß genug scheint, wird der body proportional zur Schriftvergrößerung angepasst.

Um die Sache noch halbwegs barrierefrei umzusetzen, wird hier auf Expressions usw. verzichtet. Somit gibt es keine Rutsch- oder Blinkeffekte beim Zoomen. Die Größenanpassung erfolgt einmal bei Aufruf der Seite, ein Verstellen der Schriftgröße wird dann aber auch nur beim eneuten Laden der Seite wirksam.