Is it time to start using Cascading Style Sheets to layout pages or are they too unreliable; likely to make your Web pages inaccessible to those with buggy browsers?

-- Anonymous, December 14, 2001

Answers

One thing we have to keep in mind is that the use of tables for page layout can create accessibility problems in all the browsers. Tables for tablular data is another matter. But if we're using them to make our pages look pretty, then we are misusing them and going against the intent of the standards.

Owen Briggs, who has done a lot of work on CSS layouts and workarounds, recently wrote an article that addresses some of the problems that we face in rethinking how we create pages using CSS. I think you will find that it speaks to some of the issues you seem to be grappling with these days. This is not a technical "how to" piece. Definitely worth your time to read it. You can find it here:

http://www.thenoodleincident.com/tutorials/design_rant/

p.s. thanks for all the work you are doing at MCU. I find your site to be a very helpful resource, and it's giving me plenty of things to think about.

-- Anonymous, December 20, 2001

I agree with Owen's points - the problems start when we try to put them into practice. It is interesting to note that everything on his good lookin CSS designed page has been set using absolute sizes (in pixels) - including the text size which I cannot change via the preferences in my browser.

That's not to invalidate what Owen is saying - but I expect his use of pixels is a 'workaround' for known CSS problems with other text sizing options - in particular the use of relative sizes. This is where I have some problems with CSS for layout - it can't be done without knowing a raft of extra techniques - to solve known (and unknown) browser bugs.

The danger is that we are merely substituting 'table hacks' with 'CSS hacks' - both resulting in pages that are not accessible.

-- Anonymous, December 21, 2001

At some point we all had to learn a raft of HTML table hacks to create what we felt were better web pages. We didn't learn all these table hacks because it was easy or fun, we simply didn't have any alternatives.

Today, with CSS, we do have an alternative. Unfortunately the days of hacks and workarounds are not over, and I don't expect they will be soon. This is mainly because the different user agents(i.e. browsers) each have their own peculiar ways of interpreting our HTML/CSS pages.

As authors, we get to choose which technologies we wish to use to build our pages. If we place a lot of importance in how our pages look, we will choose to use all the available tricks and hacks to see that our pages are rendered the way we want in as many different device/browser combinations as possible. If we place a lot of importance on making our content as widely accessible as possible, we will take a different approach. In that case we will use the available technologies, including hacks and workarounds, to make the content accessible. The "look" of the content then becomes of secondary importance.

It is my opinion that CSS provides a much better way of achieving either of these goals. By separating the content from the layout, it is much easier for me to extend accessibilty to different user agents by altering the stylesheets, or adding an alternative stylesheet. The same is true if I want to change the appearance of the site.

The layout techniques using the CSS Box Model can be implemented without using absolute sizes for fonts. Wether you use absolute or relative font sizing, you're going to have problems. Just different ones.

Using relative sizes for fonts in a page (laid out with tables or CSS) can result in some odd looking arrangements when people start changing font sizes. It's really up to the author to see that when fonts get resized the page still works.

It's all a matter of deciding what is important to you as an author, who your audience is and what's important to them, and yes if you do this for a living you will have to consider what's important to your client.

Personally I'm just a hobbyist. I have a personal website and, as far as I'm concerned, the only person it has to work for is me. So I don't have a big problem with using absolute font sizes. I hope to have some alternative stylesheets soon, including ones using relative font sizes. I'll let you know how that works out.

-- Anonymous, December 29, 2001

Thanks for your comments Dylan. Don't think I don't appreciate your input - I do. I also largely agree with what you are saying - but I'm one of these people who finds it difficult not to see merit on both sides of an argument.

I don't know if there is necessarily needs to be a choice between making a page look good or making it as accessible. Contrary to the common view - I don't think that content and presentation are entirely separate - the design of a Web page - the layout, colours, use of empty space - impacts on the accessibility (in a broad sense) of that content. In other words design and layout are not necessarily secondary to understanding - and I want to acknowledge the importance of design from the point of view of building accessible Websites (and to boot - clients think it is the most important aspect of their Website - rightly or wrongly).

It is only the history of HTML layout limitations that makes us think that we have to have one or the other. If Tim Berners Lee had had just one more inspired thought back in 1990 and 'invented' a Web that included both HTML and style sheets - would we still be having these discussions? Of course not - hey we know design is important - and so is standards based markup. With a mature combination CSS and XHTML we can produce an infinite number of different designs - for different audiences.

I support the move towards CSS and standards based HTML (ideally XHTML) - but I also know that most designers are using tools that use tables as the default layout device - so I want to acknowledge that and give them information about how to make those tables as accessible as possible. I could be wrong but I think that given the mix of browsers in use today and the poor support for HTML standards of most browsers - it is in fact easier to make accessible layouts using tables that it is using CSS. Many a Web page I have looked at that has used CSS for layout - that was unusable - because it the layout was 'all over the place'. This may be because there is plenty of information about making tables accessible - but as yet - unless you have your 'ear to the ground' very little information about ensuring your style sheets don't fall down when they meet the bugs in the many browsers still in use today.

But bear in mind - I'm making this up as I go along. Your answers are forcing me to think about it. Tomorrow I may change my mind.

-- Anonymous, January 04, 2002

You are right about that, there are two sides to this debates and they each have merits.

It is interesting to note that the W3C itself still uses tables for their homepage and many of their internal pages. When they redesigned their site back in 2000 they took a lot of flack over this issue. Their rationale for this, which is still valid, is that in order to make their site accessible in the broadest sense it was necessary to use tables.

"We debated whether we wanted to use floats and take a stand to promote support for specifications, or to use a table and ensure that the page linearized well (as recommended by the Web Content Accessibility Guidelines [1]). We chose the table as a practical, not purist solution." -- Ian Jacobs

Quote taken from this response to a comment on the site- comments@w3c.org mailing list archive.

Understandably, the W3C has some rather strict guidelines regarding their publications(valid code, no browser sniffing, accessibility etc), so i think it is a strong signal from a group of highly skilled people that if accessibility is a major design objective then tables are still the way to proceed.

-- Anonymous, January 05, 2002

I had not been aware of that Dylan. Thanks for pointing it out to me. I'll check out the debate.

-- Anonymous, January 06, 2002