08. April 2013

DynCSS

in Extension, TYPO3

Wolltest du schon immer mal dynamisches CSS (less, scss oder turbine) in TYPO3 nutzen? DynCSS will dieses Problem mit Adaptern für die jeweilige Sprache lösen. Dazu wird DynCSS als Extension in TYPO3 eingebunden. Bei Änderungen werden die entsprechenden Dateien neu geparst und die entsprechende Ausgabedatei wird alternativ eingebunden. Um DynCSS zu nutzen wird die jeweilige Datei wie jede andere CSS Datei in TYPO3 eingebunden.

page.includeCSS.testLess = EXT:dyncss_test/Resources/Public/Stylesheets/Example.less

Intern passiert nun folgendes:

  1. Über einen Eintrag in der ext_localconf.php wurde ein Parser für less registriert (EXT:dyncss_less)
  2. Durch einen Hook im PageRenderer werden alle CSS Dateien auf passende Dateiendungen für den jeweiligen Parser überprüft, falls für die Dateiendung ein Parser registriert wurde, wird dieser ausgeführt
  3. Der Parser legt eine Kopie der zu parsenden Datei an und ersetzt Variablen
  4. Der Parser erzeugt die CSS Datei
  5. Pfade in der CSS Datei alá url() … werden an den neuen Standort der Datei angepasst
  6. Die erzeugte CSS Datei wird an Stelle der Ausgangsdatei eingebunden.

Dabei ist EXT:dyncss in der Lage Variablen neu zu belegen. Sollte beispielsweise in einer Less Datei für Links die Farbe rot definiert sein (@LinkColor: #ff0000;), so kann diese mit wenigen Zeilen TYPOScript angepasst werden.

plugin.tx_dyncss {
	overrides {
		LinkColor = TEXT
		LinkColor {
			value = {$linkColor}
		}
	}
}

Diese dynamische Anpassung der CSS Dateien ist möglich, da die Intermediate-Dateinamen jeweils den Hash der Datei, der Konfiguration etc. im Namen enthalten. Die Extension kann auch CSS Dateien ins Backend einbinden und dieses somit einfach umfärben. Ein Beispiel dafür gibt es auf YouTube im Video DynCSS Backenddemo.

Über die Extension ist es auch möglich Grafiken in den dynamisch erzeugten CSS Dateien dynamisch mit TYPOScript zu erzeugen.
Alle Quellen findest du auf GitHub:

Viel Spaß beim Testen, ich freue mich auf euer Feedback

9 Reaktionen zu “DynCSS”

Kommentare abonnieren (RSS) oder TrackBack URL

Wow, das klingt echt nett. Dann könnte ich ja wieder den lokalen Less Parser bei Anpassung weglassen.

Wie wirkt sich die Extension auf die Performance aus?
Funktioniert die Extension auch im Zusammenspiel mit ScriptMerger?

Danke, ich werde die Extension sicherlich mal testen.

David am 10. April 2013 um 12:07

Ich bekomm beim Installieren des Less Parsers aus’m TER übrigens einen unlogischen Abhängigkeitsfehler:
„Die aktuelle Version der Erweiterung „dyncss“ (0.2.6) ist höher als erlaubt ( 0.2.99).“

David am 10. April 2013 um 12:10

@David, den Fehler kannst du ignorieren, ich seh mir das an. Ich versuche zwar während der Entwicklung ständig ins TER hochzuladen, aber im GIT liegt die jeweils letzte Version 😀

Kay Strobach am 10. April 2013 um 12:12

Wenn man Anmerkungen/Fehler hat, sollten diese bei dyncss oder bei dyncss_less gemeldet werden?

Woran kann es liegen, dass eventuell die „background: url()“-Pfade nicht angepasst werden?

David am 10. April 2013 um 14:21

If the speed and browser compatibility is good, that would be a nice addition to the „DEV vs Perofmrance vs Production“ Backend philosophy.

I mean, having a „green-ish“ BE for Production and a Red BE for Dev makes it pretty obvious for editors…

It could be a bit like http://typo3.org/extensions/repository/view/oecolorscheme

Patrick am 10. April 2013 um 15:58

@David
Im zweifel bei dyncss, falls es nur less betrifft gerne auch bei dyncss_less 😀

@Patrick

Due to an intelligent Caching Mechanism the speed should be ok 😀 – atleast i had no detectable loose in speed, after the file was compiled

The colorscheming is just a demo.

Kay S. am 10. April 2013 um 18:21

@ david:

bzgl. deiner BGUrl Sachen, kannst du mir evt. den Ausschnitt aus der Ursprungsdatei, Aus der Zwischendatei und aus der am Ende ausgebenen CSS Datei auf GitHub in ein Issue legen? – Danke

Ich bin gerade dabei nach und nach die UnitTests nachzureichen 😉

Kay S. am 11. April 2013 um 08:36

Sehr schicke Lösung.
Werden wir ausprobieren. Sind auch grad noch auf der Suche nach der besten LESS-Lösung.

Bisher gab es immer noch Punkte, mit denen wir nicht ganz zufrieden waren.

(http://blog.undkonsorten.com/typo3-und-less-css-im-backend-bearbeiten).

Tom am 11. April 2013 um 12:08
Trackbacks & Pingbacks

[…] Grad noch drüber gestolpert: DynCSS auch eine sehr eleganter Ansatz zur Einbindung von CSS-Dateien. Werden wir auch mal noch […]

Pingback von TYPO3 und LESS (CSS) im Backend bearbeiten | undkonsortenBlog am 11. April 2013 um 12:04

Kategorien

Archiv