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

Oder ganz einfach: Mach dir die Ecken deiner Boxen so rund wie ein Toastbrot. Dass das wohl nicht immer so einfach ist, wie es sich anhört, wird der ein oder andere schon gemerkt haben. Ich war eigentlich wieder einmal zufällig auf dieses Thema gestossen und habe die besten Lösung einmal rausgesucht.

Nun gut, die gute alte Methode, das Ganze mit Bildern zu realisieren bleibt wohl immer die Beste, aber wohl nicht die Konfortabelste. Immerhin kann jeder gängige Browser Bilder anzeigen. Mit den CSS Methoden ist das schon etwas anders. Hier hat praktisch jeder Browser seinen eigenen Willen, auf jeden Fall bis sich CSS3 mal durchsetzt und jeder Browser mit dem gleich Befehl ansprechbar ist. Wie auch immer, auch für das gibt es Lösungen.

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.

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