[TYPO3-dev] Best practice for including JS / CSS from an extension

Fabien Udriot fudriot at omic.ch
Wed Jun 15 12:21:45 CEST 2011


>> Pro: you don't have to take care of the proper markup and just provide
>> the file-name.
>
> Cons:
> - it's easy to put them in an HTML template
> - CSS/JS can vary per template (which you can often set in the plugin flexform; so select other
> template and you have appropriate CSS/JS). This is also accessible for non-admins
> - it's (as you said) not compatible with all currently supported TYPO3 versions

I haven't directly experimented the troubles mentioned in the Cons, even with Extbase extensions 
(not yet?).

Generally, I tend to prefer the "new" API of the Page Renderer for loading the JS / CSS as it 
provides optimised group where one can put its files. Furthermore, it is claimed to have better 
performance if the CSS is loaded first which is guaranteed by the Page Renderer.

I am using the additionalHeaderData only when no other choice are possible. Otherwise I find, it 
becomes very quickly a big mess and you are never sure whether you are overriding something...

I don't know how well the new API is documented. I didn't see much info within "doc_core_tsref.pdf". 
Probably missing information... Some time ago, I stumbled upon a PDF which sums up the different 
method of including CSS / JS by TypoScript. For each TypoScript a PHP method exists. I have attached 
the document on the email, hoping attachments are allowed on the ML.

In case it is dropped, I put the file on the Wiki, too:

http://wiki.typo3.org/Pending_Documentation#Page_Render_JS_.2F_CSS_Include
http://wiki.typo3.org/File:T3_pageinclude_sheet.pdf


> If you want to use the newer API I'd set up two sections in the extension's Typoscript where you can
> define which CSS and which JS should be included on a page where the extension is used.
> In your extension you can parse those TS sections and call the add*() functions for each CSS/JS file.
>


More information about the TYPO3-dev mailing list