201013Apr

Webentwicklung: CSS3 in Internet Explorer 6, 7 und 8

Mit dem CSS3 Generator oder "CSS3, Please!" gibt es komfortable Werkzeuge, um online CSS3-Effekte zu erstellen. Das Hauptproblem, das in der Stufe zwischen Webdesign und Frontend-Entwicklung besteht, liegt nach wie vor in Microsofts Internet Explorer und dessen fehlender Unterstützung von CSS3-Attributen. Wer nicht bis Version 9 warten will und ein paar CSS3-Effekte in dem Microsoft-Browser ausprobieren will, könnte das Skript IE-CSS3 ausprobieren. Das HTC-Skript ermöglicht die Nutzung der 3 CSS3-Attribute "box-shadow", "border-radius" und "text-shadow".

IE-CSS3

Vor einer Weile berichtete ich über einen ähnlichen HTC-Workaround, der ebenfalls Microsofts Vector Markup Language (VML) nutzt, um die Effekte unter Internet Explorer zu simulieren. Allerdings beschränkt sich das ältere Skript auf runde Ecken. Daher können Interessierte das "IE-CSS3"-Skript testen, um Zeit bzw. Bilder zu sparen. Die Verwendung funktioniert wie folgt:

  • .box {
  • -moz-border-radius:15px;
  • -webkit-border-radius:15px;
  • border-radius:15px;
  •  
  • -moz-box-shadow:10px 10px 20px #000;
  • -webkit-box-shadow:10px 10px 20px #000;
  • box-shadow:10px 10px 20px #000;
  •  
  • behavior:url(ie-css3.htc);
  • }

Den Rest übernimmt JavaScript: Das HTC-Skript verwendet die oben deklarierten CSS-Eigenschaften und erstellt entsprechende VML-Elemente. Für abgerundete Ecken kommt das "roundrect"-Element zum Einsatz, während für Schatteneffekte die Filter "progid:DXImageTransform.Microsoft.Blur" und "progid:DXImageTransform.Microsoft.Alpha" verwendet werden.

RSS-Feed abonnieren

Kommentare

Truck Turner schrieb am 14.04.2010 #1

Vielen Dank für den nützlichen Tipp – werde das bestimmt bald mal ausprobieren. Hätte mir bei einem der letzten Projekte bestimmt ne Menge Arbeit ersparen können.