CSS 3: Schöne neue Welt, aber der Internet Explorer spielt nicht mit.

Man muß halt immer am Ball bleiben und so habe ich mir die Möglichkeiten von CSS 3 mal näher angeschaut. Den Fokus habe ich dabei mal auf  kleine Funktionaltiäten, wie runde Ecken, Farbverläufe, Transaprenz, Text und Box Schatten gelegt. Wollte man derartige Desingelemente in Websites verwenden, war Handarbeit mit einem Grafikporgamm nötig.

Das neue CSS3 vereinfacht die Sache erheblich.

 

Runde Ecken

Bisher hat man Boxen mit runden Ecken als Hintergrundgrafik dargestellt. Problem, die fehlende Dynamik in der Anpassung an die Inhalte in der Box. Um das zu lösen hat man die Box häufig in einen Kopfteil, einen dynamischen Inhaltsteil und einen Fußteil zerlegt. Für weitere Dynamik in der Breite mussten die einzelnen Teile nochmals zerlegt werden. Ein enormer Aufwand!

CSS 3 kann es besser, allerdings benötigt man mehrere Konfigurationen, um alle Browser abzufangen

-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius:10px; /* Safari,Chrome */
-border-radius:10px;

 

Transaparenz

Hierfür gibt es bereits div. CSS Möglichkeiten wie z.B. opacity und sogar ne Lösung für den IE mit filter: alpha(opacity=50). Allerdings gehören die nicht zum W3C Standard und haben das Problem, das alle Elemente, die innerhalb eines mit opacity definierten Layers transparent werden.

die ersten 3 Werte definieren die Farbe und der 4. Wert die Transaparenz

background: rgba(255, 255, 255, 0.5);  /* weiß, 50% Transparenz */

 

Farbverläufe

Auch hier hat man bisher die Farbverläufe als  Hintergundgrafik dargestellt

/* Firefox */
background:-moz-linear-gradient( bottom, #235D96, #4D9EBB); 
/* Safari, Chrome */
background:-webkit-gradient(linear, left top, left bottom, from(#235D96), to(#4D9EBB));
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D9EBB', endColorstr='#235D96');
 

 

Text und Box Schatten

Wollte man schattierten Text in der Website haben , musste man auch hier das Grafikprogramm bemühen. Das hat große Nachteile. Erstens fehlt die Flexibilität, wenn man den Text ändern will (OK, TYPO3 hat da seine Möglichkeiten) und zweitens liefert man der Suchmaschine u. U.  die wichtigen Keyowrds nicht, da diese in einer Grafik stecken.

Ein Text mit Schatten..den man im Internet Explorer nicht sehen kann.

color:#999;
text-shadow: 1px 1px 0px #555;

Das Gleiche kann man auch mit anderen HTML Elementen anstellen. hier z.B. mit einem inneren Schatten für ein INPUT-Feld

-moz-box-shadow:inset 3px 3px 3px #ddd;
-webkit-box-shadow:inset 3px 3px 3px #ddd;
box-shadow:inset 3px 3px 3px #ddd;

 

Fazit

Auch wenn der Internet Explorer, wie immer hinterher hinkt, sollte man auf den Einsatz von CSS 3 nicht verzichten. Der IE verliert massiv an Boden, was uns Webentwickler ziemlich glücklich macht. Verursacht dieser Browser teilweise erheblichen Mehraufwand bei der Entwicklung, der dem Kunden nur schwer zu vermitteln ist. Ich versuche jedenfalls, für den IE eine ordentliche Darstellung umzusetzen. Diese muß dann aber nicht absolut identisch mit den anderen Browsern sein (z.B. keine Runden Ecken bei Inhaltselementen in TYPO3). Ich denke hier kann man seine Kunden überzeugen, zumindest dahingehend, das erheblicher Mehraufwand auch mehr kostet. Dieser Aufwand hat auch noch ein Haltbarkeitsdatum, nämlich bis zum Erscheinen des IE 9 (Betaversion gibt es schon).

Links

Deutsche Referenz zu CSS (CSS 4 You)
CSS 3: Aktueller Stand und Vorschau – Webmasterpro.de
Norman’s Blog – Hintergrundverläufe mit CSS 3

Tags: -moz-border-radius, -webkit-border-radius, background:-moz-linear-gradient, background:-webkit-gradient, border-radius, CSS 3, text-shadow