Gastartikel: Turbine: ein PHP-Framework um schneller und problemfreier Stylesheets zu schreiben

Dieser Gastartikel stammt von Christian Schaefer aka derSchepp.

Wer kennt das nicht: Bei jedem neuen Webprojekt beginnt man von Neuem, sich sein bewährtes projektübergreifendes Basis-Stylesheet zu schnappen, um sich im weiteren Verlauf der Stylesshet-Programmierung an allerlei langatmigen Selektoren, doppelten und dreifachen Vendor-spezifischen Eigenschaften, IE-Hacks, sowie an syntaktischem Füllmatarial ({};…) abzuarbeiten.

Deshalb kommt es meist so, dass sich das, was in der eigenen Vorstellung umsetzungsmäßig schnell erledigt scheint, am Ende doch immer überraschend lange hinzieht. Und immer wieder flammt auch danach Arbeit in Form von Nachbesserungen auf.

Einem Frontendentwickler macht das in vielen Situationen durchaus Spaß. Es gibt aber auch solche Fälle, in denen man einfach nicht die Zeit und/oder das Budget für so viel Handarbeit zur Verfügung hat. Oder es ist einem einfach gerade zu stupide.

Und in solchen Fällen könnte in Zukunft das Framework Turbine zum Einsatz kommen.

Das Mantra: Weg mit allem Überflüssigen

Turbine entstand im Laufe des letzten Dreivierteljahrs und ging aus einem Projekt von Peter Kröner (@sir_pepe) hervor. Peter schrieb damals an einem CSS zu PHP-Array Parser/Umwandler, in den ich nach und nach als Kollaborator immer tiefer involviert wurde.

Was ursprünglich nur als kleines Werkzeug Stylesheets auf- bzw. nachbereiten sollte, wurde im Laufe unserer Arbeit daran immer umfangreicher, und vor allem radikaler in seinem Ansatz. So landeten Peter und ich irgendwann an einem Punkt, an dem wie einen neuen Stylesheet-Dialekt vor uns liegen hatten, kombiniert mit einer PHP5-Bibliothek, die diese Sprache nach altbekanntem CSS weiterverarbeitet.

Für die Ausarbeitung dieser Sprache nahmen wir das Beste aus CSS sowie aus anderen ähnlich ausgerichteten Frameworks wie Sass, Less und Scaffold und sattelten eigene Ideen obendrauf.

An Less fanden wir gut, dass es auf die Zeichen {, } und ; verzichtet. Alles unnötige Tipperei in unseren Augen! Als strukturienden Ersatz verordneten wir Turbine wie bei Less eine etwas striktere, an Python angelehnte Schreibweise, in der Einrückungen die Rolle der geschweiften Klammern übernahmen, und in der jede Eigenschaftszuweisung zwingend in eine eigene Zeile wandert, die aber eben nicht mehr auf einem Semikolon enden musste (allerdings immer noch kann).

Aus einem

#foo, #bar {
	color: #FF0000;
	margin-left: 4px;
	margin-right: 4px;
}

in CSS wurde in unserer zeichensparenden Syntax nun ein

#foo, #bar
	color: #FF0000
	margin-left: 4px
	margin-right: 4px

Durch die Einrückung nach dem Selektor erkennt Turbine, dass wir es ab da mit Eigenschaften zu tun haben. Auch bei den @media rules lassen wir die geschweiften Klammen weg:

@media screen
#foo
	background:red

@media print
#foo
	background:green

ergibt:

@media screen {
	#foo {
		background:red;
	}
}

@media print {
	#foo {
		background:green;
	}
}

All diese Anweisungen werden nicht mehr in .css- sondern in .cssp-Dateien abgelegt, die dann zur Laufzeit von Turbine in übliches (manchmal auch unübliches) CSS umgewandelt werden. Das geht so, dass man das Framework in seiner PHP-angetriebenen Seite folgendermaßen einbindet:

<link
	rel="stylesheet"
	href="pfad/zu/turbine/css.php?files=styles.cssp"
/>

Also ganz easy, einfach anstelle einer CSS-Datei, und in dem Parameter files benennt man eine oder, kommasepariert, mehrere .cssp-Dateien, die Turbine aufbereiten soll. Die Pfadangabe der .cssp-Dateien ist dabei relativ zum Ordner, in dem Turbine, also die css.php-Datei liegt.

Wir bringen etwas intelligente Logik ins Spiel

Doch damit sind die arbeitssparenden Maßnahmen bei Weitem noch nicht erschöpft, denn sonst würde sich der ganze Aufriss ja gar nicht lohnen.

Inspiriert von den anderen genannten Frameworks und geleitet von unseren eigenen Bedürfnissen, haben wir darüberhinaus allerlei Kurzschreibweisen-Logik eingebaut.

Selektorverschachtelung

Zum Beispiel die Selektorverschachtelung. Durch diese wird es beispielsweise möglich, folgendes zu schreiben:

#foo div > p
	color:red
	font-weight:bold
	span
		color:blue

Diese Anweisung transformieren wir dann in folgendes CSS:

#foo div > p {
	color:red;
	font-weight:bold;
}

#foo div > p span {
	color:blue;
}

Und spätestens bei Konstellationen wie dem nachfolgenden Konstrukt spart das richtig viel Arbeit:

#header, #footer
    ul, ol, p
        a:link, a:visited
            text-decoration:underline
        a:active, a:hover
            text-decoration:none

Dies entspräche in klassichem CSS nämlich diesem Mammut-Apparillo:

#header ul a:link, #header ul a:visited,
#header ol a:link, #header ol a:visited,
#header p a:link, #header p a:visited,
#footer ul a:link, #footer ul a:visited,
#footer ol a:link, #footer ol a:visited,
#footer p a:link, #footer p a:visited {
	text-decoration: underline;
}
#header ul a:active, #header ul a:hover,
#header ol a:active, #header ol a:hover,
#header p a:active, #header p a:hover,
#footer ul a:active, #footer ul a:hover,
#footer ol a:active, #footer ol a:hover,
#footer p a:active, #footer p a:hover {
	text-decoration: none;
}

Zusammengefasste Eigenschaften

Wir haben darüberhinaus die “expanding properties”, die sehr praktisch bei der Zuweisung ein und desselben Wertes zu mehreren Eigenschaften sind.

#foo
	position:absolute
	top, left:4px

…extrahiert sich zu folgendem CSS:

#foo {
	position: absolute;
	top: 4px;
	left: 4px;
}

Variablen für Eigenschaftswerte und für Selektoren

Sicherlich ein Wunsch vieler Coder ist die Möglichkeit Variablen für Wertzuweisungen innerhalb von CSS zu verwenden. So etwas hilft besonders in solchen Situationen, wo zum Beispiel Farben seitenweit ausgetauscht werden müssen.

Bei Turbine haben wir zu diesem Zweck “Konstanten” für Eigenschaftswerte und “Aliase” für Selektoren.

In beiden Fällen setzt man im Kopfbereich der .cssp-Datei einen @constants– (Eigenschaftswerte) oder @aliases-Block (Selektoren) ein, der alle Definitionen aufnimmt, auf die man im Anschluss als Representanten zurückgreifen kann.

@constants
	myRed:#C02222
	imagePath:/assets/images

#foo
	color:$myRed
	background:url($imagePath/foo.png) top left no-repeat

Hier haben wir die Konstanten $myRed und $imagePath erstellt und sie dann in unseren Styleinganweisungen verbaut. Das daraus erzeugte CSS sieht deshalb so aus:

#foo {
	color: #C02222;
	background: url(/assets/images/foo.png) top left no-repeat;
}

Die beiden Konstantenwerte wandern in die Eigenschaften und unser Definitionsblock wird anschließend herausgenommen.

Aliase funktionieren ähnlich, sind aber wie gesagt für Selektoren zuständig. Ein…

@aliases
	mainNavigation: #wrapper #header > div ul

$mainNavigation
	list-style:none

…ergibt:

#wrapper #header > div ul {
	list-style: none;
}

Eigenschaften anderer Selektoren kopieren

In Turbine könnt Ihr Eigenschaftswerte anderer Selektoren mit “copy” kopieren/übernehmen:

#foo
	background:#F00

#bar
	color:copy(#foo background)

Eigenschaften erben

Oder Ihr könnt ganz im Sinne der Objektorientierung neue Selektoren alle Eigenschaften eines anderen Selektoren erben lassen. Die Anweisung…

#parent
	color:red
	font-weight:bold

div.child
	extends:#parent
	margin:4px

…sorgt für folgende Ausgabe im CSS:

#parent {
	color: red;
	font-weight: bold;
}
div.child {
	margin: 4px;
	color: red;
	font-weight: bold;
}

Soviel ersteinmal zu den möglichen syntaktischen Verkürzungen. Es gibt noch ein paar mehr Spielarten, die Ihr allesamt im entsprechenden Abschnitt der Turbine-Dokumentation nachlesen könnt. Auch findet Ihr dort etwas tiefergehende Infos zu den eben abgehandelten Features.

Plugins für Bugfixes, für CSS3, für Performance, etc.

Die syntaktischen Verkürzungen sparen uns schon einiges an ungeliebter Arbeit. Was uns aber außerdem viel Arbeit macht, ist der Kampf mit den Browsern. Mal dürfen wir uns mit Darstellungsfehlern der IEs herumschlagen, mal geht es darum, für jeden Browser einzeln irgendwelche fortschrittlicheren Darstellungsformen handzuklöppeln, etwa Schriftarten Einbinden, Inline-Block zu faken, oder das browserübergreifende Erzeugen von Transparenzen, Schatten und anderen CSS3-Effekten.

Und hier kommen die Turbine-Plugins ins Spiel, welche uns dabei unter die Arme greifen.

Es gibt Plugins, die im stillen Kämmerlein Bugs fixen oder Browser um Basisfähigkeiten erweitern. Andere sorgen dafür, dass wir CSS3-Features heute schon nutzen können, indem sie Code erzeugen, den alle Browser verstehen.

Plugins aktivieren

Um eines der Plugins zu nutzen, aktivieren wir es in einem speziellen Kopfbereich der .cssp-Datei, hier zum Beispiel aktivieren wir gleich drei von ihnen:

@turbine
	plugins:boxsizing,borderradius,transforms

Diverse Plugin-Gattungen

Mit Turbine liefern wir eine ganze Palette von Plugins mit, 17 an der Zahl.

Das bugfixes Plugin behebt allerlei Abstandsprobleme in den IEs (unterer “Geistermargin” bei Bildelementen, doppelter Abstand bei Floats, Geisterpadding in Buttons), verhindert im IE6 Hintergrundbildflackern, rüstet im IE6 min-height nach, verbessert die skalierte Bilddarstellung im IE7, entfernt Geistermargins im Firefox um Buttons. Auch bringt es dem IE6 via Behavior :hover für alle Sorten Elemente und schließlich PNG Alphatransparenzen bei.

Das html5-Plugin rüstet Defaultstyles für alle neuen HTML5-Elemente nach, und zwar so wie die Defaultsstyles laut W3C geplant sind (betrifft vor allem display: inline; und display: block;);

resetstyle enthält eine Sammlung von Eric Meyer inspirierter Reset-Anweisungen, mit denen man global alle Margins und Paddings in allen Browsern auf Null zurücksetzt, das Listen in normale Blockelemente wandelt, Schrifteigenschaftenvererbung für Formularfelder und Tabellen aktiviert, und noch ein/zwei Dinge mehr.

Die Plugins @font-face, backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, inlineblock, opacity, transforms rüsten wiederum in allen Browsern Unterstützung von CSS(3)-Eigenschaften nach.
Das gilt außer beim borderradius-Plugin explizit auch für die IEs!

Bei borderradius boxshadow, boxsizing, inlineblock, opacity, transforms verwenden wir einfach die vom W3C vorgesehenen Deklarationen und die Plugins setzen das dann in vendor-prefixte Varianten und teilweise in IE-Filter und -Behaviors um. Beispiel:

@turbine
	plugins:boxsizing

#foo
	box-sizing:border-box

Ergibt:

#foo {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	behavior: url(plugins/boxsizing/boxsizing.htc);
	box-sizing: border-box;
}

Die visuellen Resulate sind dann in allen Browsern die gleichen.

Andere Plugins haben eigene Syntaxen, weil es entweder noch keine Übereinkunft gibt, oder um Tippaufwand zu sparen.

@font-face funktioniert zum Beispiel so, dass man in einem Ordner möglichst viele gleichnamige Schriftdateien aller Formate (eot, ttf, woff&hellip) ablegt, um sie dann mit einer kurzen Anweisung einbinden zu lassen.
Sagen wir also wir hätten in einem Unterordner fonts/ folgende Dateien hinterlegt:

SaginawMedium.eot
SaginawMedium.woff
SaginawMedium.otf
SaginawMedium.ttf
SaginawMedium.svg

Dann könnten wir sie mit dieser Anweisung einbinden:

@font-face
	font-family:'SaginawMedium'
	src:url('fonts/SaginawMedium')
	font-weight:bold
	font-style:italic

backgroundgradient erzeugt browserübergreifend zweifarbige lineare Farbverläufe für den Hintergrund eines Elements. Da sich noch keine einheitliche Syntax herausgeschält hat, Mozilla aber am nächsten am aktuellen Vorschlag des W3C dran ist, haben wir uns syntaxmäßig auf dessen Seite geschlagen. Dies der wäre der Aufruf, um einen vertikalen Farbverlauf von oben Weiß nach unten Schwarz zu erzeugen:

#foo
	background-image: linear-gradient(top,#FFF,#000)

colormodels rechnet hingegen alle Vorkommnisse an HSL(A)-Farbwerten für Browser die damit nichts anfangen können in RGB(A) Werte um.
Im IE funktionieren HSLA- und RGBA-Werte, wenn wir damit Hintergrundfarben definieren, in allen anderen Fällen nur HSL ohne Transparenz und natürlich RGB.

minifier und datauri steigern wiederum die Ladegeschwindigkeit des resultierenden CSS. Das erste, indem es dieses minifiziert, also von überflüssigen Leerstellen, Nullen und Einheiten befreit und wo möglich Shorthand Notationen einsetzt. Das zweite spart HTTP-Requests ein, indem es Datei-Resourcen, die es in den Styles findet und die unter 24K wiegen per Data-URI, oder für die älteren IEs per MHTML, einbettet.

Des sniffer-Plugins bedient Ihr Euch, wenn Ihr Styles nur ganz bestimmten Browsern oder Plattformen servieren wollt, bzw. wenn Ihr die ganz bestimmten Browsern oder Plattformen vorenthalten wollt. Beides ist möglich.

Gesetzt den Fall, Ihr wolltet etwas nur auf Desktops in der Textfarbe rot darstellen, dann könntet Ihr bei aktiviertem Plugin folgende Anweisung schreiben:

#foo
	device:desktop
	color:red

Der Selektor #foo mitsamt all seinen Eigenschaften würde dann nur noch in dem Fall an den Browser durchgereicht, wo dieser ein Browser einer Desktop-Plattform ist (also z.B. nicht an iPhones, iPads, WebOS, etc.).

Wenn Ihr die Textfarbe rot für alle Plattformen, außer den Mobilgeräten ausliefern wollt, dann schreibt…

#foo
	device:^mobile
	color:red

Neben device kennt der sniffer auch noch os mit Versionnummern oder -namen:

// Nur Mac
#foo
	os:mac
	color:pink

// Nur für Windows neuer als Vista
#bar
	os:windows>=vista
	color:lightblue

// Nur für Windows neuer als Vista
#goatse
	os:windows>=6
	color:blue

// Für alle außer Linux
#tubgirl
	os:^linux
	color:red

Und er kennt die Eigenschaft browser:

// Nur für IE
#foo
	browser:ie
	color:darkblue

// Nur für Firefox Versionen neuer als 3.5
#bar
	browser:firefox>3.5
	color:orange

// Nur für Safari 4
#goatse
	browser:safari=4
	color:lightblue

// Nicht für Chrome
#tubgirl
	browser:^chrome
	color:green

Und zu guter letzt haben wir noch die Meta-Plugins css3, performance, legacy und utility. Diese sind selbst eigentlich keine Plugins (daher auch: Meta-Plugins), sondern sie fassen mehrere Plugins in Funktionsgruppen zusammen, um sie gemeinsam aktivieren zu können (und wieder Tipparbeit zu sparen).

Das css3 Meta-Plugin besteht zum Beispiel aus der Sammlung backgroundgradient, borderradius, boxshadow, boxsizing, colormodels, opacity und transforms. Anstatt alle Plugins einzeln zu aktivieren kann man nun ganz einfach folgendes deklarieren:

@turbine
	plugins:css3

Und schon sind sie allesamt aktiv!

Zieht all das nicht mächtig an der Performance?

Unclever programmiert täte es das aufgrund zahlreicher Regular Expressions und Plugin-Schleifen sicherlich. Es ist aber nicht unclever programmiert. Turbine nutzt serverseitiges Caching. Einmal verarbeitete Ergebnisse werden aufbewahrt und so lange nicht neuberechnet, wie auch die .cssp-Quelldateien unverändert bleiben. Es geht serverseitig also nicht sonderlich viel Extrazeit drauf.

Desweiteren würden wir sogar soweit gehen, zu behaupten, dass Eure Seite durch den Einsatz von Turbine clientseitig sogar schneller ist als wenn Ihr den klassischen Weg einschlagen würdet. Denn unser CSS-Output ist kombiniert und mindestens ZIP-komprimiert, bei Nutzung unseres performance-Metaplugins sogar noch minifiziert und von unzähligen bremsenden HTTP-Requests befreit. Zu guter letzt sendet Turbine dem Browser auch nur dann alle Daten, wenn dieser den Output nicht schon bei einem vorherigen Aufruf geladen hat und sie bei ihm noch im Cache liegt. Das spart Übertragungszeit zum Client, und natürlich auch Traffic!

Was man zum Loslegen braucht

Wenn Ihr jetzt angefixt seid und Turbine ausprobieren wollt, was wir schwer hoffen, dann geht Ihr am besten in die Download-Sektion unseres Projekts bei Github und ladet Euch dort die aktuellste Version herunter.

Dann entpackt Ihr alles in einen Ordner auf Eurem PHP5-getriebenen Webspace (PHP5 ist Pflicht!), zum Beispiel den Ordner /turbine. Ihr könntet nun einen weiteren Ordner /css anlegen, darin eine style.cssp mit den Turbine-Anweisungen. Zu guter letzt bindet Ihr das Style beispielsweise in der index-Datei im Root per HTML, wie ganz oben erwähnt, folgendermaßen ein:

<link rel="stylesheet" href="turbine/css.php?files=../css/styles.cssp"/>

Dokumentation

Eine sehr umfangreiche und hoffentlich gut verständliche Dokumentation zu den Sprachfeatures, den Plugins und dem Einrichten von Turbine findet Ihr auf http://turbine.peterkroener.de. Ist allerdings in Englisch.

Fragen?

Für Fragen haben wir zum einen eine FAQ-Sektion, aber auch eine Frage/Antwort-Plattform für Turbine auf Qhub.

Code Highlighting und Autocompletion für Turbine-Syntax in Webeditoren

Uns ist bewusst, dass Ihr wenig Lust habt auf die unterstützenden Funktionalitäten Eures Lieblings-Webeditors zu verzichten, also konkret das Einfärben des Codes sowie die automatischen Befehlsvorschläge. Deshalb haben einige Mithelfer und wir uns an Plugins bzw. Erweiterungsmöglichkeiten für einige Editoren drangesetzt und Lösungen für Dreamweaver, UltraEdit, GtkSourceView (also Gedit und Anjuta), sowie TextMate in petto.

Ihr findet einen Fehler? Stellt Dinge zur Diskussion?

Lasst es uns wissen, indem Ihr einen Eintrag in unsere Issues-Abteilung bei Github vornehmt. Schaut aber vorher, ob dieser Bug, oder ein solcher Vorschlag nicht schon existiert.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• Gastartikel: Smarty: PHP-Templates für Designer
• Die Linkschleuder
• WordPress: Wo finde ich »Zusätzliches CSS« in Block-Themes?
• WordPress 6.3 beendet Unterstützung für PHP 5
• Einfarbige Verläufe mit CSS