I don’t think this is the usual conditional comment blocking but I could have missed something. Looking at the results below, should the CSS file block the rest of the page like that? I do have an empty conditional comment before the CSS links and the inline scripts are also placed above. Note that I don’t have a main CSS, each IE version gets all styles in their own single file (and one file for the other browsers).
Hi Mattias,
I’m sure you’ve read Stoyan’s blog post on this topic:
It actually does not show the expected behaviour for your specific case: you have all LINK tags inside conditional comments, and Stoyan’s test pages always have the first LINK tag outside conditional comments.
And so, IE8 just might behave differently.
I took Stoyan’s test page as a base and copied in the conditional comments you use for non-IE browsers. My code editor did not make the conditional comments green, and that is a signal for invalid code.
So I checked in the HTML5 Boilerplate template what the correct syntax is for a conditional comments that targets all non-IE browsers and it turns out that it differs from your syntax.
In the Boilerplate:
Yours: <![if !IE]> <![endif]>
I do think the syntax in the Boilierplate is favourable to yours. See the Wikipedia page for more info: Conditional comment - Wikipedia
In summary, after testing several variations of my page on Webpagetest.org, these are my conclusions:
- the position of the empty CC in your page is ok
- the syntax for the non-IE CC is ok (but again, the Boilerplate syntax is favourable
- the empty, inline JavaScript at the top of the BODY is causing the blocking !!!
I think you overlooked that empty JS. It blocks and now that you read this you’re probably thinking “yeah, right, I knew that!”.
FYI, here are the WPT results for the variations of my test page:
I was lazy and used one page the whole time and made changes to it as I went along. So the one currently online is the latest used and basically has your (blocking) syntax.
Empty CC at top, no inline JS
Empty CC at top, inline JS
Empty CC below the inline JS, inline JS
No empty CC, inline JS
Leaving out the empty CC has no effect: nothing is blocking (huh?)
Empty CC at top, inline JS, ‘old’ CC for non-IE browsers
Empty CC at top, inline JS, ‘old’ CC for non-IE browsers, inline JS at top of BODY (aka: original code)
WebPageTest Test - Running web page performance and optimization tests...
Have fun optimizing!
Aaron
Hi Aaron,
Thank you for spending so much time on my problem! You are, of course, correct. I’ve removed the empty inline script and the blocking is gone.
http://www.webpagetest.org/result/110131_NW_2AXN/
I’m embarrassed to say that the inline script was a left over from some restructuring and I was so focused on the head and the conditional comments (which I knew could cause blocking in other cases) to notice it.
I will also change the syntax of the conditional comment for non-IE browsers. Actually, you made me realise I completely forgot about IE>=9 which should also use the “non-IE” CSS.
Thanks again for all your help.
Mattias
You’re welcome.