Hauptmenü

Untermenü

CSS3 - Darstellung

1. Da waren welche voreilig

Da das W3C mit seiner CSS3-Spezifikation lange Zeit nicht aus den Puschen kam, begannen etliche Hersteller damit, ihre Browser ein wenig zu dopen, damit sie bereits frühzeitig die neuen Erweiterungen darstellen konnten. Auch wenn die noch gar nicht in trockenen Tüchern waren. Dabei entwickelten sie dann proprietäre Formate, die nur in ihren Browser liefen. OK, damit haben sie die Entwicklung sicher voran gebracht, aber ein kleiner Schönheitsfehler bleibt bestehen. Denn bei neueren Versionen haben sich die Entwickler (und wohl vor allem die Marketingfuzzis) Folgendes gedacht

"Ham wa schon, is schon drinne. Nur etwas anders. Musse halt unser Format nehmen."

Und genau da liegt der Hase im Pfeffer. Denn wenn es darum geht, dem eigenen Liebling ein paar neue Features zu verpassen, so sind die immer damit immer ganz schnell bei der Hand. Aber einfach mal die Altlasten zu entrümpeln, fällt doch ziemlich schwer. Und als Entwickler muss man dann halt immer wieder rumprobieren oder die jeweilige Browserunterstützung auswendig im Kopf haben.

2. Die proprietären Formate

... kann man sich gottlob ganz einfach merken. Denn es gibt entsprechende Abkürzungen, die vorangestellt werden. Natürlich nur, wenn das Original-Format nicht unterstützt wird. Als da wären.

Begriffsdefinition

Diese browsereigenen Erweiterungen nennt man auch gerne Vendor-Präfix und das solltet ihr euch merken, denn den Ausdruck werde ich ab sofort öfter verwenden. Ein kleiner Hinweis zu -ms- sei noch gestattet. Das wurde speziell für den Internet Explorer 8 eingeführt und ist in seinen Möglichkeiten doch stark eingeschränkt. Eine komplette Liste der unterstützen Eigenschaften findet ihr hier.

Ein Beispiel

Nehmen wir dazu mal die wunderschöne Funktion transition (dazu später mehr). Denn die wurde originär lange nur vom Internet Explorer 10 unterstützt. Für den Rest benötigte/benötigt man die entsprechenden proprietären Formate. Also musste/muss die CSS-Anweisung dafür in etwa so aussehen.


p.bla {
  // Firefox
  -moz-transition-duration2.0s;
  -moz-transition-timing-function: ease-out;      
  // Opera
  -o-transition-duration2.0s;
  -o-transition-timing-function: ease-out;  
  // Safari, Chrome
  -webkit-transition-duration2.0s;
  -weblit-transition-timing-function: ease-out;  
  // Der Rest, im Moment nur der IE 10
  transition-duration2.0s;
  transition-timing-function: ease-out;       
}

Wichtig

Um auf Nummer sicher zu gehen, sollten erst die proprietären Formate kommen und dann die Original-Anweisung. Sonst kann es unter Umständen zu Problemen kommen. Ach ja, wenn ich die einzelnen Anweisungen vorstelle, weise ich dezidiert darauf hin, wer nur mit den browsereigenen Formaten umgehen kann.

3. Die M$-Implementierung

Das ist mal wieder eine der zahllosen unsäglichen Erfindungen von Microsoft. Da kann ihr Browser etwas nicht, das andere schon lange beherrschen und schwuppdiwupp wird dann was aus dem Ärmel gezogen, was fürchterlich unhandlich und kompliziert ist. In diesem Fall nennt sich das filter. Ein Beispiel gefällig?


.opac {
  // Normal
  opacity0.5;
  // IE halt
  filteralpha(opacity 50);
}

Obacht!

Dieses filter ist oft die letzte Rettung. Vor allem, wenn man mit den IE8 und abwärts zu tun hat. Aber leider ist das nicht immer eine Gewähr. Denn in dem einen oder anderen Fall gibt es zum Teil erhebliche Darstellungsunterschiede zu anderen Browsern.

Noch was

Falls es für die folgenden Beispiele eine filter-Funktion für den Internet Explorer gibt, so werde ich natürlich darauf hinweisen. Aber bitte beschwert euch nicht bei mir, wenn ihr damit böse Überraschungen erlebt.

4. .htc-Dateien

Das ist der letzte, aber auch wirklich allerletzte Notnagel, um dem Internet Explorer etwas beizubringen. Dabei handelt es sich teilweise um extrem krude JavaScript-Hacks, mit dem dieser Browser dann vergewaltigt wird. Klappt manchmal ganz gut, aber sehr oft fliegt euch dann alles um die Ohren.

Ein Beispiel

Es gibt da diese schöne border-radius.htc, mit dem man dem IE 8 und abwärts auch die berühmten "runden Ecken" beibringen kann. Was passiert da im Detail? Nun, zunächst wird das eigentliche Element ausgeblendet. Dann wird darüber ein VML-Objekt gelegt. Wer das nicht kennt, dem sei gesagt, dass es sich dabei um ein Microsoft-eigenes Vektorformat für das Internet handelt. Die wollten das vor Jahren dem W3C als neuen Standard offerieren, aber die haben dankend (und wohl auch lauthals lachend) abgelehnt.

Um nun zum Schluss zu kommen, wird mit besagter .htc-Datei diesem VML-Objekt eine Rundung verpasst und unter den Inhalt des eigentlichen Elements gelegt. Klappt auch ganz gut. So lange! Ja, so lange nicht irgendein anderes übergeordnetes Element eine abweichende Hintergrundfarbe hat. Dann ist nämlich hängen im Schacht.

5. Meine Tipps

IE8 und abwärts

Also wer immer noch den IE7 oder, was der Allmächtige verhüten möge, den IE6 unterstützt, der gehört eh in die Klapse. Sorry. isso. Und dem 8er sollte man in punkto CSS3 nur das "beibringen", was ohne großen Aufwand möglich ist. Ansonsten gilt: muss funktionieren, aber nicht so supitoll aussehen. Punkt!

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt