Web Standards Solutions

William Nichols writes "With a couple of projects coming up that are going to require complete W3C CSS and XHTML validation (with 1 client requiring just a pure CSS layout) I thought it was time to brush up on some CSS knowledge, and maybe learn a new thing or two. I have spent the past week with a newly released book (and one of the smaller CSS books out there), the Web Standards Solutions The Markup and Style Handbook. The author, Dan Cederholm, has now become my right hand man, so to speak." Read on for the rest of Nichols' review. Web Standards Solutions: The Markup and Style Handbook author Dan Vederholm pages 253 publisher Friends of Ed rating 8.5 of 10 reviewer William Nichols ISBN 1590593812 summary A clear reference on designing with XHTML and CSS through a standards based approach

With the title Web Standard Solutions (which we will refer to as WSS from here on), you might expect this to be a book that is going to solve your problems, and without disappointment that is exactly what is does.

WSS takes a problem based approach instead of the commonly used project based approach to teaching you the value of designing to strict standards. I found this approach very refreshing, WSS kept my attention by presenting a problem, and then presenting 3-5 solutions on how to accomplish the task at hand. With each example Dan takes you through several ways to achieve the required result. Each of the methods shown are common patterns that different developers/designers would use, and the pros and cons of each are well articulated.

A lot of you may know Dan from his Simplebits. website. If you frequent Simplebits you will immediately recognize his style in the writing of WSS. Much like the mini quizzes that are used on his blog, this book is really a compilation of the hurdles that you are likely to face when trying to design to strict standards, and the solutions presented will get you over them.

WSS will also help the budding developer realize the business value of designing to standards. Once you start designing with standards, search engine rankings can jump, continued maintenance becomes a breeze, and the accessibility to screen readers (or other requirements) can be elegantly met.

One of my favorite parts of the book is the in-depth techniques used to style lists. WSS shows you how to take a regular non-formatted list and, using CSS, style it in several ways: as a vertical shopping list; without bullets and indenting; with custom bullets; and eventually as a horizontal navigation bar with changing bullets.

This book really stands out when covering the most basic foundations of layout such as paragraphs, lists, headers, titles and the like. The first half of the book really gets into the proper use of the most basic CSS techniques and proper selection of tags for headings, quotations, etc. While the second half of the book requires you to use what you have learned along the way to start building CSS based layouts.

If you are a regular at some of the advanced sites like CSS ZenGarden or A List Apart this book may be a little basic for you. Even still you will probably be able to take some techniques from it that you can use, this book is really more for the designer that is capable but not quite deadly with their CSS knowledge.

Overall I would give Web Standards Solutions the Markup and Style Handbook an 8.5 out of 10. I really think it does a fantastic job at keeping the reader interested in the subject (something that is often very hard to do in technical books) and will definitely be a great business tool for you. A quick read it is, but a valuable reference that has earned a spot next to my keyboard, my 3 bars of caffeinated soap, and the trusty case of bawls.

You can purchase Web Standards Solutions: The Markup and Style Handbook from bn.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Comments

Definition of Irony:

[Neil Blender]

A book review on HTML standards posted on Slashdot.

Re:Definition of Irony:

[slutsker]

Every time an article about web standards gets published on Slashdot, someone always comes along and says something like this. Look, just because Slashdot doesn't follow web standards, doesn't mean that the it can't publish articles about how others do. It's not ironic, or funny.

Re:Definition of Irony:

[z0ink]

You're telling me. Check out this series of articles written for A List Apart, an e-zine dedicated to web standards.

Re:Definition of Irony:

[cephyn]

wow i had no idea a changeover would save /. so much on bandwidth costs. the fact that they patently refuse to update the sitecode is mindboggling.

Re:Definition of Irony:

[The Bungi]

Especially funny given that the "perl hackers" have explicitly blocked the W3C validation service from hitting their circa 1997 table-laden crappy HTML and making them look even more stupid.

BTW, this has been active at least for three years, but very few people know about it.

Re:Definition of Irony:

[Anonymous Coward]

When the /. homepage is saved to desktop and then uploaded to validator.w3.org it registers 151 HTML 3.2 errors.

Geez. I mean I'm all for the geeky/nerdy/retro circa 1996 html "look" but similarly horrid code to match that wastes gigabytes of bandwidth...

Re:Definition of Irony:

[scmason]

Well, now that we have that solved, take it as a warning would be jokesters: Not only will we not tolerate web standards jokes, we will not toerate them in on our non standard forum.

Got it?

Re:Definition of Irony:

[khaidar]

Give me a break.

Re:Definition of Irony:

[Mugros]

You could still use other validators, e.g. http://www.validome.org

Re:Definition of Irony:

[jamie]

We blocked the W3C because their script sucks. Back in May, their validator nailed us for 6,000 hits in a short time, which earned it a nice place on our no-access list. Sites with big pipes shouldn't run scripts that act as DoS enablers; c'mon people, a max number of hits per unit time please.

If someone from the W3C cares enough, they can write the email address that they get on the resulting page and tell us that their script is smarter now.

Re:Definition of Irony:

[Anonymous Coward]

So, does that mean you /.ed yourself?

Re:Definition of Irony:

[Anonymous Coward]

Slashdot says:

Sites with big pipes shouldn't ... act as DoS enablers

Definition of irony indeed.

error in the infobox in the review

[darxpryte]

looks like his name is Vederholm instead of Cedarholm in the stats box on the review. Minor pebkac!

Re:error in the infobox in the review

[darxpryte]

Then there's my own pebkac of spelling Cederholm wrong...

Karma whoring information

[bartash]

The book has a home page here where you can download a sample chapter.

Sounds interesting

[RangerRick98]

I'll have to check that out, along with the sites you mentioned. I do a lot of web design myself, and I've found the W3C's site to be a pretty helpful reference for what I do, but I'm always interested in learning more from additional sources. Incidentally, another helpful tool when doing CSS is the EditCSS extension for Mozilla Firefox. It can save some time in trying to get everything looking just right.

Definition of Expected:

[Laebshade]

A /.er attempting to define irony, especially when incorrectly identifying a CSS standards book as an HTML standards book.

CSS is for styling/layout, HTML is for structuring of the document. Two completely different beasts.

And why buy a book when you can read the W3C recommendations/specifications for HTML/XHTML and CSS that are (imo) very understandable and easy to read?

Re:Definition of Expected:

[TedTschopp]

And why buy a book when you can read the W3C recommendations/specifications for HTML/XHTML and CSS that are (imo) very understandable and easy to read?

Becuase many times the standards do not tell you elegant solutions which people have used in the past.

Kinda like the difference between English class and Creative Writing classes

Ted Tschopp

Re:Definition of Expected:

[handslikesnakes]

From the review:

The first half of the book really gets into ... proper selection of tags for headings, quotations, etc.

Sounds like more than just CSS to me.

Re:Definition of Expected:

[mnewton32]

And why buy a book when you can read the W3C recommendations/specifications for HTML/XHTML and CSS that are (imo) very understandable and easy to read?

I'm a regular reader of the recommendations themselves, but it's a bit like comparing a dictionary and a writing class. Sites like ALA, or books like this, show you how to use the basic building blocks you can learn about from W3C. That said, anybody who calls themself a "web designer" (and I do not) should have spent hours and hours reading those TRs.

Re:Definition of Expected:

[Anonymous Coward]

Reading the specs is just painful compared with reading a book that is constructed to take you gradually through a series of lessons/chapters.

I personnaly like to read books and read about other people's experiences. Specs from the W3C will NOT teach you about the various quirks and problem you will encounter while trying to code with standards in mind. Any experience web designer will tell you that coding standard HTML and CSS is easy. Making it work in IE/Firefox/Netscape/Safari/Opera at the same time is the challenge.

W3C specs are extremely useful when you feel confident about your basic understanding of the technology. It becomes easier to refer to the specs and rapidly find what you are looking for.

A good book will give you the basics. The specs will let you expand your knowledge or push the limits of a technology's capabilities.

CKC

Re:Definition of Expected:

[Anonymous Coward]

/*A good book will give you the basics. The specs will let you expand your knowledge or push the limits of a technology's capabilities.*/

Oh, I've got an idea - let's call this book "HTML for dummies".

Re:Definition of Expected:

[CreatureComfort]

Talk about irony... lecturing about classes on English and Creative Writing in a slash thread.

Tip for auto-validating PHP generated XHTML

[Boss, Pointy Haired]

During development, you can easily setup PHP.XPath to automatically validate every page you create.

Simply turn on output buffering at the top of your script using ob_start(). It's best to do this in a common header script called by all your pages.

Then, in a common footer script, load the output buffer (retrieved as a string using ob_get_contents()) into an instance of PHP.XPath using the importFromString method.

If your page displays, it will at least be valid XML (most of the way towards being valid XHTML). If you break the well-formedness of your output your page will not display because PHP.XPath will raise an error.

Re:Tip for auto-validating PHP generated XHTML

[linuxbaby]

Here's another thing you can (and some say SHOULD) do for that same purpose.

Put this at the very top of every HTML page:

<?php
/* XHTML proper header for browsers that accept it. If using Mozilla, this is one way to make sure your XHTML validates */
if(isset($_SERVER['HTTP_ACCEPT']) AND stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
{
header('Content-type: application/xhtml+xml');
}
else
{
header('Content-type: text/html');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Then if you do your development in Mozilla/Firefox, it will die any time your XHTML is malformed.

It has the added benefit of something you would leave in on your production server.

Re:Tip for auto-validating PHP generated XHTML

[scragz]

// This one also checks the optional q value in HTTP_ACCEPT to see if they prefer HTML to XML.

/**
* Sends the content type as XHTML if the agent supports it.
*
* @return bool $sent True if XHTML was sent, false if HTML.
*/
function xhtmlHeader()
{
global $client;
Base::logMessage(__CLASS__.'::'.__FUNCTION__ , null, null, PEAR_LOG_DEBUG);

$qHTML = 1;
$qXHTML = 0;

$accept = PMK_Util::param($_SERVER['HTTP_ACCEPT'], '');
$uAgent = PMK_Util::param($_SERVER['HTTP_USER_AGENT'], '');

$xhtml = preg_match("/application\/xhtml\+xml(;q=([\d.]+))? /i", $accept, $xhtmlMatch);
$validate = preg_match("/W3C_Validator/", $uAgent);

$html = preg_match("/text\/html(;q=([\d.]+))?/", $accept, $htmlMatch);

if ($xhtml || $validate) {
$qXHTML = 1;
if (isset($xhtmlMatch[2])) {
$qXHTML = $xhtmlMatch[2];
}
}

if ($html) {
$qHTML = 1;
if (isset($htmlMatch[2])) {
$qHTML = $htmlMatch[2];
}
} else {
$qHTML=0;
}

if (($qXHTML > $qHTML || ($qXHTML == $qHTML && $qHTML != 0))) {
header('Content-Type: application/xhtml+xml; charset=utf-8');
return true;
} else {
header('Content-Type: text/html; charset=utf-8');
return false;
}
}

Re:Tip for auto-validating PHP generated XHTML

[Dom2]

Actually, it won't be valid, it'll be well-formed. Which is still a good goal.

But you can go further get validity if you want. Instead of putting that stored content into PHP.XPath, try writing it to a temp file and running onsgmls -wxml -E0 -s -c /etc/sgml/catalog $tmpfile 2>&1 over it. You'll need to ensure that you have nsgmls and the W3C DTD's installed, but that's exceedingly simple in debian; you just need the opensp and w3c-dtd-xhtml packages. Any output from that you can stuff into the page somehow. In Perl, I just do $page =~ s/<head>/<head>$err/;.

-Dom

Re:Tip for auto-validating PHP generated XHTML

[Shinglor]

But you're not sending HTML, you're sending XHTML. Sending XHTML as text/html is just a hack to make it work in old browsers. It doesn't matter if they prefer text/html because you don't have a text/html document.

Re:Tip for auto-validating PHP generated XHTML

[FireFury03]

Serve your pages with a content type of application/xml+xhtml and the browser will check it's well formed. Of course it won't work at all in crappy IE, but you can use content negotiation to work around that.

Re:Tip for auto-validating PHP generated XHTML

[1110110001]

Using strpos() instead of stristr would even be better. It only returns an int (or bool in case of error) instead of a whole string. But if you want it to be case insensitive (I don't know a UA that sends the mime in upper-case, but who knows ...) you have to use stripos() which is only avaible in PHP5.

b4n

Re:Tip for auto-validating PHP generated XHTML

[Isofarro]

/* XHTML proper header for browsers that accept it. If using Mozilla, this is one way to make sure your XHTML validates */
if(isset($_SERVER['HTTP_ACCEPT']) AND stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml'))
{
header('Content-type : application/xhtml+xml');
}
else
{
header('Cont ent-type: text/html');
}

This is short-sighted. Looking for an occurance of "application/xhtml+xml" in an HTTP Accept string isn't reliably going to determine a client that prefers XHTML. A user-agent that doesn't want XHTML will have "application/xhtml+xml;q=0". The q=0 means "Don't give me that mime-type" - and your logic will send them exactly that every time.

You need to replace the stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml') with a function that will rank a user-agent's preferences specified in the HTTP accept header, and send back the highest preferred mime-type that your application supports.

Re:Tip for auto-validating PHP generated XHTML

[netsharc]

This looks like stolen code, what's PMK_Util ?
I think you should've mentioned the site where you got it from..

re standards

[computerme]

FYI,

Neither S in CSS stands for "Standard". What i mean but that is that do NOT expect CSS to give you a right once play on any browser with the same results.

CSS is great to reduce download speed of pages. To keep all the style in one place. To separate logic from data. But do not think writing a web site in CSS will solve all your browser compatibility problems.And don't fall under the influence of some elitist CSS religion.

The amount of hacks, even by the experts, required to even get close to modern browser compatibility is really hilarious. (ooops i mean painful.)

So get into CSS. Use all the great features in offers, but remember that its not magic bullet.

Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:

-header graphic
-2 or 3 columns
-a sort of anasepctic feel to it.

In the mean time, stick with a combination of CSS AND minimal tables.

Don't believe it? FIne, its not my hair that you will pulling out ;)

Re:re standards

[TedTschopp]

Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:

Ummm... you might be suprised at the varity that is allowed when you know what you are doing with CSS. I would have to say that the sites at CSSZenGarden look quite different. I could point out other examples, but I'll promote a bit of myself, just click on my URL and check out the code for both the front page and the Forums. Both use tables only on imported content from outside sources. The rest is full CSS.

Ted Tschopp

Re:re standards

[Anonymous Coward]

Have you looked at any website lately? They are all two or three columns with a header. Of course ESPN, AT&T, Sprint, and Chevrolet definitely look a lot like.

Re:re standards

[Anonymous Coward]

Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:

No, they sodding don't: http://www.csszengarden.com/

Re:re standards

[Back_in_black]

To separate logic from data.

i'm sure you meant "presentation from content"...as the logic would be whatever PHP/ASP/JSP/etc you got running

and no, css does not make a page more antiseptic, just as using tables does not result in sites looking like an excel spreadsheet. yes, it takes time and effort to learn it, but think back at how much time you wasted learning all those wonderful obscure tricks to coax a table into displaying the way you want, with nesting, spacer graphics, setting widths and heights, and all that shit...

Re:re standards

[bigtangringo]

I used to think so, until I looked into the kinds of foo you can work with CSS. There are about Two Million sites that have to do with CSS layout. There's gotta be some variety in there somewhere, don't you think?

Re:re standards

[tiptone]

bah

tables should be used for tabular data _only_. all layout should, and can, be done with CSS. there are a few hacks (box model, etc.) that you'll need to get it looking right cross-browser but it's really pretty easy. if you can't do it then YOU can't do it, there are TONS of sites out there doing it with only a handful of hacks (and they're almost ALL for IE...no surprise).

Re:re standards

[Anonymous Coward]

There's nothing wrong with websites looking a lot like each other. This is how the web used to be before the marketers took over, and it was great - everything was easy to understand and navigate, with much less of the bullshit clogging up the internet today. If all sites were coded properly (Not just to standard, but without stupid CSS-based hacks to allow header graphics, "skip to navbar" links etc) with minimalist CSS styles (and I don't mean the stupid fixed width crap on CSS Zen Garden, I mean some fonts and backgrounds to identify your site) then we would pretty much have the best of both worlds, aided by even better modern browser ideas and greater accessibility.

And hey, if you don't like that, why not make your own super complex and unintuitive CSS layouts to use between sites? That's what's cool about CSS, and why it's also a sort of idealist thing - by tagging along and making your own site HTML\CSS-compliant, you're slowly pushing the web towards something we can all take advantage of even easier.

Re:re standards

[computerme]

Hi.,

I went to csszengarden and clicked on a couple of sites.

Its showing exactly what i am talking about. Fine and pretty and nice as they are (and i mean no disrespect to the authors) those are simple sites.(not large scale corp sites) and yes i know of fastcompany.com. I'm not going to be pure CSS just to be cool if it blows out my budget. and people like dan (the book writing in this article) agrees. table != bad.

The stuff i work on and am talking about are much more complex. (I actually got into a mindset when using CSS of dumbing down my designs. (in a bad way not the good UI sort of way) but i stopped that when i found how well css and minimal tables work.

Plus, i did not have time to check them out on the dozen browsers (and revs) we support so i can't tell how well they look in IE 5.0(.1?) for example.

thanks for responding.

Re:re standards

[TedTschopp]

I guess, I have a different attitude about it. Once I learned how to do most of the things I needed to do without tables, I really didn't want to go back. So I kept pushing through it all and learned everything I could.

I understand that tables are not bad, but that's not the point. If you follow the patterns of developing in only CSS, you end up solving a bunch of other problems you face later down the line in the development and maintence lifecycles (accessifying the site, turning pages into CMS templates, Search Engine Optimization, and importing static content into databases to name a couple I've had to confront).

Also you should see the maintence teams faces light up when they see a 100% CSSed site. Maintence and updates become a breeze.

I guess in the end, I've not seen a need to go back to allowing tables for layouts. The only reason I would say that you shouldn't make a hard rule on NO Tables is that on many sites you do not control the source of all the content (CMS, Portlets, Includes, etc...) and because maybe somewhere somplace out there there is probably something which is impossible to do in pure CSS. But in the mean time I think everyone should learn this skill, it's worth it. (It cut our bandwidth by ~%50 which justified the costs of learning the skill and implementation.)

Ted Tschopp

Re:re standards

[Mitchell Mebane]

IE7

It's still alpha software, but it works pretty well in my testing.

Re:re standards

[typhoonius]

I would have to say that the sites at CSSZenGarden [csszengarden.com] look quite different.

Funny you should mention it. I followed your link and checked out the C-Note design, which has overlapping text in the sidebar in Opera 7.5. Whoops.

The grandparent is right in that CSS is not a panacea for designers and that it can be hard to guarantee perfect compatibility.

However, for the CSS Zen Garden, no matter how badly the CSS renders, I can always just drop into user mode and read the content thanks to its lovely semantic mark-up (of course, the design is the site's draw and not the content, but that's beside the point). In my opinion, flexible data is more important than pixel perfection, so I ultimately disagree with the grandparent's half-hearted tables-with-CSS approach. Clearly, you'll never, ever get pixel perfection for every user without a lot of hacks (using tables for anything other than tabular data is a hack), so you should really just give up and focus on fluid designs.

(And yes, I know, ideals don't get you far with clients and compromise is often necessary, but maybe you should be compromising your design whims for accessibility instead of the other way around?)

Re:re standards

[upsidedown_duck]

I would have to say that the sites at CSSZenGarden look quite different.

The last time I visited this site, it seemed the different designs rely too heavily on graphics. I was about to reply to the original post, but, then, I realized that good cross-platform CSS+HTML pages really do end up following the predictable header/column approach with light graphics for modem users.

Given the nature of putting content on the WWW, I really don't think this is that big of a deal. I'd take a simple header/column CSS site over Flash or JavaScript based ones any day, becuase it would generally be more reliable, it would be faster, and it doesn't rely as much on nuances of my browser preferences or plugins.

Re:re standards

[handslikesnakes]

The amount of hacks, even by the experts, required to even get close to modern browser compatibility is really hilarious. (ooops i mean painful.)

That's a bit of an exaggeration. And please, don't beat around the bush; when you say "modern browser compatibility" you mean getting it to work with IE. If you didn't have to care about IE, doing layouts (of whatever complexity you can imagine) in CSS would be a breeze and would look the way you want it to everywhere.
To be honest, I've never done a table layout and I'm glad; I'd much rather mark my pages up with sane, clean, semantic HTML + CSS. You complain about CSS hacks, but every table layout is a hack.

Re:re standards

[jgalun]

I love CSS Zen Garden. It is an amazing site. And, you're absolutely right that not all CSS sites need to look the same (I like to think that my site, which totally relies upon CSS for design, does not look like every other "CSS site" out there). That being said, I do agree with the original poster's sentiments to a large degree.

Off the top of my head (finishing a long day at work):

1) CSS Zen Garden is great, but it's much easier to mess around with CSS style-switching like that when you have only one page to support. It becomes much more difficult to do when you have a lot of different pages with different types of content and different amounts of content on different pages.

Plus, a lot of the designs on CSS Zen Garden are eye-catching - but hardly useful (and rather distracting) if you are trying to make a serious site geared towards content delivery. This it not a slam on CSS Zen Garden at all, which is, after all, supposed to show that CSS can deliver the goods when it comes to amazing graphic design. Just that, at the end of the day, what matters is normally intuitive content delivery wrapped in a good design, not being able to switch styles.

2) It can still be quite a bitch to get CSS to work the same in Opera, Mozilla, and IE.

3) Given the difficulty of getting CSS stylesheets to work correctly across all browsers, you have to ask yourself - doesn't it make more sense to use tabular design and some content management system that contains templating features, rather than struggling with the theoretically cool but difficult to implement CSS design switching?

4) One of the things that initially attracted me to CSS was the possibility of creating web pages that are more accessible to sight-impaired and motion-impaired users. But, after much effort, it has become clear to me that CSS is not a magic bullet for this at all. First of all, tabular design is not as inaccessible as it's made out to be. Screen readers are very good at dealing with tabular design by now. Secondly, there are a lot of situations where CSS has no bearing on the issue. For example, if I have a budget tool that I want to update costs on the fly, that will wreak havoc on screen readers, regardless of whether CSS is used or not. (More generally, web standards are no magic bullet. For example, let's say we have a tool where most users will benefit from being able to click on an item and have a pop-up window appear with more information on the item. Now, some users will have JavaScript turned off, meaning that the budget item link should use TARGET=BLANK for those users. But according to HTML 4/XHTML 1 Strict, you cannot use TARGET=BLANK any more, because that would be mixing content and design. In theory, the W3C is absolutely right. Where the link opens is a design issue, and should be handled by manipulating the DOM, not in the anchor tag itself. But, unfortunately, theory leaves those users with JavaScript turned off with a much lesser experience, becuase they would benefit from viewing both the additional information in the pop-up window and the information they were viewing previously at the same time on the screen. Maybe that's the right trade-off to make, but it's still a trade-off.)

5) The idea that with different stylesheets you can support radically different user agents - Palm users, WebTV users, users with 640x480 resolution, users with 1024x768 resolution, screen readers, etc. - is a great idea. I question how many sites have actually put it into action, though. Let's be honest - how many site really have a need to deliver information to users across all those user agent types yet? And, if you do have such a need, you're probably a huge site where it may make more sense to - again - use an advanced CMS that can handle that by relying on custom conversion from XML to whatever template you have for the different user agents, rather than CSS.

6) CSS would become much more useful if we could get some of the features that were be

Re:re standards

[Isofarro]

Fine and pretty and nice as they are (and i mean no disrespect to the authors) those are simple sites.(not large scale corp sites) and yes i know of fastcompany.com.

AOL, Wired, ESPN not large enough?

Re:re standards

[tokachu(k)]

In the mean time, stick with a combination of CSS AND minimal tables. Don't believe it? FIne, its not my hair that you will pulling out ;)

I don't believe it. Consider the following:
Internet explorer is the dominant browser... (well over 90%) ...and it doesn't support CSS fully. (not much CSS1, and no CSS2) It's incredibly easy to lay out a complex web site without using table hacks when you use CSS and have a dominant browser that fully supports it. The problem is that only browsers based on Mozilla code (Camino, Firefox, Netscape, etc.) have support for these standards. There's nothing wrong with the standards out there currently, but there is something wrong with the people who don't obey them on the application (server) level.

It's a tad cliche, but Internet Explorer is doing more harm than good without all its serious security problems.

Re:re standards

[shirai]

CSSZenGarden is great and I use it as a source of inspiration; however, it does NOT allow you to create a template that can be re-used.

In most of the designs, custom images were made to replace the header text to get a nice look. It is a good trick, don't get me wrong, but this doesn't allow you to create a site with different content using the same template. You will have to generate new header images for every page you make.

Re:re standards

[jgalun]

As a web designer, it makes my heart very happy to view an HTML page that is truly clean. For one client, we took their existing table-designed web site and converted it to CSS. HTML pages that took 1000 lines now took 250 lines, and were much easier to find content on...

But, so what? Yes, HTML readability is nice. Yes, saving bandwidth is nice. Yes, data flexibility is nice. But what does HTML readability get us? Nothing, of course, because most of us aren't editing our HTML with a text editor any more (actually, I am, because I work faster and better that way, but even then, it's not exactly hard for me to do a search to find the spot in the HTML that I am looking for).

What does lower bandwidth get us? Of course, if you're a huge site, it buys you something. But most of us aren't CNN or even Slashdot, and it doesn't add up to much either.

Data flexibility? Great, in theory. But what does it mean in reality? Until we switch to XML, a search engine could no more figure out that <span class="authorName"> means that the data in the tag is an author's name than it could if I used <b> to bold the author's name.

Does data flexibility mean that you can easily deliver data to different user agent types? That's a very worthy goal for CSS. I don't think CSS has come anywhere near succeeding in that goal yet. And for most sites, it's really not an issue.

Does data flexibility mean that you can easily change designs? If so, I'm betting that it's easier to use a CMS with a templating system (that just regenerates the HTML of the page in tabular designs) to allow the user to switch designs than to use CSS.

Does data flexibility mean accessibility? I'm not convinced that CSS is all that much more flexible than tabular design (for example, sight-impaired users could use a user style agent to increase font sizes on pages, but I think it's probably a better solution for them to simply use Opera with text zoom).

CSS is a very good idea, in my opinion. Eventually, it may very well enhance users' experience at a site. I don't believe it has gotten there yet. So, until that day, if it's a choice between having really fine control over a site's design, and being able to develop the site quickly with the knowledge that it will work in all browsers (including old browsers like Netscape 4.7), and using CSS because it's good in theory, I choose good design.

Becuase good graphic design is not just an afterthought. It is critically important to a user's experience on a web site. Research bears this out - one study at Stanford found that attractive site design was the most important factor in whether a user trusted a web site, twice as important as the brand name on the site!

(For the record, I am responding to this comment:

However, for the CSS Zen Garden, no matter how badly the CSS renders, I can always just drop into user mode and read the content thanks to its lovely semantic mark-up...In my opinion, flexible data is more important than pixel perfection, so I ultimately disagree with the grandparent's half-hearted tables-with-CSS approach. Clearly, you'll never, ever get pixel perfection for every user without a lot of hacks (using tables for anything other than tabular data is a hack), so you should really just give up and focus on fluid designs.

)

Re:re standards

[gorfie]

I found that the difference is the compatibility of the hacks. At my former job, I actually created useable 300+ page site that relied entirely on CSS for layout. The hardest part was making it look the same in a variety of browsers/platforms. Borders would render differently, padding/margins were different, etc..

Conversely, I can use tables and image spacers to layout a page and I can be guaranteed that it will look the same in a large variety of browsers because tables are very common. In fact, the only difference is that older versions of Netscape had non-zero defaults for cell-padding and cell-spacing.

I know that CSS can make for tidier/smaller pages. Maintenance isn't an issue since you can separate the content from the presentation with other technologies. The biggest reason to loosen up with the tables was how nested tables were interpreted by audio screen readers like Jaws. It was AMAZINGLY annoying with the nested tables, and I had difficulty getting through my own site that had several levels of mostly unnecessary nested tables.

In the end, my preference is a mixture of the two. Tables are quicker and easier and if I can easily use CSS to eliminate a table (or 12) then I will. My current employer relies heavily on tables and I'm trying to encourage us to look more into CSS but they like to reuse their code and designs from 4 years ago still. :)

Re:re standards

[jgalun]

Wanted to add one:

7) CSS isn't a magic bullet for making clean HTML, either. One of the ideas behind CSS is that, by separating content from design, you only use the HTML tags required to describe the data, and don't introduce any extraneous ones that are used just for design.

Unfortunately, due to some current limitations of CSS, you see a lot of CSS sites introducing extraneous HTML tags - just different kinds of extraneous HTML tags. Where old sites used TABLEs where there was no tabular data, you'll see new sites throw in extra SPAN or DIV tags just because they need additional elements on the page to place styles on. For example, let's sat you wanted to put a paragraph into a rounded recntangle. One day, with CSS 3, you'll be able to just style the P tag with a background-color and rounded-corner styles. But, today, since there is no rounded-corner tag, you end up needing to create maybe 5 elements to style so that you have 4 elements to place a rounded corner on, and 1 to contain those four rounded corners (I don't know if you actually need 5 - maybe there's a way to do it with 3 - but you get the idea).

Re:re standards

[ttfkam]

It sounds to me like an issue with web development in general (tables or not) than with CSS. The real difference is how much control you have over the server than the client in case.

Re:re standards

[isomeme]

CSS is great to reduce download speed of pages.

I can do that just fine with pages full of giant animated gifs loaded from a webserver on my home ADSL line.

Re:re standards

[Anonymous Coward]

The problem is that only browsers based on Mozilla code (Camino, Firefox, Netscape, etc.) have support for these standards.

Opera and Konquerer-based browsers do as well. They have some minor rendering differences, but it's trivial to make things look identical across these. The trouble is that the dominant browser is crap. Still, it's easier to design for standards and tweak for IE than to design for IE and tweak for anything else.

Re:re standards

[HumanTorch]

But do not think writing a web site in CSS will solve all your browser compatibility problems

And the worst part is, even IF a certain broken browser gets fixed in its next incarnation, the old versions are going to be in the majority for YEARS to come.

Re:re standards

[wsapplegate]

> The problem is that only browsers based on Mozilla code (Camino, Firefox, Netscape, etc.) have support for these standards.

A possible temporary solution is this one. On the long-term, I suggest sacrificing goats until the MSIE team makes a new, improved release. They've recently resurfaced, so maybe they're alive and coding on it, who knows :-)

Re:re standards

[Anonymous Coward]

Internet Explorer and Opera seem to be the most troublesome.
As a recently enlightened CSS user I'm gonna have to say, fuck em!
If they don't want to get with the program I will leave them behind.

Re:re standards

[talaphid]

If you are designing a pixel perfect website, you're misusing HTML to begin with. It is a text markup language, not a graphic specification - perhaps what you were looking for is PDF?

CSS is a standard, at least in the common sense of the word. http://w3.org/TR/CSS1 states that it is only a Recommendation using the W3's nominclature, but you know what? So is HTML.

That things don't look properly on all browsers is, on the most common levels (this means you, Internet Explorer) a question of noncompliant implementation. If a style is specified for an element, and you have a child element, that style should inherit down. The number of arbitrary exceptions to that boggles the mind in, for example, IE. Another common failing is custom RGB values for color words, like "green".

Anyway, if you have clients who aren't using the better-about-these-common-complaints Mozilla, they obviously enjoy reformating and viral infections on a weekly basis, and you can easily keep yourself busy with that work instead of designing something that will look right for them the one day of the month they're able to actually go online without some hijacking redirector showing them p0rn first.

Re:re standards

[FireFury03]

But do not think writing a web site in CSS will solve all your browser compatibility problems.

It solves most of them... especially if you remove IE from the equation.

In the mean time, stick with a combination of CSS AND minimal tables.

I recently redid my website in XHTML 1.1 and made sure I used the correct tags for the data I wanted to present (not the layout). i.e. only use tables for tabular data, menus are lists, etc. It resulted in far neater code and (importantly, IMHO) it presents very readable results in lynx and elinks, which should help provide much more accessible results to people with disabilities. I believe that it is more important to cator for people who are restricted by their disabilities than cator for people who are simply too stubborn to use a reasonable browser.

Since it is my personal site (i.e. not at all commercial - I maintain it purely as a hobby), I decided that as long as it's readable in IE then it doesn't have to look especially nice. Working around all the bugs in IE and making it look perfect would be a complete PITA, but then it always is, nomatter what type of markup you use. Ignoring IE for the most part makes it easier, neater and might encourage people to switch to a real browser.

Re:re standards

[BrianHursey]

[quote]Yes, i'm sure there are some simple sites that can be pulled off with CSS and look pretty much the same but honestly, when you reduce your site to this level, they ALLL look alike:[/quote]

I have been using css for 2 years and you can do a great deal with it. This is my site. www.brianhursey.com As you can see you can pull a great deal of stuff off with css. The only problem is browsers like IE almost refuse to support standards so you are limited in you choices of css usage. But sites like http://www.alistapart.com/ have some interesting ways of getting around some of IE's problems. The most problems I have had are the float div box positioning.

Re:re standards

[FireFury03]

Internet explorer is the dominant browser... ...and it doesn't support CSS fully.

This is the *big* problem why IE is really bad - it's not that it's not standards complient, it's that it has got such a huge chunk of the market that you have to support it on commercial sites, and the fact that MS don't care. I think (hope?) that most of the other browsers would continue to get bugfixes and innovations, even if they had 100% of the market. This is one reason why MS shouldn't be allowed to bundle such broken software with the OS, because it totally holds back innovation on the whole web.

On the other hand, if you run a site as a hobby instead of making money off it, then why pander to the IE users? I made the decision with my website that as long as it was readable in IE it didn't have to look particularly nice - working around the bugs in a browser that has had no significant development in 10 years is a waste of my time and restricts what new features I can use. I pop up a big warning to IE users when they first visit the site, explaining why they shouldn't use IE and with luck it'll encourage people to migrate to browsers that are still being developed. If more non-commercial sites did this then it might help push IE out of the market whilest not restricting content from the IE users. Obviously it's not an option for commercial sites since they stand to lose a lot of money.

Having said that, since I instituted this policy, the amount of traffic on my site has not changed, and the percentage of hits from IE has gone down, so I consoder that to be a good sign of people migrating away from IE because of the warning I give them.

The problem is that only browsers based on Mozilla code (Camino, Firefox, Netscape, etc.) have support for these standards.

Wrong - most of the non-IE browsers support the modern standards and they're not all Gecko-based. i.e. Opera is pretty standards complient (slightly more buggy than Firefox in my experience, but still not bad), Safari and the Gecko browsers are about on-par with eachother IMHO (yeah ok, they both have some bugs - what software doesn't. Moderately annoyingly they have different bugs which can sometimes cause it to be difficult to make something work perfectly in both, but generally they're quite minor).

Re:re standards

[Hockney Twang]

3) Given the difficulty of getting CSS stylesheets to work correctly across all browsers, you have to ask yourself - doesn't it make more sense to use tabular design and some content management system that contains templating features, rather than struggling with the theoretically cool but difficult to implement CSS design switching?

Seems like you missed the point on that one, they aren't at any point suggesting that anyone should use CSS switching on their site. The switching engine is not even mentioned, and that is intentional. The point is to encourage people to use CSS for their layout by showing how very differently you can lay out your page using only CSS. Should your site implement the ability to switch styles? Only if it adds to your user experience in some meaningful way.

Re:re standards

[grifter7]

What you say about CSS not being a panacea is correct. However, keep in mind that the "amount of hacks" required is not because CSS is a poorly specified standard. It is because "modern browsers" (and by that I mean "IE") do not properly support CSS and XHTML standards.

If one chooses to author websites only for CSS standards-compliant browsers, CSS is great, and it's possible to write very clean, and semantically correct code. It's the having to account for the poor standards support that the hacks are required at all.

Even so, writing a typical table-based layout is no less hack-laden than a similar CSS-based one, and certainly no easier to maintain or extend.

Re:re standards

[jswhiting]

because maybe somewhere somplace out there there is probably something which is impossible to do in pure CSS

how about aligning the tops and bottoms of css columns (read: floats) without explicitly specifying their height (having height based on content)? the only solutions are restrictive hacks that do not actually make the heights match, they make them visually appear to match using backgrounds, other divs, etc. you couldn't, for example, but a border on each div because their bottom edges would not line up.

this is easily acheived using table layouts - just put each column in a cell and by definition of the table layout, your tops and bottoms line right up. then you can put more cells underneath, rowspan and colspan to your heart's content, use borders, and still maintain a perfectly aligned format that won't die a horrible death if the content violates the precarious widths, heights, and margins requiring for complex css float layouts.

don't get me wrong, i mostly love CSS, but there are things that tables can do that CSS doesn't, and with much less headache, and I don't see any good reason not to use a table in those cases, other than patting yourself on the back for having an evangelically correct "pure" CSS page (which of course feels good in that geeky way, but as the grandparent said, really only works for a certain kind of page.)

Re:re standards

[handslikesnakes]

Funny you should mention it. I followed your link and checked out the C-Note design, which has overlapping text in the sidebar in Opera 7.5. Whoops.

Increasing your font size will muck up absolutely positioned designs. I suspect this is what caused the overlap rather than actual compatibility problems.

Foolish Projects

[bigtangringo]

With a couple of projects coming up that are going to require complete W3C CSS and XHTML validation (with 1 client requiring just a pure CSS layout)

Now I'm all for using standards, I do my best whenever I can. But, what kind of foolish project woudld REQUIRE standards compliance? HTML and CSS are something that can be written by any school kid, and you and I both know that your average school kid doesn't know the ins and outs of the CSS and XHTML standards, and probably never will.

I understand what kinds of problems this can create, but requiring compliance with an iron fist is like a big red sign saying "Don't use the app, we're too anal"

Can the author name the specific projects which are doing this?

Re:Foolish Projects

[Anonymous Coward]

I understand what kinds of problems this can create, but requiring compliance with an iron fist is like a big red sign saying "Don't use the app, we're too anal"

Wow, I'm speachless. I Don't know what to say. Standards are what the technolgy world is built on.

Re:Foolish Projects

[Back_in_black]

But, what kind of foolish project woudld REQUIRE standards compliance? HTML and CSS are something that can be written by any school kid, and you and I both know that your average school kid doesn't know the ins and outs of the CSS and XHTML standards, and probably never will.

...Can the author name the specific projects which are doing this?

i'll hazard a guess and say "not a project that employs school kids"...*sigh*

requirement for standards-compliant code is more and more common on projects large and small, as the benefits are slowly sinking in even to the managerial level. but i guess you didn't get the memo yet?

Re:Foolish Projects

[bigtangringo]

Interesting, W3C's HTML validator chokes all over the slashdot.org site but it seems to render just fine in my browser, 186 errors to be exact. (Hence my post)

Don't be so speechless, especially when it's so easy to write non-standard HTML/CSS.

Re:Foolish Projects

[downward dog]

HTML and CSS are something that can be written by any school kid, and you and I both know that your average school kid doesn't know the ins and outs of the CSS and XHTML standards, and probably never will.

Wait -- and you think it is foolish to exclude the average schoolkid from coding large web projects?

Whenever people say that "anyone can learn HTML," I laugh. That's like saying that "anyone can use Photoshop" because anyone can hit ctrl-i to invert an image. Sure, anyone can learn what means, but can anyone create clean, efficient, browser-compatible code that is easy to maintain and intuitive for multiple developers to use? And create it quickly? That is where web standards come in.

Re:Foolish Projects

[TedTschopp]

This is actually a problem browser development. As a browser developer you need to second guess every idiot out there and try to make sense of what they ment when they borked their HTML.

Way back in the day there was a battle between Netscape and Microsoft, and Microsoft decided to start supporting a more lax standard. This made it easier to develop to their standard becuase it wasn't as picky.

Your attitude of the webserver only serving up webpages to be viewed in a browser is quickly being replaced with a more service oriented model which says that you never know what the client browser is going to be. With this new model there is a renewed need for standards because not every cell phone or pda can be expected to interpert borked HTML correctly. Also this doesn't even take into account that the output from a webrowser that needs to be read by things other than other browsers.

The prime examle of this last case is search engines. Now granted broken HTML doesn't effect your placement alot, but broken output which doesn't follow a standard does affect another computer program and application which is expecting a certain format. I can't write a computer program if I'm not certain on the input, and I (and the company I work for) doesn't have the same resources that Micrsoft and Netscape had to deal with trying to read the other developers mind and second guess what he ment by his borked output. (ask anyone who has done work in the web application/web services fields on how annoying shifting standards can be)

Re:Foolish Projects

[bigtangringo]

Exactly. However we ARE dealing with HTML code, that IS written by ANYONE and DOES NOT follow standards.

The standards have been laxed and there is a LOT of broken HTML out there. Geocities anyone?

Re:Foolish Projects

[otisaardvark]

can anyone create clean, efficient, browser-compatible code that is easy to maintain and intuitive for multiple developers to use

There are more people out there with knowledge about all sorts of amazing stuff outside modal geek interests, who have been able to share it with the world despite not 'understanding' good web design principles. This is largely due to basic HTML being so straightforward, and 'fault-tolerant' browser interpretations (not to mention the plethora of authoring tools). Because of this, things are kludged and incompatible between browsers etc, but I prefer this infinitely to the content not being there.

It's not ALL about the presentation, uber-133tness and bandwidth!

Of course, there is no excuse for browsers not adhering to standards for when things ARE coded up properly (or at least explaining how and why they are deviating from the standard).

PS All the above doesn't really apply to 'non-hobbyist' sites either - if you are running a 'professional' website you should do things properly.

Re:Foolish Projects

[Anonymous Coward]

see, thats the difference between:

1) a random guy - just wants the information out there

2) a web developer - back end and some minor front end stuff

3) a web DESIGNER - strictly visual layout, this is where the css would come in

No need for standards

[Concerned Onlooker]

There are really no need for web standards. All you have to do is repeat what is so often written here with regards to bad spelling, poor grammar and incorrect usage: "Hey man, the language is dynamic and evolving."

Re:No need for standards

[outrage98]

No argument there.

One couldn't find a better example of evolving language then Slashdot.

Re:No need for standards

[genetik]

Saying that you don't need to code to the [x]html specs while claiming that you're simply "evolving the language" is like saying: "I'm going to write ANSI C code without semi-colons in order evolve the language."

Excellent Reference

[playgod]

I picked up this book last week. I found it an excellent read and suitable for CSS users both novice and advanced. It gave me a couple ideas for ways to do these and further illustrated the necessity of web standards compliant design.
I also bought it because I met the author at the 2004 TOevolt Conference and he gave a great seminar and was a cool guy to boot.
It also spends some time on web accessibility, something all developers really need to start thinking about.

Re:Excellent Reference

[josiebauer]

I picked it up at TOEvolt as well - Dan Cederholm is a super-nice guy, and gave a pretty good presentation on bullet-proof design. I pretty much devoured the book when I got home, and then updated my site to valid XHTML 1.1 and CSS, as well as switching it around so that the text comes before the navigation in the code. Makes it a little bit nicer for people on Links and screen readers.

Wedding

[Anonymous Coward]

has now become my right hand man

Cool, are we all invited to the wedding?

Buy It Cheaper

[anamexis]

The "Buy" link listed is at bn.com, but you can get it for cheaper at Amazon.

SAT analogy

[downward dog]

CSS/XHTML :: traditional HTML

as

hand-coded HTML :: Frontpage 98

Re:SAT analogy

[warriorpostman]

The correct syntax is as follows: CSS/XHTML:traditionalHTML::hand-codedHTML:FrontPag e98 ;)

Re:SAT analogy

[Shinglor]

CSS can be used with HTML 4, you know. The only advantages XHTML currently has are stricter validation and easier parsing.

css and css free

[e**(i pi)-1]

while
http://www.csszengarden.com/
looks nice for the eye,I find it almost unreadable.
Compare the css free version
http://www.csszengarden.com/zengarden-sam ple.html

Re:css and css free

[Anonymous Coward]

lol - boy, you missed the boat on that one. Not surprising since this is /. and all.

The point of CSSZenGarden is to show what is possible using CSS and spawn creativity through inspiration. Too often people equate CSS with only font, color changes and non-javascript rollovers and miss the boat that there's a WHOLE lot more that it can do to help separate code from content.

Re:css and css free

[rjshields]

That's an intertesting point - one that I would expect a techie to make.

Read JWZ's rant about web designers, it's hilarious:
I think my standards have lowered enough that now I think ``good design'' is when the page doesn't irritate the living fuck out of me.

Anyway, from what I've seen, most designers would rather pull their hair out than see completely unstyled content.
I suppose that's the difference between a righty and a lefty.

XHTML you say

[DrSkwid]

which XHTML browser are you using for that ?

Re:XHTML you say

[ekhben]

Any modern browser? Opera, Safari, the Gecko based browsers, and yes! even Konqueror can all handle XHTML just fine. Internet Explorer is not a modern browser: it hasn't been updated in years. You know how you chuckle when people say "But what about the Netscape 4 users?" Yeah. IE users are those users now.

Re:XHTML you say

[DrSkwid]

Handle is not the same as render correctly see

http://www.w3.org/People/mimasa/test/xhtml/media-t ypes/results

sadly no Konqueror on that list

I agreee about I.E. it is the backwater browser :) poor saps

Standardisation = Complicating Stuff

[Dante Shamest]

Imagine if the Internet had started out with today's newest XML standards back in the early 90s. Imagine that browsers were strict and accepted only standards-compliant code. To design a site you'd have to know strict XML and understand DOCTYPES and all that. The layout of your webpage would be strictly defined by CSS 2.0, which means you'd have to learn that too.

Would the Internet have flourished? Maybe. But I bet adoption would have been slower. It would have certainly put off alot of people trying to create a simple functioning webpage.

Heck, it might have caused some genius to invent a simpler alternative to XML/CSS

Re:Standardisation = Complicating Stuff

[downward dog]

So a web designer would get an error (Error: no closing tag) and would give up and go home? Amazon.com wouldn't be able to find programmers who knew how to write lowercase markup?

Wouldn't you rather have a human being decide how a page should look, rather than having a web browser GUESS what to do with invalid code? That is basically what web browsers have been doing for years. Hmmm, thought Mozilla, no closing </a> tag. Should I end the link at the paragraph break, or let it extend across four table cells to the next link?

Re:Standardisation = Complicating Stuff

[Anonymous Coward]

Wow just think if we had a standard on electricity running into your house, but heck, why follow that?

You know, those standards for driving your car at a certain speed, who needs those, throw them out. That way you can drive 120 through the school district.

And that standard about clean water? Who needs those, we would have more water resources available to us becuase more water would be considered clean. Heck we wouldn't even need to purify the water in someplaces anymore becuase our new standard would say that it's clean.

Oh, and that standard on buildings. We don't need those either. Until the next earthquake, flood, tornado, fire, pick your random act of God.

Standards are there for a reason. Learn them, they -will- help you.

Re:Standardisation = Complicating Stuff

[Dante Shamest]

I think I haven't explained the meaning of my post well enough. I'm just saying that today's standards are pretty tough to a newcomer (not a web designer as you say). The syntax is getting more complicated. Standards are good, but I believe if we got more people on the W3C committee, we would get something just as effective, but requires less learning to pick up. P.S. I know I'm rambling but I'm just thinking of my kids in the future when I try to teach them how to create their first standards-compliant webpage.

Re:Standardisation = Complicating Stuff

[downward dog]

Because I'm interested (not trying to pick a fight), what is more complicated when creating valid XHTML? Here is all I can think of:

1. Doctype. There are three acceptable doctypes that can be cut-and-pasted, and the difference between these is pretty straightforward.
2. Valid code. You have to close tags, and you can't place tags out of context (e.g. a <li> tag outside of a list).

What am I missing?

The reason I ask is that I find XHTML/CSS to be simpler than the "old way" of coding. Nested tables? rowspan=3 colspan=2? <br><br><br><br> to move text down? Spacer gifs?

Re:Standardisation = Complicating Stuff

[Decaff]

To design a site you'd have to know strict XML and understand DOCTYPES and all that. The layout of your webpage would be strictly defined by CSS 2.0, which means you'd have to learn that too.

Strict XML is very simple: All you have to do is be careful about capitalisation, always close tags, and always put attributes in quotes. Basic CSS is also very simple: Nothing more than a series of 'property : value' statements.

If XML has been used the web would have been far more easily (and meaningfully) indexed, and extensions could have been added without breaking compatibility or rendering.

Re:Standardisation = Complicating Stuff

[RAMMS EIN]

I hardly think so. There is nothing more difficult about XHTML than HTML.

If you had wanted to build the whole web around XML and CSS, all it would take is for one person to create a Schema and for one person to create a stylesheet, which could then be used by anybody else. This is, in fact, exactly what happened, except that the stylesheet was hardcoded in the browser, and the Schema defined in some standard document.

Re:Standardisation = Complicating Stuff

[FireFury03]

Actually, IMHO making the browser refuse to render a badly formed page (as is the case with XHTML) is a Good Thing, although there is a good arguement for the browsers to have a button on the "parse error" page to switch them into tag-soup mode and render it anyway.

The reason it is a Good Thing is quite simple - the behaviour for how to handle complient markup is well defined and so you (should) get (mostly) identical results on all browsers. The behaviour for fixing broken code is not defined (and would probably be quite difficult to define), so broken code probably renders very differently on different browsers. The problem comes when someone writes broken code and only tests it in one browser and decides it's ok - it probably doesn't work in other browsers at all. Whereas complient code should at least be readable, even if browser bugs prevent it from looking quite right.

Additionally, making it obvious that a web developer has no clue what he's doing is also a good idea - if you're a (non-techy) manager and employ a web developer to build a site for you, you probably just look in IE and say "yep, looks fine, here's your pay cheque", even though the markup is complete rubbish and it may not work in other browsers at all. If you're a non-techy manager and the web designer presents you with a site that causes your browser to say "this designer is a complete chimp" then you probably won't pay them.

Re:Standardisation = Complicating Stuff

[Millennium]

Imagine if the Internet had started out with today's newest XML standards back in the early 90s. Imagine that browsers were strict and accepted only standards-compliant code.

Dare to dream...

To design a site you'd have to know strict XML and understand DOCTYPES and all that.

You wouldn't have to understand DOCTYPEs, actually. DOCTYPE-switching was only introduced as a direct result of browsers accepting malformed code. If the browsers had done it right from the beginning, DOCTYPE switching would never have been invented, as there would have been no need.

That leaves strict XML. The only thing that's even remotely difficult about this is keeping your tags balanced, and that's pretty freakin trivial.

The layout of your webpage would be strictly defined by CSS 2.0, which means you'd have to learn that too.

Again, extremely easy to learn. If we assume standards-compliant browsers, then the hacks would never have been invented either, which simplifies it even further.

Would the Internet have flourished? Maybe. But I bet adoption would have been slower. It would have certainly put off alot of people trying to create a simple functioning webpage.

Au contraire; it would have made things even easier. The only difference might be that we'd be holding HTML to the same standard as any decent programming or scripting language (get the syntax right or it doesn't work), but that's far from problematic.

Heck, it might have caused some genius to invent a simpler alternative to XML/CSS

There would have been no need. Most of the complications with XML/CSS have come from the non-standardization days, because of all the workarounds that need to be done (mostly for IE). The fact that you're not used to these standards does not make them harder.

Re:Standardisation = Complicating Stuff

[gnu-user]

Be liberal in what you accept, and conservative in what you send

Jon Postel

The parent raises and important point, one that the Internet (and HTML) was designed around. The appearance of early web pages was akin to gopher (look it up) browsers guessing was not a serious problem. Graphic sensibilities don't come into the picture for several years.

Relax

[Concerned Onlooker]

It was meant to be a joke. I was poking fun at what people say about English while at the same time pining for "standards" in coding.

Re:Dupe?

[Saeed al-Sahaf]

but the author of the article seems to be an utterly clueless idiot.

Well, he is a web developer!

Whoops...

[downward dog]

Should read:

Sure, anyone can learn what <a href=""> means...

Re:Top 5 problems with CSS

[TedTschopp]

5. This is a design problem and can be fixed with an increase in skill from the developer.

4. Ummm, CSS files are downloaded once on the first time to the site and then kept locally for the rest of your visit to the site. This reduces bandwidth, and reduces loadtime. So yes, this happens the first time you hit the page, but not any other times.

3. No they want to depreciate broken HTML. There is nothing wrong with HTML which follows the standards. And CSS is simple, very simple.

2. Hardly anyone uses personal stylesheets. There are two reasons for that. No standards on class and ID namespace. Browser implementation of this is buried behind a ton of menus. No one knows about this as a feature.

1. Your problem is with the validation buttons, not the fact that the page is validated.

css switching

[joe_plastic]

Yep I went to your page. Nice use of switching css via cookie -- I tried all three styles.

Re:css switching

[TCM]

Since I turn off cookies except where needed, this doesn't work for me. And what for is that View -> Use Style menu in mozilla anyway?

Styles via cookies, an ugly approach if you ask me.

I agree

[onlyjoking]

I couldn't agree more. The time invested in perfecting CSS does NOT repay itself with most sites. CSS takes much longer to get right than table-based design and CSS-P was something of an afterthought, hence the contortions required to do some things in CSS which are trivial with tables, eg. getting the background colour of a column to extend to the largest height of a group of columns.

The sheer weight of hacks required to make CSS work makes me wonder, with Opera 7.5 STILL not getting there, whether the CSS specification was badly conceived in that it appears to be very difficult for browser manufacturers to implement. The latest version of Dreamweaver also has problems rendering floated elements properly so maybe CSS is just too darned complex for efficient rendering? Maybe tables are simpler despite the amount of code they generate?

Standardisation = Complicating Stuff-Comfort level

[Anonymous Coward]

"Imagine if the Internet had started out with today's newest XML standards back in the early 90s. Imagine that browsers were strict and accepted only standards-compliant code. To design a site you'd have to know strict XML and understand DOCTYPES and all that. The layout of your webpage would be strictly defined by CSS 2.0, which means you'd have to learn that too.

Would the Internet have flourished? Maybe. But I bet adoption would have been slower. It would have certainly put off alot of people trying to create a simple functioning webpage."

Oh I wouldn't worry. The "do it for the love" crowd would have been up to the task.

Seriously would the web have taken off like it did if there wasn't such tools as Frontpage, Dreamweaver and Netscape Composer, etc, etc, etc to hide what was being used? So why would strict XHTML/CSS somehow be an exception? I think it more likely your uncomfortable with all these new changes, and simply wish to stick with what you know. We bub, outsourcing has taken away that option. Learn it and still have a job, or don't learn it, and your competition will. Your decision.

Exactly

[onlyjoking]

Some web pages, such as photo albums, actually increase in size when converted to CSS layout. The idea that replacing table tags with equivalent div's and span's somehow reduces code bloat is a misconception.

As for accessibility, would someone please present the case for improving devices which help minorities to access existing content instead of having the majority limit their design options to cater for poorly-featured devices? Isn't this back-to-front thinking?

Re:Exactly

[binford2k]

Some web pages, such as photo albums, actually increase in size when converted to CSS layout. The idea that replacing table tags with equivalent div's and span's somehow reduces code bloat is a misconception.

Only if you do it wrong.

try something like this:

<div class="photo_gallery">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>

and styling it with:

.photo_gallery {
border: blah;
background: blah;
...
}

.img.photo_gallery {
border: blah;
display: blah;
...
}

If you are messing with floats, you may have to insert something like

<div style="clear: both;"> </div>

above and/or below the img tags to keep them contained in the parent div. (Yes, I know this is a hack, hopefully it will be remedied someday.)

Also, apostrophes indicate possesive or abbreviation, not plurality.

Re:Exactly

[onlyjoking]

I think that should be: .phot_gallery img { border:blah; display:blah; } .img would imply

Re:Exactly

[onlyjoking]

Let's try again :-) I think that should be:

.photo_gallery img {

border:blah;
display:blah;
}

Re:Exactly

[binford2k]

I do believe you are right! Thanks for catching my thinko.

CRT tans

[onlyjoking]

Damn, my CRT's nearly 4 years old. Couldn't work out why I was looking paler in recent years.

CSS Parent Selector?

[rainman_bc]

C'mon friggin' Microsux... Get it in your damn browser already... It'll take another four years before we'll be able to use it, but at least it'll be there...

An assload of useful online CSS resources

[mmmuttly]

Misc.

• CSS Wiki! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Centering advice! - + - this is extra copy so this would post
• Fix crappy MSIE support! - + - this is extra copy so this would post
• tips, tricks and good practice techniques! - + - this is extra copy so this would post
• Box model Illustrated! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• links collection! - + - this is extra copy so this would post
• Tutorials, Demos, and Hacks! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Best Practices Crib Sheet! - + - this is extra copy so this would post
• Best Practices! - + - this is extra copy so this would post
• Holly Hack! - + - this is extra copy so this would post
• 3 pixel hack! - + - this is extra copy so this would post
• Firefox webdev plugin! - + - this is extra copy so this would post
• Mozilla CSS editor! - + - this is extra copy so this would post
• Debugging Advice! - + - this is extra copy so this would post
• Page Building Process! - + - this is extra copy so this would post
• selectutorial! - + - this is extra copy so this would post

Lists

• listamatic 2 (nested lists)! - + - this is extra copy so this would post
• listamatic! - + - this is extra copy so this would post
• listutorial! - + - this is extra copy so this would post
• Piped List! - + - this is extra copy so this would post

Floats

• floatutorial! - + - this is extra copy so this would post
• float-theory! - + - this is extra copy so this would post

Filtering

• Explorer! - + - this is extra copy so this would post
• safari filtering! - + - this is extra copy so this would post
• filters! - + - this is extra copy so this would post

Type Issues

Not So Easy

[Nurgled]

The articles on A List Apart create a static HTML mockup of the front page. However, there's more to Slashdot than the front page, and it's not just a matter of copying that mockup onto the site and having done with it. The Template Toolkit templates have to be rewritten to use the new code, and similar new markup and CSS must be written for things like comments, the comment form, the nutty little boxes and so on.

CowboyNeal has said repeatedly that if someone was to submit a complete, working template he'd consider making use of it. Also, more recently it was claimed that someone was working on one. The software that powers Slashdot is an open source project, and Template Toolkit is not specific to Slashdot and pretty well documented. If it really bothers you, scratch your own itch and submit a patch.

Re:Not So Easy

[nazsco]

i wouldn't touch perl "code" from somebody else even with a stick!

Re:Not So Easy

[Nurgled]

The Perl bit is already written. You just need to write a set of Template Toolkit templates. I seem to remember from looking before that the way they are used in Slash is pretty obvious once you find the template files in the source distribution.

Re:Not So Easy

[cephyn]

If i do scratch my own itch, they gonna pay me for all the money i save them?

This is why open source fails -- it takes effort, time, and much of the time people just say "not my problem, someone else will do it" -- and that's why /. is still running on a crappy foundation years later.

Re:Not So Easy

[Peter Winnberg]

I am working on Slash theme that complies with web standards. It's mostly editing templates but also some perl hacking.

If anyone feels like helping out it is available from CVS:
cvs -d :pserver:anonymous@strict.openflows.org:/var/lib/c vs co strict-600

Re:Not So Easy

[AShocka]

This is a legacy we all live with because of poor CMS design and architecture.

I didn't like it

[booch]

I didn't think this book was all that great. It wasn't terrible, but it didn't cover much that Designing with Web Standards by Jeffrey Zeldman didn't cover better. I would highly recommend Zeldman's book over this one. Zeldman's writing style is reads more quickly, and actually makes it fun to read. I'd give WSS a 5.5, and Zeldman's book a 10.

Re:I didn't like it

[ObjectiveGiant]

I would have to disagree.

IMHO, Zeldman's book is great for informing you why you should interested in web standards. WSS is a nuts an bolts guide for all of the basic tasks you'll encounter when designing a site.

Read Zeldman's book to get pumped about standards and then use WSS for the straight-forward tutorials...

Missed two of my favorites...

[Anonymous Coward]

Reference:

• CSS Property Index by Brian Wilson

Tutorial:

• Adding a touch of style by Dave Raggett

Ooooh... CSS!

[miikrr]

Should I be suprised that I see no the mention of CSS3, let alone CSS2(everything is just stated as "CSS"), anywhere on Slashdot, the book's synopsis, reviews, or even the author's own website?

For all I know, it just teaches you Microsoft's faulty CSS1 specification they used back during the release of Internet Explorer 3.0 back in 1996, exciting! What could be better worse than this? Lots of things, I'm sure, but even Cascading Style Sheets For Dummies mentions CSS3 which Opera and Firefox/Mozilla support.

Re:Ooooh... CSS!

[marsu_k]

Living in the future, are we? First of all, as you can see for yourself, Gecko's CSS2 support isn't perfect either. What's even funnier is the CSS3 link you posted - if you'd bother to read it yourself, you'd see that most of the CSS3 spec is currently a "Working draft", i.e. the spec isn't finished yet!

Having said that, I'm looking forward to CSS3 as (AFAIK) it'll offer transparency support, that feature alone makes it worthwhile to me (yeah yeah, you can get variable opacity with current browsers using proprietary CSS. I'd prefer standards.)

Re:Ooooh... CSS!

[Anonymous Coward]

CSS3 in Mozilla? Don't be silly. The only bit of CSS3 I've ever used is "text-overflow: ellipsis" which works in Internet Explorer but nowhere else.

Mozilla doesn't even have complete CSS2 support. I was hoping that would be a blocker for them releasing a version 1.0, but it seems not.

Re:Ooooh... CSS!

[miikrr]

The Mozilla 1.7 RC's support the opacity property.

oh

[Anonymous Coward]

Dan Cederholm, has now become my right hand man, so to speak.

That makes me .... slighty uncomfortable.

Complex sites

[Kahlus]

While I admire the work done on the Zen site that was linked, and the others, I'm still waiting to see a site that does more than show a few images and a blurb.

I'm not that familiar with CSS, but I'd like to see some examples of pages that have actual user interaction widges - buttons, drop down lists, editable datagrids.

The examples I've seen linked in this thread are nothing more than glorified text documents. But the WWW has progressed a little past sites of that simplicity.

How does CSS handle complex sites?

Re:Complex sites

[hobobeaver]

http://www.mezzoblue.com/zengarden/alldesigns/spec ialeffects/

please click through a couple of those sites in a browser that is not IE (i know for sure they all work in firefox)

Re:Complex sites

[rjshields]

I'm still waiting to see a site that does more than show a few images and a blurb. I'm not that familiar with CSS, but I'd like to see some examples of pages that have actual user interaction widges - buttons, drop down lists, editable datagrids.

You can do all of that too - that's the easy stuff. The hard bit is getting the design and layout right using CSS. To create a button, use <input type="button"/> and to create a drop down list use the HTML select tag. For data grids, you might want to use a table and use CSS to specify each cell's padding and background colour, and that sort of thing.

Re:Complex sites

[Anonymous Coward]

Just check out www.wired.com. They use a CSS / XHMTL approach and read the Interview With Douglas Bowman of Wired News about it.

Some other XHTML/CSS references

[SpaceTaxi]

• Eric Meyer on CSS -- goes through several hypothetical projects that demonstrate techniques for laying out pages. I found ideas for navigation menus and sidebars a helpful start. Also, would have otherwise had no idea that you can specify a separate style sheet for printing!
• Dynamic HTML: The Definitive Reference by Danny Goodman who will actually explain to you the difference between relative and absolutely position layers. Also, as per the title, this book is a great introduction for manipulating pages with Javascript and includes references for HTML, CSS, DOM and Javascript. A great resource, it perpetually sits open on my desk.

Of course the most interesting way to learn the new standards is to practice coding and to look at how other folks have coded their sites. I think that what is interesting about XHTML/CSS is that there are several different ways one might go about coding a page to reveal the same layout. Its also interesting to see just how much you can manipulate what amounts to very simple HTML into something more complex and attractive.

The challenge, however, is to come up with a finished design that has the same visual polish as those you might have chopped up from Photoshop or some other graphics program. Not to say that it is impossible to have a graphics heavy design using new standards. Rather, I have found that in working with CSS encourages a bottom-up process in designing a page starting with your code, while earlier Web design methods follow a more top-down approach, starting from a design comp.

However, I think that the new standards also encourage a certain simplicity aesthetic. I think many Web folks are appreciating designs that aren't so clutered, that download and render really fast, and have built in accessibility and search engine performance advantages.

re standards-Path of least resistance.

[Anonymous Coward]

"It's a tad cliche, but Internet Explorer is doing more harm than good without all its serious security problems."

Of course, but that's not a popular opinion by the web developer community. IE and derivitives is over 90 % of the market, and most developers follow the "path of least resistance" methology(1) when it comes to site design.

(1) Many reasons. Understaffed, only thing they know, fear of the new, rigid boss, etc.

A solution

[m1chael]

On the website say: "This site is best viewed in Mozilla".

That will make people flock to the Gecko based stuff faster than you can say Internet Explorer.

Re:Top 5 problems with CSS

[Mant]

5. That is partly bad writing, if you write it well it will degrade OK. You can harldy blame the technology for naff implementaion.

Also, at some point you have to give up support for older browsers, or you never get anywhere. If you write for IE5.5+ and Mozilla it's pretty easy (bar some IE gotchas). A degraded site may not look as nice as a pure HTML one on old browsers, but it will look a hell of a lot better on mobile appliances (if done properly).

4. You do know that browser download the css and javascript files at the same time as the HTML right? Plus once downloaded they are cached. The multiple files are quicker and reduce bandwidth.

Viewing the page as it downloaded was only possible becuase the pages were so simple back then.

3. HTML is not simple. I'm a profestional web developer, and I work on our companies e-commerce site written largely pre-CSS HTML. To get the look required there are multiple nested tables every where, spacer gifs, font tags and all sorts of horrible, complex stuff. The "My Web Page" I had a university was simple, many modern websites are not.

I recently worked on an offline version to run from a CD and got to re-write parts of it to use CSS. Much cleaner, much more simple.

HTML is only simple if the page is simple, and then the XHTML/HTML + CSS is simple too. For complex pages using CSS makes the code much simplier. What is easier, a defining the font in a few places in the CSS, or sticking FONT tags everywhere? Positioned DIV tags, or nested tables? People think HTML and for some reason think basic pages like the early internet.

2. "People" were tarting up pages before CSS, and doing things like web pages in Flash. As the internet matures there is an expectation of more polished web sites. This is apart from the technology used. At least CSS makes it easier to to make slick sites (not easy, not simple, but easier than pure HTML). Anyone can use personal style sheets, if their browser supports it.

1. Who are these people? Where do you base this on? This is a non-complaint, the button only takes up a bit of space, nobody forces you to go a follow the link a read about standard. Part of CSS is seperating style from content, once you set it up for a site, it becomes easier to write new content.

If these are the top problems with CSS it has no problems. I'd say as a developer the top problem is it can be fiddly to debug, and figure out what rules are applying to what elements. I find the Firefox/Mozilla DOM inspector and developer toolbad a godsend here.

Re:Top 5 problems with CSS

[coofercat]

My personal top 1 CSS problem: 1) It's incredibly complicated to do what you want. I know most people will think I'm some idiot who uses Frontpage for saying that, but CSS isn't easy to get right, if you're just getting into it. I'd say the learning curve is pretty steep (browser non-standards and IE bugs don't help). Say you want a simple two column layout. In tables, that's the simplest thing in the world, and well within the cognitive grasp of just about anyone. Even pixel perfection is easy to achieve, if you want it (actually, flexible layout with pixel perfect lining up is easy too). Do the same thing in CSS. Once you've done it a few times, it's fairly obvious, but CSS seems to favour stacking box elements rather than putting them side to side. Float-left, position-absolute etc etc all seem very non-intuitive to me. Once done though, browser resizes tend not to do anything unexpected. Don't get me wrong, I'm trying to move more and more of my work into CSS, but every so often, I'll use a table to lay stuff out just because it's so much easier to do what you want (quickly). So I might well be nipping down the local bookshop to see if this book (or the others mentioned) are any use to me.

Doctypes

[downward dog]

Don't forget doctypes! Browsers render different doctypes (or lack thereof) differently.

The Marketability of CSS

[BasicShift]

Unfortunately this board has made me rethink a problem I felt was relegated only to some misguided clients for us out there. That being the difficulties associated with marketing CSS driven accessible web sites.

One point which I feel is left out of much of the debate here is the benefits in development afforded web designers by CSS. I'll admit the learning curve can be steep, and cross-browser hacks plague us all, but once you begin creating multiple CSS driven sites you notice a signifigant decrease in development time. I personally attribute most of this to being able to apply consistent elements across an entire site uniformly from the project's outset.

sites. And recently tried to address the problem I saw (getting more clients interested in building CSS layout sites) in an article I wrote.

want to spit blood?

[dindi]

I decided to turn a site to full css on request. To make it more interesting, they wanted to use postnuke, which has templates based on heavy table use.
I am not a designer, and worked for a week on the site, so it almost looks the same on every browser.

However I realised, that a lot of the browsers have broken css render (such as IE 5) and many people are using those still, so you will end up writing lots of version detection stuff, that will put different css for every browser.

Instead of turning everything simple,. it makes a hell right now.
here is a the site in question. Please note, that the content is not ready, and the css-ish design is still under works ...

http://egamingsecrets.com/

just to give an example, look at it from ie5 (note the menu on top how it sucks)
now look at ie6 (look ho the menus get wider, and that padding does not work right (eg the main chapters on the news pages)

now look at mozills, it looks kinda OK ...
that's where I am, maybe I roll back to tables , or start the browser detection dependent css horror :(

Re:Top 5 problems with CSS

[Anonymous Coward]

You do know that browser download the css and javascript files at the same time as the HTML right?

Why don't you think about this for half a second. The location of the CSS and JS files are *in* the HTML file. What you write cannot possibly be true.

Re:Top 5 problems with CSS

[Anonymous Coward]

You can harldy blame the technology for naff implementaion.

Over complicated tech tends to get those sort of implementations, because there are more opportunities for failure. We're creeping back toward SGML.

all sorts of horrible, complex stuff

Complexity is inevitable. You have simply chosen a complexity you personally understand better (and apparently rewritten an entire website in the process).

At least CSS makes it easier to to make slick sites

CSS actually adds more bullsh*t graphic options.

once you set it up for a site, it becomes easier to write new content.

It raises the barrier to entry and encourages people to be anal about the form rather than the function.

Re:Top 5 problems with CSS

[Anonymous Coward]

This is a design problem and can be fixed with an increase in skill from the developer.

In other words, it is a barrier to entry for the very people the Internet was supposed to empower. Thank god The Priesthood of engineers is in charge again.

Guess what? It used to not take a "developer" to write a Web page!

4. Ummm, CSS files are downloaded once on the first time to the site and then kept locally for the rest of your visit to the site.

In other words, they must be re-downloaded *every day*. Any site you don't visit multiple times a day will include significant CSS drag.

No one knows about this as a feature.


Exactly.

Your problem is with the validation buttons

My problem is with the amount of time that must be spent thinking about markup instead of content, and the fact that a religous cult is trying to get perfectly productive Web developers to waste time learning new technology when the existing technology works better.

Navigating the CSS Zen Garden

[Anonymous Coward]

A easy way to browse all of the great designs of CSS Zen Garden is available at http://csszengarden.coret.org/