Zum Basteln

ecsstender verspricht moderne CSS Eigenschaften für jeden Browser zugänglich zu machen

20 Typografie Plugins für WordPress

jQuery Einstieg: Selektoren, Filter und Traversing

Eine Liste mit Tools rund um Typografie im Webdesign

Von Photoshop zu HTML: Das ultimative Guide

Mozilla und das Web Open Font Format WOFF

Eigene Formularfelder im WordPress Backend

Mootools Floom: Der etwas andere Bilder Slide Effekt

Tools

Google Chrome: Jetzt auch für Mac erhältlich. Developer Release

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.

Schon witzig. Was wir zwar immer wussten aber selten sagen durften: Microsoft legt nicht Wert auf Qualität sondern auf Vermarktung. So spielt es gar keine Rolle, ob ihr Browser grottenschlecht ist und nicht mit der Konkurrenz mithalten kann, solange man die Konkurrenz einfach nicht in einen Vergleich mit einbezieht.

Die Fakten

Um nicht länger um den heissen Brei zu reden. Hier kommen die Tests.

Den Acid 2 Test überstehen alle Browser ohne Probleme. Das will aber noch nichts heisen.

Beim Acid 3 Test sieht das Spielchen schon etwas anders aus. Vor ein paar Wochen erst war ich an der Stelle ein sehr erstaunter Mensch über den absolut hervorragenden Acid 3 Test des Safari 4 Beta. Mit 100 von 100 Punkten steht er an der unübertrefflichen Spitze. Wie es mit dem IE8 aussieht… Vielleicht schaut man besser nicht hin.

So sehen die Ergebnisse illustriert und gegenübergestellt aus. Der IE8 hängt bei sagenhaften 21/100 Punkten fest. Ach du grüne Neune. Was kommt da nur noch auf uns zu.

Der CSS3 Selectortest. Genau das, was wir brauchen. Der IE8 wurde schliesslich im Jahr 2009 released, also sollte er doch perfekt damit umgehen können. Das zumindest denken sich einige von euch. Die Wirklichkeit sieht aber anders aus. Wir benutzen den CSS Selektor Test von css3.info.

Firefox 3.0 ist mir klar, warum er fast höhengleich mit IE8 liegt. Die wirkliche Harmonie zu CSS3 wurde erst in der 3.1 Alpha integriert. Trotzdem ist es erschreckend, dass IE8 an den einfachsten Selektoren scheittert:

Zum Vergleich: Auch Firefox 3.0 hat eben noch seine Macken, welche aber in der 3.1a ausgebügelt werden. Safari hingegen scheint wieder der Perfektionist zu sein. Und nicht vergessen: Es handelt sich um ein beta Produkt.

Was heisst das nun konkret für uns? Es kommen schmerzhafte Jahre auf die Webdesigner zu.

Der Javascript Benchmark. Der Sunspider Javascript Test ist dafür wie geschaffen. Hätten wir Google Chrome in unseren Test involviert, wäre er ganz vorne. In diesem Fall ist es aber wieder der Safari, der zeigt wie es geht. IE8 liegt hier erstaunlicherweise nicht schlecht, obwohl Microsoft mehr Wert auf sein JScript legt. Firefox 3 hat sehr schlecht abgeschnitten. Aber in 3.1a scheinen diese Probleme schon behoben.

Fazit

IE8 ist ein Browser aus dem Jahr 2009. Auf jeden Fall rein Releasetechnisch. Aber rein “Technisch”technisch hat der IE8 genau das erreicht, was ich erwartet habe, nämlich einen grossen haufen Müll, der uns doppelte Arbeit beschehrt. Es scheint schwer für Microsoft zu sein, an den aktuellen Standards anzuknüpfen.

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.

Die Mitspieler

Die Anzahl der Browser, die abgerundete Ecken per CSS unterstützen ist relativ klein: Opera ab 9.5, Firefox ab 3.1a, Konqueror und Safari, der schon früh gelernt hat mit weichen Kanten umzugehen.

Nun muss man aber für praktisch jeden dieser Browser ein Attribut setzen. Das sieht dann in etwa so aus:

.meineKlasse {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
}
Der Webkit Befehl ist zur Interpretation der abgerundeten Ecken für Safari und Opera. Moz, errät man schon fast, ist alleine für Mozilla und KHTML für Konqueror. Dabei wird die KHTML Methode wohl am meisten kompatibel zu CSS3 sein, laut aussagen.

In CSS3 gäbe es übrigens noch eine weitere Methode, mit Bildern zu arbeiten. Mit einem Befehl ist es nun möglich, mehrere Bilder innerhalb einer DIV zu positionieren. So könnte man sich schnell 4 Ecken rendern und als Bild auf die vier Ecken des DIVS zuweisen.