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 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.
Firefox <3.6 and the potential silent install of malware add-ons
4 April 2010 | Posted by Jeffrey Barke | 1 comment
This is an interesting (but older) piece of news: "Malware writers are taking advantage of a Firefox mechanism that allows extensions to be loaded invisibly to the user, Symantec has warned."
Candid Wüest, a senior engineer at Symantec, writes that malicious add-ons can be silently installed in the Firefox components directory. Any add-on in the components directory will automatically load with the browser and not show up in the add-ons window, meaning users will most likely not be aware that it has been added or see a way to remove the add-on.
Access to the components directory has been removed in Firefox 3.6, making it more difficult to create stealthy mal-extensions. To review all extensions actually installed in their browser, users can check the following directories.
On Windows:
%UserProfile%\Application Data\Mozilla\ Firefox\Profiles\[RANDOM].default\extensions%ProgramFiles%\Mozilla Firefox\extensions
On Mac OS X:
/Library/Application Support/Mozilla/Extensions~/Library/Application Support/Firefox/Profiles/[RANDOM].default/extensions/
Each add-on will have its own subdirectory in the extensions directory. Since many add-ons are identified by a GUID instead of the add-on name, I started to compile a list of add-on GUIDs and names at http://jeffreybarke.net/2010/04/firefox-add-on-guid-guide/.
For a lot more good information about Firefox and malicious add-ons, check out "Firefox and Malware: When Browsers Attack" [PDF, 1.4 MB] by Wüest and Elia Floria. It describes "a number of malicious extensions that carry out activities such as logging and forwarding all form submissions that include a password field, or forwarding all URLs visited."
Sources and links to more information
Information originally from Haking9 Vol. 5, No. 2, pg. 8.
- Bugzilla@Mozilla: Bug 519357: Only load known components from app directory
- ID Theft Protect: Firefox blocks rogue add-ons apps
- iTWire: Beware Firefox mal-extensions, warns Symantec
- Mozilla Security Blog: Component Directory Lockdown – New in Firefox 3.6
Firefox add-on GUID guide
4 April 2010 | Posted by Jeffrey Barke | 1 comment
Below is a (very) partial list of Firefox add-on GUIDs and names. I compiled it from add-ons I currently have installed.
After learning about the potential silent install of malware add-ons, I became interested in what add-ons I actually had installed in my browser. Please add more GUIDs and names in the comments; once I confirm them, I will integrate them with this article. Thanks!
- 000a9d1c-beef-4f90-9363-039d445309b8
- Google Gears
- 02450954-cdd9-410f-b1da-db804e18c671
- Screengrab
- 3c6e1eed-a07e-4c80-9cf3-66ea0bf40b37
- Dust-Me Selectors
- 75CEEE46-9B64-46f8-94BF-54012DE155F0
- MeasureIt
- 8f8fe09b-0bd3-4470-bc1b-8cad42b8203a
- Live HTTP Headers
- 95C9A302-8557-4052-91B7-2BB6BA33C885
- Operator
- c45c406e-ab73-11d8-be73-000a95be3b12
- Web Developer
- d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d
- Adblock Plus
- e0204bd5-9d31-402b-a99d-a6aa8ffebdca
- Torbutton
- e3f6c2cc-d8db-498c-af6c-499fb211db9
- Page Speed
- e4a8a97b-f2ed-450b-b12d-ee082ba24781
- Greasemonkey
- e968fc70-8f95-4ab9-9e79-304de2a71ee1
- User Agent Switcher
Oops! ABC’s cross-browser FAIL
21 March 2009 | Posted by Jeffrey Barke | No comments
Would it really be that difficult to support Opera, ABC? And why are you using the user-agent string to determine what browser I'm I'm on? Ever heard of object detection?
Notes from “Browser Wars III: The Platform Wins”
16 March 2009 | Posted by Jeffrey Barke | No comments
Photo by magerleagues
Browser Wars III: The Platform Wins
We're doing so darn much with the Web platform these days, from cross-domain access mechanisms to new drawing and graphics tools. But in the end, we still have to deal with different web browsers. This discussion brings the leads from Mozilla (Firefox), Microsoft (IE), Google (Chrome) and Opera (Opera) together for yet another incendiary discussion about the future of the web.
- Arun Ranganathan, Mozilla
- Chris Wilson, Web Platform Architect, Microsoft
- Brendan Eich, CTO, Mozilla Foundation
- Charles McCathieNevile, Chief Standards Officer, Opera Software
- Darin Fisher, Software Engineer, Google
Q: What’s in it for Google Chrome? Why join the “browser wars”?
A: Darin: Original goal was to make Firefox more successful. Then thought best way to move the platform forward was via competition.
No single majority browser engine at the moment. Where do we go from here? How do we cooperate? How do we compete?
Q: What's up with Silverlight?
A: Chris
Q: What's up with Opera? And comments on what Chris said?
A: There are scenarios where people will use Flash and Silverlight, but if you want to reach everyone, you have to really on standards.
If we continue going forward with standards, going to be as powerful as Flash and Silverlight.
Q: How are standards made? Standard itself is going to open source licensed.
A: Charles: Like sausages, you don’t want to know. Chris: Thinks it's a great idea for standard to have an OS license. Concerns about it getting forked.
[Open source model. Quote from license book]
Q: If there is a war, it's about JavaScript. Browsers competing here. JavaScript performance is a selling point. No longer a toy language.
A: Brendan: JavaScript panel trying to move quickly. Game plan is to get everyone cooperating on making material improvements. Fairly functional group. Biggest problem is writing spec.
Same as the CSS3 group, agree that different rendering engines are better for the Web.
Chris: IE 8 is taking JavaScript seriously. And not just JS, looking at performance holistically.
Darin: V8 derived benchmarks from types of programs they thought people would build.
Charles: For years Opera had fast JavaScript engine and no one cared. Now, people care. This is a really good thing. Massive improvement in the speed of JS.
Q: about:security. Why does IE do it's own thing? XSS and clickjacking.
A: Chris: Need to respond quickly; otherwise leaving your users out to dry. IE saw the problem of clickjacking and looked at where they were in the product cycle and decided couldn't wait an entire cycle to address the problem.
Willing to be interoperable.
Cross-domain request sharing access things now.
Q: Chrome also has some interesting security
A: Two parts to security. Web (identity) and the operating system. Sandboxing to protect OS. If use file:// URLs, new rendering engine created.
Why did Java fail?
The applet model and required higher-priced, higher-skilled programmers.
Notes from the SXSW I CSS3 panel
15 March 2009 | Posted by Jeffrey Barke | 2 comments
CSS3: What's Now, What's New and What's Not?
This panel explores how major browsers implement CSS3. The focus is on finding effective and efficient methods for developers to unleash their creativity while maintaining cross-browser compatibility. The panel covers current implementations, future plans from the major browser vendors and some discussion of the current progress on the standard itself.
- Molly Holzschlag, Pres, Opera Software
- David Baron, Mozilla
- Hakon Wium Lie, Opera Software
- Sylvain Galineau, Program Mgr, Microsoft
Please note: These notes were typed and published live. I'll clean them up at some point in the future. Audio forthcoming.
Interactive intro by Molly Holzschlag
David Baron from Mozilla. There is no CSS3. Split up, so development can proceed on certain parts.
Selectors
Color
Selectors. Pretty well implemented. Some of the selectors are so. Using classes vs nth-child might be faster.
Color: Partial opacity/transparency depending on how you look at it.
Border-image: One CSS property to handle stretching and tiling.
Columns.
Text-shadow.
Box-shadow.
Border-radius.
Many of these properties are implemented by browser vendors with hyphen browser name prefixes.
Downloadable fonts.
Media queries. @media (min-width). [Nice!]
Transform. iframe with skew applied. Can click links. Pretty impressive.
Mask/clip-path properties. SVG filters in HTML.
Sylvain. Microsoft.
IE and CSS. Bugs, quirks, missing features, hacks.
Prior to implementing CSS3, must fully implement CSS2.1.
IE 7 did not pass CSS 1 or 2.
IE 8 regressed on CSS 1, but advanced on CSS2.1. IE 8 is now close to almost passing all tests.
CSS 3 in IE 8. No new CSS 3 properties:
block-progressions, box-sizing, background-position-x, background-position-7, layout-grid, layout-grid-char
Future:
* Opacity
* backgrounds & borders
* selectors
* web fonts
* media queries
* multi-column
Hakon Wium Lie. Opera.
Thank IE for doing 2.1 fully.
* Backgrounds and borders
* Fonts
* Transitions
* Selectors
* Media queries
* Generated content for paged media
Webfonts have been around since 1998, but problem was font format. Now TrueType and OpenType are pretty dominant. Not disagreeing about syntax, but disagreeing about font format.
Transitions nice—on hover add time-element and browser will interpolate between two states. Beautiful and amazing!
Most wide-spread use of media queries will probably be based on width.. Make it easy to style for mobile and various devices.
Also impressive work for paged media. TOC has auto-pagination and leaders. Page numbers auto-transformed into hyperlinks. Footnotes.
Find Hakon’s CSS book designed in HTML and CSS.
Q: Why separate and competing rendering engines?
A: DB: Competition is good for progress. Danger of single rendering engine is that the Web will stagnate.
Q: Layout system.
A: Code with layout in mind. Which is not correct. Separation vs integration.
(This was a good q/a. Get from audio)
Q: Creation of book via HTML/CSS?
A: HWL: Decided to try it; not sure if could do it. Yes Logic, Australian company. HWL joined board to make sure his books were fixed first. Commercial product. Antenna House in Japan. Currently, no browser can handle it.
Desire to do paginated browser, instead of scrolling page browser.
HWL: Going to post slides to homepage. David Baron’s are already up.
Molly Holzschlag going to tweet slide location: http://twitter.com/mollydotcom
JavaScript features and bugs in Chrome
6 September 2008 | Posted by Jeffrey Barke | No comments
A complete rundown of the JavaScript features and bugs in Google's Chrome browser at http://ejohn.org/blog/javascript-in-chrome/.
37signals is phasing out support for IE6
3 September 2008 | Posted by Jeffrey Barke | 2 comments
I'm not sure if this is a bold move or simply a pragmatic one, but 37signals (creators of Basecamp) will stop supporting IE6 for all their products on 1 October 2008.
They note that IE6 "is a last-generation browser. This means that IE 6 can't provide the same web experience that modern browsers can." While I agree that supporting IE6 is a pain, I find this statement interesting since Yahoo's graded browser support defines IE6 as an A-grade browser on Windows 2000 and Windows XP.
While I wish I could take the same step as 37signals, I intend to continue supporting IE6.
Google's Chrome browser
3 September 2008 | Posted by Jeffrey Barke | No comments
Jeffrey Zeldman posted a nice overview of Chrome to his blog at http://www.zeldman.com/2008/09/03/a-bug-in-google-chrome/. What's most important, though, is his mention of a bug report by Jeremy Jarratt: "Google Chrome wrongly displays alternate styles as if active, thus 'breaking' websites that use them." (Learn more about alternate styles at A List Apart.)
PPK talks about Chrome at http://www.quirksmode.org/blog/archives/2008/09/google_chrome.html. He updated his BrowserDetect JavaScript object to detect Chrome.
John Resig provides a rundown of the various browsers' JavaScript engine performance at http://ejohn.org/blog/javascript-performance-rundown/. John uses three different test suites and discusses what the tests are testing and how the numbers relate to actual web page performance.
Using the Dromaeo test suite, which attempts to mimic how browsers perform under a normal web browsing situation, the WebKit-based engines came out ahead. Safari has a slight lead over Chrome, then the Firefox engines (TraceMonkey and SpiderMonkey), followed by Opera. No results for IE were provided, because it crashes while running the tests.
Personally, I downloaded Chrome yesterday and love it. The interface is very clean, pages render well and browsing is fast. I'm sorry Firefox, but while you're still my development browser of choice, for pleasure I've been using Safari on the Mac and will now be using Chrome on the PC.
