[TYPO3-content-rendering] [Typo3-dev] Less features, more future

Thu Oct 13 17:26:12 CEST 2005

>>> 4. No inlines styles - they should be generated as dynamic
>>> stylesheets using
>>> a default typeNum. So each time the page is rendered it will create
>>> classes
>>> and ids for the tags _and_ the corresponding stylesheet.
>
>> I am not quite sure about that - I think when it comes to image with
>> decription and the description should be rendered as wide as the
>> image above - you have to assign a width.
>> I think this has to be done inline because there could be more than
>> one image on the page and an inline style would be better than
>> generic classes nobody remembers what they are good for one week
>> after coding them...
>
> I think JoH is refering to generating the CSS dynamically, and
> assigning UNIQUE "id"s to each element that needs to be styled. So
> instead of:
>
>    <div style="width:150px;">
>
> we would have:
>
>   #div78234892524 { width: 150px; }

Not exactly.
Since every content element can be defined by
a) the table it is taken from and
b) the uid
you can take this to have the following combination of class _and_ id:

<div class="single_imagecontainer" id="tt_content_123_1">

and for the next one

<div class="single_imagecontainer" id="tt_content_123_2">

and so on.

The class and it's properties can be hardcoded in the template file used for
the creation of the dynamic CSS, while the id and the properties that differ
from the class setup will be inserted dynamically.
Or even better: The default CSS for the classes comes from a static CSS
file, while the unique values for width, height, border etc. come from a
dynamic CSS file.

Since we got the possibility to cascade you can create things like these
without the need for additional ids for <img>-tags or captions.

This will be written dynamically:

#tt_content_123_1 {
    width:123px;
    height:123px;
}

#tt_content_123_1 img {
    width:123px;
    height:123px;
    border:2px solid green;
}

#tt_content_123_1 div.caption {
    width:123px;
    text-align:center;
}
#tt_content_123_2 {
    width:456px;
    height:456px;
}

#tt_content_123_2 img {
    width:456px;
    height:456px;
    border:2px solid green;
}

#tt_content_123_2 div.caption {
    width:456px;
    text-align:center;
}

> in the <head> (or exported to an external file by TYPO3, as TYPO3
> already does for _CSS_DEFAULT_STYLES) and in the HTML:

Never in the head (since this will have the same effect as inline styles)
always in external CSS files.

> I am not really sure if this is "cleaner" or more "accessible" or what
> are the main benefits of doing this, maybe JoH can comment on that, as
> my extension cron_cssstyledimgtext is directly affected by this.

It's just good practice to separate layout from structure. The HTML code
will be more "readable" and it will give you some additional possibilities.
If you create the CSS file as an additional page type, you can use
TypoScript to modify things directly in the CSS file.
You could create background images with GIFBUILDER and assign them to
headlines for image replacement, you could use conditions to write browser
specific CSS files without any hacks, just to mention some of the features
...
Since pages can be cached you just have to create these files once for each
page.

I hope it's more clear now what I would like to do ...

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.openbc.com/go/invuid/Jo_Hasenau