ein Blog übers Web, IT, Linux, Techiekram...

CSS 3 Eigenschaften nutzen? text-shadow und moz-border-radius

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 Einsatz von text-shadowScreenshot von uteles blog, die Überschriften sind mit text-shadow formatiert
  • Screenshot detaillierte Ansicht von text-shadowTextshadow detailliert
  • Screenshot Firefox moz-border-radiusRunde 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.

Noch keine Kommentare

  • Martin Herkt
    Martin Herkt  
    Es gibt nur eine Sache, die mich so richtig ankotzt: Warum müssen die meisten Leute ausgerechnet die Browser nutzen, die am wenigsten standardkonform sind? Ich schreib eine Webseite die (im Konqueror) wirklich gut aussieht, guck dann mit Firefox: Der Text auf dem etwas dunklerem Hintergrund ist nur schwer lesbar, weil der weiße Textschatten nicht unterstützt wird *args*
  • ute
    ute  
    Tja, ich fände die Webdesign-Welt auch wesentlich schöner, wenn es den ein oder anderen Browser nicht gäbe oder er zumindest nur selten genutzt wird... Ich entwickle zur Zeit meist zuerst auf Firefox, dann fällt mir manches nicht so auf, die Textschatten, die schicken Buttons... ;-) Im Firefox gäbs dann zumindest noch nette abgerundete Ecken, doch das klappt halt leider im IE nicht... Klasse wäre, wenn alle gängigen Browser alles umsetzen würden, was man so realisieren könnte.

Kommentar schreiben

Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Um einen Kommentar hinterlassen zu können, erhalten Sie nach dem Kommentieren eine E-Mail mit Aktivierungslink an ihre angegebene Adresse.
BBCode-Formatierung erlaubt
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.