3

With different browsers choosing to render CSS in their own preferred way , whats the point of having a standard?

Simple stuff like creating a fluid 3 column layout that works across all browsers can be an experience in frustration. How do you deal with this or make cross-browser compatible development not so painful?

9 Answers 9

7

As always, there's a reason behind all this.

The standard is not broken (a standard can't be broken), just that some browsers like IE don't adhere to it completely.

This is mainly because IE was developed before any standard was created and in that time it was the best browser around, with almost zero competitors (I read that netscape was the other option and that it was much worse than IE).

Then people realized that a standard was needed, and they created it obviously not including any of IE proprietary code and features. IE was forced to choose backwards compatibility with it's previous versions, or to adhere to this new "standard", they absolutely ruled the browser market so the choice was obvious.

With new versions IE tried to be more and more standards compliant, and they say that IE8 successfully passes the ACID2 test, so the standard utopia is (slowly) coming to reality.

In the mean time, check this site -> quirksmode that contains useful cross browser information. Also try to check any articles about "IE box model" online, and stay away of padding in IE. If you also use a 3rd party javascript library (JQuery, Prototype, Dojo) you should be fine (or as fine as anyone of us can be).

Regards.

6
  • It might predate IE but before firefox, IE ruled the web. Just check W3schools browser statistics. Apr 9, 2009 at 5:41
  • 1
    Yes, but that was only after the fourth versions of IE and Netscape came out. Before that most people were browsing in Netscape, see tinyurl.com/c53buc.
    – zoul
    Apr 9, 2009 at 5:52
  • 1
    IE is hardly the only problem, oter browsers have their share of rendering issues as well. Things like multicolumn layouts are also something that has no direct support from CSS 2 and is therefore pretty hard to do right. Some box model oddities contribute to that as well.
    – Joey
    Apr 9, 2009 at 6:01
  • IE was built on top of NCSA mosaic, which actually set the standard, how could the browser be built before the standard exists? NCSA were researching and defining the standards back then. netaction.org/opensrc/future/breakdown.html Apr 9, 2009 at 7:51
  • iirc it went NN > IE until about gen-4, then IE ran away with it until FF et al turned up and IE6 stopped advancing. MS got lazy and through away their advantage basically. They had no idea how important browsers were going to be, and killing netscape was their bush-esque "We won" moment.
    – annakata
    Apr 9, 2009 at 9:13
4

One major point of having standards is to keep us out of another browser war. You know the one where Netscape and Microsoft kept adding as many proprietary features as they could to the browsers. Cross browser development is a breeze today compared to then...

Another good reason for having standards is that you know where future versions of the browsers will be heading. Following the standards is the best prediction that you can get for how future browsers will work.

You can find a lot of cross-browser tips in this question: How can I achieve a consistent layout in all browsers?

4

Standards are emergent, not pre-defined. Well, at least they should be. Many developers I've talked to seem to find my view of Web standards slightly heretical, but stay with me here.

When you try to create the standard before the implementation, you have several problems:

  • A long delay before useful implementations appear. Nobody has a working implementation to reference, and since nobody is using any of the standard's features (since it doesn't exist yet), there is little impetus to actually implement it. A chicken-and-egg type of problem.
  • The potential for standards that cannot actually be implemented. Who knows for sure until somebody actually tries it? The HLA standard was a good example of this happening, to the point where the DoD had to write an "interpretations" memo that attempted to set the de facto standard by glossing over some of the errors in the actual standard.
  • The potential for standards that don't serve any practical need. Do people actually want this? See example at XForms, which has fallen into a weird, server-side niche. Or, I can't think of anybody I've met who found the CSS "width does not including padding" box model to be intuitive.
  • An inability for implementers of the standard to distinguish their products from their competitors, resulting in a stubborn desire to break with the standard in practical or lock-in-encouraging ways. See example at CORBA.

I think that the W3C learned this the hard way in recent years. Some of the most end-user visible innovation has come from a new browser war: examples would be HTML5 (several vendors), canvas (Apple), XMLHttpRequest (Microsoft's Outlook Web Access team), input range (Safari's built-in RSS reader), and the video element (Firefox)--these came from the proprietary level on up, not from the standards tower on down. And these new "standards" were forged by looking at these past individual implementations (Firefox copied Microsoft largely for XMLHttpRequest, and so on), not by some wide-eyed think tank pondering the future. (ISAPI, the Netscape plugin API, and SQL are all examples of bottom-up standards, where breaking changes are done gradually in a lock-step fashion.)

A standard should be a least common denominator that smooths over the basic differences in implementations, a pidgin language that works across all of them, and not an enumeration of Robert Lowth-style prescriptive rules about a language or system, because then you end up with rules that don't always make sense or apply a non-realistic ideal (like trying to apply Latin-based grammar rules to a Germanic-based language, like trying to apply XML-based grammar rules to an SGML-based language). Oh well, this is what we've got.

Probably the greatest defect in the CSS standard at this point is that there really isn't a good way to specify that a page was written against a particular version of the standard. We can specify DOCTYPEs for our HTML documents, why can't I indicate that a document was written for CSS 2.1? This will only become more important as we start adding more and more bizarre features to CSS that affect the actual content of the page, such as CSS's :before pseudo-elements. A future version of the standard is going to have errors one day that potentially break compatibility, and it'd be nice to let the document author ask for certain behavior rather than have browsers attempt to figure out the intent.

On the lighter side, though, now that IE8 and IE7 are out, things really aren't as bad as they were in, say, 2005. A specific IE6 stylesheet served with conditional comments can really go a long way to making a CSS/standards-based implementation feasible. The other advice is to use Google, to take the 3-column fluid layout example, and hope that someone else has done most of the troubleshooting for you.

Creating a cross-browser compatible Web site is difficult, standard or no standard. You can make it easier on yourself if you accept that there will be some differences in the way different browsers render your site. Don't be afraid of proprietary extensions by any means (it's all right to have CSS3 rounded corners for your non-IE users), but have a fall-back for when they don't exist (eh, the rounded corners aren't critical for using the site), and let your users choose how they'd like to consume your content.

1
  • Standard versioning is a tough issue, see this issue for HTML5: w3.org/html/wg/tracker/issues/4. I certainly will not say that the absence of versioning is the greatest defect in CSS spec.
    – zoul
    Apr 9, 2009 at 6:22
2

The other answers to this question pretty much cover the ins and outs of why CSS isn't the problem, but as for how I deal with the cross-browser difficulties, it's normally in roughly 4 steps:

  1. Design the site using firefox, as it has lots of useful extensions (most notably Firebug, which tells you which CSS rules are being applied, which are being over-ridden by other rules, etc.)
  2. Check the site quickly in Safari and Opera to make sure design has no flaws there. Normally it'll work fine as - thanks to the CSS web standard - these browsers render web pages in almost identical ways
  3. View the design in ie7 and use the *+html css filter to correct errors
  4. View the design in ie6 and use the * html css filter to correct errors

to do points 3 and 4 yo would have something like this

.box {css rules}
*+html .box {css rules to override in ie7}
* html .box {css rules to override in ie6}

At the end of all this you will still be left with valid css that works across the major browsers.

Hope this helps

*edit - forgot to add that ietester is a great bit of software that allows you to install multuiple versions of ie on windows xp or vista: http://www.my-debugbar.com/wiki/IETester/HomePage

1

The standard has some shortcomings. It's also quite a difficult thing to implement. The problem is in the implementation more so than the standard.

Use things like YUI where a lot of smart people have done a lot of hard work to make these things work across various browsers.

1

The standard is there in the open so that the browsers who do not confirm to the standard may look and learn. The standard is important because it is the only way by which you can HOPE to make a webpage that will display correctly on all pages.

Also remember that a standard that is developed is never for the past, it is only for the future. If in the past some browsers did not confirm to the standard it doesn't mean that we should not have standard.

In fact the standard is born because the browsers were all doing their own thingie and there was then a need for the standard.

If you code to the standard the browsers will confirm to it.

Have a hope pal!

1

It looks to me that You are just starting with CSS. Because even though the browsers do not adhere to the CSS specification perfectly, there is a lot of safe ground that You can use with confidence. This safe ground is nowadays much larger than it used to be about ten years ago, when coding for web was really a royal pain. And new browser releases adhere to the specification more and more, which is exactly why the standard matters. It is a kind of theoretical ideal that the browsers will probably never fully achieve, but even 90–95 percent of it are quite useful in the real world.

I also wish IE would have better implementation of CSS, but once You learn the few things that behave oddly, You can code most of the usual layouts without major hiccups. Most common layouts have also been discussed to death on various CSS forums on the web and there is always some good solution readily available so that You do not have to make it up yourself.

The CSS standard is IMHO not the problem [at least not in the sense of Your question], the problem is the reality of the browser market and the software market in general. As for the frustration, it should mostly go away after You gain some experience. The limits will always be there, but there is a plenty of safe space.

1

That seems like a non-sequitur. Just because some browsers flout web standards does not mean there's something wrong with the standards themselves. It's a bit like saying that seatbelts are broken because some people choose not to wear them, or that drunk driving laws are pointless because some people don't obey them.

If there were absolutely no standards to conform to, then there would be no World Wide Web, period. Just like an egalitarian society is an unachievable ideal, yet striving for that unattainable ideal has produced tremendous social progress over the decades, so too have W3C recommendations and open web standards produced measurable progress over the lifetime of the web. Without standards like CSS, the interoperability which the web depends on to thrive would not exist.

1

Yes CSS is broken - though semantically you cannot call it a 'broken standard'. But the question is not really one of semantics.

Experience of aiding in the definition of the UNICODE standard back in the late 80s and early 90s was good training for learning how to write a standard well. I have rolled my eyes so many times W3C write standards documentation that leaves immense holes in the definitions that lead to browsers interpreting things in different ways. There are many mutally exclusive parts to the CSS standard, even in v3, that have come about because we still have to keep compatibility with pre-CSS1.

On the critical side, CSS has three mind-bendingly obvious issues that any computer scientist will tell you are both improperly designed and inconsitent.

  1. The Box Model - there are still huge holes in this even as CSS 3 approaches.
  2. The 'specificity' calculations. 'specificity' was implemented to patch a hole in CSS standard and then later to try and shore-up the ever conflicting rules. If stylesheets are be truely cascading then 'specificity' needs to be scrapped. Until it is CSS should be called SWISMCCS (sometimes-when-it-suits-me-CSS). Of course, in order to scrap this feature all the remaining issues with loose language in the standards need fixing - which in reality means it will never happen.
  3. Naming conventions for classes,selector etc allow the use of characters that are a problem for dynamic processing. The most obvious is allowing '-' symbol to be used in names. If you don't understand why I would encourage you to read up and bytecode compilers and compiler language parsing.

So the answer is the CSS standard is not broken, the premise is sound, but the implementation of the standards documentation (not the browsers, the documentation) shows how conquest by committee will rarely get you something fully fit for purpose. I suppose this was because CSS was not created for trained programmers, it was created for web-designers - a strange breed who are not really programmers and not really designers. There are real web-developers who are different, but spend less time on pretty graphics.

IMHO: CSS is broken. On the other hand, the alternatives are much worse. Better the devil-we-know. Role on the replacement for HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.