Eigentlich gehört auch dieser Artikel zur "Blog mit Django"-Reihe, aber er ist letztendlich so allgemein, dass ich mir das in der Überschrift mal gespart habe. Nachdem ich ja beim letzten Mal bereits einige grundlegende Sachen zum Vorgehen bei der Umsetzung eines Design in XHTML/CSS geschrieben habe, will ich in diesem kleinen Post ein paar Tipps zeigen, die einem das Leben beim CSS-Layout einer Seite sehr viel einfacher machen können.
Dabei soll es nicht nur um Coding-Tipps gehen, sondern ich werde auch ein paar nette Tools zeigen, mit denen sich schnell und einfach CSS-Eigenschaften und ihr Verhalten im Browser anzeigen lassen. Denn nicht ist nervige als ein irgendwie gelayoutetes Element, von dem man nicht wirklich weiss, woher seine Angaben stammen.
CSS-Angaben allgemein
Für den allgemeinen Aufbau von CSS-Dateien gibt es bereits eine große Anzahl von Formatierungstipps und Vorschlägen zu Strukturierung. z.B. hier. Mir geht es jetzt vielmehr darum, dass welche Angaben man allgemein zu jeden Element machen sollen, um später besseren Überblick zu haben.
Es ist sehr hilfreich, wenn man allen eigenen Angaben, folgende Definition grunsätzlich für alle Elemente vorneweg stellt.
* {
margin: 0;
padding: 0;
border: 0;
background-repeat: no-repeat;
outline: none;
}Diese Angaben gelten ab da für jedes Element, das man im Folgenden per CSS formatiert. Aber warum sollten für alle Elemente gleiche Eigenschaftsn gelten?
- padding & margin: Alle Browser haben für jedes Element eine Standardformatierung im Bauch. Diese ist allerdings nicht bei allen gleich und weicht teilweise nervenaufreibend viel von den anderen ab. Ein Paradebeispiel ist der untere Rand, den der IE6 an FORM-Elemente unten anhängt. Im Layout sieht man später also nur einen unnötigen Absatz, dessen Herkunft man nur vermuten kann. Deshalb, einfach grundsätzlich alle Abstände für alle Element erst einmal reseten und später kontrolliert wieder herstellen.
ACHTUNG: Man muss natürlich auf Abstände für P, H1, H2... usw. wieder herstellen. Deshalb vielleicht gleich zu Anfang direkt margin-bottom: 1em für alle angeben. - border: Bei den Rändern ist dieser Reset vielleicht nicht ganz so nötig, kann aber kaum schaden. Da man vielfach für die Umsetzung eines Designs sowieso ein jedem Rand kleine Veränderungen vornehmen muss, kann man diese auch gleich kontrolliert machen und läuft so nicht Gefahr doch auf einen kleinen browserspezifischen Rand zu stoßen.
- background-repeat: Bei den meisten Designs sind die Hintergründe, die sich nicht wiederholen sehr viel häufiger, als die mit standardmäßiger Wiederholung. Deshalb ist es praktisch, wenn man dies mal gleich zu Anfang festlegt und später nur noch die Position des Hintergrunds justiert. Noch praktischer: Sollte man die Hintergrunddefinition irgendwo mal vergessen haben, bleibt der Fehler möglichst unauffällig, da kein automatischer Repeat lustige Muster erzeugt.
- outline: Diese Eigenschaft ist warscheinlich etwas streitbar. Grundsätzlich ist sie immer gut, wenn man komisch formatierte Links für Klickbereiche verwendet. Sie blendet den gestrichelten Rahmen um Links, nach einem Klick aus. So ist es dann nicht weiter auffällig, wenn man einen Link über die komplette Seitenbreite zieht o.ä., nur um einen bestimmten Effekt zu erreichen.
Formularelemente
Neben der allgemeinen Schriftendefinition, die man im html/body vornimmt, sollte man definitiv auch diese Schriftendefinition für alle FORM-Elemente vornehmen. Sonst hat man nämlich später den hässlichen Fall, dass z.B. die TEXTAREA einen fixed-width-Font verwendet und das somit nicht unbedingt mehr ins Layout passt.
input, textarea, select {
font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, Helvetica, Verdana, sans-serif;
background-color: #333;
font-size: 0.95em;
border: 1px solid #202020;
padding: 3px;
color: white;
}Hier sieht man dann auch, dass man padding und border nun explizit definiert. Die sind ja sonst auch für die FORM-Elemente ziemlich browserspezifisch sind. Bei manchen Browser kann es übrigens nötig werden das ganze auch für OPTIONs mit zu definieren. Ich meine mich erinnern zu können, dass irgendeiner der Better Browsers (Mozilla, Safari, Opera) das sonst nicht ordentlich tat.
Eigenschaften übergreifend definieren und kombinieren
Häufig will man z.B. mehrere Elemente definieren, die ähnliche Eigenschaften haben. Beispielsweise verschiedene Links mit unterschiedlichen Icons. Dafür bietet es sich an, nicht viele Angabe für diese Icon-Links immer neu zu machen, sondern einfach eine Klasse A.icon anzulegen, die sich dann mit verschiedenen iconspezifischen Klassen zu einem tatsächlich Icon-Link kombinieren lassen.
a.icon {
padding-left: 22px;
display: block;
height: 16px;
}
a.download {
background-image:url(../images/icon-package.gif);
}
a.page {
background-image:url(../images/icon-page.gif);
}So lässt sich Code und damit Platz sparen und Änderungen sind redundanzfrei. Will man einen solchen Link dann in HTML erzeugen. Kombiniert man einfach beide Klassen in den class-Angabe zum jeweiligen Link. <a href="#" class="download icon"> und hat es damit sogar noch schön lesbar.
Dieses Vorgehen lässt sich analog natürlich auch auf andere Tags übertragen. Kurz drüber nachdenken und ne Menge Code und Nerven sparen :)!
Tools
Zum Schluss dann noch ein paar Tipps für den Bereich Tools. So gibt es nämliche einige Softwares, die einem die nervige Durchprobiererei oder das Abmessen von Elementen ersparen können.
CSS Viewer (Firefox-Plugin)
Der CSS-Viewer ist meine absolut meistgenutzte CSS-Coding-Hilfe. Mit ihm erhält man ein kleines "Zeiger"-Tool, mit dem man über ein bestimmtes HTML-Element fahren kann und dann seine CSS-Eigenschaften angezeigt bekommt.
Das ist insbesondere praktisch, wenn man Seiten in em-Fontgrößen setzt und somit keinen wirklich Pixel/Punktwert für die Schriftgröße angeben kann (Designer fragen immer mal wieder danach) Grundsätzlich ist dieses Tool aber auch geeignet, um auf fremden Seiten mal kurz auszukundschaften, "wie hat er das gemacht"? Denn es zeigt ja nicht nur die eigenen CSS-Eigenschaften an, ohne dass man das Stylesheet überhaupt aufmachen und lange suchen muss.
XyleScope (Mac)
Ich hatte das in den Top 10 der MacOS-Programme schon erwähnt, weil ich dieses Tool einfach für eines der besten Mac-Tools halte. Insbesondere auch deswegen, weil ich noch nichts vergleichbares für Windows gefunden habe.
Dieses Tool zeigt einem die CSS-Kaskade für ein markiertes Element an. D.h. man sieht sämtliche Überschreibungs- und Neudefinierungen für ein bestimmtes CSS-Elemente innerhalb der CSS-Definitionen. Schwer zu beschreiben, ein Beispiel: Man hat z.B. ein UL mit normalem list-style und Rändern definiert. Danach allerdings ein UL.arrow gebaut, welche keine Ränder hat und Pfeile vor den Listenpunkten anzeigt. XyleScope zeigt also an, das im Basis-UL der Rand definiert wurde, welcher dann im weitern Prozess von dem UL.arrow wieder wegdefiniert wurde. Sehr hilfreich insbesondere bei längeren Kaskaden.
XScope (Mac)
Dieses Tool ist quasi ein für Webdesigner optimiertes Bildschirmlineal. D.h. man spart sich für das abmessen von Abständen einen Screenshot und das öffnen in einem Grafikprogramm. Außerdem kann man mit XScope verschiedene ViewPorts von Browsern simulieren, so dass nicht mehr tatsächlich alle Browser durchtesten muss, um zu sehen, wir sich das Design in verschiedenen Umgebungen verhält. Leider ist auch dieses Tool mac-only, wobei es auch für Windows einige nette Bildschirmlineal gibt. Ich habe damals häufig CoolRuler verwendet. Welches zumindest die Basisfunktionalität für umsonst liefert.
CSSEdit (Mac)
Das letzte "Tool" ist kein eigenständiges Programm, sondern vielmehr ein Programmbestandteil. Und zwar die Live-Preview von CSSEdit. Diese kann alle Änderungen, die man CSS macht in Echtzeit in der Webseite darstellen. Bei CSS-Änderungen geht das sogar ohne einen versteckten Reload. Man kann also Dinge hier durchaus durch Ausprobieren so justieren, wie es am besten passt. Die neue Version 2.0.2 reagiert sogar auf die Änderung von lokalen Dateien. D.h. wenn man gerade an Templates arbeitet und im Live-Preview eine HTML-Datei auf hat, dann wird diese im Live-Preview automatisch reloaded, wenn man die Datei neu abspeichert. Sehr cool!
Beim nächsten Mal in der "Blog mit Django"-Reihe soll es dann auch endlich losgehen mit ein wenig Django-Programmierung. Es wird um grundsätzliche Schritt zur Installation und zur Einrichtung der ersten Django-Applikation gehen.
Vorher: Blog mit Django: Design+Konzept
Vorher: Blog mit Django: XHTML & CSS
Nachher: Blog mit Django: Installation und Datenmodelle
Nachher: Blog-Features für Django
Comments
na dann freu ich mich schon mal auf django und das es dann endlich los geht damit! ^^
gruß
marte
Sehr hilfreiche Informationen/Tipps zu CSS - ich hab da immer so meine Schwierigkeiten
gehabt - vielen Dank.
Meiner Meinung fehlt allerdings noch Firebug für den FF.
Schöner Blog.
Ich bin erst Firebug-Fan geworden, nachdem ich das hier geschrieben habe. Aber wo Du recht hast, hast Du recht :)! Alles Gute für das eigene Django-Blog, ich sehe, es wird!