Webkrauts » Vier CSS3-Tricks für sauberes HTML

Hauptmenü

Suche

Newsfeeds

Trackbacks

Artikel

Vier CSS3-Tricks für sauberes HTML

24. Türchen des Webkrauts-Adventskalenders

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:

Standard	IE<7	IE7	IE8b2	FF2	FF3	SF3.1	OP
CSS3	nein	ja	ja	ja	ja	ja	ja

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:

Standard	IE<7	IE7	IE8b2	FF2	FF3	FF3.1b	SF3.1	OP
CSS3	nein	nein	nein	nein	nein	ja	ja	ja

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:

Standard	IE<7	IE7	IE8b2	FF2	FF3	FF3.1b	SF3.1	OP
CSS2.1	nein	ja	ja	ja	ja	ja	ja	ja

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:

Standard	IE<7	IE7	IE8b2	FF2	FF3	FF3.1b	SF3.1	OP
CSS3	nein	nein	nein	nein	nein	ja	ja	nein

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.

Zum Autor

Eric Eggert glaubt an das offene und für jeden zugängliche Web. Deshalb setzt er sich im W3C mit dem neuen HTML5-Standard auseinander und hilft der BAD TF dabei gute Beispiele für Barrierefreie Webseiten zu entwickeln. Er bloggt (von Zeit zu Zeit) auf yatil.de.

Info:: Vier CSS3-Tricks für sauberes HTML ist Beitrag Nr. 490
Autor:: Eric Eggert am 24. Dezember 2008 um 07:00
Kategorie:: Adventskalender 2008

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Ein würdiger Beitrag zum 24. im Kalender.
Sehr schön, danke!

Kommentar von Jeff - 24. Dezember 2008 um 09:00
2.

Vielen Dank für den Beitrag!
Wo kann man eigentlich weitere Möglichkeiten von CSS3 nachlesen?

Ich wünsche euch allen ein wunderschönes, besinnliches Weihnachten 08!

Kommentar von Alex - 24. Dezember 2008 um 09:46
3.

Hallo Eric, ich muss zugeben, dieser Artikel hier ist ein echtes Highlight im diesjährigen Kalender. Zwar kannte ich das meiste, aber das mit den gestreiften Tabellen ist mal ne coole Sache!

Kommentar von Moritz Gießmann - 24. Dezember 2008 um 10:24
4.

Schön, dass euch der Beitrag gefällt.

Alex: CSS3.Info ist eine aktuelle Quelle, wo auch über die Ideen der Browser-Hersteller berichtet wird.

Euch allen ein schönes Weihnachtsfest!

Kommentar von Eric Eggert - 24. Dezember 2008 um 10:29
5.

Guter Beitrag mit guten Tipps

Besonders Nr. 3 (Spezielle Absätze) war mir noch nicht bekannt!

Danke und frohe Weihnachten!
Ernest

Kommentar von Ernest - 24. Dezember 2008 um 10:31
6.

Vielen Dank Eric! Genau sowas habe ich gesucht.

Kommentar von Alex - 24. Dezember 2008 um 22:56
7.

Zwei Anmerkungen:

1. Meines Wissens kennen die nicht-IEs bereits rel="external", was für a-Elemente gesetzt werden kann. Dieses dann über CSS anszusprechen ist auch mit den weiter Verbreiteten CSS-2.1-Attributselektoren möglich.

2. Mindestens bei border-radius würde ich statt dem -webkit-Präfix den -khtml-Präfix verwenden, damit man auch die wenigen Konqueror-Benutzer noch miteinschließt.

Kommentar von Daniel - 25. Dezember 2008 um 22:14
8.

Sehr interessanter Artikel! Danke!

Kommentar von Zippo - 27. Dezember 2008 um 13:46
9.

Gefällt mir

Kommentar von Tobias - 28. Dezember 2008 um 11:55
10.

Konnte FF nicht schon immer abgerundete Ecken darstellen?

Bisher wusste ich immer, dass nur IE dauert Probleme mit abgerundeten Ecken hat

Kommentar von dimido - 3. Januar 2009 um 00:19
11.

Auf diese Seite gibts auch schöne Blindtexte

http://www.newmediadesigner.de/

Kommentar von Bogus - 6. Januar 2009 um 12:43
12.

@dimido
Ja, der Firefox kann schon aber der Version 2 runde Ecken anzeigen. Hat aber in der 2er Version noch Treppeneffekte. In der Version 3 siehts ordentlich aus. Die komplette Unterstützung inklusive Schatten gibt es wohl erst ab Version 3.1.

Kommentar von Tim - 10. Januar 2009 um 17:37
13.

Hoffen wir, dass wir Nutzer unsere Browser so schnell wie möglich aktualisieren, damit die aktuellsten Browser diese Möglichkeiten von CSS3 sinnvoll nutzen können. Ralph

Kommentar von Ralph - 24. Januar 2009 um 09:26
14.

Echt guter Artikel. Die Externe-Links Formatierung ist wirklich hilfreich. Jaja und immer der IE…

Kommentar von Alex - 13. Februar 2009 um 02:47