[TYPO3-BLE] Status report 27-7-2011: Project Accessibility

[Patrick Broens]

Hi,

The current version of css_styled_content is using style="width:xxpx;" a
lot. Ernesto, which I CC in here as well, told me this was basically
done to have longer captions of images limited to the width of the
image, if they exceed the width of the image. For one image the
surrounding divs (mostly 3) get this style attribute.

The BLE project does not allow inline styles, as you all might know. For
instance there is the possibility to add a top or bottom margin to each
and every content element. This is done by an integer in the input
field. Because this property is not used much by content editors, I've
made a solution to add this to the typo3temp/stylesheet_xxx.css file.
When this is used in a page, this page gets a different stylesheet (with
the addition). You can imagine when these fields are used in each and
every page, we have a different stylesheet for every page, which is not
preferred. IMHO for top and bottom margin this is rarely the case.

For images this is a different story. Images are used at a lot of places
within websites, with or without text. If I would transfer these
style="width:xxpx;" properties to classes and put them in these
stylesheets, we end up with a lot of stylesheet files.

Yesterday and today I've made a lot of testing pages with images / text
with image to see if it is possible to get rid of this width property
completely. This is possible! I now have a lot of pages with all kind of
testcases where no width property for images is used anywhere. Not as a
style attribute and not with classes which refer to
typo3temp/stylesheet_xxx.css

But, yes there is always a but, there is one browser who does not
support the special CSS I've used to make this possible. Guess who?
Internet Explorer 7.

Firefox, Chrome, Safari, Opera and IE8+ are fine with it.

How come? IE7 is not supporting the CSS 'display:' properties 'table',
'table-cell' and 'table-caption' which I use, and the 'caption-side'
property.

I'm totally against having a lot of css classes generated for each and
every page and put them in typo3temp/stylesheet_xxx.css files. Each and
every page then will have its own stylesheet and typo3temp will grow
like hell.

There is an alternative, but then I have to use a TypoScript condition
for IE7. I can use tables for IE7 without using any width. Of course I
don't want to use tables for the rest of the browsers. The community
will laugh their socks off when we go back to tables  But this needs
a condition in the css_styled_content, and I don't think we ever used a
browser condition anywhere in the core.

The only problem in IE7 I then have is that the caption will always be
above the images, instead of below, because I will use a <caption> tag
for it. (IE7 does not know caption-side CSS property)

I desperately want your opinion about this matter. I hope I was clear
enough in my explanation. I've added a small testfile to this mail, so
you can see what I've partly done. All inline styles used in there can
be moved to the css_styled_content styles. Nothing dynamic in there

Cheers,

Patrick