TYPO3 4.4 - Probleme mit CSS in Backend Modulen

Avatar of Felix Nagel Felix Nagel - 28. Juni 2010 - TYPO3

  • logo-typo3

    © TYPO3 Association, typo3.org

Beim Update von TYPO3 auf Version 4.4 wurde ein nettes neues Feature eingeführt: Kompression von JavaScript und CSS Dateien sowie die Auslieferung zum Client per gzip inklusive Versionierung per timestamp.

 

Dazu müssen folgende ConfVarsin der localconf.php gesetzt werden:

$TYPO3_CONF_VARS["BE"]["compressionLevel"] und $TYPO3_CONF_VARS['BE']['versionNumberInFilename']
Neue ConfVars in TYPO3 4.4

und die .htaccess Datei angepasst werden.

 

Das sorgt für mehr Performance in Frontend und Backend, hat aber auch zur Folge das, zumindest bei mir, einige CSS Files nicht mehr korrekt eingebunden wurden -- genauer gesagt wurden die Dateien ohne Inhalt ausgeliefert.

Da ich fürs Frontend ohnehin lieber die Extension scriptmerger nutze (die neben gzip und Minifizierung noch einige nützliche Funktionen mehr bietet), wäre auch das Abschalten der Funktion ausreichend gewesen. Aus mir unerfindlichen Gründen wollte das aber auch nicht funktionieren.

 

 

Also musste eine Lösung her. Da die meisten System-Module mit Standard CSS Klassen und Elementen für ihre Ausgabe arbeiten sind bei diesen kaum Fehler in der BE-Darstellung sichtbar. Das Extension-Modul von Formhandler hingegen bindet die CSS Datei etwas regelwidrig direkt in den body ein. Funktioniert, ist aber nicht die Optimallösung.

Die System-Extension recycler nutzt für sein AJAX-gestütztes Interface eine eigene CSS Datei und interessanterweise funktionierte dessen Ausgabe. Diese bindet das CSS seit neustem wie folgt ein:

 

$this->doc->JScode .= '<link rel="stylesheet" type="text/css" href="' . t3lib_div::createVersionNumberedFilename(t3lib_div::resolveBackPath($this->doc->backPath . t3lib_extMgm::extRelPath('t3blog') . 'lib/styles.css')) . '" />';
Korrekte Einbidung von CSS Dateien in TYPO3 4.4 Backend Modulen

Da ich erst vor einiger Zeit in eben diese System-Extension nach der korrekten Methode CSS im Backend einzubinden gesucht habe, bin ich mir sicher das dort voher noch mit $this->doc->addStyleSheet gearbeitt wurde.

 

Wieso bei der Implementierung der neuen Features nicht auch die Methode addStyleSheet beachtet wurde ist mir persönlich noch ein Rätsel.

 

 

Hier gehts zum betreffenden Bug Report der Extension t3blog. Dort ist das ganze nochmal komplett dokumentiert.

 

Update

 

Der unten stehende Code beachtet auch ältere TYPO3 Versionen, danke an Stefan

if (version_compare(TYPO3_version, '4.3', '<')) {
	$this->doc->addStyleSheet('t3blog_css', t3lib_extMgm::siteRelPath('t3blog') . 'lib/styles.css');
} else {
	$this->doc->JScode .= '<link rel="stylesheet" type="text/css" href="' . t3lib_div::createVersionNumberedFilename(t3lib_div::resolveBackPath($this->doc->backPath . t3lib_extMgm::extRelPath('t3blog') . 'lib/styles.css')) . '" />';
}
TYPO3 Backend Module CSS Einbindung für alle Versionen (ungetestet)

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

5 Kommentare

stefan

28. Oktober 2010

Hi Felix,


nur, dass wir uns nicht missverstehen – die Versionsweiche ist nicht von mir, sondern in der aktuellen Version von t3blog im TER bereits vorhanden.

Ich hab lediglich die Zeile im else-Branch ausgetauscht...


Gruß Stefan


Felix Nagel

27. Oktober 2010

Update

Hey Stefan,


da hab ich wohl den falschen Code geposted. Danke für den Hinweis. Ich war mal so frei und hab deinen Snippet hier geposted, damit der Nächste eine übergreifend funktionierende Version findet.


Grüße

Felix


stefan

27. Oktober 2010

Hi Felix,

bin grad dabei, t3blog 1.10 in TYPO3 4.4.4 einzubauen und da klappt es mit dem CSS in den Backend-Modulen mal so gar nicht...

Hi Felix,


mittlerweile scheint die Weiche, die du im Bug-Report vorgeschlagen hast, eingebaut zu sein:


(lib/class.tx_t3blog_modbase.php)


if (version_compare(TYPO3_version, '4.3', '';


Wenn man die Zeile mit $this->doc->addStyleSheet gegen diese austauscht, ist alles wunderbar.


Jetzt frag ich mich natürlich: Ist das Snippet, dass du in diesem Posting oben als "Korrekte Einbindung..." bezeichnest, doch nicht so korrekt?!? Zumal du unter diesem noch schreibst, dass dort "VORHER noch mit $this->doc->addStyleSheet gearbeitet wurde" ?!?


Oder hab ich irgendwas gründlich falsch verstanden? :)


Leicht verwirrt, letztendlich aber doch glücklich, eine Lösung gefunden zu haben:

Stefan


Felix Nagel

20. Oktober 2010

Meine scriptmerger Konfiguration

Hey mtess,


daran liegt es nicht. Ich binde meine teilweise über Extensions (u.a. auch t3jquery) und per TS ein. Sollte egal sein da scriptmerger den gesamten gerenderten HTML per regex unter die Lupe nimmt. Du bist dir im klaren das ich hier von der Extension scriptmerger spreche, nicht von der Seit TYPO3 4.4 integrierten Lösung spreche?


In meiner localconfig steht folgendes:

$TYPO3_CONF_VARS['FE']['versionNumberInFilename'] = FALSE; // needed for sriptmerger

$TYPO3_CONF_VARS["FE"]["compressionLevel"] = FALSE;

$TYPO3_CONF_VARS["BE"]["compressionLevel"] = TRUE;

$TYPO3_CONF_VARS['BE']['versionNumberInFilename'] = FALSE; // needed for sriptmerger


und scriptmerger ist so konfiguriert:

javascript {

enable = 1

parseBody = 1

addBeforeBody = 1

doNotRemoveInDocInBody = 0

addContentInDocument = 0

inlineHeadToBodyFile = 1


# minification

minify {

enable = 1

useJSMinPlus = 1

ignore = \?,\._min\.,\.min\.,\.ignore\.,ga.js,addthis_widget.js,fullcalendar.min.js,ui.tooltip.js

}


# gzip compression

compress {

enable = 1

ignore = \?,\.gz\.,\.ignore\.,ga.js,addthis_widget.js

}


# merging

merge {

enable = 1

# im_twitter_ajax = jquery-linkize.js,twitter.js

ignore = \?,\.ignore\.,ga.js,publisher-en.js,addthis_widget.js,jquery.beautyOfCode.js,fullcalendar.min.js,gcal.js,jQueryTwitter.js

}

}


Wie du siehst sollte man sich an die richtige Einstellungen rantasten da es unter Umständen Fehler gibt, wenn das eingebundene JS nicht sauber programmiert wurde.


Mit der Reihenfolge hatte ich nie Probleme, das sollte klappen. Allerdings ist das bei mir auch nicht so problematisch, da ich jquery domready events nutze.


Ich für meinen Teil habe scriptmerger auch noch etwas erweitert um die im head von denen im body zu trennen. Schau mal in den bugtracker von scriptmerger, ich hab das bereits als Verbesserung geposted.

 


mtness

20. Oktober 2010

scriptmerger

Hi again!


mich würde mal Deine scriptmerger-configuration interessieren... Bin bisher nämlich nicht glücklich geworden mit dieser extension. Allerdings binde ich meine stylesheets und scripte statisch im typoscript ein - was wohl auch der Grund dafür ist, das scriptmerger wohl nicht funzt.

Aber ich habe ansonsten noch keinen besseren Weg gefunden, css&conditional comments im header und alle scripte in der richtigen Reihenfolge(!) am Ende des dokuments einzubinden - da bleibt mir wohl nur das händische min, was meinst Du?


Viele Grüße, mtness.