[TYPO3] Using csstidy in T3 possible?

[Christopher Torgalson]

Hello again,

On 1/1/07, Andreas Balzer <typo3 at andreas-balzer.de> wrote:
> Hi!
> I have just commented between your lines..
> Christopher Torgalson schrieb:
>
> > This has nothing to do with your actual question, but I've never even
> > heard of anyone using so much CSS in any site, anywhere.
> I have to admit, I'm using very much CSS code. But i don't use as much
> as you might think ;)
> My general css file has about 1600 lines
> (www.ess-erfurt.de/dev/?type=1). There are some comments which have to
> be removed, some times a few rules are set twice and at some places
> you'll find a lot of spaces.. .. it's just in development..
>
> > I routinely
> > account for all IE > version 4
> Well I did not think about IE 4 yet, but all the others (i don't have a
> mac and so were only able to test the website on Safari) are supported
> ;) (?type=2, ?type=3, ?type=4)

Heh :-) I support versions of IE /greater than/ 4 ('> 4', not '>=4').
I'm not a masochist...

> > as well as any mozilla product with a
> > rendering engine newer than that in NS 6, plus versions of Opera > 7,
> > and Safari, and have only recently decided not to support IE 5 for the
> > Mac. All the sites I build should work in text-only browsers, and many
> > of them will work in Netscape version 4. But this much CSS seems
> > gigantic!

> Text browsers don't use CSS.. So i haven't coded css for them ;)
> However: If there's a css textbrowser it should be capable of showing my
> website almost nicely.

Yes, this was the point I was making.

> > My first reaction on reading your post is to think that there must be
> > ~15 pages too many of css involved (unless they're all quite short);
> Actually the stylesheets are short ;)

They can't be /that/ short; try 'CSS > view CSS' in the developer
toolbar in firefox on the home page; there are > 10000 lines of CSS
totaling more than 140kb (and the view CSS tool does NOT show css
files called by conditional comments)!

> > you're sure that so much is necessary?

> Take a look at www.ess-erfurt.de/dev/444.0.html
> In our installation, there's a css for everything. For news, for
> comments, checklists, menus (layer menus), images, flash files, ... Most
> of what you see there is made with pure CSS (unlike www.ess-erfurt.de -
> our old (but currently running version)
> If you switch CSS off, you'll see what CSS can do. BTW: There isn't a
> single hack for any browser, except margin:0px auto; and text-align:center;

Yep. Haven't built any websites any other way for several years.

> > (Just for example, I don't
> > think I've ever built /any/ site that needed more than about ~2000
> > lines of CSS--and there usually has to be some kind of extenuating
> > circumstance for it to get within 500 lines of being that big...)

> As I told, we have css for everything. I wanted to make a website,
> that's 100% w3c valid in the end (the current encoding issues won't be
> there by thursday), completly secure (SSL) (later also captcha support,
> etc..) and 100% customizable. This means, we have over 40 different
> subtypes of our main CD which are all supported through CSS.

I'm not sure what you mean by 'subtypes of our main CD', but unless
I'm missing something fairly drastic (I may be!), I'd still estimate
that the css codebase is larger than it really needs to be by a factor
of at least 3, if not 5.

Just a few examples:

1. There are 80 [!] 'font-family' declarations, but there are probably
only something like 10 families reliably available on most users'
systems. If we hypothetically accept 10 as the number of possible
fonts, you have enough font-family declarations to account for almost
every single permutation of those 10 fonts...but you are actually
using very few permutations of a very small set of font families.

2. There are not many defaults; that is, there are hardly any styles
for html elements except within descendant selectors. In other words,
not many styles for html elements except in the context of  TYPO3's
million-and-one default classes (p.bodytext, for example is a totally
insane default for the system, but that's another subject). Setting up
a good set of styles for the basic html elements can probably elminate
the need for huge chunks of the CSS in your various files.

3. There're many instances where similar properties are not grouped
(in fact with the hx elements, these account for quite a few of the
font-family declarations).

All of the above are really instances of not taking advantage of CSS'
default 'inherit' values; e.g. if you set a style like:

body {
  font-family:arial,helvetica,tahoma,sans-serif;
  font-size:12px;
  line-height:1.4;
  color:#000;
 }

.../every/ html element in the site will inherit these settings. This
allows you to make changes /only/ where styles need to be different.
Combine the defaults in the body element above with a bit of grouping,
and this:

h1 { font-family:Verdana, Arial; color:black; font-weight:bold; font-size:1em; }
h2 { font-family:Verdana, Arial; color:black; font-weight:bold; font-size:1em; }
h3 { font-family:Arial, Verdana; color:black; font-weight:bold; font-size:1em; }
h4 { font-family:Arial, Verdana; font-weight:bold; color:black; font-size:1em; }
h5 { font-family:Arial, Verdana; font-weight:bold; color:black; font-size:1em; }

...can become this:

h1, h2 { font-family:verdana,vera,helvetica,arial,sans-serif; }
h1, h2, h3, h4, h5 { font-size:1em; }

I don't know if this is a useful comment or not, but CSS sort of
'clicked' for me a few years ago when I realized that you could think
of it as a giant switch() construct. This made me understand that if I
set reasonable defaults (e.g. like 'default:'), I could cover most of
the bases and then just add the /exceptions/ to the code as when
needed like adding additional 'cases' to switch() (e.g. like 'case
'foo':, case 'bar': etc...)


> > Also, if I can just go OT for a minute, I'm quite interested in using
> > TYPO3 for generating CSS and I've done quite a bit of it; if you're
> > willing, it might be interesting to compare notes on the problems and
> > successes you've had...
>
> Nice :) But I have just used normal TYPOScript to do it..


Well obviously, but there are things TS does well in this regard, and
things it does rather poorly. I just wondered if you had any comments
about your experiences with it. I've found, for example, that
Typoscript needs considerable help to make intelligent use of
GIFBUILDER background images when the size is important... (i.e. since
IMG_RESOURCE does not load the register with the image properties as
does IMAGE [1], [2]).

Anyway, I will stop the babble at this point and just say 'happy new year!'


-- 
Christopher Torgalson


[1] http://typo3.org/documentation/document-library/references/doc_core_tsref/4.0.0/view/8/6/
[2] http://bugs.typo3.org/view.php?id=4006