Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Vier CSS3-Tricks für sauberes HTML

Das Fundament für gute Webseiten ist gutes, semantisches HTML. Eric Eggert zeigt, wie man visuelle Effekte mit CSS anwenden kann ohne den Quellcode des Dokuments anzutasten.

Nichts ist mühsamer als sich durch den HTML-Code zu hangeln, nur weil man die Präsentation eines Elements ändern will. Eine der wichtigsten Herausforderungen des modernen Webdesigns ist es, das HTML richtig hinzubekommen und das heißt so simpel wie möglich bei gleichzeitig hohem semantischen Wert. Neue Browsergenerationen bieten uns mit besserer CSS-Unterstützung neue Möglichkeiten ohne Veränderungen am Markup die visuelle Gestaltung zu beeinflussen. Eine Beispiel-Seite zeigt Anwendungsmöglichkeiten.

1. Externe Links

Um externe Links auszuzeichnen kann man sehr einfach den Attribut-Selektor in CSS3 benutzen:

a[href^='http://'] {
    padding-right: 17px;
    background: url(extern.png) right no-repeat;
}
a[href^='http://www.webkrauts.de'],
a[href^='http://webkrauts.de'] {
    padding-right: 0;
    background: none;
}

Der erste Selektor sucht alle externen Links heraus und versieht sie mit einem Hintergrundbild. Absolute Pfade auf die eigene Domain müssen dann noch zurückgesetzt werden. Dies kann man auch für E-Mail-Links verwenden, wenn man ganz pfiffig sein will sogar mit Bild für den einzelnen Adressaten:

a[href^='mailto:'] {
    padding-right: 15px;
    background: url(mail.png) right no-repeat;
}
a[href^='mailto:john'] {
    padding-right: 15px;
    background: url(johndoe.png) right no-repeat;
}

Kompatibilität:

2. Gestreifte Tabellen

Gestreifte Tabellen sind eine tolle Idee, jede zweite Zeile mit einer Klasse zu versehen ist aber meistens auch mühsam, wenn man eine Zeile hinzufügen muss. JavaScript-Lösungen dazu gibt es einige, allerdings ist das :nth-child-Pseudoattribut in CSS schon weit verbreitet, so dass wir uns diesen Javascript-Aufruf für diese Browser getrost sparen können:

tr:nth-child(odd) {
  background-color: #9f9;
}
tr:nth-child(even) {
  background-color: #f9f;
}

Kompatibilität:

3. Spezielle Absätze

Oft soll auf die erste Überschrift ein besonderer Absatz folgen, der noch einmal als Einführung dient. Meist bedient man sich dann einer Klasse .intro um den Absatz anzusprechen. Das ist aber gar nicht nötig, wenn man den CSS2-Geschwister-Selektor (+) benutzt:

h2 + p {
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

Kompatibilität:

4. Abgerundete Ecke und Schatten

CSS3 kennt die Möglichkeiten per CSS abgerundete Ecken und Schatten zu benutzen, ohne irgendwelche Grafiken zu benutzen. Das spart nicht nur Arbeit sondern auch Serverzugriffe und Traffic. Momentan sind diese Eigenschaften mit Vendor-Prefix in modernen Browsern bereits verfügbar (Schatten im Firefox erst ab Version 3.1).

#sidebar {
    border: 1px solid #333;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
        border-radius: 15px;
    -moz-box-shadow: 5px 5px 15px #000;
    -webkit-box-shadow: 5px 5px 15px #000;
        box-shadow: 15px;
}

Kompatibilität:

Einige Worte zum Internet Explorer:

Alle hier verwendeten Kniffe funktionieren nicht im IE6, was schade aber nicht tragisch ist, da es sich nur um visuelle Verbesserungen handelt. Alle Informationen sind auch ohne CSS verfügbar, die hier angewendeten Regeln führen also zu einer Verbesserung der Nutzbarkeit für die Mehrheit der Benutzer der Seite und gehören zu den Darstellungsunterschieden mit denen man leben kann.

Border-radius und box-shadow sind Eigenschaften, die in den meisten Browsern noch nicht umgesetzt werden. Sind die abgerundeten Ecken von untergeordneter Bedeutung und mehr eine Stilfrage, so kann man sich mit der Angabe dieser Eigenschaften das Leben viel einfacher machen.