[TYPO3-v4] CSS styled content for HTML 5 (Draft attached)

[Ernesto Baschny [cron IT]]

Hi,

Susanne Moog schrieb am 07.10.2010 13:29:

> I haven't had time yet to have a closer look to your modifications but
> wanted to say some general things.
> 
> First of all: Thanks for sharing your proposal, it's good to see someone
> already taking some steps to get the frontend HTML5 compliant.
> 
> I also think it would be a great idea to have a naked css styled content
> and a html5 one, but I have one fear: With providing all those different
> templates CSS styled content will soon have 10 or more static templates
> that could be included, this would be a maintaining nightmare and also
> looks confusing (or at least not nice) in the selector for the
> templates. So if anybody has an idea on how to implement the different
> requirements without using single templates, that would be really cool.

I agree with Susanne.

For the "non-CSS" variant, I also think that usually the choice isn't
between "all or nothing", you usually need just some specific classes.

Condition idea
----------------

One idea would be to have the css_styled_content setup.txt as it is now
(with all those fancy classes) and stripping the classes in a dedicated
condition block at the end. Something like:

[globalVar = LIT:1 = {$stripCssClasses}]

lib.stdHeader.3.headerClass >
...
tt_content.textpic.20.text.10.10.stdWrap.dataWrap = <div>|</div>
...

[global]

So setting one constant triggers some modifications on the template.
Only fear I have with that is that this condition block will become very
confusing once we have it all there.

TAG cObject
------------

Another alternative might be some new TypoScript cObject that we use for
adding tags in our code.

So instead of this:

10.stdWrap {
	dataWrap = <div class="csc-textpicHeader
csc-textpicHeader-{field:imageorient}">|</div>
}

It would look like this:

10.stdWrap {
	wrap.cObject = TAG
	wrap.cObject {
		tag = div
		attribute.class = csc-textpicHeader csc-textpicHeader-{field:imageorient}
		attribute.class.insertData = 1
		content = |
	}
}

Having that in place, we could have a central configuration option for
the "TAG" cObject, for example for specifying XHTML conformity or for
filtering certain css-classes or disabling them completely. Maybe even
providing global alternatives for HTML5 tags.

That way we could ship a single styled HTML5 with CSS classes based
css_styled_content setup.txt (fully blown) and some central switches to
customize the output.

E.g. render all "<section>" tags as "<div>"...

Cheers,
Ernesto



> 
> To cite Thomas:
> 
> "HTML Version: "4|5", defines which HTML tags/attributes to use.
>  XHTML Option: "true|false", mainly handles how to close tags.
>  CSS Option: "true|false", handles CSS class population."
> 
> which would result - if I understood correctly - in
> 
> HTML 4 + CSS
> HTML 5 + CSS
> XHTML 4 + CSS
> (XHTML 5 + CSS)
> HTML 4 + noCSS
> HTML 5 + noCSS
> XHTML 4 + noCSS
> (XHTML 5 + noCSS)
> 
> and then in some future version:
> HTML 4 + CSS - 4.5
> HTML 5 + CSS - 4.5
> XHTML 4 + CSS - 4.5
> (XHTML 5 + CSS) - 4.5
> HTML 4 + noCSS - 4.5
> HTML 5 + noCSS - 4.5
> XHTML 4 + noCSS - 4.5
> (XHTML 5 + noCSS) - 4.5
> HTML 4 + CSS - 4.6
> HTML 5 + CSS - 4.6
> XHTML 4 + CSS - 4.6
> (XHTML 5 + CSS) - 4.6
> HTML 4 + noCSS - 4.6
> HTML 5 + noCSS - 4.6
> XHTML 4 + noCSS - 4.6
> (XHTML 5 + noCSS) - 4.6
> HTML 4 + CSS
> HTML 5 + CSS
> XHTML 4 + CSS
> (XHTML 5 + CSS)
> HTML 4 + noCSS
> HTML 5 + noCSS
> XHTML 4 + noCSS
> (XHTML 5 + noCSS)
> 
> 
> ^^ that's what I'm trying to prevent ;=)
> 
> Thanks for sharing your thoughts,
> 
> Susanne
>