CSS3 automatisch generieren

12. Jan 2012

Ab sofort können Sie in Ihren Weblication Projekten CSS3 automatisch generieren lassen. Sie müssen also nicht mehr für jeden Browser eine eigene Variante definieren. Das CMS übernimmt das für Sie.

Mit CSS3 können Sie Effekte, wie z.B. Schatten, runde Ecken oder Farbverläufe sehr viel einfacher als bisher umsetzen. Mühsame Umsetzungen mit Bilder entfallen so. Um die verschiedenen Browser zu unterstützen, gibt es von CSS3 PIE ein .htc Skript speziell für die älteren Internet-Explorer. Somit sind dann praktisch alle relevanten Browser in der Lage diese CSS3 Effekte darzustellen. 

Keine browserspezifischen CSS3 Varianten notwendig

Wer schon mit CSS3 gearbeitet hat, weiß, wie lästig es ist, die browserspezifischen Varianten zu definieren. Da CSS3 noch kein offizieller W3C Standard ist, unterstützen die Browser-Hersteller diese Funktionen nur durch Hinzufügen eines browserspezifischen Prefixes, wodurch der Quelltext ziemlich unübersichtlich und redundant wird. 

Weblication CMS nimmt Ihnen diese Arbeit nun ab. Es genügt, wenn Sie die offizielle W3C Schreibweise definieren. Bei der Ausgabe generiert das CMS dann alle notwendigen browserspezifischen Varianten. 

Die Originaldatei wird nicht angepasst, sondern nur das CSS in der Webseite. Die Generierung funktioniert auch, wenn Sie die CSS Datei direkt über das Verzeichnissystem bearbeiten. Da Sie nur eine Variante definiert haben, bleibt der CSS-Quelltext der original CSS-Datei dauerhaft schlank und übersichtlich.

Von Ihnen gepflegte CSS-Definition in der CSS Datei im W3C Format

background: linear-gradient(top, #c0c0c0, #666666)

Durch Weblication generierte CSS-Definition für alle Browser in der Ausgabe

background: linear-gradient(top, #c0c0c0, #666666);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(0, #666666));
background: -webkit-linear-gradient(top, #c0c0c0, #666666);
background: -moz-linear-gradient(top, #c0c0c0, #666666);
background: -ms-linear-gradient(top, #c0c0c0, #666666);
background: -o-linear-gradient(top, #c0c0c0, #666666);
-pie-background: linear-gradient(top, #c0c0c0, #666666);
behavior: url(/wGlobalProject/wGlobal/layout/scripts/items/PIE.php)

Um diese neue Funktion zu nutzen, benötigen Sie die Beta-Version 006.008.054.000. Im Template /[GLOBALES PROJEKT]/wGlobal/layout/templates/misc/includes.global.php können Sie über folgenden Eintrag definieren, dass die automatische CSS3 Generierung sowie CSS3 PIE genutzt werden sollen.

<wsl:includeCssRessources merge="0" dirMerged="{$wGlobalProjectPath}/wGlobal/layout/styles/merged" minimize="1" generateCSS3="1" pathCSS3Pie="{$wGlobalProjectPath}/wGlobal/layout/styles/PIE.htc"/>