JeffreyBarke.net

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?

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.

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

A complete rundown of the JavaScript features and bugs in Google's Chrome browser at http://ejohn.org/blog/javascript-in-chrome/.

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.

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.

Notes and links from last night's Google I/O review at the New York Web Standards Meetup Group. Thanks to everyone who made it!

Note—There's a "curated" selection of Google I/O videos on this blog tagged io2008.

PowerPoint presentation

Demos/tutorials

• Gears
• Google AJAX Feed API

Even Faster Web Sites. Steve Souders (Google)

Steve's book High Performance Web Sites describes the 14 best practices he developed while working as the Chief Performance Yahoo!. YSlow, the Firebug extension he created, codified those best practices. Now working at Google, Steve discusses the next set of best practices he's discovered, including the impact of iframes and where to place (and where not to place) inline script blocks.

Presentation slides (Google Docs)

Source: YouTube

I follow Yahoo!'s Graded Browser Support and agree with the GBS approach:

In the first 10 years of professional web development, back in the early '90s, browser support was binary: Do you—or don't you—support a given browser? When the answer was "No," user access to the site was often actively prevented. In the years following IE5's release in 1998, professional web designers and developers have become accustomed to asking at the outset of any new undertaking, "Do I have to support Netscape 4.x browsers for this project?"

By contrast, in modern web development we must support all browsers. Choosing to exclude a segment of users is inappropriate, and, with a "Graded Browser Support" strategy, unnecessary.

The two principal concepts of GBS are a broader and more reasonable definition of "support" and the notion of "grades" of support.

Read the rest of this entry »

As Jan Odvarko notes, "I was surprised how many Firebug extensions … exist out there." Check out his list of 12 extensions at http://www.softwareishard.com/blog/firebug/list-of-firebug-extensions/. All extensions include a brief summary of what they do, a screen capture and a link to the download page.

Two that I use are YSlow and Odvarko's own Firecookie.. YSlow analyzes Web pages and determines why they're slow based on Yahoo's rules for high performance web sites. Firecookie makes it possible to view and manage cookies within the familiar Firebug UI.