Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Vier CSS3-Tricks für sauberes HTML

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:

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.

Kommentare

Jeff
am 24.12.2008 - 09:00

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

Permanenter Link

Alex
am 24.12.2008 - 09:46

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!

Permanenter Link

Moritz Gießmann
am 24.12.2008 - 10:24

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!

Permanenter Link
Eric Eggert

Eric Eggert (Autor)
am 24.12.2008 - 10:29

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!

Permanenter Link

Ernest
am 24.12.2008 - 10:31

Guter Beitrag mit guten Tipps :)

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

Danke und frohe Weihnachten!
Ernest

Permanenter Link

Alex
am 24.12.2008 - 22:56

Vielen Dank Eric! Genau sowas habe ich gesucht.

Permanenter Link

Daniel
am 25.12.2008 - 22:14

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.

Permanenter Link

Zippo
am 27.12.2008 - 13:46

Sehr interessanter Artikel! Danke!

Permanenter Link

Tobias
am 28.12.2008 - 11:55

Gefällt mir :)

Permanenter Link

dimido
am 03.01.2009 - 00:19

Konnte FF nicht schon immer abgerundete Ecken darstellen?

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

Permanenter Link

Bogus
am 06.01.2009 - 12:43

Auf diese Seite gibts auch schöne Blindtexte

http://www.newmediadesigner.de/

Permanenter Link

Tim
am 10.01.2009 - 17:37

@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.

Permanenter Link

Ralph
am 24.01.2009 - 09:26

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

Permanenter Link

Alex
am 13.02.2009 - 02:47

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

Permanenter Link

Die Kommentare sind geschlossen.