Teil 2: microsoftspezifische CSS-Erweiterungen (CSS Vendor Extensions)
CSS Vendor Extensions
Alle nennenswert im Web vertretenen graphischen Browser unterstützen einen individuellen Satz von proprietären CSS-Anweisungen, wobei es eine ganze Reihe von Gründen für den Einsatz derartiger Erweiterungen gibt. Auch wenn Verschwörungstheorien des einen oder anderen Foreneintrags anderes vermuten lassen: das "Quälen von Frontend Entwicklern" rangiert auf dieser Liste weit hinten.
Es mag auf den ersten Blick widersprüchlich erscheinen, aber viele proprietäre CSS Erweiterungen dienen der Weiterentwicklung von Webstandards. So können beispielsweise neue Styleanweisungen auf Herz und Nieren getestet werden, bevor sie Eingang in Empfehlungen des W3C finden.
CSS 2.1 erlaubt daher den Browserherstellern die individuelle Erweiterung der CSS-Spezifikation, sofern sie einer speziellen Syntax folgen. Propietäre Schlüsselwörter oder Eigenschaften müssen endweder mit - (Bindestrich) oder _ (Unterstrich) beginnen. Darüberhinaus empfiehlt das W3C das folgende Format:
- '-' + herstellerspezifischerBezeichner+ '-' + aussagekraeftigeEigenschaft
- '-' + herstellerspezifischerBezeichner+ '-' + aussagekraeftigeEigenschaft
Diese Syntax dient dem Ausschluß von Benamungskonflikten mit zukünftigen CSS-Eigenschaften des W3C und erleichtert Webentwicklern die Zuordnung der Eigenschaft zum unterstützenden Browser.
| Präfix | Browser |
|---|---|
| -moz- | Gecko-basierte Browser wie Mozilla Firefox |
| -o- | Opera |
| -khtml- | Konqueror |
| -webkit- | webkit-basierte Browser wie Apple Safari oder Google Chrome |
| -wap- | WAP Forum |
Umgang des Internet Explorer mit CSS Vendor Extensions
Natürlich setzt auch der Marktführer Vendor Extensions ein. Deren Benamung entspricht jedoch bis einschließlich IE7 nicht den Vorgaben des W3C. Mit der Version 8 wurde auch dieser Makel beseitigt. Analog zum Benamungsschema anderer Browser, stellt Microsoft nun allen Vendor Extensions den Präfix -ms- voran. Bei Erweiterungen, wie msinterpolation-mode, die bereits einen regelwidrigen Präfix enthielten, wurde dieser durch den neuen ersetzt.
| Wert im IE8 | Wert im IE7 | Bedeutung | Typ des Attributs / der Eigenschaft |
|---|---|---|---|
| -ms-filter | filter | Setzen eines Filters / einer Filterkombination auf ein HTML-Element | Filter für visuelle Effekte und Übergänge |
| -ms-interpolation-mode | msinterpolation-mode | Setzen einer Interpolationsmethode beim Vergrößern von Bildern | Benutzerschnittstelle / Interaktion |
| -ms-accelerator | accelerator | Festlegen, ob das HTML-Element mit einem Tastatur-Shortcut belegt ist. | Benutzerschnittstelle / Interaktion |
| -ms-behavior | behavior | Setzen der Position von DHTML-Verhalten | Verknüpfung von Elementen mit DHTML |
| -ms-ime-mode | ime-mode | Setzen eines Zustands für den IME (Input Methoden Editor) * | Schrift und Text |
| -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color | scrollbar-3dlight-color scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color | Setzen von Farben für Elemente einer Bildaufleiste | Benutzerschnittstelle / Interaktion |
| -ms-zoom | zoom | Setzen eines Vergröerungsgrades für ein Element | Benutzerschnittstelle / Interaktion |
Hinweis: Der IME erlaubt es dem Nutzer chinesische, japanische oder koreanische Zeichen einzugeben.
Filtereigenschaften
Eine Syntaxänderung von ime-mode in -ms-ime-mode dürfte für den durchschnittlichen westeuropäischen Frontend Entwickler lediglich von peripherer Bedeutung sein. Anders verhält es sich mit den Filtereigenschaften, die eine unvermindert hohe Praxisrelevanz aufweisen.
Das alte Syntax-Schema für Filtereffekte widerspricht in mehreren Punkten der CSS 2.1 Spezifikation:
filter:progid:DXImageTransform.Microsoft.filtername(attribut=wert[, attribut=wert])
Die korrigierte Syntax für den IE8 enthält zusätzliche Anführungszeichen und den oben beschriebenen microsoftspezifischen Präfix: -ms-filter: "progid:DXImageTransform.Microsoft.filtername(attribut=wert[, attribut=wert])"
Am Beispiel des Semitransparenzeigenschaft soll im folgenden die Auswirkung dieser Syntaxänderung exemplarisch verdeutlicht werden. Mit Hilfe von CSS 2.1 läßt sich Teiltransparenz nur über (Hintergrund-)grafiken mit entsprechenden Eigenschaften realisieren. Im Working Draft von CSS 3 sieht die Spezifikation für reduzierte Deckkraft opacity vor. Diese Eigenschaft wird jedoch von keiner im Netz vertretenen IE-Version unterstützt. Hier muss zusätzlich der Alpha-Filter von Microsoft verwendet werden. Microsoft empfielt, sowohl die alte als auch die neue Syntax dieser CSS Vendor Extension zu notieren, um möglichst eine breite Unterstützung sicherzustellen.
#semitransparent{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
//Vendor Extension für IE8
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);//Vendor Extension für IE6 und IE7
opacity: 0.5; //Opera 10, Firefox 3, Safari 4
}
Bei neuen Projekten sollte man diese Empfehlung unbedingt beachten, ein akuter Handlungsbedarf für ältere Projekte besteht beim Alpha-Filter jedoch nicht. Die alte Syntax ist zwar als "deprecated" eingestuft, wird jedoch noch unterstützt.
Anders verhält es sich bei den microsoftspezifischen CSS Expressions.
CSS Expressions
CSS Expressions sind dynamische, d.h. skriptgesteuerte Attributwerte von CSS-Eigenschaften. Diese sind ebenfalls proprietär und dienen vornehmlich dem Ausgleich fehlender bzw. unzureichender CSS 2.1-Unterstützung älterer Versionen des Internet Explorers. Diese dynamischen Zuweisungen werden vom IE8 nicht mehr unterstützt. Lediglich in einem älteren Dokumentkompatibilitätsmodus kann auf diese noch zurückgegriffen werden.