It’s been nearly two and a half years since the last major release of a web browser from Microsoft. Since then, we’ve seen Firefox 2 and 3, Safari 3, Opera 9.5, and Google Chrome hit the market. The field has grown, and the competition has brought big wins for the web standards community.
Now that the final version of Internet Explorer 8 is upon us, we thought it might be worth looking at what this latest release means to us as web developers, and how we can expect the web to change with new versions of Firefox, Safari, and Opera on the horizon.
For starters, IE 8 brings with it many notable bug fixes. The behavior of floated elements is said to be vastly improved, along with fixes for collapsing margins, getAttribute and setAttribute methods, and getElementById. Also of note, is the removal of the mysterious hasLayout property that has plagued developers for years, and CSS Expressions, which were an IE-only extension to CSS. You can also expect to see fewer memory leaks in IE 8, as Microsoft reports efforts to improve memory-management when dealing with scripts in their latest release.
Now, before we get too excited, we are still bound to supporting legacy browsers at some basic level – at least until we see a major change in market share – but many of the features listed below do lend themselves well to progressive enhancement.
Below is a list of features which we can expect to see being adopted in greater numbers over the coming months. Additions and corrections are welcome.
| Feature | Supported Browsers | Summary |
|---|---|---|
| CSS | ||
| Full CSS 2.1 Support |
Firefox 2 MSIE 8 Safari 3 Chrome Opera |
:before and :after :focus, :hover, :active display outline quotes MSIE 8 joins the other major browser vendors in offering full support for the CSS 2.1 Specification. |
| Nth-child selectors |
Firefox 3.5 Safari 3 Chrome Opera |
:nth-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type Color alternating rows in a table, items in a list, etc. With this addition in Firefox 3.5, Firefox now supports all CSS3 Selectors. |
| Border images |
Firefox 3.5 Safari 3 Chrome |
-moz-border-image, -webkit-border-image Create complex borders using images. |
| Box shadows |
Firefox 3.5 Safari 3 Chrome MSIE * |
-moz-box-shadow, -webkit-box-shadow, (*available in MSIE through Microsoftʼs DropShadow Filter) Cast a drop shadow from most HTML elements. Accepts color, offset, blur radius, spread radius. |
| Text shadows |
Firefox 3.5 Safari 3 Opera 9.5 |
text-shadow, (available in MSIE through Microsoft Shadow and DropShadow Filter) Casts a drop shadow from text and text-decorations. Accepts color, offset, blur radius. |
| Web fonts |
Firefox 3.5 Safari 3.1 MSIE 4.0* Opera 10 |
@font-face (*MSIE supports .eot or .ote files only) Ability to specify downloadable fonts for page rendering |
| Printing features |
Safari 3 MSIE 8 Opera |
@page, left, right, and first page selectors, page-break-inside, widows, orphans Better control over printing with CSS constructs. |
| Advanced visual effects |
Safari 4 Firefox 3.5 (tranforms only) MSIE 8* Chrome** |
-webkit-gradient -webkit-mask -webkit-box-reflect -webkit-transition -webkit-animation -webkit-transform, -webkit-transform-origin, moz-transform, -moz-transform-origin (*many effects are available in MSIE through Microsoftʼs Visual Filters) (**The next build of Chrome may support many of the webkit based additions) |
| RGBa Colors |
Firefox 3 Safari 3 Chrome Opera 10 |
Define CSS colors with an alpha channel for transparency that is not inherited by child elements. See Andy Clarke’s screencast. |
| Multiple backgrounds |
Safari 3 Chrome Firefox 3.5 (?)* |
Specify multiple background images to one element. (*Multiple background support has made its way into Firefox nightly builds. As to whether it will be supported in the final release of Firefox 3.5 is yet to be seen.) |
| Alternate Stylesheets |
Firefox 2 MSIE 8 Safari 3 Chrome Opera |
Define named styles that correspond to alternate style sheets, allowing users to select one of several presentation styles for a page. MSIE 8 brings this feature to full support across all the major vendors. |
| HTML & the DOM | ||
| HTML 5 client-side databases |
Firefox 3.5 Safari 3 MSIE 8 |
Local storage for modern web applications. |
| HTML 5 media support |
Firefox 3.5 Safari 3 Opera 10* |
video, audio Standards-based elements that support multimedia playback, and better scripting control. (*Support in Opera is only partial, and not yet confirmed.) |
| HTML 5 multiple file uploads |
Safari 4 Opera 9 |
Upload multiple files through one input field. In the past, workarounds have typically been achieved using Flash or Java applets. |
| HTML 5 input type range |
Safari 4 Opera 9 |
New element type for defining a form value using a slider. |
| HTML5 drag-and-drop |
Firefox 3.5 MSIE 5 |
ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondragend, ondrop API for interactive web interfaces which fire native drag and drop events in the browser. Additionally a dataTransfer object holds dragged data. |
| Support for XHTMLnamespaced elements |
Firefox 3 Safari 3 Opera 9 Chrome MSIE 8 |
MSIE 8 now supports embedding namespaced elements in XHTML. SVG and MathML are two popular uses, which should now be easier to implement in all the major browsers. |
| Javascript | ||
| HTML 5 offline support |
Firefox 3.5 Safari 4 MSIE 8* |
Detecting network connectivity events within javascript. (*MSIE 8 only supports ononline and onoffline events) |
| HTML 5 Cross Document Messaging (XDM) |
Firefox 3 Opera 9 Safari 4* MSIE 8 |
Client side communication through IFrames between documents from different domains with the postMessage method. (*Supported in WebKit nightlies. May or may not make it into Safari 4) |
| Native JSON support |
Firefox 3.5 MSIE 8 |
Creating and interpreting Javascript objects through the parse and stringify methods of the JSON object. |
| Native Query Selectors |
Firefox 3.5 Safari 3 Chrome MSIE 8* Opera 10 |
querySelector, querySelectorAll (*not supported in MSIE 8) Method for retrieving 1 or more DOM objects by CSS selector (the way your favorite javascript libraries already do) |
| Ajax Navigations |
Firefox Safari Opera Chrome MSIE 8 |
Updates to the window.location.hash property (anchor links) are treated like "traditional" navigations – they donʼt break the back button. Support added by MSIE 8 makes this a feature of all modern browsers. |
| Cross Domain Requests (XDR) |
Firefox 3.5 MSIE 8 |
Request data from a URL on an outside domain securely. |
| XHR Progress Events | Firefox 3.5 | Progress Events for Ajax requests. |
| New High-speed Javascript Engines |
Firefox 3.5 Safari 4 Chrome |
Firefox 3.5 – TraceMonkey Safari 4 – Nitro Chrome – V8 |
| Javascript background worker threads |
Firefox 3.5 Chrome * |
Run background script processes on a webpage without interfering with user input. Similar to threading. (*Available in Chromeʼs latest developer release) |
| Other | ||
| ICC Color Profiles |
Firefox 3.5 Safari 3 |
Images will more accurately reflect their representations in Photoshop. |
| WIA-ARIA support |
Firefox 3 Safari 4 MSIE 8 Opera 9.5 |
WIA-ARIA is a W3C specification that makes modern Ajax web applications more accessible to people with disabilities. |
| Geolocation API |
Firefox 3.5 Opera Google Gears Plugin* |
Web applications can get a user’s location if a location provider is installed. (*Geolocation is also available through the Google Gears plugin on several other browser platforms and legacy browser versions) |
| Data URI |
Firefox Safari Opera Chrome MSIE 8 |
Ability to specify images as data inline in your style sheet. Typically used for small sprites in order to minimize HTTP requests, reducing overall load time. Now possible in all major browsers with the introduction of MSIE 8. Support for older browsers is available through Javascript. |
| Improved Developer Tools |
Safari 4 MSIE 8 Opera |
Safari 4 Web Inspector MSIE 8 Developer Tools Opera “Dragonfly” |
As you can see, there is a lot to be excited for. The industry is seeing progress that makes the web more powerful, pages more accessible, and developers lives simpler. Now that the technology is here, it is up to us to embrace it.
References:
http://en.wikipedia.org/wiki/Comparison_of_web_browsers
http://ejohn.org/blog/javascript-in-internet-explorer-8/
http://www.microsoft.com/windows/internet-explorer/readiness/developers-new.aspx
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
http://developer.apple.com/safari/
https://developer.mozilla.org
http://en.wikipedia.org/wiki/Data_URI_scheme
There are so many blogs online today that it is refreshing to find one such as yours. Thanks you for this great post.
Thank you for another fantastic article. Where else could anyone get that type of information in such an ideal way of writing? I’ve a presentation next week, and I am on the look for such info.
Highly revealing many thanks, I believe your subscribers may very well want a lot more writing along these lines carry on the great work.