Die meisten Kunden erwarten, dass ihre Webseiten auf allen Browsern so identisch wie irgend möglich aussehen. Sollten also alle Webauftritte so gestaltet sein? Nein, ich denke nicht.
In den Statistiken, der von miradlo betreuten Seiten, liegt der Anteil Besucher mit dem IE6 zwischen 5% und 30%. Zur Zeit bleibt ernstzunehmenden Webautoren, daher nichts anderes übrig, als dafür zu sorgen, dass auch der Internet Explorer 6 noch lesbare Seiten anzeigt. Damit wird ein Browser unterstützt, der inzwischen sechs Jahre alt ist; eine Ewigkeit im Web.
Auf den miradlo-eigenen Seiten setzen wir daher immer mal wieder Techniken ein, die z.B. der IE 6 nicht versteht. Einige Techniken sind problemlos nutzbar, da sie auf die Browser, die sie nicht nutzen, keinen schädlichen Einfluss haben. Auf modernen und fortschrittlichen Browsern bieten manche dieser Techniken zusätzliche, komfortable Möglichkeiten. Wollte man diese Variationen browserübergreifend nutzen, so wären sie nur mit deutlichem höherem Aufwand lösbar.
Textschatten mit text-shadow
Der aktuelle
CSS 3- Entwurf sieht die Implementierung vieler interessanter Eigenschaften vor. Obwohl CSS 3 noch nicht verabschiedet wurde, bieten einige aktuelle Browser bereits die ein oder andere geplante Eigenschaft. Manche Eigenschaften sind jedoch nicht neu,
text-shadow gab es bereis in CSS 2, interpretiert wurde es bis vor kurzem ausschließlich vom Safari (für MAC) und dem Konqueror (für Linux). Die aktuellen Operaversionen unterstützen diese Eigenschaft jedoch ebenfalls.
Screenshot von uteles blog, die Überschriften sind mit text-shadow formatiert
Textshadow detailliert
Runde Ecken im Firefox
Auf den Screenshots von
uteles Blog auf Opera sind bei den Überschriften Textschatten definiert; ein wie ich finde, in manchen Fällen sehr schöner Effekt. Für manche Browser können diese Schatten ganz einfach mit folgender Definition im CSS erzeugt werden:
h1, h2, h3, h4, h5{
text-shadow:#4e7499 .2em .2em .01em;
}
Ich finde es schade, dass das bisher noch nicht einmal im Firefox funktioniert.
Runde Ecken border-radius
Dafür haben der Firefox und auch die neueren Versionen des Safari bereits eine andere nette Eigenschaft, die erst mit CSS3 kommen wird, die runden Ecken. In CSS3 wird es runde Ecken geben, nicht als Bild, nicht mit Javascript, sondern einfach per CSS mit
border-radius. Noch nicht unter diesem Namen, sondern mit dem jeweiligen browserspezifischen Kürzel vorne dran interpretieren die Mozilla-Browser und aktuelle Safaris jetzt schon diese Eigenschaften, wenn sie wie folgt implementiert wird:
body{
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
Für alle, die andere Browser nutzen, zeigt der Screenshot des oberen linken Bereichs von miradlo bloggt, wie das aussieht. Sicherlich gibt es Situationen, in denen grafisch erstellte runde Ecken nötig sind, weil dieser Effekt nicht mit Schatten oder einem Verlauf arbeitet.
Fazit
Die Eigenschaft
text-shadow kann ohne Konsequenzen genutzt werden, da sie eben nicht erst in CSS3 kommen wird. Wer die browserspezifischen Eigenschaften
moz-border und
webkit-border nutzt muss dann akzeptieren, dass damit das Stylesheet nicht mehr validiert. Ich halte das für akzeptabel, da der
Validator ja deutlich sagt, was er als Fehler ansieht, z.B:
Fehler
URI : http://miradlo.net/bloggt/wp-content/themes/uh_default/style.css
34 body Die Eigenschaft -moz-border-radius existiert nicht : 5px
Wenn ich ausgiebig teste, ignoriere ich auch Warnungen des Validators zur Definition von Vorder- oder Hintergrundfarbe. Denn der Validator ist einfach ein Programm, welches automatisch etwas prüft. Weiß man jedoch, was man tut und warum man es tut, dann ist es meines Erachtens in Ordnung sich auch mal über die Ergebnisse hinwegzusetzen.
Grundsätzlich sehe ich es wie Andy Clarke in seinem sehr guten Buch
Transcending CSS (auf deutsch in etwa: über das übliche hinausgehendes CSS), welches seit dem Sommer auch auf deutsch erhältlich ist: Er meint es ist unsinnig weiterhin nur das zu realisieren, was auf allen zur Zeit genutzten Browsern identisch anzeigbar ist. Denn wenn irgendwann beispielsweise CSS3 verabschiedet ist, es aber zumindest der ein oder andere ältere Browser aus Redmond nicht kann, so würde man wieder genau da stehenbleiben, wo auch der letzte alte Browser noch unterstützt wird.
Mir ist es wichtig, dass Seiten, die wir erstellen, in jedem Browser und mit unterschiedlichen Auflösungen möglichst gut les- und benutzbar sind. Mir ist es jedoch völlig unwichtig, insbesondere bei eigenen Seiten, dass diese in jedem Browser identisch aussehen. Für mich spricht nichts dagegen Eigenschaften zu nutzen, die manchen Anwendern mehr bieten, solange damit andere Anwender keinen Schaden haben. Daher probiere ich auf verschiedenen Seiten immer mal wieder etwas aus und setze auch durchaus auch Möglichkeiten ein, die nicht nur, der veraltete Internet Explorer 6 nicht versteht, sondern die, tatsächlich nur der eine oder andere sehr aktuelle Browser interpretiert.
Weihnachtsdesign
miradlo Schaufenster 2004
Beispiel einer Statistikauswertung von Logfiles
Beispiel der statistischen Auswertung der Blogbesucher
Beispiel der Statistikanzeige der Topfeeds