Die Maßeinheit "em" und dynamische Breiten |
|
Donnerstag, 7. August 2008
|
||
|
Diesen Beitrag widme ich der viel zu oft unterschätzten Maßeinheit "em". Nicht nur Schriften können damit dynamisch skaliert werden, auch die komplette Website. Und das ist gut für die Barrierefreiheit.
Jeder weiß, was ein Pixel ist - nämlich ein Bildpunkt auf dem Monitor. Im Webdesign werden Pixel gerne für statische Layouts verwendet. So kann die Gesamtbreite der Website exakt festgelegt und Abstände definiert werden. Mit Pixel kann man zudem noch der Schrift die gewünschte Größe verpassen. Bei der Schrift sind die 10 Pixel im folgenden Beispiel übrigens die maximale Höhe der einzelnen Zeichen. Manche Zeichen sind nicht ganz so groß wie andere, das kleine "a" hat weniger Höhe als ein "g" oder ein "h". Nimmt man aber z.B. den untersten Punkt des "g" und den obersten des "h" und zählt die Pixel wird man auf die Zahl 10 kommen. Hier die passende und sicher jedem bekannte CSS-Definition:
Eine solche Pixelangabe wird für gewöhnlich als absolut bezeichnet. Ich möchte mich in diesem Beitrag aber auf ein anderes Maß beziehen, nämlich ein Relatives. /!\ ACHTUNG! Die 10 Pixel im oberen CSS funktionieren nur im Firefox Browser. Der Internet Explorer unterstützt hier keine festen Pixelangaben. Stattdessen einfach folgenden Wert einsetzen: font-size:62.5%; Diese 62.5% entsprechen 10 Pixel und funktionieren in allen Browsern. Prozent (%) ein relatives Maß Viele nutzen statt der absoluten Pixel gerne Prozente. Abhängig von der Breite oder Höhe der zur Verfügung stehenden Fläche wird das Maß bestimmt. Ist mein Body der Website z.B. 800 Pixel breit und ich sage einem DIV es soll 50% breit sein, wird der Browser ein 400 Pixel großes DIV daraus machen. em - noch ein relatives Maß Zurück zum eigentlichen Thema. "em" ist wie Prozent (%) relativ. Also passt sich dem an, was vorher irgendwo definiert wurde. Im Gegensatz zur Prozentangabe bezieht sich em jedoch auf die Schriftgröße. 1em sind also 10 Pixel, weil oben im CSS-Beispiel gesagt wurde, die Schriftgröße des Bodys ist 10 Pixel. Folgerichtig sind dann 2em -> 20 Pixel. Oft sieht man die Angabe "em" bei Schriftgrößen-Formatierungen:
Hier definieren wir, dass eine H1-Überschrift 1,5 mal so groß sein soll wie der restliche Text - also 15 Pixel. Man kann hier mit Kommawerten arbeiten, diese werden dann aber mit einem Punkt getrennt - CSS ist wie so vieles in der IT-Welt einfach amerikanisch. 20em für mein DIV bitte! Seltener als die Verwendung für Text findet man die Verwendung für Grundelemente. Man kann diese Maßeinheit auch für Breiten und Höhen innerhalb der Website nutzen. Ein kleines Beispiel verdeutlicht alles: Meine Internetseite soll 800 Pixel breit sein. Darin gibt es einen Header der ist so breit wie die Internetseite aber nur 100 Pixel hoch. Darunter gibt es links eine Navigation, die 200 Pixel breit sein soll und der Content-Bereich der die restlichen 600 Pixel füllt. Dem Beispiel wegen verzichten wir mal auf Margin und Padding-Werte. So sieht das dann im CSS aus, wenn wir die Breiten und Höhen dynamisch vergeben:
Wir haben 10 Pixel im Body stehen - damit ist es recht einfach zu arbeiten ohne gleich den Taschenrechner auspacken zu müssen. Wir möchten jetzt noch, dass die Schriftart im Content nicht ganz so klein ist und setzen deswegen die Font-Size auf das 1,2-fache von 10 Pixel, sprich 12 Pixel. (Das clear:left unter Navigation und Content fehlt hier, daran muss natürlich noch gedacht werden). Achtung keine Vererbung! Das oben definierte H1-Element befindet sich später logischerweise im Content. Obwohl wir dem Content eine neue Schriftgröße gegeben haben wird das H1-Element was sich ja normalerweise darauf bezieht, in diesem Fall sich nicht darauf beziehen. Die Schriftgröße von H1 bleibt nach wie vor 15 Pixel. Das em bezieht sich nämlich immer auf den letzten, verwendeten, absoluten Wert mit dem die Schriftgröße angegeben wurde. Da im Content die Schriftgröße nicht absolut sondern wieder relativ angegeben wird, orientiert sich H1 nicht daran. Wofür braucht man das? Sicher wird man jetzt etwas grübeln, wofür der ganze Umstand gut ist. Alles ist relativ aufgebaut. Ändern wir im Browser die Schriftgröße wird sich jetzt nicht nur die Schrift vergrößern, sondern auch die komplette Website. Setzt der Browser beim ersten Schritt der Schriftvergrößerung diese von 10 Pixel auf 12 Pixel, wird z.B. die Breite der Website, die sich ja um das 80-fache daran orientiert nicht mehr 800 Pixel, sondern 960 Pixel breit sein. Ebenso verhalten sich alle anderen bis jetzt definierten Elemente. Relative Inhaltselemente Bilder und andere Inhaltselemente können ebenfalls mit "em" definiert werden - dann vergrößern diese sich auch. Sieht gerade bei Pixelbildern nicht immer wirklich schön aus - aber andererseits nützt ein kleines, scharfes Bild niemanden etwas, wenn er es gar nicht richtig erkennen kann, was bei Sehbehinderten, die die Vergrößerungsfunktion hauptsächlich nutzen, durchaus passieren kann. Warum die ganze Arbeit? Mein Browser macht das automatisch In der Tat vergrößert der Internet Explorer ab Version 7 und Firefox ab Version 3 die komplette Website von sich aus. Bilder werden ebenso mit vergrößert, wie DIVs, Tabellen und Schriften. Browsernutzer mit älteren Versionen jedoch genießen diesen Luxus noch nicht. Man muss selbst abwägen ob man sich diese Mühe für seine Internetnutzer macht - es schadet der Barrierefreiheit aber in keinem Fall. Links Stadt Frankfurt - Eine Seite mit "em"  Kommentare (4)
|
||
| Letzte Aktualisierung ( Freitag, 22. August 2008 ) | ||
| < Zurück | Weiter > |
|---|
