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

Christopher bedlamhotel at gmail.com
Mon Aug 15 20:30:45 CEST 2005


Hello,

On 15/08/05, Matthias Nagl <mnagl at web.de> wrote:
> 
> 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 >
> 

Neat solution :-) It should probably go into the wiki I think. But I'm
a bit skeptical of the premise; an unusually large stylesheet I worked
on recently was _almost_ 20k. Stylesheets are typically loaded and
cached _one_ time in a session. for this reason, the size of a
stylesheet should have little overall impact on bandwidth unless it's
HUGE.

You're definitely right that the default solution - adding extension
styles to the page head is a poor solution, but it's also possible to
add those styles dynamically to a single stylesheet - which should
then be cached by the browser [1]:

config.inlineStyle2TempFile = 1 

Another way of saving on css-related bandwidth is to prune those
default styles. Many of them have almost incredibly bloated css in
them (sorry to any extension developers reading this, but the css is
sometimes outrageously overdone...) Suggested tactics for site
developers dealing with default styles:

1. Group similar styles (this tactic also makes your css vastly
simpler to maintain and helps site styles to remain consistent):

.plugin-a,
.plugin-b,
.plugin-c,
.plugin.d,
.plugin.e { /* styles */ }

2. Use contextual styling (this technique is also useful for ridding
your markup of unneeded css class declarations such those found in '<p
class="bodytext">...</p>'):

p { /* styles for all p elements */ }
.plugin-a p { /* styles for p elements inside the class 'plugin-a';
more specific than previous style, so will override them  */ }

3. Use classes/ids on the body element (particularly useful for a)
changing styles per section of a site, or b) changing layout from one
page to the next...):

body.leftColumn { /* styles applied only to pages where the body
element has the style 'class="leftColumn"' */ }

body.rightColumn { /* styles applied only to pages where the body
element has the style 'class="rightColumn"' */ }


-Christopher


[1] http://typo3.org/documentation/document-library/doc_core_tsref/quot_CONFIG_quot/



More information about the TYPO3-english mailing list