Zu aller erst, sollte geklärt erden, dass nicht jeder Browser das gesamte Spektrum, welches CSS bietet, interpretieren kann. Es gibt da so einige Kandidaten, ich nenne hier nun keine Namen – und nein, es ist nicht nur der Internetexplorer, welche hier und da doch Probleme machen. Dies liegt an den verschiedenen Renderingengines, die verwendet werden. Hier unterscheidet man zwischen fünf Hauptgruppen – Trident, Gecko, Webkit, KHTML und Presto. Ich erspare mir jetzt eine Aufzählung, welcher Browser in welche Gruppe gehört, diese ist bei Wikipedia nachzulesen. Jedoch ergibt sich eingangs genanntes Problem schon aus der Vielfalt der Engines, da jede dieser den Code etwas anders interpretiert.

Die folgende Auflistung soll nun einige nette Ansätze, Lösungen und auch Spielereien zeigen, die mit CSS möglich sind. Nicht immer funktioniert dies in allen Browsern, aber viele zeigen auch gleich die notwendigen „Hacks“ damit es überall funktioniert.

CSS-Box mit abgerundete Ecken

Hier haben wir schon den ersten Kandidaten, der mit reinen CSS-Boardmitteln nicht in jedem Browser funktioniert. Zwar bietet CSS3 die Möglichkeit die Ecken von Elementen abzurunden, doch ist CSS3 leider noch kein Standart und wird nicht immer fehlerfrei interpretiert. Auch im momentanen Standart CSS2.1 gibt es diese Möglichkeit, allerdings hier nur über spezielle Optionen, welche nur zwei der genannte Engines ansprechen.

Eine schönere Lösung hat Ulf Theiss gefunden und zeigt, wie man dies mit Hilfe von Grafiken „simulieren“ kann und dafür gleich mal ein Tutorial in seinem Blog hinterlassen.

Tabellen mit CSS simulieren

Es ist ein offenes Geheimnis, ich mag keine Tabellenlayouts. Tabellen sollten nur genutzt werden, um eine tabellarische Auflistung zu zeigen und nicht um eine Webseite zu gestalten.

Im Prinzip kann selbst hier auf den <table>-Tag verzichtet und dieser durch einen <div> ersetzt werden.

Ausblick auf CSS3

CSS3 ist ja nun nicht erst seit gestern ein Thema im Netz, sondern schon seit geraumer Zeit. Warum dies immer noch nicht der Standart ist, der wirklich zu 100% von allen Browsern unterstützt wird – ich wage da nur zu spekulieren und das ist hier nicht zielführend.

Aber fünf der Nettigkeiten, die CSS3 so auf Lager hat, zeigt das Webdesignerdepot im Artikel 5 CSS3 Design Enhancements That You Can Use Today, welcher auch schon etwas älter, aber nicht minder aktuell ist.

Abgerundete Ecken auch im Internetexplorer

Hier ist nun eine der Lösungen, die abgerundete Ecken auch für den Internetexplorer ermöglicht. Ganz ohne Grafiken, jedoch mit etwas Einsatz von JavaScript. Wie das genau funktioniert, lest ihr im Artikel von Antonio Lupetti mit dem schönen Namen „CSS3 rounded corners for every browser? An alternative quick solution without headache„.

15 CSS Tricks that must be learned

Unter diesem vielversprechenden Titel stellt Lost in the Woods verschiedene Techniken im Umgang mit CSS vor. Angefangen bei Automargin über Text-Indent bis hin zur CSS-cross-browser Transparenz ist alles dabei. Alle 15 CSS-Tricks die man wissen sollte, sind im dazugehörigen Blog zu finden.

11 Klassische CSS-Techniken durch CSS3 ersetzt

Dies möchte ich natürlich keinem vorenthalten. Eine Übersicht, oder besser ein Vergleich „Gestern – Heute“. Also CSS2 zu CSS3. Wie hat man etwas mit CSS2 gelöst und wie ist dies mit CSS3 machbar. Eine schöne Auflistung von klassischen Techniken mit modernen Mitteln umgesetzt. Zu finden ist diese bei NetTuts+.

Das soll es auch mal wieder gewesen sein. Ich hoffe, es ist für den einen oder anderen unter euch etwas dabei gewesen. Vielleicht konnte ich ja auch zwei bis drei Leser von CSS begeistern. Ich würde mich freuen, wenn dem so wäre und dann lasst mich doch von euren CSS-Experimenten hören/lesen .-)

Eine Meinung zu “Lesestoff #2 – CSS-Tipps und Tricks

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>