[TYPO3] Problem with TypoScript conditions and page.includeCSS

Mon Mar 10 17:37:58 CET 2008

Hi,

On Mon, Mar 10, 2008 at 5:22 PM, Stephen Bungert
<s.bungert at metrinomics.de> wrote:
> I replace mine with something more akin to yours:
>
>  ### CSS Includes ###
>  ### ------------ ###
>
>  [browser = msie]
>  page.includeCSS {
>
>   file1 = fileadmin/templates/css/fdm_reset.css
>   file1.media = all
>   file2 = fileadmin/templates/css/fdm_core.css
>   file2.media = screen
>   file3 = fileadmin/templates/css/fdm_print.css
>   file3.media = print
>   file4 = fileadmin/templates/css/fdm_ie7.css
>   file4.media = screen
>  }
>  [else]
>  page.includeCSS {
>
>   file1 = fileadmin/templates/css/fdm_reset.css
>   file1.media = all
>   file2 = fileadmin/templates/css/fdm_core.css
>   file2.media = screen
>   file3 = fileadmin/templates/css/fdm_print.css
>   file3.media = print
>  }
>  [end]
>
>  But it still does not work. When I look at the source in IE I don't see this
>  css in the head
>  fdm_ie7.css. What could I be doing wrong?
>
>  Here is the whole basis template where the includeCSS parts are:
>
>  ### PAGE ###
>  ### ---- ###
>
>  page = PAGE
>  page.typeNum = 0
>
>  # Copying the content from TEMPLATE for <body>-section:
>  page.10 < temp.mainTemplate
>
>  # Declare a page header text object
>  page.headerData.10 = TEXT
>
>  # Use page subtitle field first; otherwise use page title field
>  page.headerData.10.field = subtitle // title
>
>  # Wrap the field with the following
>  page.headerData.10.noTrimWrap = |<title>FDM: |</title>|
>
>  page.bodyTag >
>  page.bodyTagCObject = HTML
>  page.bodyTagCObject.value.field = alias//uid
>  page.bodyTagCObject.value.wrap = <body id="id|">
>
>
>
>  ### CSS Includes ###
>  ### ------------ ###
>
>  [browser = msie]
>  page.includeCSS {
>
>   file1 = fileadmin/templates/css/fdm_reset.css
>   file1.media = all
>   file2 = fileadmin/templates/css/fdm_core.css
>   file2.media = screen
>   file3 = fileadmin/templates/css/fdm_print.css
>   file3.media = print
>   file4 = fileadmin/templates/css/fdm_ie7.css
>   file4.media = screen
>  }
>  [else]
>  page.includeCSS {
>
>   file1 = fileadmin/templates/css/fdm_reset.css
>   file1.media = all
>   file2 = fileadmin/templates/css/fdm_core.css
>   file2.media = screen
>   file3 = fileadmin/templates/css/fdm_print.css
>   file3.media = print
>  }
>  [end]
>
>  It is the last of the basis templates ( I have 3). Therefore  the css ist he
>  last part oft he template typoscript. Does this matter?

I'm not so sure about how/whether this [else] works with conditions.
Try it like this instead (the general pattern in TS is 'set the
defaults, and then override for specific cases):

page.includeCSS {
   file1 = fileadmin/templates/css/fdm_reset.css
   file1.media = all
   file2 = fileadmin/templates/css/fdm_core.css
   file2.media = screen
   file3 = fileadmin/templates/css/fdm_print.css
   file3.media = print
}
[browser = msie]
page.includeCSS {
   file1 = fileadmin/templates/css/fdm_reset.css
   file1.media = all
   file2 = fileadmin/templates/css/fdm_core.css
   file2.media = screen
   file3 = fileadmin/templates/css/fdm_print.css
   file3.media = print
   file4 = fileadmin/templates/css/fdm_ie7.css
   file4.media = screen
}
[global]

Incidentally, this task is probably much more easily accomplished with
IE conditional comments [1], since a) if you develop for a
standards-aware browser, the IE-only stylesheets are usually very
small, and b) since the decision whether to use them is shifted from
the webserver (this is what you're doing now) to the browser itself.

-- 
Christopher Torgalson
http://www.typo3apprentice.com/

[1] http://www.quirksmode.org/css/condcom.html