Improving the CSS 2.1 strict parser for IE 7

We've already started talking about a few of the CSS changes that are going to be available in IE 7 when we release, but there are a few hanging points that we haven't talked about yet or haven't covered completely. There are 3 specific items I'd like to talk about:

  • Using the root node wild card selector for IE only rules (* HTML) [strict mode only fix]
  • Multi-class selectors as defined by CSS 2.1 (.floral.pastel) [strict mode only fix]
  • Pseudo-element parsing sometimes flags rules as invalid (P:first-letter{ color: red; }) [strict/quirks mode fix]

Root node selection:
To be very clear the root node selector was a bug. This was introduced by Chris Wilson back in IE 4 which is why we don't let him work with the code anymore.

The root node selector has long been used to create rules that only work in IE. The general pattern would be to write rules that would match in all browsers first. Then use the child selector logic ( > ) to create more specific rules that would match only in browsers that supported these selectors. Prior to IE 7 we didn't support these selectors so they were transparent to us. Finally, you would apply rules that would only match in IE by using the * HTML pattern to match the root node. Since no other browser supports or contains a node in the DOM located above the HTML node these patterns wouldn't match.

So what happens when we start to match child selectors in IE 7? Well, it makes a big mess because we now match more rules not meant to be used from within IE and then those are merged with IE only rules. Because of the merge styles that were never meant to be combined end up changing the layout of the page away from what the author originally intended when they designed their cross browser matrix and testing patterns.

The best fix here was to disable the root tag matching logic because it wasn't supposed to work according to the standards. We only do this in strict mode, since the new selectors only match in strict mode, and so we now use the same sets of rules that other CSS 2.1 compliant browsers would use and we ignore the IE only rules resulting in a page that will lay out as designed by the author. There are a few issues with this when we differ in our interpretation of the spec from other browser implementations but most of the time these are minor and have easy workarounds.

An article on peachpit by Molly Holzschlag contains further examples detailing how this works.

Multi-class selectors:
When the class selector support was originally written it was drawn up based on the CSS 1 spec which only supported a single class selector in each simple selector. We wound up keeping this behavior even after implementing portions of later versions of CSS. The end result is that we always threw out the extra classes in the selector and only kept the last one in the list and matched based on that.

Well, some sites use multi-class selectors so when we looked at doing CSS 2.1 selectors work it was pretty easy to upgrade our class selectors to allow more than one class to be applied. When in strict mode we now obey all specified class selectors per simple selector. While you won't often use the feature it can be used for some interesting applications. One of my original test cases would use combinations of red, yellow, and blue classes to paint elements based on their combined color. A selector such as .red.yellow would paint and element orange if it contained both of these classes in a space separated list within the class attribute. Any elements not matching at least both of these wouldn't match and so you can more accurately apply hiearchical styles.

DHTML Kitchen has a great example of multi-class selectors and the current compatibility problems.

Invalid Pseudo-Element selectors:
We applied a very, very strict interpretation of pseudo elements in our parser and this would cause certain constructs to get thrown out. Basically we asserted that any pseudo-element had to be the very last thing in the selector. The spec only really mentions that there can be only one pseudo-element per selector and it must appear in the last simple-selector within the selector. Because of our strict interpretation if we saw any non-whitespace character or token after we just processed a pseudo-element we'd throw an error flag into the rule. This gave us the following behavior:

  • Fail - P:first-letter{ color: blue; }
  • Fail - P:first-letter:hover { color: blue; }
  • Succeed - P:first-letter { color: blue; } /* note the space */
  • Succeed - P:hover:first-letter { color: blue; } /* note the ordering */

The parser is much more intelligent about when and how it applies the error flag in IE 7 and the two failures you see will now succeed. Truly invalid rules will still fail and you have to be careful not to apply multiple pseudo-elements or apply psuedo-elements that are in simple selectors that are in the beginning of a complex selector.

For a clear example of this issue you can take a look at an article on MaxGeek.com.

Moving Forward:
These small issues that made writing web pages according to spec a trial-and-error situation have been fixed for IE7. By improving the parsing logic it becomes more obvious how your selectors should be written and existing W3C documentation can be used to quickly come up to speed. It should be easy to introduce interesting layouts and formatting in your web pages without having to specify custom rules for each browser and hopefully IE 7 comes one step closer to making that a reality.

Published Thursday, September 1, 2005 12:41 AM by Justin Rogers
Filed under:

Comments

Thursday, June 21, 2007 11:03 PM by Hedin

# re: Improving the CSS 2.1 strict parser for IE 7

Для изучения последовательностей информационного компанента

Tuesday, December 2, 2008 5:19 PM by Asina

# re: Improving the CSS 2.1 strict parser for IE 7

<a href= bestpre.com ></a>

Wednesday, December 3, 2008 3:48 AM by Asina

# re: Improving the CSS 2.1 strict parser for IE 7

<a href= bestpre.com ></a>

Saturday, December 6, 2008 12:41 AM by Semil

# re: Improving the CSS 2.1 strict parser for IE 7

<a href= spiritez.com ></a>

Saturday, December 6, 2008 5:56 PM by Semil

# re: Improving the CSS 2.1 strict parser for IE 7

<a href= spiritez.com ></a>

Wednesday, November 4, 2009 10:35 AM by \0\0\7\v\

# re: Improving the CSS 2.1 strict parser for IE 7

\0\0\7\v\ \0\0\7\v\ \0\0\7\v\

Thursday, February 11, 2010 8:17 AM by \0\0\7\v\ \0\0\7\v\ \0\0\7\v\

# re: Improving the CSS 2.1 strict parser for IE 7

<a href= "membres.lycos.fr/maffals" >genetic disorters</a>

Monday, November 1, 2010 1:01 PM by تقنية المعلومات

# re: Improving the CSS 2.1 strict parser for IE 7

this an very advanced css code for ie7 thanks

Monday, March 28, 2011 1:07 AM by weblogs.asp.net

# re: Improving the CSS 2.1 strict parser for IE 7

424184.. Smashing :)

Monday, April 25, 2011 11:58 AM by weblogs.asp.net

# re: Improving the CSS 2.1 strict parser for IE 7

424184.. Great! :)

Thursday, May 5, 2011 3:25 AM by Rosetta Stone Greek

# re: Improving the CSS 2.1 strict parser for IE 7

Rosetta Stone Personal Edition

Tuesday, May 17, 2011 7:44 AM by sawebdesigns

# re: Improving the CSS 2.1 strict parser for IE 7

424184.........cool

Wednesday, June 8, 2011 11:18 AM by weblogs.asp.net

# re: Improving the CSS 2.1 strict parser for IE 7

424184.. Smashing :)

Thursday, June 9, 2011 6:46 AM by fashionstrend

# re: Improving the CSS 2.1 strict parser for IE 7

merci pour le partage, il s'agit d'un post-Nice, la Grande!

Saturday, July 9, 2011 12:04 PM by apache junction fire systems

# re: Improving the CSS 2.1 strict parser for IE 7

I think this is a great post. One thing that I find the most helpful is number five. Sometimes when I write, I just let the flow of the words and information come out so much that I loose the purpose. It’s only after editing when I realize what I’ve done.

Tuesday, August 9, 2011 10:39 PM by chi flat iron outlet

# re: Improving the CSS 2.1 strict parser for IE 7

Love taking photos. Love everything about it. I love to talk about it. I love to dream about it. I see the wonderful inspiring photos online and wish I can be the one taking it. yeah, that’s my ultimate dream.

Monday, December 19, 2011 3:34 AM by car dealer license

# re: Improving the CSS 2.1 strict parser for IE 7

your blog is awesomely on paper i like it very much and intimidated from your feelings so keep it up for your fellows and for us who requirements more blogs from you like this one in the end i would like to be grateful for you on this blog

Friday, January 13, 2012 3:57 AM by Herve Leger Clothing

# re: Improving the CSS 2.1 strict parser for IE 7

I like it and want you to visit the link where you can get the interesting information about the blogs and many more. If you are interested to know more about that so do visit the link.

Friday, February 17, 2012 9:01 AM by water damage northridge

# re: Improving the CSS 2.1 strict parser for IE 7

Just make sure that you should carry on to develop a talk designed to make everybody impart more. You need to be mindful at what you said or maybe you might be set into a situation where nobody is ever going to act in response.

Thursday, February 23, 2012 3:01 AM by Webdesign

# re: Improving the CSS 2.1 strict parser for IE 7

Very crucial idea and tutorial to improve the CSS 2.1 strict parser for IE 7. I like this info very crucial so long. Thanks!

Monday, February 27, 2012 7:46 AM by online contest

# re: Improving the CSS 2.1 strict parser for IE 7

Have a nice tutorial! I honestly like this conception for improving the CSS 2.1 strict parser for IE 7. Hope the idea and tips will be educative. Thanks!

Saturday, March 3, 2012 9:42 AM by mini laptop

# re: Improving the CSS 2.1 strict parser for IE 7

Really educative tutorial! I'm amazed to read that brilliant input whatever you published. By the way I like this content amazingly. Thanks!

Wednesday, March 7, 2012 7:13 AM by domain name hosting

# re: Improving the CSS 2.1 strict parser for IE 7

This is the perfect blog for anyone who wants to know about this topic. The article is nice and its pleasant to read. I have known very important things over here….

Wednesday, March 28, 2012 6:33 AM by Best website hosting

# re: Improving the CSS 2.1 strict parser for IE 7

The blog is absolutely fantastic. Lots of great information and inspiration, both of which we all need. Thanks

Friday, April 13, 2012 7:01 AM by Sam Jackie

# re: Improving the CSS 2.1 strict parser for IE 7

Just create sure that you should bring on to create a discuss developed to create everybody provide more. You need to be careful at what you said or maybe you might be set into a scenario where nobody is ever going to act in reaction.more

Wednesday, April 25, 2012 12:37 PM by Dylan

# re: Improving the CSS 2.1 strict parser for IE 7

Hi my loved one! I wish to say that this article is amazing, nice written and come with almost all important infos.

I would like to peer more posts like this .

Thursday, May 3, 2012 11:39 AM by Domingo

# re: Improving the CSS 2.1 strict parser for IE 7

Emplear una bicicleta eléctrica es una manera muy divertida de hacer

ejercicio. La bicicleta eléctrica combina el esfuerzo al poderse utilizar como una bici convencional, con la comodidad al

poder utilizar su motor para desplazarse. Está claro

que es una modo de transporte alternativo

que sabe convertir los viajes en un entretenimiento y son el futuro en

cuanto a formas de transporte.

Wednesday, May 16, 2012 5:56 AM by Eligibility for CNA Classes In Illinois

# re: Improving the CSS 2.1 strict parser for IE 7

I loved as much as you will receive carried out right here. The sketch is tasteful, your authored subject matter stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike.

Sunday, May 20, 2012 6:17 PM by Buy Neopoints

# re: Improving the CSS 2.1 strict parser for IE 7

This is a wonderful article, you have a way with words. I find myself agreeing with a lot you have brought up. You have definitely earned yourself another reader! <a href="www.NeopointWarehouse.com">Buy Neopoints</a> , <a href="www.NeopointWarehouse.com">Neopoints For Sale</a> , <a href="www.NeopointWarehouse.com">Buy Neopets Neopoints</a>,  <a href="www.mytraffichits.com">Buy Website Traffic</a>, <a href="www.mytraffichits.com">Website Hits</a>, <a href="www.mytraffichits.com">Increase Website Traffic</a>

Wednesday, May 23, 2012 7:13 AM by CNA in Florida

# re: Improving the CSS 2.1 strict parser for IE 7

It is nice to know this. Thanks for the time and effort. It is well appreciated. More to come.

Wednesday, May 30, 2012 7:14 PM by Luster

# re: Improving the CSS 2.1 strict parser for IE 7

each time i used to read smaller articles that also clear their motive, and that

is also happening with this piece of writing which I am reading here.

Monday, June 25, 2012 4:37 AM by wireless keyboard reviews

# re: Improving the CSS 2.1 strict parser for IE 7

Someone makes me comfortable, so I want to rely on him; while another one makes me feel lonely, so I want to embrace him.

Friday, July 6, 2012 1:58 AM by Webdesign aus Essen

# re: Improving the CSS 2.1 strict parser for IE 7

It is nice to know this. Thanks for the time and effort. It is well appreciated.

Monday, July 9, 2012 9:45 AM by Seo Services

# re: Improving the CSS 2.1 strict parser for IE 7

470Alo Awesome blog.Much thanks again. Fantastic.

Tuesday, July 10, 2012 7:44 AM by Handwerker

# re: Improving the CSS 2.1 strict parser for IE 7

Really Cool Post!

Thanks

Thursday, July 12, 2012 2:58 AM by Survival Seeds

# re: Improving the CSS 2.1 strict parser for IE 7

What CSS changes have been made for the latest IE?  I'm currently using firefox because my MAC doesn't allow me to run it.  I'm considering getting a PC so I can work with IE again.

Thursday, July 12, 2012 6:29 PM by kratom

# re: Improving the CSS 2.1 strict parser for IE 7

When is IE 8 expected to come out?

Wednesday, July 18, 2012 6:40 AM by Hier vergleichen

# re: Improving the CSS 2.1 strict parser for IE 7

Really Thanks for this! Great Post

Wednesday, July 18, 2012 10:23 AM by Webdesign aus Essen

# re: Improving the CSS 2.1 strict parser for IE 7

Have a nice tutorial! I honestly like this conception for improving the CSS 2.1 strict parser for IE 7.

Thursday, July 19, 2012 2:20 AM by Mclemore

# re: Improving the CSS 2.1 strict parser for IE 7

Wow, awesome blog structure! How long have you ever been blogging for?

you make blogging look easy. The full look of your site is excellent, let alone

the content material!

Thursday, July 19, 2012 5:42 AM by Gardiner

# re: Improving the CSS 2.1 strict parser for IE 7

Ahaa, its good discussion about this paragraph here at this webpage,

I have read all that, so at this time me also commenting at this place.

Friday, July 20, 2012 8:58 AM by Spradlin

# re: Improving the CSS 2.1 strict parser for IE 7

This is a topic that is near to my heart... Take care!

Where are your contact details though?

Sunday, July 22, 2012 4:38 AM by Marcus

# re: Improving the CSS 2.1 strict parser for IE 7

My family always say that I am wasting my time here at web, however I know I am getting knowledge

everyday by reading thes fastidious content.

Thursday, July 26, 2012 6:01 AM by Mcghee

# re: Improving the CSS 2.1 strict parser for IE 7

Excellent post. I was checking constantly this blog and I'm impressed! Extremely useful info specifically the remaining section :) I take care of such information much. I was seeking this certain information for a long time. Thanks and good luck.

Monday, July 30, 2012 3:16 PM by Kitchen

# re: Improving the CSS 2.1 strict parser for IE 7

Neat blog! Is your theme custom made or did you download it from somewhere?

A theme like yours with a few simple tweeks would really make my blog stand out.

Please let me know where you got your theme. Appreciate it

Saturday, August 18, 2012 6:55 AM by Helton

# re: Improving the CSS 2.1 strict parser for IE 7

This is my first time pay a visit at here and i am really impressed to read everthing

at alone place.

Tuesday, August 21, 2012 6:15 AM by Rucker

# re: Improving the CSS 2.1 strict parser for IE 7

Everything is very open with a clear clarification of the challenges.

It was truly informative. Your website is very useful.

Many thanks for sharing!

Friday, August 24, 2012 6:35 AM by Sohbet

# re: Improving the CSS 2.1 strict parser for IE 7

very nice publish, i definitely love this website, keep on it

Friday, August 24, 2012 9:36 AM by http://trxsuspensionla.iconosites.com/

# re: Improving the CSS 2.1 strict parser for IE 7

trx training equipment

Monday, September 3, 2012 10:22 AM by Casteel

# re: Improving the CSS 2.1 strict parser for IE 7

I love what you guys tend to be up too. This kind of clever work and coverage!

Keep up the awesome works guys I've added you guys to my own blogroll.

Thursday, September 13, 2012 8:13 AM by Wong

# re: Improving the CSS 2.1 strict parser for IE 7

It is appropriate time to make some plans for

the future and it is time to be happy. I've learn this publish and if I could I want to recommend you few fascinating issues or tips. Maybe you could write next articles relating to this article. I wish to learn even more things about it!

Thursday, September 20, 2012 2:28 PM by Lacroix

# re: Improving the CSS 2.1 strict parser for IE 7

I seldom comment, but I read some of the responses

on this page Improving the CSS 2.1 strict parser for IE 7 - Justin Rogers. I do have some questions for you if you tend

not to mind. Could it be simply me or does it look as if like a few of the responses appear like they are written by

brain dead folks? :-P And, if you are writing at other sites,

I'd like to follow everything new you have to post. Would you post a list of every one of your public pages like your linkedin profile, Facebook page or twitter feed?

Thursday, September 27, 2012 12:28 PM by Silvers

# re: Improving the CSS 2.1 strict parser for IE 7

You have been my inspiration , I possess few web logs and sometimes run out out of

to post : (.

Friday, October 5, 2012 8:18 PM by Cullen

# re: Improving the CSS 2.1 strict parser for IE 7

Fantastic website, Merely wanted in order to opinion will not connect with the actual rss or atom flow, you can still want set up the

proper extension for the in order to workthat.

Thursday, October 11, 2012 7:31 PM by Host evaluation

# re: Improving the CSS 2.1 strict parser for IE 7

Very useful tips, thanks.

Monday, October 15, 2012 2:52 AM by Vandyke

# re: Improving the CSS 2.1 strict parser for IE 7

When I originally commented I clicked the -Notify me when new surveys are added- checkbox and at the current time every time a comment is

added I purchase four emails with that the same comment. Is

there in whatever system it is possible to eliminate

me from that service? Thanks!

Saturday, October 20, 2012 8:07 PM by crork

# re: Improving the CSS 2.1 strict parser for IE 7

g52CYX Muchos Gracias for your blog.Really looking forward to read more. Really Cool.

Saturday, October 27, 2012 9:43 AM by who is calling me?

# re: Improving the CSS 2.1 strict parser for IE 7

I really liked the way you express your thoughts. You write too well. Moreover your article contains some worthy information which i guess will help lot of people.

Tuesday, October 30, 2012 7:35 AM by Annamaria Fichtel

# re: Improving the CSS 2.1 strict parser for IE 7

Hi, I wish for to subscribe for this weblog to obtain latest updates, therefore where can i do it please help.

Tuesday, October 30, 2012 12:32 PM by Pitre

# re: Improving the CSS 2.1 strict parser for IE 7

I read this article completely on the topic of the difference

of most up-to-date and earlier technologies, it's awesome article.

Sunday, November 11, 2012 12:28 PM by Joel Stewart

# re: Improving the CSS 2.1 strict parser for IE 7

This blog is really such a helpful one that has posted something important ideas about the CSS.I have learned some useful tips from this blog about CSS.

Saturday, November 24, 2012 4:32 PM by George

# re: Improving the CSS 2.1 strict parser for IE 7

I actually love that the method you discuss this kind

of topic..”\"*.

Thursday, December 20, 2012 4:13 PM by Tibbetts

# re: Improving the CSS 2.1 strict parser for IE 7

Therefore i’m because content with check this out.

Really kind of hands-on that must be considering in no technique our dog hype this

is certainly with various website pages, forums.

We appreciate you your own personal anything this valuable most useful file.

Monday, December 24, 2012 4:32 PM by Patton

# re: Improving the CSS 2.1 strict parser for IE 7

Fine post. I get something tougher on different web sites everyday.

It'll at all times be stimulating to learn content from other writers and observe somewhat one thing from their store. I’d opt for to try some with that the content on my blog whether or not you don’t mind. Natually I’ll give out you a link in your internet blog. Thanks for sharing.

Monday, December 24, 2012 9:50 PM by Tipton

# re: Improving the CSS 2.1 strict parser for IE 7

You created some decent points there. I looked via internet for any query and found most

individuals goes as well because with your web site.

Monday, December 24, 2012 11:49 PM by Thames

# re: Improving the CSS 2.1 strict parser for IE 7

i just like the role of Anthony Hopkins in the movie Silence of That the Lambs.

this guy is simply amazing.,

Saturday, December 29, 2012 11:14 AM by Deyoung

# re: Improving the CSS 2.1 strict parser for IE 7

I am impressed with this internet site , very I am a big

fan .

Tuesday, January 1, 2013 9:07 PM by Gooch

# re: Improving the CSS 2.1 strict parser for IE 7

You completed a number of good points there. I did a lookup on the theme and

found that the majority of folks will consent with

your blog.

Thursday, January 3, 2013 4:37 AM by Beckman

# re: Improving the CSS 2.1 strict parser for IE 7

I got what you mean , thanks for posting .

Woh I am lucky to lookup out this website through google.

Tuesday, January 8, 2013 11:49 AM by Seo Submission

# re: Improving the CSS 2.1 strict parser for IE 7

Oh I was thinking is there any update of this writing?

Sunday, January 13, 2013 4:54 AM by Wholesale Snapback Hats

# re: Improving the CSS 2.1 strict parser for IE 7

olesale Snapback Hats

Sunday, January 13, 2013 5:00 AM by Bottega Veneta Outlet

# re: Improving the CSS 2.1 strict parser for IE 7

Bottega Veneta Outlet

Wednesday, January 23, 2013 5:46 PM by Denning

# re: Improving the CSS 2.1 strict parser for IE 7

I wanted to visit and allow that you know how great I liked searching for your web blog at the present time.

I’d consider it that the honor to operate at my place of

work and have the capacity to operate on the tips discussed on your website and

also be involved in visitors’ responses like this.

Should a position connected with guest article author become

on present at your end, make sure you let me know.

Friday, January 25, 2013 9:07 AM by Beal

# re: Improving the CSS 2.1 strict parser for IE 7

I really like what you guys are usually up too. This kind

of clever work and exposure! Keep up the terrific works guys I've added you guys to blogroll.

Saturday, February 2, 2013 5:37 PM by Mcnamee

# re: Improving the CSS 2.1 strict parser for IE 7

Youre so cool! I dont suppose Ive read anything such as this just before.

So nice to find somebody with some original ideas

on this subject. realy we appreciate you starting this up.

this web site have been some things which can be needed over the internet, a individual with

a tiny originality. beneficial project for

bringing new stuff to that the world wide web!

Saturday, March 30, 2013 6:00 AM by Simonson

# re: Improving the CSS 2.1 strict parser for IE 7

Magnificent beat ! I wish to apprentice while you amend your web site, how can i subscribe

for a blog website? The account helped me a applicable deal.

I were a little bit acquainted of this your broadcast offered vibrant transparent concept

Monday, April 1, 2013 6:04 AM by Manson

# re: Improving the CSS 2.1 strict parser for IE 7

Hi, i think that i saw you visited my weblog

so i came to “return the favor”.I'm trying to find things to enhance my website!I suppose its ok to use some of your ideas!!

Monday, April 1, 2013 2:39 PM by Schreiber

# re: Improving the CSS 2.1 strict parser for IE 7

We can use a reverse quit smoking weed lookup because of the cost before it would turn out to be drastically cheaper than hotel room rates, cellular roaming and long distance.