[thelist] how does XHTML/CSS seperate content from design more than using nested tables and the like?

Martin martin at members.evolt.org
Thu May 9 14:01:00 CDT 2002


On Thursday, May 9, 2002, at 07:26  pm, Chris W. Parker wrote:

> i've been doing a lot of reading lately on XHTML 1.0 Transitional and
> CSS lately on some websites, a list apart (http://www.alistapart.com/),
> and the new york public library site(http://www.nypl.org/styleguide/).
> what i've gathered is that it's very important to seperate content from
> design. and it's suggested that using XHTML/CSS is a good way to do it.
> but i have questions and concerns.
>
> 1. all the CSS-only sites i've seen all tend to look the same. there is
> no longer the complicated looking pictures and layouts. it's all pretty
> basic with mostly text. can anyone give me some examples of complicated
> sites using CSS only?

I think partly that's because
1) Some of what you'd need graphics for previously is accomplishable
     without (jeff has a photoshop colour picker emulator which uses
exactly
    2 images - one wee circle and one wee triangle, everything else is
CSS)
2) A good number of the people with CSS sites do so to demonstrate
     good code, which includes fast download times
3) Many of those sites don't *need* complex graphics
4) Actually, *most* sites are mostly text
5) It's a fairly new artform, so complexity will evolve.
6) There's been some re-evaluation about how much complexity is
    necessary.
7) If you're designing in boxes, that will tend to channel your thinking
    somewhat
8) Too many people just taking a layout from glish rather than thinking
    it through and designing from scratch (which is OK, as long as you're
not
    pretending otherwise)

> 2. is javascript compatible with XHTML?

Yes. However, device-specific event handlers tend to fall foul
of accessibility guidelines.

> in a page i'm trying to convert
> now (just to XHTML well-formedness, not a no-tables layout) the
> validator gives errors for two onClick events. are these not allowed in
> XHTML or is there a different way to utilize the same thing?

With validator.w3.org, you *should* be fine with onclick events
in both XHTML Transitional and Strict. If they're coded right... you
may have better validation results if you keep the script off the
page into a separate file (or separate it off with CDATA markup).

> 3. how does XHTML/CSS, when used correctly, seperate content from design
> more than using tables does?

With your table-based layout, you'll have to edit every single page
(or template if you're using some form of CMS) to implement a
design change - hell, even a colour change. With CSS, change one
file, and you're done. You can even have personalised layouts.

> in a regular HTML page with nested tables
> etc. you have to define what goes where and how it should look. and
> likewise a page with a bunch of DIV tags and CSS definitions you still
> have to do the same thing. please explain how it makes
> redesigning/adjusting layouts easier.

With CSS, you don't define what each section of content
*looks* like (including where it is positioned), just what it *means*.

So if tomorrow your branding chief comes in and tells you that you've
been taken over by WhizzyTech Corp, and you now have to use their
colour-scheme, you just redefine the area which semantically *means*
the page header to sit *there*, not *here*, and be *that colour/font*,
not
*this colour/font* by editing one style. No HTML changes needed
whatsoever.

HTML is content. CSS is design. Javascript is dynamic applications
affecting
one or both of them.

Content
Design
Logic

Separate.

Cheers
Martin
_______________________________________________
email: martin at easyweb.co.uk             PGP ID:	0xA835CCCB
	martin at members.evolt.org      snailmail:	30 Shandon Place
   tel:	+44 (0)774 063 9985				Edinburgh,
   url:	http://www.easyweb.co.uk			Scotland




More information about the thelist mailing list