[Typo3] HOWTO: conditional loading of CSS-files for extensions

[Matthias Nagl]

I've looked out for descriptions how to load CSS-files for extensions only on pages where a Content Elements of the respective extension is present (for example load a special css-file for the indexed search only on a search page to save bandwidth on all other pages).

I found out that several people seem to have such a feature on their wishlist but the only proposals for solutions I found were to use extensions which allow to select CSS-files on a per page basis. Thats not very comfortable because if a user adds a new extension-CE to a page he always has to remember to add the appropriate styles. The normal Typo3 solution is also quite suboptimal beacause the CSS is simply added to every page as inline CSS and including for example CHC-Forum to one single page boosts every page of the website by about 12kb - and normally several such extension-styles stack.

To solve this problem I've worked out some TS. Simply add it to your page setup, customize it to your extensions and enjoy:

# find out which list_types exist on the page
temp.ctypes = CONTENT
temp.ctypes {
  select.selectFields = list_type
  table = tt_content
  renderObj = TEXT
  renderObj.field = list_type
  renderObj.wrap = |,
}
# include Stylesheets
page.headerData {
  # Common Stylesheet
  10 = TEXT
  10.value = <link rel="stylesheet" type="text/css" href="/fileadmin/template/main/style.css" />
  # IE-Workaround Stylesheet
  20 = TEXT
  20.value ( 
	<!-- IE and standards... It seems impossible. -->
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="/fileadmin/template/main/iestyle.css" />
	<![endif]-->
  )
  # CHC-Forum Stylesheet
  30 = TEXT
  30 {
    value = <link rel="stylesheet" type="text/css" href="/fileadmin/template/forum/style.css" />
    if.isInList = chc_forum_pi1
    if.value.cObject < temp.ctypes
  }
  # Indexed Search Stylesheet
  40 = TEXT
  40 {
    value = <link rel="stylesheet" type="text/css" href="/fileadmin/template/search/style.css" />
    if.isInList = indexed_search
    if.value.cObject < temp.ctypes
  }
  # danewslettersubscription Stylesheet
  50 = TEXT
  50 {
    value = <link rel="stylesheet" type="text/css" href="/fileadmin/template/newsletter/style.css" />
    if.isInList = da_newsletter_subscription_pi1
    if.value.cObject < temp.ctypes
  }
}
# disable Header-CSS
plugin.tx_chcforum_pi1._CSS_DEFAULT_STYLE >
plugin.tx_indexedsearch._CSS_DEFAULT_STYLE >
plugin.tx_danewslettersubscription_pi1._CSS_DEFAULT_STYLE >

Yours

Matthias

_________________________________________________________________________
Mit der Gruppen-SMS von WEB.DE FreeMail können Sie eine SMS an alle 
Freunde gleichzeitig schicken: http://freemail.web.de/features/?mc=021179