Infos

Sie befinden sich aktuell in den linux-blog - Fa. anracon - Dr. Mönchmeyer Blog-Archiven für den folgenden Tag 17.6.2008.

Calendar
Juni 2008
M D M D F S S
« Mai   Jul »
 1
2345678
9101112131415
16171819202122
23242526272829
30  
Kategorien
Letzte Einträge
Links
Archive
Meta

Archive für 17.6.2008

Skalierbare Web-Seiten unter Firefox 2

17.6.2008 von rmo.

Mehrere unserer Webkunden haben explizit den Wunsch geäußert, das man Ihre Webseiten auch unter Firefox 2.0 skalierbar gestalten möge. Diesen Wunsch haben wir erfüllt. Es gibt aber einige Fallstricke, die wir hier kurz diskutieren wollen. Die Ausführungen sind vielleicht aber auch von generellem Interesse für diejenigen, die mit “em” als Größeneinheit statt “px” arbeiten.

Grundlagen
Die einheitliche (!) Skalierbarkeit aller Objekte einer Webseite im Firefox (vor Vers. 3.0) kann man durch zwei Dinge gewährleisten:

  1. Definition einer Standardschriftgröße im BODY-Tag nach dem Muster <body style=”font-family:…..; font-size:10px;”>
  2. Bemaßung aller Objektgrößen in den zugehörigen Style- oder Klassendefinitionen statt mit “px” mit “em”. Bsp.:
    <div style=”width:10.0em; height:20.0em;”>

Der Vorteil der Standardisierung auf die Schriftgröße 10px im Body-Tag ist eine vereinfachte Umrechnung:
Die “em”-Werte x 10 entsprechen in der nichtskalierten Seitenversion gerade dem herkömmliche Wert der Ausdehnung in Pixel.

Fallstrick 1: Sukzessive Mehrfachskalierung vermeiden!
Gibt man in einem Tag nicht nur die Geometriegrößen, sondern auch eine abweichende Fontgröße vor, z.B.
<div style=”position:absolute; width:6.0em; height:8.0em; font-size:1.2em; “>,
so wird das DIV keineswegs mit der Größe 60×80 dargestellt, sondern um einen Faktor 1.2 vergrößert. Es zählt immer die aktuelle Fontgröße, die für ein Tag gesetzt ist!

Gegenmittel: Um diesem Problem zu entgehen, kann man die Texte in <span>-Tags einbauen, für die man per CSS vorgefertigte Schriftgrößen definiert. Bsp:

<div style=”position:absolute; width:6.0em; height:8.0em; font-size:1.2em; “><span style=”font-size:12px;”>das ist der text im DIV<span></div>

Schwieriger ist das bei Formularelementen - hier muss man wirklich vorab Berechnungen zur resultierenden Größe anstellen. Formularelemente unterliegen aber ohnehin browserspezifischen Einschränkungen bzgl. der Darstellung. Ein Test in jedem Zielbrowser ist daher angebracht.

Fallstrick 2: Die minimale Schriftgröße im Browser
Hat der Anwender eine minimale Schriftgröße für seinen Browser eingestellt und unterschreitet (!) die im BODY definierte Standardschriftgröße die minimale Schriftgröße, so wird bei einer Seite, die konsequent mit “em”-Größeneinheiten designed wurde, die Geometrie insgesamt mit dem Faktor
“Minimale Schriftgröße des Browsers” / “Standardschriftgröße im BODY”
heraufskaliert.

Beachte: Selbst wenn die Schriftgröße im BODY nicht unter die minimale Schriftgröße des Firefox fällt, so kann doch für einzelne Tags eine andere kleinere Fontgröße definiert sein (s. Fallstrick 1). Für diese Tags wirkt sich dann die minimale Schriftgröße separat aus. Hat man das Vorgehen zu Fallstrick 1 nicht beachtet, so führt dies evtl. zu Schwierigkeiten bei der spezifischen Tagdarstellung oder gar der Seitendarstellung.

Fallstrick 3: Integrierte Flash-Movies
Typischerweise integriert man Flash-Movies W3C-konform mit SWFObjects (Version 1.5 oder 2.0) und verwendet ein zu Container-DIV. In der Version 2.0 wird der Container ersetzt, dessen Bemaßung wird aber übernommen). Hier ist es wichtig, dass der SWF-Film mit der Höhen- und Breiten-Angabe “100%” integriert wird. Dann werden die Maße des Containers beachtet - und wenn diese in “em”-Einheiten vorgegeben sind, so skaliert das SWF-Movie mit.

Wir wünschen viel Spaß beim Ausprobieren!

Eine Seite, die nach diesen Prinzipien von uns entworfen wurde, ist z.B.
http://www.med-aktiv.de

Geschrieben in LAMP / Webentwicklung | Keine Kommentare »

|