In diesem zweiten Artikel zur Verbesserung des eigenen CSS Schreibstils möchte ich mal etwas näher auf die Masse Em, Pixel, Points, Prozent und die selten gebräuchlichen Keywords zur Grössenbemessung von Schriftarten eingehen und ein paar Webdesignern auf die Hände klatschen.

Pixel (px)

Pixel sind wohl die meist gebrauchten Masse. Und genau deswegen steige ich mal hier ein. Pixel eignen sich hervorragend für statische Layoutelemente, wo man sie heute heute überall vermehrt hat. Da sich viele Webseiten darauf festlegen, zentriert angezeigt zu werden, kommt auch meist eine feste Pixelbreite zum Einsatz. Man umschliesst seine ganze Seite im Normalfall mit einem Container, der sich und seinen Inhalt dann flexibel anpassen lässt. Aus Tests weiss man, dass sich die Benutzer meist nur auf eine kleine Fläche des Bildschirms konzentrieren können. So sind voll dynamische, auf die ganze Browser Breite justierte Seiten nicht wirklich praktisch, da der Bereich, der mit den Augen eingefangen werden kann, so oder so zu gross ist.

Nun, Pixel sind also eine gute Sache, da sind wir uns einig. Jetzt verwenden aber viele Webdesigner und CSS Schreiberlinge Pixel für Schriftgrössen.

Probleme:

• Schriften lassen sich von alten Browsern nicht verkleinern und vergrössern, was den Benutzer einschränkt.
• Schriftgrössen justieren sich exakt in diese Pixelmasse was bewirkt, dass sie kleiner aussehen, als sie eigentlich sind im Vergleich zu anderen Schriftarten.
• Je nach Monitor und Einstellung der Kantenglättung sehen Schriftarten ganz anders aus.
• Pixelgrössen sind statisch. Sie lassen sich nicht durch Elternelemente beeinflussen im Gegensatz zu EM, Prozent und Keywords.

Dadurch, dass viele Webdesigner diese Punkte ignorieren, schaffen sie eine statische Umgebung, die spätere Anpassungen völlig unbequem lassen und dabei noch noch ältere Browser ausschliessen. Gut, da in letzter Zeit sowieso immer mehr Kontroverse und Boykott Aktionen gegen den Internet Explorer 6 statt finden, ist der von mir zweite genannte Punkt sicher nicht mehr eine grosse Diskussion wert.

EM

EM ist eher was Neues. Ja und genau deswegen hat’s der Bauer wohl auch noch nicht gefressen. EM heisst übrigens auch nicht Europa Meisterschaft. Ehrlich gesagt habe ich noch nicht rausgefunden, was EM in der Namensgebung genau bedeutet, aber ich würde mal so etwas wie Elastic Mass vermuten.

Wie auch immer, was man über EM wissen muss ist kurz gesagt: EM ist eine relative Masseinheit. Das heisst, sie passt sich seinem Elternelement an und ist so flexibel und dynamisch. EM eignen sich praktisch nur für Schriftarten. Dabei gilt die Regel: Beim normalen Browserstandard ist 1em = 16px. Setze ich als keinen Wert in meinem Body, werden Schriftarten in 16 Pixel angezeigt. So, nun scheuen sich viele vor dem Arbeiten mit EMs weil es wohl einfach schwer vorstellbar ist, wie z.B. 1.2em oder 2em aussieht, wenn ja 1em = 16px ist. Meine Güte, man könnte es ja ausrechnen, aber wer will das schon? Und hier kommt der Trick.

Setzen wir die Schriftgrösse unseres Body auf 62.5%, ist 1em = 10px. Warum? Ganz einfach. Da EM relativ ist und Body das oberste Element ist, passt sich die Grösse unserer EM Masseinheiten an.

1em = 16px = 100%
1em = 10px = 62.5%

Die Arbeit mit EM ist nun auch für jeden Pixelmeister kein Problem mehr. Denn 12px wären nun Beispielsweise 1.2em, oder 20px wären 2em.

body {
font-size: 62.5%
}

Vorteile:

• Kann verkleinert und vergrössert werden mit IE6
• Dynamisch/Elastisch
• Passt sich dem Elternelement an

Points (pt)

Points laufen auf das gleiche problem wie Pixel hinaus: Sie sind nicht beeinflussbar durch ältere Browser. Die pt Masseinheit sollte vor Allem für Druckerfreundliche Seiten oder speziell vorgefertigte Druckseiten auf Webseiten benutzt werden und für mehr nicht.

72pts = 1 Zoll = 2.54 cm

Warum wir Points nicht für Webseiten nutzen liegt klar auf der Hand. Die Unterschiede zwischen verschiedenen Browsern sind drastisch. Je nach Browser kann die Schriftart sogar Doppelt so gross erscheinen.

Prozent (%)

Wie die Prozent Masseinheit funktioniert muss man wohl nicht lange erklären. Hat ein Elternelemnt die Schriftgrösse von 20px, hat das Unterlement bei einer eingestellten Schriftgrösse von 50% noch eine Grösse von 10px.

Im produktiven Betrieb kommt die Prozent Schriftgrösse vor Allem dort zum Einsatz, wo sie sich per Eingabe des Benutzer flexibel vergrössern und verkleinern lässt. Sie ist ebenfalls abhängig vom Elternelement wie EM. Doch ist es sehr schwer mit % über eine ganze Webseite hinweg zu arbeiten. Es ist schlecht vorstellbar, wie gross diese % angaben sind, da sowohl Angaben hinter dem Komma die Schriftgrösse noch Feintunig verändert.

Eine beliebte Technik ist, die Body Schriftgrösse auf 62.5% zu setzen, um in den danach folgenden Elementen mit EM zu arbeiten (siehe Beschriebung zu EM).

Keywords

Keywords trifft man ehrlich gesagt nicht mehr so oft an. Mögliche Angaben sind xx-small, x-small, small, medium, large, x-large und xx-large. Weiter gibt es noch smaller und larger, welche mit den Font-Weight Eigenschaften bolder und smaller verglichen werden können.

Der Vorteil dieser Methode ist, dass die Schriftgrössen auf jedem Browser in etwa gleich gross sind. nachteile sind aber ganz klar die definierte Anzahl an Stufen, die unsere Schriftarten haben. Da wir uns ja meistens auf eine Methode von Schriftgrössen Angaben beschränken, hätten wir hier das Problem, das wir nur sieben Schriftgrössen zur Auswahl hätten. Das mag nicht schlimm sein in Anbetracht der Tatsache, dass wir für eine Webseite meist sowieso nicht mehr verwenden müssen.

Die Qual der Wahl

Die beste Auswahl macht man eindeutig mit EM. Sie sind modern, flexibel, vom Elternelementabhängig und lassen sich mit dem oben gezeigten Trick auch leicht anwenden. Es gibt also kein Schlecht und kein Gut. Jede der Masseinheiten hat seinen Platz in der richtigen Verwendung.

Schlecht sind aber sicher Webseiten, die für die Schriftgrösse jedes Elements eine Pixelmasseinheit definiert haben. Denn sie haben das Prinzip der Usability nicht verstanden die darin liegt, schnell und einfach alles anpassen zu können.

Tags: CSS, em, fonts, keywords, pixel, prozent, schriftgrössen, Webdesign | In der Kategorie CSS, Webdesign

Es gibt hunderte Englische solche Artikel, nicht nur über CSS. Und oftmals sind es wirklich sehr viel nützliche Tipps, die Leuten weiterhelfen, die nicht jeden Tag mit CSS unterwegs sind. Das Beste habe ich mal rausgepickt und einen deutschen Artikel dazu erstellt.

CSS Resets

CSS Resets sind ja eine ganz nützliche Sache. Sie setzen alle Standardwerte, die der Browser sich einfach zur Hilfe schon vorbastelt, auf Null zurück. Das hat den Vorteil, dass wir wirklich auf einem leeren Blatt Papier arbeiten können. Für Anfänger kann das aber auch gleichzeitig eine Blockade sein. Sie sind es sich oftmals nicht gewohnt, eine Klasse oder ID über mehrere Ebenen hinweg zu modifizieren.

Ich selber benutze immer Eric Meyer’s CSS Reset. Es beinhaltet eigentlich genau das, was man für Crossbrowser taugliche Webseiten benötigt.

Shortcode oder sortieren

Jetzt kommt etwas, das werden die wenigstens da drausen wissen. Auch die fortgeschrittenen Benutzer sind sich das nicht klar. Wenn der Inhalt einer Klasse oder ID nach dem Alphabet sortiert wird, nimmt man dem Browser einiges an Arbeit ab. Ob du es glaubst oder nicht, aber diese kleine Ordnungsstrategie bringt einen kleinen Geschwindigkeitsschub mit sich.


.klasse {
width: 50px;
background-color: #FFFFFF;
height: 100px;
background-image: url(images.jpg);
background-repeat: no-repeat;
}


Das wäre die ungeordnete Liste unserer CSS Attribute. Anders sieht es geordnet nach Alphabet aus:


.klasse {
background-color: #FFFFFF;
background-image: url(images.jpg);
background-repeat: no-repeat;
height: 100px;
width: 50px;
}


Noch besser ist es, Shortcode zu verwenden. Für mich zwar fraglich, was für den Browser jetzt einfacher zu Interpretieren ist, da er den Shortcode ja auch zuerst aufschlüsseln muss. Allerdings spart man sich mit der Shortcode Variante ja wieder Platz im CSS was wiederum zu einem kleineren CSS führt.


.klasse {
background: url(image.jpg) #fff no-repeat;
height: 100px;
width: 100px;
}


Übrigens: Der HEXCODE kann in drei Teile aufgeteilt werden. Farben wie #FFFFFF oder auch #66FFCC können ganz einfach abgekürzt werden:


#FFFFFF = #FFF
#66CCFF = #6CF


Gross- und Kleinschreibung spielen keine Rolle.

Die Sache mit Klassen und ID’s

Viel Verwirrung herrscht auch, wenn das Thema Klassen und ID’s angesprochen wird. Das ID’s nur einmal pro Seite benutzt werden können und Klassen mehrmals, wissen zwar die meisten. Dich in CSS sehen sie den Unterschied nicht. Dabei ist das Ganze recht einfach. ID’s werden mit einem “#” gekenntzeichnet, Klassen mit einem “.”, also einem Punkt.

Listenelemente

Listenelemente sind so vielseitig. Und trotzdem werden sie eher selten benutzt. Mit Listen lassen sich nicht nur diese realisieren, sondern wir können vertikale und horizontale Menüs realisieren, Newsloops gestalten, Sidebars, ja eigentlich alles was eine grössere Anzahl an Boxen benötigt, die nacheinander angeordnet werden müssen. Also am Besten beim nächsten Projekt mal überdenken, was ein <ul> und <li> alles anrichten kann. Es erleichtert die Arbeit.

Vergiss <table>, nimm <div>

Ok, ihr alten Hasen da draussen. Legt eure Tabellen nieder und euch wird nichts geschehen. Wer Heute immer noch mit Tabellen ganze Webarchitekturen aufbaut, gehört ins Altersheim. Ganz einfach ausgedrückt: Tabellen gehören verboten zum Layouten. Es ist so, als würde ich Microsoft Excel zum Zeichnen benutzen. Klingt konfus, aber es trifft es auf den Punkt. <div> wurde zum Layouten geschaffen und ist wesentlich flexibler. Auch wenn gerade viele Anfänger finden, mit diesen komischen <div> sei das Bauen einer Webseite unmöglich kompliziert, stellt sich das Ganze eigentlich als einfacher dar. Sehen wir uns die Fakten an: Wir brauchen um die Hälfte weniger HTML Code um den selben Effekt wie mit einer Tabelle zu erzielen. Wir sind fähig, das ganze Layout mit CSS zu beeinflussen und auf mehrere Seiten zu verteilen.

Wer aber grundlegende Gründe dafür braucht, damit er seine Tabellen in den Mülleimer wirft, kann sich natürlich auf andere Artikel beruhen.

Tables are dead, Tables Vs. CSS, CSS vs tables

Schnelles Debuggen mit TOOLS

Natürlich debuggt auch die hartgesottene Sorten von Codern ihre CSS in einer Live Version. Aber dazu benutzt man keinen grafischen Webeditor. Dafür gibt es Tools wie Firebug und Webdeveloper, die den Firefox Browser um diese netten Features erweitern.

Man kann schnell kleine Änderungen in CSS vornehmen und sieht am lebenden Example, was sie bewirken. Wer Safari 4 Beta benutzt kommt schon in den Genuss der eingebauten Web Developer Tools.

Mit !important Elternattributen überschreiben

Nun, jetzt haben wir eine ID als Elternelement und eine Klasse als Unterlement. Bekanntlich wissen wir, das Klassen schwächer sind als ID’s. Haben wir jetzt also in der Klasse ein selbes Attribut, das schon in der ID gesetzt wurde, wird unser Klassenwert einfach nicht angenommen. Doch mit !important können wir diesen herausheben und als wichtiger einstufen als der Befehl des Elternelements.


.klasse {
color: #000!important;
}


Multicolumn Layouts erstellen mit CSS

Dies ist vorallem ein Punkt, der kommt den Tabellenvergewaltiger gut. Die wissen nämlich nach dem Wechsel auf <div> meistens überhaupt nicht, wie sie jetzt ihre Layouts realisieren. Dazu gibts eine Hand voll Artikel:

• In Search of the Holy Grail
• Faux Columns
• Top reasons your CSS columns are messed up
• Litte Boxes (examples)
• Multi-Column Layouts Climb Out of the Box
• Absolute Columns

Danke fürs lesen

Das sind nur eine paar von möglichen Tipps, die ein wenig helfen können, deine Arbeit mit CSS zu verbessern. Es werden bestimmt noch mehr folgen. Hoffentlich hast du was neues gelernt.

Tags: CSS, shortcode, tipps, tricks | In der Kategorie CSS, Webdesign