CSS3 browserübergreifend mit PIE im Joomla!-Template
Wenn CSS3 im Internet Explorer 6 funktioniere, liese das das Webdesigner-Herz höher schlagen. PIE - Progressive Internet Explorer - macht es möglich und läßt den Internet Explorer 6 - 8 die nützlichsten CSS3-Eigenschaften rendern - auch in Joomla!-Templates.
Erste Schritte
In wenigen Schritten lassen sich einige CSS3-Eigenschaften auch im Joomla Template nutzen. PIE befindet sich momentan noch im Beta-Status. Einige Praxistests bestätigen aber, dass es für die Eigenschaften border-radius, box-shadow und linear-gradient schon eingesetzt werden kann.
Der Ablauf
- PIE herunterladen
- PIE hochladen
- CSS3-Eigenschaften verwenden
- PIE aktivieren
- IE öffnen und freuen
Auf geht's.
PIE herunterladen
Lade PIE herunter und entpacke es lokal auf Deinem Rechner.
PIE hochladen
Unter den entpackten Dateien befindet sich eine Javascript-Datei namens PIE.htc, die für den ganzen Zauber verantworlich ist. Sie ist 29 KB groß und wird in das Template-Verzeichnis hochgeladen, vorzugsweise in den Ordner js. Wenn er nicht existiert, kann er einfach neu erstellt werden.
CSS3-Eigenschaften verwenden
Davon ausgehend, dass ein aktives Template mit HTML-Elementen vorliegt, können jetzt Eigenschaften wie abgerundete Ecken, Schlagschatten oder Farbverläufe verwendet werden. Schreibe im Cascading Stylesheet des Templates - zu finden im Ordner css des aktiven Template-Verzeichnis - eine neue CSS-Regel, z. B.
#irgendeineID {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Hinweis: Die -webkit- und -moz-Präfixe sind notwendig, um die Eigenschaften auch in Webkit- und Mozilla-Browsern zum Laufen zu bringen.
PIE aktivieren
Jetzt aktivieren wir die Datei PIE.htc für den Internet Explorer mittels Browserweiche. Dazu wird die Datei index.php im Template-Verzeichnis geöffnet und zwischen <head> und </head> platzieren wir folgenden Code:
<!--[if lte IE 8]>
<style type="text/css">
#irgendeineID {behavior:url(<?php echo $templatepfad; ?>/js/PIE.htc);}
</style>
<![endif]-->
lte - steht für lower than equal$templatepfad - ist eine Variable, die mit dem Pfad zum Template-Verzeichnis ersetzt werden kann
IE öffnen und freuen
Wenn wir jetzt den Internet Explorer 6, 7 oder 8 öffnen, sehen wir, dass die CSS3-Eigenschaften korrekt gerendert werden. Welch' Freude!
Unterstützte CSS3-Eigenschaften
border-radius
Das ist großartig! Die lästigen Workarrounds mit verschachtelten div-Tags und Bilder, die abgerundete Ecken zeigen, haben ein Ende. Mit PIE sind diese Ecken einfach per border-radius im Cacading Stylesheet mögliche. Kurzes Schreiben statt langes Gezeder. Das erspart uns einiges an Arbeit.
Beispiel: 10 Pixel große abgerundete Ecke
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow
Noch etwas schickes beschert uns PIE: Schlagschatten. Die Schlagschatten waren - wenn überhaupt - nur mit Bildern des Formats PNG24 drin. PNG24 ist das einzige Format was abgestufte Transparenz kennt, den sogenannten Alpha-Effekt. Dieses Format kann der IE 6 nicht lesen. Als Webdesigner hat man zwar die Möglichkeit einen PNG-Fix zu implementieren, der den IE 6 das Lesen von PNG24 beibringt, doch dieser Effekt beschränkt sich nur auf Bilder innerhalb von HTML; also ausgezeichnet mit dem img-Tag. Im CSS ist er machtlos und so ist box-shadow eine weitere Killer-Eigenschaft von PIE.
Beispiel: 10 Pixel großer Schlagschatten, 5 Pixel in X- und Y-Richtung versetzt
-webkit-box-shadow: #666 5px 5px 10px;
-moz-box-shadow: #666 5px 5px 10px;
box-shadow: #666 5px 5px 10px;
linear-gradient
PIE ermöglicht Farbverläufe als Hintergrund beliebiger Elemente. Was man vorher nur mit wiederholenden schmalpixeligen Bildern erreichte, kann man jetzt einfach per CSS definieren. Bilder sind nicht mehr notwendig.
Beispiel: Farbverlauf von weiß (#ffffff) nach grau (#cccccc)
background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#cccccc));
background: -moz-linear-gradient(#ffffff, #cccccc);
background: linear-gradient(#ffffff, #cccccc);
Und alle drei Eigenschaften zusammen sehen dann so aus:
Mmmmm, pie. Auf der Seite bloggerschmidt.de wird PIE verwendet. Viel Spaß!
Über den Autor
Alexander Schmidt ist Webentwickler, Buchautor und Dozent. Er lebt mit seiner Familie in Bad Nauheim / Hessen. Seit 2005 realisiert er als Einzelunternehmer Websites mit Joomla und hat sich sich auf hochwertige Template-Umsetzungen spezialisiert. Er ist Fachautor der Zeitschrift t3n.
Diese E-Mail-Adresse ist gegen Spambots geschützt! JavaScript muss aktiviert werden, damit sie angezeigt werden kann. | EDVAS Webdesign |
Kommentare (5)
Monotone
Dies funktioniert allerdings bei mir nur solang Suchmaschinenfreundliche URLs in Joomla! deaktiviert sind. Sobald ich diese aber aktiviere funktioniert PIE nur noch auf der Startseite.
Gibts da eine Lösung?
Alexander Schmidt
Monotone
Es funktioniert Tatsächlich! Nach stundenlangem Rumprobieren und Stückweise auseinandernehmen der CSS habe ich den Fehler gefunden. Ein par Zeilen weiter versteckt im CSS-Code habe ich wohl irgendwann vergessen das Ende eines Kommentares "*/" zu entfernen. Dies hat zu diesem äußerst seltasmen Fehler geführt.
Nur komisch das es auf der Startseite anstandslos funktioniert hat und auf den Folgeseiten nicht.
Da ärgert man sich nun über die verlorene Zeit, aber irgendwie is es auch lustig.... ;)
schöne Grüße
Tilman Fischer
Nachdem ich mich so ein wenig reingearbeitet habe, stelle ich fest, dass Änderungen und Einträge, die WYSIWYG per JCE in Joomla 1.5xx gemacht werden, nicht dauerhaft gespeichert bleiben. Erst wenn ich reinen Text bearbeite und so abspeichere, sind Ränder und Schatten etc. dauerhaft sichtbar. Einmal umschalten auf WYSIWYG löscht die entsprechenden css-Einträge wieder.
Seltsamerweise wird bei einem Eintrag per Mozilla der -webkit Eintrag gelöscht.
Das ist natürlich unpraktisch, weil man bei einer Änderung per WYSIWYG alle css-Schmankerl wieder nachtragen muss.
Ist dieses Verhalten normal, oder mache ich etwas grundsätzlich falsch?
Schöne Grüße
Alexander Schmidt