10 CSS-Tricks

13 Kommentare

Auf Evolt.org ist vor einigen Tagen ein Artikel mit dem Namen “Ten CSS tricks you may not know” (Trenton Moss) erschienen. Ich habe es mir erlaubt, es frei zu übersetzen und mit ein paar Links und Kommentaren zu erweitern.

1. Kurzschreibweise

In CSS-Kurzschreibweise habe ich bereits über dieses Thema berichtet. Es geht darum das man gewisse Anweisungen in CSS zusammenfassen und in verkürzter Form aufschreiben kann. Ein Beispiel:


#blabla {
color: #000000;
border-width: 1px;
border-style: solid;
border-color: #ff0000;
padding-top: 0.5em;
padding-right: 0em;
padding-bottom: 0.5em;
padding-left: 0em;
font-size: 2.5em;
line-height: 1.3em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana, sans-serif;
}

Eine ziemlich lange Anweisung. In Kurzschreibform sieht die aber so aus:


#blabla {
color: #000;
border: 1px solid #f00;
padding: .5em 0;
font: 2.5em/1.3em bold italic small-caps verdana,serif;
}

Anmerkung: wenn man die Schriftangabe zusammenfasst sollten auf jeden Fall die Angabe zur Größe und Schriftfamilie angegeben werden, da sonst die Standardangaben eingesetzt werden.

2. Mehrere Klassen in einem Element

Man hat die Möglichkeit einem HTML-Element mehrere Klassen zuzuweisen welche durch ein Leerzeichen getrennt werden müssen:

<body class="stil1 stil2 stil3">

Man kann auch eine ID und Klasse zuweisen:

<div id="navi" class="hinweis">

Anmerkung: wenn man mehrere Klassen einsetzt und sich die Anweisungen überschneiden bzw. miteinander kollidieren, dann hat die CSS-Anweisung den Vorang, die tiefer in der CSS-Datei notiert wurde.

3. Standardwerte für Rahmenangabe

Bei der Angabe von Rahmenwerten gibt man normalerweise den Rahmenstil, die Breite und Farbe an. Man muss es aber nicht machen. Pflicht ist nur die Angabe des Rahmenstils:

border: solid;

Hierbei entsteht für das jeweilige HTML-Element ein durchgezogener Rahmen. Für die Breite und die Farbe des Rahmens kommen Standardwerte ins Spiel. Bei Breite wäre dies medium (so um die 3 bzw. 4 Pixel) und bei der Farbe wäre dies die Schriftfarbe des jeweiligen HTML-Elementes.

4. !important wird von IE ignoriert

Normalerweise hat die CSS-Anweisung, die zuletzt in der CSS-Datei notiert wurde den Vorrang. Ausser man nutzt die Angabe !important am Ende der jeweiligen CSS-Angabe. Allerdings wird dies von Internet Explorer nicht unterstützt. Hier ein Beispiel:

margin-bottom: 3em !important; margin-bottom: 2em;

Alle modernen Browser, ausser IE, geben der ersten Anweisung den Vorrang, da sie durch !important als wichtig eingestuft ist. IE überschreibt die erste durch die zweite Anweisung.

Anmerkung: das wusste ich bis jetzt nicht. Evtl. ist das eine (wenn auch riskannte) Möglichkeit einer Browserweiche.

5. Image replacement

Dieses Thema kommt häufig vor wenn man für Überschriften etwas exotischere Schriften nutzen will bzw. wenn man befürchtet das viele Besucher diese Schrift auf ihrem System nicht haben. Dann nimmt man Grafiken für Überschriften:

<h1><img src="news.png" alt="Aktuelle Meldungen" /></h1>

Das ist soweit gut, allerdings ist es so das die Suchmaschinen den alt-Text nicht so hoch bewerten wie den normalen Text. Der Autor empfiehlt hier folgende Möglichkeit:

<h1><span>Aktelle Meldungen</span></h1>

h1 {
background: url(news.png) no-repeat;
}

h1 span {
position: absolute;
left:-2000px
}

Die Überschrift bekommt eine Hintergrundgrafik und den dazugehörigen Text der meilenweit, und somit quasi unsichtbar, auf der linken Seite ist.

Allerdings verstehe ich den Vorteil dieser Technik nicht. Ich würde eher folgendes bevorzugen (HTML-Code bleibt gleich):

h1 {
background: url(news.png) no-repeat;
}

h1 span {
display: none;
}

Auf Mezzoblue.com gibt es weitere Vorschläge zu diesem Thema. Wie im wahren Leben: viele Wege führen nach Rom :-).

6. Alternativen zum Box-Modell-Hack

Über dieses Thema habe ich schon in Fehlverhalten von IE im Boxmodell berichtet. Hier wird eine Lösung vorgestellt die auch in dem o. g. Bericht erwähnt wird. Es geht dabei prinzipiell um verschachtelte Boxen. Der äußeren Box gibt man die Breiten- und Margin-Angaben und der inneren Box die Rahmen- und Padding-Angaben.

7. Block-Elemente horizontal zentrieren

body {
text-align: center;
}

#box {
margin: 0 auto;
text-align: left;
}

Somit ist die Box horizontal zentriert. Die Angabe text-align: center; ist notwendig für die älteren Browser (z. B. IE 5 und 5.5). Die Angabe text-align: left; erreicht, daß der Text innerhalb der Box linksbündig ist.

8. Vertikales zentrieren

Dies ist imho eine Schwäche von CSS. Ich kenne keine wirklich richtig einfache und saubere Lösung um inhalte vertikal zu zentrieren. Hierbei sind die Layouttabellen im Vorteil. Eine relativ einfache Möglichkeit für einige Fälle wäre das ausnutzen von line-height (Zeilenhöhe). Nehmen wir mal an ein Bereich hat die Höhe von 2em, dann setzen wir einfach den Wert der Zeilenhöhe auf 2em und schon ist die Schrift zentriert.

Anmerkung: ich habe das noch nicht getestet, aber wenn das gut funktioniert, dann hätte man für einige Fälle eine einfache Lösung.

9. Positionieren innerhalb einer Box

Eine der Stärken von CSS ist das positionieren der Elemente. Es ist möglich (und manchmal auch wünschenswert) Elemente innerhalb einer Box zu positionieren.

#box {
position: relative
}

Nun ist jedes Elemnt innerhalb dieser Box relativi positioniert. Jetzt kann man z. B. Elemente innerhalb dieser Box auch absolut positionieren:

<div id="box"><div id="navi">Text</div></div>

#navi {
position: absolute;
left: 30px;
top: 5px
}

Die Navigation ist jetzt innerhalb der Box absolut positionert und hat einen Abstand von 30px nach links und 5px nach oben.

Anmerkung: die absolute und fixierte Positionierung habe ich sehr schnell verstanden, aber die relative Positionierung ist bis heute für mich ein Mysterium geblieben. Ich sehe den Nutzen in dieser Positionierungsart nicht.

10. Hintergrundfarbe über die gesamte Höhe

Eine der Schwächen von CSS ist die Kontrolle über die vertikalen Angaben. Nehmen wir mal einen klassichen Fall. Links die Navi (absolut positionert bzw. floatend) und daneben der Inhalt. Würde man den beiden Elementen eine andere Hintergrundfarbe zuweisen, dann würde sich die Farbe nur soweit vertikal ausweiten wie auch Inhalt vorhanden ist und nicht bis zum Ende des Bildschirms.

Abhilfe schafft hier das tricksen mit Hintergrundbildern. Einfach eine Grafik in gewünschter Breite erstellen, die Bereiche bestimmen und ihnen die Farbwerte zuweisen und zuletzt einen Streifen in voller Breite ausschneiden und als Hintergrund für den Inhalt angeben.

Wer sich nicht vorstellen kann was ich gerade hier verzapfe :-), der sollte sich diese Grafik mal anschauen. Es ist eine mögliche Variante.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter:

13 Kommentare

  2. Sorry für den “halben Kommentar”, Perun… Ich habe aus Gewohnheit wiedermal Textile statt HTML verwendet 🙁

    Ich habe bei mir einige Kommentare zu diesem Eintrag hier abgegeben, aber irgendwie habe ich Trackback mal wieder falsch eingeschätzt…

  4. Perun hat übersetzt
    In “Weekly Links” vom Freitag, habe ich Ihnen den Artikel “Ten CSS tricks you may not know” empfohlen, der sich in den letzten Tagen durch die Weblog-Gemeinde bewegt hat. Perun hat nun den Artikel “10 CSS-Tricks” veröffentlich, der eine freie Übersetzung des englischen Artikels bei Evolt.org ist.

    Mehr unter http://www.christoph-hoerl.de/weblog/weblog.php?id=28

  5. 10 CSS-Tricks
    Hui … heute ists aber designlastig hier. Aber gute, hilfreiche Links wollen eben gemerkt werden.

    Die Übersetzung der “Ten CSS tricks you may not know” müssen dabei unbedingt dazugehören.

    Es ist wohl unnötig an dieser Stelle und ferner auf Lese…

  6. Zu Punkt 5: bei display:none wird der Text afaik nicht von Screenreadern vorgelesen, beim Verschieben in den nicht sichtbaren Bereich hingegen schon.

  8. Feinfein.. dies ‘gebookmarkt’ und dann steh’n die Tipps immer zur Verfügung (bin zu alt, um mir das alles auswendig behalten zu können ;-).
    Apropos: das ‘Name’-Inputfeld für den Kommentar bei WordPress hat eine class-Zuweisung vergessen, deswegen das graue ‘Eingabeloch’ anstelle der anderen Flat-Felder.

  9. Naja, bei mir sieht das wohl anders aus … Hier hat das Name-Feld einen angenehmen blauen (“flat”) Rahmen, bei den anderen ist er schwarz. Liegt wohl daran, dass ich XP benutze 🙂

  12. […] so, da ich grad keine Zeit hab das ganze zu lesen wird’s erstmal hier gespeichert. So ganz vertrau ich den Bookmarks von meinem neuen Caminobrowser noch nicht die ersten 10 CSS-Tricks und die zweiten 10 Tricks. […]

  13. […] 10 CSS-Tricks: Trenton Moss’ Serie übersetzt und erweitert von Perun […]

Kommentare sind geschlossen.