Out-of-date CSS person needs up-to-date CSS advice!!

[Alan Silver]

Hello,

I shamefully admit to be an old web designer, from before the days of
CSS. In those heady days, tables were king and were used for every
possible kind of alignment. When CSS came along, it was useful for
specifying colours and fonts for a site in one central location, but
useless for any real kind of design work due to the poor browser
support. I got well in to using CSS for colours and fonts, but carried
on using tables for layout.

I recently came across www.csszengarden.com and was totally amazed that
you could do such things with CSS alone. I am completely rethinking my
approach to page layout, but need some help. I have looked at the CSS
there, and at a fair few other sites I have found since, but haven't yet
got the picture completely clear.

So, any suggestions for some background material that will bring me up
to date? I have trawled around Amazon and found three books that look
interesting, the CSS Zen Garden one, "More Eric Meyer on CSS" and
"Cascading Style Sheets the Definitive Guide" (also by Eric Meyer).

Any comments on this choice of books? Remember, I do have a good
understanding of basic CSS, so I don't need anything for a complete
beginner, but I am obviously missing quite a lot of the picture, so I
need something for, erm, a complete beginner!!

Also, are there any on-line resources that I can use? I prefer books as
it's easier to read on paper, but I would also like to see some on-line
material.

Finally, how good is modern browser support for CSS? I only looked at
those sites in IE6, I don't bother in other browsers (although I'm sure
they were fine). Is CSS still a major challenge of working your way
around browser deficiencies?

Thanks for any comments.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Spartanicus]

Alan Silver <al*********@no spam.thanx> wrote:

I recently came across www.csszengarden.com and was totally amazed that
you could do such things with CSS alone. I am completely rethinking my
approach to page layout, but need some help. I have looked at the CSS
there, and at a fair few other sites I have found since, but haven't yet
got the picture completely clear.

My usual csszengarden rant:

CSS2 is rather inflexible, many stylistic and layout changes require a
change to the markup. Particularly so if IE5's poor CSS support is
considered as the benchmark as is the case with CSSZengarden. CSS
selectors is the only part of CSS that can be labeled as flexible, CSS2
selectors are not particularly powerful, and IE doesn't support many of
them anyway.

One of the stated aims of CSS is to separate content and styling. This
is a rather lowly aim. The higher aim is to separate the markup code
from the styling and the layout. CSS2 does a poor job in separating
markup code from styling, and it has no real support for creating page
layouts (floats, positioning and css tables are inappropriate and
woefully inadequate tools for creating a quality layout).

To push what can be achieved with CSS significant changes to the markup
code are needed, this introduces massive inflexibility. CSSZengarden is
an extreme example of this, it uses copious amounts of classes, id's,
divs and spans to create the illusion that CSS is flexible enough to
radically change the look of a site, it isn't.

CSSZengarden is misunderstood by most of the people who view it. It does
not demonstrate the power of CSS, instead it's a grotesque
misrepresentati on of the capabilities of CSS, and definitely not
something to be emulated.

--
Spartanicus

[Alan Silver]

>>I recently came across www.csszengarden.com and was totally amazed that

you could do such things with CSS alone. I am completely rethinking my
approach to page layout, but need some help. I have looked at the CSS
there, and at a fair few other sites I have found since, but haven't yet
got the picture completely clear.

My usual csszengarden rant:

<snip>

OK, I'm here to be educated ;-)

I hear what you are saying, but am no clearer as to the direction in
which I should proceed. I am interested in what works now, not what may
be. I do web design for a living and need to rely on what will work with
the browsers that are out there.

Where should I look for education on how to separate as much as is
practical today? At the moment, my coding still mixes a lot of
presentation with content as it uses tables. I would like to improve on
that. How do I go about it.

Thanks for the reply. Your further comments would be appreciated.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Spartanicus]

Alan Silver <al*********@no spam.thanx> wrote:

Where should I look for education on how to separate as much as is
practical today?

Taking other people's advice on that is questionable.

What worked for me was years of banging my head against the desk asking
"why doesn't this work as I want/expect?", combined with reading the
specification again and again, years of experience getting to know the
browser bugs and hacks, and hanging out here.

YMMV

--
Spartanicus

[Alan Silver]

>>Where should I look for education on how to separate as much as is

practical today?
Taking other people's advice on that is questionable.

Yup, but it's a good place to start!!
What worked for me was years of banging my head against the desk asking
"why doesn't this work as I want/expect?", combined with reading the
specificatio n again and again, years of experience getting to know the
browser bugs and hacks, and hanging out here.

Which doesn't really get me anywhere. Sure I could spend years banging
my head against a wall, trying to work out what works and what doesn't,
but that's a hugely inefficient way of doing it. I'm just looking for
some pointers into advice on what can be done reliably today. That's
hardly so subjective, and plenty of people have already done it, so I'm
sure there must be some sources of reasonably reliable information.

--
Alan Silver
(anything added below this line is nothing to do with me)

[C A Upsdell]

Alan Silver wrote:

Hello,
So, any suggestions for some background material that will bring me up
to date? I have trawled around Amazon and found three books that look
interesting, the CSS Zen Garden one, "More Eric Meyer on CSS" and
"Cascading Style Sheets the Definitive Guide" (also by Eric Meyer).

I have CSS Zen Garden: I recommend it.

I have Cascading Style Sheets the Definitive Guide: it has a lot of
typos, some of which would terribly confuse beginners; also, I was not
impressed by how the information is organized.

[Alan Silver]

>> Hello,

So, any suggestions for some background material that will bring me up
to date? I have trawled around Amazon and found three books that look
interesting , the CSS Zen Garden one, "More Eric Meyer on CSS" and
"Cascading Style Sheets the Definitive Guide" (also by Eric Meyer).

I have CSS Zen Garden: I recommend it.

I have Cascading Style Sheets the Definitive Guide: it has a lot of
typos, some of which would terribly confuse beginners; also, I was not
impressed by how the information is organized.

Thanks for that. Any on-line resources that you recommend?

Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan J. Flavell]

On Mon, 8 Aug 2005, Alan Silver wrote:

I shamefully admit to be an old web designer, from before the days
of CSS.
You know, web use of stylesheets as a principle far outdates the
rubbish of pseudo-presentational quasi-HTML that was foisted on the
web by the Mosaic/early-Netscape folks - and soon aped by MS; and a
stylesheet language called Cascading Style Sheets itself somewhat
pre-dated that rubbish too - a prototype of it was implemented in a
W3C testbed browser which, at that time, was called Arena. So my way
of interpreting what's happening now is that we've finally found our
way back to the original path, after years of wasted nonsense with
what became [HTML/3.2 plus various proprietary rubbish]. And a good
thing too. Pity about the wasted half-decade and the bushels of
cluttered quasi HTML which they produced - and are still producing,
sadly.
In those heady days, tables were king and were used for every
possible kind of alignment.
[No, in the "heady" days, the Viola browser was king (1991-1994-ish).
Those who refused to learn from history, however, were doomed to
repeat it.]

Seems to me that you're muddling up one particular aspect of
stylesheets (various ways of positioning content) with one particular
aspect of tables (visual presentation of relationships between cells
of tabular data). The chronologies of those two separate technologies
aren't really so relevant, so let's move on...
When CSS came along, it was useful for specifying colours and fonts
for a site in one central location, but useless for any real kind of
design work due to the poor browser support.
Eh? You seem to have a very narrow interpretation of the term
"design". Might one suspect that your bridges would look good but
would collapse if the wind was just a few km/h higher than the
designer intended? That's what most "designer" web pages do in
practice, after all!

True "web design" must be a lot more than just the visual result on
one browser in one browsing situation (and a glance ahead shows that
you don't even consider any web-compatible browsers!).

One really must wrap oneself around the *design aim* of CSS that it's
optional. It's a proposal (or several) by the author, which will
probably enhance the presentation of the content in particular
range(s) of presentation situation, but which is intended to be
cascaded with any proposals by the end user (i.e the reader) or, if
push comes to shove, disabled entirely.

Whether you like this or not, it's not merely a fact, it's an actual
design aim of CSS. Some authors learn to make a virtue of this, and
get flexible web pages which do their job in a wide range of
presentation situations without fuss. Oh, and they also happen to
look how the author intended in the display situation which the author
had in mind - but that's only part of the design process.

Some authors spend (or should I say "waste") vast amounts of time
trying to factor OUT this flexibility, in favour of getting what they
suppose to be pixel-perfect designs. My verdict on that is: not only
are they unsuccessful, but their readers find their pages pointlessly
hostile: for example, refusing to fit in the reader's browser window,
forcing left-right scrolling; or displaying text at a miniscule size
with a low colour contrast so that it can't be read comfortably - or
indeed at all - at the reader's configured default size, and needs to
be zoomed (if the reader can be bothered) before it's usable. And so
on. In other words, the design is an ego trip for the author and
their sponsor, but of little benefit to their readers.
I recently came across www.csszengarde n.com and was totally amazed
that you could do such things with CSS alone.
Yes, it's a spectacular demonstration of what can be achieved, indeed;
but under no circumstances to be used as an actual model of how to
design normal web pages.
So, any suggestions for some background material that will bring me
up to date? I have trawled around Amazon and found three books that
look interesting, the CSS Zen Garden one, "More Eric Meyer on CSS"
and "Cascading Style Sheets the Definitive Guide" (also by Eric
Meyer).
I'm going to shy away from commenting directly on those, but what it
seems to me that one needs for a rounded understanding are three major
areas:

1. web design philosophy

2. CSS language specification

3. An understanding of how well that language is implemented
in browsers currently in use.

You'd also want to know what software tools are available e.g
syntax checkers and so on.

I wouldn't expect to find all of these things in the same place:
indeed some of (3), if published in a book, would likely be out of
date before the book was on the shelves.

The place to find (2) would currently be the W3C so-called "CSS2.1"
draft/specification, since it has modified CSS2 (dumbed it down, if
you want to be honest) to line it up with what currently-written
browsers (at least in their standards conforming mode) are supporting
out of CSS2.
Any comments on this choice of books? Remember, I do have a good
understanding of basic CSS, so I don't need anything for a complete
beginner,
....but your initial comments give cause to worry that you're more
interested in getting a perfect layout, than in facilitating the user
getting access to the content whatever their browsing situation. If
there's any truth in that impression, then you'd be trying to factor
OUT some of the benefits which the separation of content and markup
(HTML) from the presentational proposals (CSS) was intended to
achieve!

I'm hampered by having had the web as a hobby almost as long as it has
existed (thanks to my association at the time with CERN where TimBL
was working at its start), and I've sort-of soaked up the ideas as I
went along. The result is that I find every book I've ever seen on
web topics to be deeply unsatisfactory in various ways; but I've
learned a lot about current tactics from these usenet groups and the
web pages of the more reliable respondents here (i.e tactics in the
face of defective implementations of web browsers, as well as of that
misbegotten proprietary operating system component which thinks it's a
web browser).
Also, are there any on-line resources that I can use?
W3C CSS syntax checker...
I only looked at those sites in IE6, I don't bother in other
browsers

WHAT?

good luck. (If you suppose that thing to be a web browser, you're
going to need it...)

[Alan Silver]

<quick history snipped>

Seems to me that you're muddling up one particular aspect of
stylesheets (various ways of positioning content) with one particular
aspect of tables (visual presentation of relationships between cells
of tabular data).
Well, maybe, but I thought I was discussing the use of css purely for
making the content look pretty (colour, font, etc) and using tables to
ensure that the content appeared where on the page you wanted it.
However, as you rightly comment...
The chronologies of those two separate technologies
aren't really so relevant, so let's move on...

When CSS came along, it was useful for specifying colours and fonts
for a site in one central location, but useless for any real kind of
design work due to the poor browser support.
Eh? You seem to have a very narrow interpretation of the term
"design". Might one suspect that your bridges would look good but
would collapse if the wind was just a few km/h higher than the
designer intended? That's what most "designer" web pages do in
practice, after all!

Not sure what you mean by this, but reading on (mostly sniped for
brevity) shows that you got the wrong end of the stick as to my aim in
web design. Not necessarily your fault, but you assessed me 100% wrongly
;-)

<snip>Some authors spend (or should I say "waste") vast amounts of time
trying to factor OUT this flexibility, in favour of getting what they
suppose to be pixel-perfect designs. <snip>

I couldn't agree with you more!! I have never attempted pixel-perfect
design, nor do I ever expect to. I have argue this point many times,
mostly with print designers who have turned to the web and expect the
same level of control.

I pride myself on designing pages that will look good regardless of the
browser window size, screen resolution, etc. I don't say I'm a great
designer, but I certainly hold this aspect of design as very important.

I recently came across www.csszengarden.com and was totally amazed
that you could do such things with CSS alone.

Yes, it's a spectacular demonstration of what can be achieved, indeed;
but under no circumstances to be used as an actual model of how to
design normal web pages.

Why not? It looked like a fine example to me. The content was completely
unfettered by any presentational markup, leaving it available to be
presented in many different ways, according to the stylesheet chosen. I
thought that was an excellent way to design web pages. What do you have
against it?

<snip>The place to find (2) would currently be the W3C so-called "CSS2.1"
draft/specification, since it has modified CSS2 (dumbed it down, if
you want to be honest) to line it up with what currently-written
browsers (at least in their standards conforming mode) are supporting
out of CSS2.
But the W3C specs are, like all specs, very dry technical documents that
explain the syntax. They don't describe the ideas, nor discuss methods
of implementation. I can read specs, but they are only really any use
when you have an idea what you are doing and need to check a bit of
syntax. When you want to learn the background behind an approach to
doing something, they are basically useless.

Any comments on this choice of books? Remember, I do have a good
understanding of basic CSS, so I don't need anything for a complete
beginner,

...but your initial comments give cause to worry that you're more
interested in getting a perfect layout, than in facilitating the user
getting access to the content whatever their browsing situation. If
there's any truth in that impression, then you'd be trying to factor
OUT some of the benefits which the separation of content and markup
(HTML) from the presentational proposals (CSS) was intended to
achieve!

As I've already explained, there isn't even a shred of truth in that
idea. I'm not actually sure where in my post you got that impression,
but it doesn't really matter. Now you know the truth, maybe you will be
able to reply in a different vein.

<snip>

Also, are there any on-line resources that I can use?

W3C CSS syntax checker...

Again, fine for its purpose, but no use for learning the background.

I only looked at those sites in IE6, I don't bother in other
browsers

WHAT?

<g>
I know what you're thinking and you're wrong. I use IE6 'cos it's quick
and easy, and more sites work in it than the others. That's NOT 'cos
it's good, just that MS has domineered the browser market and more
people waste time optimising their sites for IE than anything else. I
used to use other browsers for general browsing, but got fed up of
looking at sites that didn't work 'cos the dee-ziner didn't know that
other browsers existed.
good luck. (If you suppose that thing to be a web browser, you're
going to need it...)

It does its job, maybe badly, but it does it!!

Anyway, thanks for the reply, but you haven't really helped me further
my understanding of how to use CSS the right way. I'm still looking for
some background in practical separation of presentation from content, as
much as can reasonably be done today. Any further comments would be
welcome.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Erik Funkenbusch]

On Mon, 8 Aug 2005 16:40:11 +0100, Alan Silver wrote:

Don't get too down on CSS based on the responses you've received. Yes,
it's an imperfect solution that could use a lot of help, but we're stuck
with what we have and have to make the best of it.

So, any suggestions for some background material that will bring me up
to date? I have trawled around Amazon and found three books that look
interesting, the CSS Zen Garden one, "More Eric Meyer on CSS" and
"Cascading Style Sheets the Definitive Guide" (also by Eric Meyer).
I highly recommend Erik Meye on CSS as well as the followup book More Eric
Meye on CSS. They're both good, but you should read the first one first.

I'd probably stay away from the zen garden book until you've had a little
more exposure (though reading the two Eric Meyer books would do that for
you), while the "Definitive guide" is more reference than anything else.
Make sure you get the second edition though, the first is primarily just
CSS1.

Other books:

Jeffery Zalman: Designing with Web Standards
Molly E. Holzschlag: Cascading Style Sheets
Also, are there any on-line resources that I can use? I prefer books as
it's easier to read on paper, but I would also like to see some on-line
material.
Plenty.

Try:

A list apart
The Web Standards Project
BlueRobot
Position is Everything

Google is your friend.
Finally, how good is modern browser support for CSS? I only looked at
those sites in IE6, I don't bother in other browsers (although I'm sure
they were fine). Is CSS still a major challenge of working your way
around browser deficiencies?

Yes.