CSS Support Could Be IE7's Weakest Link

Ritalin16 writes "Many web developers may be disappointed to hear that Microsoft decided to hold off on full CSS2 support with IE 7.0. As said by Microsoft-Watch: 'One partner said that Microsoft considers CSS2 to be a flawed standard and that the company is waiting for a later point release, such as CSS2.1 or CSS3, before throwing its complete support behind it.'" More commentary available from ZDNet. Generally related to the IE 7 Acid Test thrown down by Opera.

more on css2

[dmf415]

This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.

more here:
http://www.w3.org/TR/REC-CSS2/ [w3.org]

+5 Informative?

[Anonymous Coward]

All this guy did is do a Google search on CSS2 and paste it here. That deserves +5 karma?

It's redundant, not informative. Any of us could have easily done a search for "css2."

Re:Flawed Standard?

[rkeen]

Just sounds like the pot calling the kettle black. I just thought the irony was intresting is all.

Re:Flawed?

[hsoft]

Why not writing this instead?

a,a.somestyle,a.otherstyle {common formatting}
a.somestyle {specific formatting}
a.otherstyle {specific formatting}

"* html" hack

[Richard W.M. Jones]

I'm using the so-called "star html"/"* html" hack to make developing for IE slightly more tolerable.

What I do is build the site in Firefox so it renders perfectly. I know it'll likely render fine in Mozilla (obviously), Safari and Opera. But IE is likely to screw up positioning.

So I then add extra lines: * html div#content { top: 100px; /* hack for IE */ } just after the correct code to move things around on IE. IE is broken and interprets the "* html", whereas other browsers correctly ignore it.

In a very few cases I simply disable features in the IE version until it works - IE users get a slightly less nice looking site, but that's their problem.

Rich.

Re:What does CSS2 give you that is needed?

[toriver]

My favorite: Support for different media. E.g. it's pointless to have form buttons etc. on a printout - CSS2 lets you remove them. Also, to turn a web page into a presentation, just add rules for the "projection" media type, e.g. make stuff around the "slides" invisible, use large fonts etc.) So far only Opera supports it, but then again there is a lot of the CSS standard that only Opera supports...

A main features list [aboutbabette.com] someone made.

Re:So...

[angrytuna]

From a google cache [66.102.7.104] of a transcript with some members of the IE dev team:

Host: Dave (Microsoft)
Q: ali : Will the next release have full CSS 2 and CSS 3 support?
A: Hi Ali, It's too early to make any commitments as we concentrate on implementing the features that make most sense to our customers. CSS2 is actually a flawed standard that nobody has full support for. CSS2.1 is currently in draft recommendation to fix this and we hope to improve out support there in the future.

And from the W3C's page on the subject: [w3.org]
CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that are implemented interoperably at the date of publication of the Recommendation.

So it looks like they are intending at least some form of growth in this direction. They did fix the box model problem [microsoft.com] with IE 6, so I'm inclined to take this statement at face value.

Re:Flawed?

[DoctorMO]

Actualy,

a {common formatting}
a.somestyle {specific formatting}
a.otherstyle {specific formatting}

should work too.

Re:Flawed?

[Apathetic1]

The first part of my example above does accomplish that slightly less verbosely (the "a" common formatting will cascade down so you don't explicitly have to mention a.somestyle and a.otherstyle in the common formatting section) but I would like to be able to nest styles intelligently, which you can't do under the current CSS standards.

This sucks, but a glimmer of hope lingers?

[pojo]

This seems contradictory with comments by Chris Wilson, IE Developer, on the IE web log last week:

"We will continue to improve our compliance under strict mode even when it breaks compatibility"

and

"Microsoft does respond to customer demand; web developers are our customers."

See http://blogs.msdn.com/ie/archive/2004/10/15/24307 [msdn.com]4 .aspx.

Even the devs want it to work right... if only they could get these ideas through to execs

(Sorry I think /. is breaking the link, you'll want to copy and paste)

Re:Flawed?

[JimDabell]

I dislike CSS because it makes the most common layout formatting (columns) hard to implement

That's a common misconception. CSS has made that easy for seven years (display: table-cell), it's part of the CSS 2 specification.

The reason why nobody knows about it is because even though Safari, Mozilla, Opera, Konqueror, Firefox, Omniweb, etc. implement it, Internet Explorer doesn't, which means it might as well not exist.

This is why everybody is so keen for Microsoft to implement CSS 2. Or CSS 2.1, which is CSS 2.0 with the more difficult parts taken out and a couple of proprietary Internet Explorer properties thrown in.

It's not "CSS making it hard", it's "CSS making it easy and Microsoft making it hard".

I also dislike that it has no inheritance.

For most purposes, grouping selectors is more than enough. The example you gave is a bit odd, because CSS lets you do that easily:

a {
some formatting
}

a.somestyle {
more formatting
}

a.otherstyle {
yet more formatting
}

Re:Stylesheets and MS

[JimDabell]

Didn't MS introduce their own "standard" for stylesheets at one point?

You're probably thinking of JSSS, which was a stylesheet language based upon Javascript, introduced by Netscape 4, that competed with CSS. Internet Explorer has had a partial implementation of CSS since 3.0 (it was the first browser with CSS support).

Oh really?

[M.C. Hampster]

I love your qualifier of "quite reasonably" when talking about how well Slashdot adheres to HTML 3.2. Since we can't check at the W3C's Validator [w3.org] due to the fact that Slashdot doesn't want us to check, we'll have to use something else like Validome [validome.org].

And what do you know, it fails even 3.2 validation.

Re:Oh The Irony

[jm92956n]

Check out Taco's latest Journal entry [slashdot.org], dated March 8 (excerpts below):

One of the most common requests I get today is to bring Slashdot up to date with modern web technologies like CSS & XHTML.

The truth is that bringing Slashdot into the modern era of web design would please me beyond measure. It is unfortunately, non-trivial to do this.

Fortunately for us, Wes, OSTGs super HTML pimp is going to take a crack at actually making a proper CSS/xHTML layout for Slashdot.

Re:time to spend some karma

[arkanes]

Since 3 people all posted the same thing, I'm going to respond to the first and the last. The w3c validator is much stricter than the standard as written. Slashcode actually stands up quite well against the written standard. For example, closing LI tags are flagged by the validator but not required by the standard.

Re:Spare Me

[Dolda2000]

And then, when 2.1 or 3 came along, they'd support that promptly.

CSS 2.1 has come along [w3.org]. The standard is time stamped 25 Feb 2004, so it has been out for over a year.

Thus, I hope that I speak for all of us when I say: If you think CSS 2.1 is better than CSS 2, just go ahead and implement it. I sure won't mind if you choose 2.1 over 2.

Microsoft has not decided anything

[dioscaido]

There are RUMORS people. The fact is, MS hasn't made any definite statements about IE7, except for announcing that there will be one. They've been very tight lipped about it, even within our internal-only IE discussion lists. Lets not waste our breath discussing this 'issue'.

Re:So...

[critter_hunter]

No browser supports CSS2 in its entirety (only KHTML browsers supports text-shadow, for instance), but CSS2.1 is fully supported by Opera 7.5, and Mozilla supports about 99.9% of it (and the parts they don't support aren't really important - counters [w3.org] are nice but far from essential)

Re:So...

[Anonymous Coward]

All W3C standards are heavily flawed.

You've read them all? And tried implementing them all? And written documents using them all? If not, then you aren't qualified to make such a statement.

Writing a reader for it is such a huge undertaking that not even the largest and most successful businesses manage to pull it off well then something has gone very wrong.

Blame the browser vendors. If they hadn't engaged in an arms race to build the most complex error workarounds, then it would be a much simpler matter to build a user-agent (that's the correct term for what you call "a reader").

The underlying problem is not that hard, it is just a continuos pie-in-the-sky standardization effort ripping everything invented at any point apart in the next revision

HTML, CSS, HTTP, ECMA-262 have all been incrementally improved while remaining backwards compatible. The core specifications that web browsers implement have not been "ripped apart" even once since their conception.

Don't believe me? Go ahead, write an HTML (as in 1.0) document and you'll find that web browsers understand it just fine. Talk HTTP 0.9 to Apache, and watch it respond just fine. Hell, you can link CSS 3 stylesheets with HTML 2.0 documents and have it work exactly as you would expect, even though HTML 2.0 predates CSS by years.

Make a presentation format that separates content from layout.

HTML describes the content of a document. CSS gives presentation.

Allow textual information with embedded images and external plugins/objects.

HTML does this.

Include some basic scripting

ECMA-262

some basic widgets (buttons, textfields, drop-down boxes).

HTML does this

See to that it is decently easy to screen-scrape, use with screen-readers

HTML does this

and is resolution independent

CSS gives you the option of writing resolution independent or resolution dependent stylesheets.

Does anyone really feel that this has to be so complex that one can't complete it in under 15 years

Funny, all of the above has been working in browsers for years.

one can't make it simple enough to actually make it possible for a hobbyist to implement a reader for?

Plenty of hobbyists have written browsers. The original WorldWideWeb browser was little more than a hobby project.

Sure the W3C has standards for a lot more, but that is part of the problem, the core is too huge.

I fail to see how much smaller it could get. HTML for content, CSS for presentation, HTTP to retrieve resources across a network, URIs for addresses, and ECMA-262 for client-side scripting.

By all means, please point out which one is unnecessary or too complex, because at the moment, you sound like just another W3C naysayer who doesn't know what he is talking about.

Re:Flawed?

[eggz128]

I'm not entirely sure this is what you are after, but did you realise you can combine classes?

i.e. .style1 {color: red;} .style2 {background-color: blue;} .style3 {border: 2px solid black;}

<p class="style1">I Have style 1</p>
<p class="style1 style2>I have style1 and style2 combined</p>
<p class="style1 style3">I have style1 and style3</p>
<p class="style1 style2 style3">I have the lot!</p>

Re:Firefox rendering engine for ie

[Auckerman]

I use this [edwards.name]. Though, it's not a "plugin", it works quite well.

CSS2 since 1998

[omega9]

..the company is waiting for a later point release, such as CSS2.1 or CSS3..

Here are some interesting things to consider:

• The CSS2 recommendation has been out since May, 1998 [w3.org]. That's almost 7 years ago.
• The CSS2.1 recommendation has actually been out since February, 2004 [w3.org], more then one year ago.

So, if Microsoft is refusing to attempt proper support for a standard that's been around for close to 7 years, and is waiting for a standard that's already been floating around for a year, why should anyone expect them to support anything whenever it's actually released?

I know this isn't a big suprise, but it's further evidence that they could honestly care less about standards unless there's something they can get out of it. When CSS3 is eventually released, we probably won't get support for another 5 years!

Re:Flawed?

[AkaXakA]

Actually, depending on what you want to do:

a {common formatting}
containing_element1 a {specific formatting}
containing_element2 a {specific formatting}

This decreases all the classes you need to add.

PS. For those that don't read css: The last line reads: all the "a" located in the "containing_element2" have to recieve {specific formatting}. (and it overrides the common formatting too if you define, say, the margins again.)

Re:Taco's response

[Nurgled]

Implementing a new template doesn't require touching any Perl code. The submitter simply needs to provide a new set of Template Toolkit [template-toolkit.org] templates.

The problem stems from the fact that slashdot's pages are generated from tons of little bits of template, and so taking someone's hack of a static front page doesn't really get you very far to having a working implementation.

Re:XHTML 1.1 and IE: Fix for the MIME type problem

[Fweeky]

> if(isset($_SERVER["HTTP_ACCEPT"]) && stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml +xml"))

This is a common mistake. You really should parse out each entry and select based on q-values. What happens when the client says application/xhtml+xml;q=0 ("XHTML is unacceptable"), or even text/html;q=1.0, application/xhtml+xml;q=0.6 ("I prefer HTML, but I can handle XHTML to some extent")? Or is it ok to ignore one spec if you kinda follow another better? ;)

Oh, and don't forget to switch your <link rel="stylesheet"> bits with <?xml-stylesheet ?> when you're serving as XML.

Personally, I tend to just stick with HTML 4.01. If I'm going to use XHTML, I like to use an XSLT to transform it to HTML 4.01 for naughty little browsers, which also handily enforces well-formedness in a way that allows for degredation to text/html-served broken XHTML instead of a browser-level parse error.

Re:Flawed?

[eggz128]

Ok heres a google cache [64.233.161.104] of the css-discuss mailing list wiki. (Both the mailing list and wiki are great resources)

Quoted from the wiki, my example above should work for:

* Camino 0.7
* Mac IE 5.1 & 5.2
* IE 5 Windows (and presumably higher)
* MoZilla 1.3
* OperaSix

But there are other versions that have slightly less compatablility (and can therefore be used to feed IE it's own "special" values).

Is it actually part of the standard

Yes, it's mentioned (at least briefly according to my quick glance at the specs) in both HTML 4.01 [w3.org] and CSS 2.1 [w3.org]

HTML 4.01

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes.

CSS 2.1

To match a subset of "class" values, each value must be preceded by a ".", in any order.

Example(s):

For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

p.pastoral.marine { color: green }

This rule matches when

class="pastoral blue aqua marine"

but does not match for

class="pastoral blue"

.

Re:So...

[vdboor]

oh wait, it's been done, and with only Javascript

The IE7.js is a great attempt to fix IE's behavour, but it has great disadvantages. It makes pages render very slow. Definitely not what you want.

Much rather, try making IE hacks in your CSS code with stuff like "* html .class { \width: 200px; }". It takes some effort, but makes your site IE compatible without slowing down the rendering.