Internet Explorer 8: The X-UA-Compatible meta element and conditional comments
22 August 2010 | Posted by Jeffrey Barke | 4 comments
I woke up this morning to discover that Paul Irish had left a comment on one of my GitHub commits:
A user reported that this actually didnt work.. the ie=edge never jumped ie8 into standards mode..
did you see it succeed?
Hmm… this didn’t sound good. The error in question was on our HTML5 template for The Knot. We had wrapped the X-UA-compatible meta element with an IE conditional comment. I don’t remember exactly why we did this, but I think it had something to do with HTML validation.
Now, I know that HTML validation doesn’t matter (see also “The value of HTML validation”), but I do like using it as a lint tool (and yes, I prefer to just see a green favicon in the title bar). However, I also understand that pages don’t have to validate in the wild and I had never actually tested wrapping the X-UA-Compatible meta element with a conditional comment. I just assumed it would work, because, well, why shouldn’t it?
Damn. Once again, I learn the value of assumptions. It turns out that the way it’s coded doesn’t work. IE8 completely ignores the X-UA-Compatible meta element. Since I recently read about conditional comments blocking downloads, I was curious if this had anything to do with it and if the solution I had settled on for that problem would also help with this one. Voilà!
Since the download blocking also affects conditional comments around the body element and I wanted to avoid putting an empty conditional comment in the head, I moved the conditional comments to the html element. This solution also causes the conditional X-UA-Compatible meta element to be seen by IE!
UPDATE: There is one problem with this technique: it breaks Google Chrome Frame. Chrome Frame ignores IE conditional comments, so it never gets invoked. If you want your page to work with Chrome Frame and you want it to validate, send an HTTP header. If you can’t set the header, don’t wrap the meta element with conditional comments. Besides, validation doesn’t matter anyway, 
.
<!--[if lte IE 6 ]><html lang="en-us" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie ie8"><![endif]-->
<!--[if !IE]>--><html lang="en-us"><!--<![endif]-->
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
</head>
</body>
</body>
</html>Tests
IE=7. Works!IE=edge. Works!IE=edgewrapped in conditional comment. Does not work!IE=edgewrapped in conditional comment with conditional comments around thehtmlelement. Works!
Answers to the “How does the Internet work?” exercise questions
14 August 2010 | Posted by Jeffrey Barke | No comments
The following answers are to the exercise questions at the end of “How does the Internet work?” by Jonathan Lane, which is article three in Opera’s Web Standards Curriculum.
Question one: Provide a brief definition for HTML and HTTP and explain the difference between the two.
HTML is a markup language (based on SGML in some formulations and XML in others) used to semantically structure content for consumption over the internet.
HTTP is networking protocol that is used to transfer content over the internet, regardless if the content is plain text, HTML, JavaScript, CSS, PDF, etc.
In terms of explaining the difference between the two, by definition they’re so completely different it should be obvious. HTML specifies a means of structuring machine-readable content while HTTP specifies a means of moving content from one machine to another.
Question two: Explain the function of a web browser.
At minimum, a web browser takes a URL input by a user, uses DNS to transform the hostname part of the URL into an IP address and contacts a web server to retrieve and render the document specified by the pathname part of the URL.
Question three: Have a look around the Internet for about 5–10 minutes and try to find some different types of content—plain text, images, HTML, dynamic pages such as PHP and .NET (.aspx) pages, PDFs, Word documents, Flash movies etc. Access some of these and have a think about how your computer displays them to you.
Well, I’ve been doing web development for awhile, so I didn’t actually do this one.
Question four: What is the difference between a static page and a dynamic page?
A static page is any resource sent to the client by the web server as is, while a dynamic page is first passed by the server to a programming language interpreter (a binary file) to be processed. The output from the interpreter is then passed back to the server which sends it to the client.
Question five: Find a list of HTTP error codes, list 5 of them, and explain what each one means.
Starting with HTTP/1.0, the first line of the response is the status line, which consists of a numeric status code and a textual reason phrase. The status code is specified as machine-readable, while reason phrases are intended to be human-readable. Custom status codes are permissible, since user-agents can use the first digit of unrecognized codes to determine the general class of response.
| First digit of status code | Status code class name | Class description |
|---|---|---|
| 1 | Informational | A provisional response, letting the client know that the request was received and that the process is continuing. Not defined for HTTP/1.0. |
| 2 | Success | The request was received, understood, accepted and processed successfully. |
| 3 | Redirection | The client must take additional action to complete the request. |
| 4 | Client error | A response for cases in which the client seems to have erred. |
| 5 | Server Error | The server failed to fulfill an apparently valid request. |
Anywho, back to the actual question. Here’s what I consider to be the “big” four HTTP error codes (two client-side and two server-side) and one fun error code I’d never heard of prior to this exercise:
403 Forbidden- The request was a legal request, but the server is refusing to respond to it. Unlike a
401 Unauthorizedresponse, authenticating will make no difference. 404 Not Found- The requested resource could not be found, but may be available again in the future. Subsequent requests by the client are permissible.
500 Internal Server Error- A generic error message, given when no more specific message is suitable. BTW, when you’re new to developing dynamic pages, you’ll see this one a lot.
503 Service Unavailable- The server is currently unavailable (because it is overloaded or down for maintenance). Generally, this is a temporary state. This status code was made popular by Twitter’s “fail whale.”
418 I'm a teapot- This code was defined as one of the traditional IETF April Fools’ jokes, in RFC 2324, Hyper Text Coffee Pot Control Protocol, and is not expected to be implemented by actual HTTP servers.
References
I attempted to correctly answer the first four questions in my own voice after reading the article once and without reference to the article or any other source. Please provide any corrections and/or additions in the comments. For question five, I made use of the following two Wikipedia articles:
Answers to “The history of the Internet and the web, and the evolution of web standards” exercise questions
8 August 2010 | Posted by Jeffrey Barke | No comments
The following answers are to the exercise questions at the end of “The history of the Internet and the web, and the evolution of web standards” by Mark Norman Francis, which is article two in Opera’s Web Standards Curriculum.
Question one: What browsers are available on the Internet today for users of Windows, Mac OS X and Linux? and question two: What percentage of web users use each browser?
I’m going to answer both questions at the same time by providing a table that lists the current “major” browsers, their version number, operating platform(s), Acid3 score and market share.
| Browser | Version | Operating system(s) | Acid3 score1 | Market share2 |
|---|---|---|---|---|
| Chrome | 5.0.375.125 | Windows, Mac OS X, Linux | 100 | 7.22% | Firefox | 3.6.8 | Windows, Mac OS X, Linux | 94 | 22.92% | Internet Explorer | 8 | Windows | 20 | 60.66% | Konqueror | 4.4.5 | Windows, Mac OS X, Linux | 89 | <1% | Opera | 10.60 | Windows, Mac OS X, Linux | 100 | 2.44% | Safari | 5.0.1 | Windows, Mac OS X | 100 | 5.11% |
- 1
- Acid3 scores are out of 100. For more information on Acid3, see Wikipedia.
- 2
- Market share for Q3 2010.
Question three: What browsers do mobile devices use when accessing web pages?
The top eight mobile browsers listed in order of market share:
- Safari (iPhone, iPad)
- Opera Mobile
- Nokia Series 40 browser
- BlackBerry browser
- Android browser
- NetFront
- PlayStation Portable web browser
- Polaris browser (Samsung)
How many “web standards” have the W3C published, and which are widely supported by browser manufacturers today?
A lot. Compared to the other three questions, this one is huge and I don’t really want to answer it. So, here is a partial answer of what I consider the “big” recommendations that are widely supported by browser manufacturers to be:
- HTML
- XHTML
- XML
- CSS
- DOM
- DOM events (but not in IE8-
) - PNG (Alpha transparency not supported in IE6-)
- SVG (Not in IE!)
A complete list of W3C standards and drafts can be found at http://www.w3.org/TR/.
References
- Browser version, operating system(s) and Acid3 score retrieved from browser-specific Wikipedia pages on 7 August 2010.
- Browser market share retrieved from NetMarketShare on 7 August 2010.
- Mobile browser list compiled from StatCounter Global Stats and Wikipedia. Both documents retrieved on 7 August 2010.
Standardistas? Are you serious?
3 August 2008 | Posted by Jeffrey Barke | 2 comments
I probably shouldn't be so critical, but it's Saturday night and I'm at home working. During a brief Wikipedia break (computer jargon), I decided to read the standardista entry and followed an external link to webstandardistas.com.
I'm not sure what I expected to find, but I guess it wasn't a placeholder for a forthcoming Friends of Ed book. Regardless, it was disappointing to see that while these standardistas did have a valid DOCTYPE, it was neither HTML 4.01 Strict nor XHTML 1.0 Strict, but XHTML 1.0 Transitional. It was also disappointing to see inline JavaScript and CSS in the head instead of an external stylesheet.
And, while it was only a single error, it was the use of an incorrect inline JavaScript onsubmit (they have it incorrectly specified as onSubmit) handler that causes the page to not validate!
I'm also not sure how I feel about the use of h3 and p tags within unordered lists. Is this really necessary? Why not just have multiple uls below the headings? Or instead of the li with child p construct, use definition lists?
Finally, there's no server side validation on the "Keep me posted form"!
Opera Web standards curriculum
8 July 2008 | Posted by Jeffrey Barke | No comments
Very cool: "Opera's new Web Standards Curriculum is a complete course to teach [one] standards-based web development, including HTML, CSS, design principles and background theory, and JavaScript basics. It already has support from many organizations (including Yahoo! and the Web Standards Project) and universities. The first 23 articles are currently available, with about 30 more to be published between now and late September."
The first 23 articles cover the history of the internet and the evolution of Web standards, Web design concepts, HTML basics and the HTML body. Authors include Roger Johansson and Christian Heilmann.
