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.
|Full CSS 2.1 Support||Firefox 2|
|:before and :after|
Add content before or after all matching elements.
:focus, :hover, :active
MSIE 8 joins the other major browser vendors in offering full support for the CSS 2.1 Speciﬁcation.
|Nth-child selectors||Firefox 3.5|
|:nth-child, :nth-of-type, :nth-last-of-type, :ﬁrst-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|
Create complex borders using images.
|Box shadows||Firefox 3.5|
|-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|
|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|
|@font-face (*MSIE supports .eot or .ote ﬁles only)|
Ability to specify downloadable fonts for page rendering
|Printing features||Safari 3|
|@page, left, right, and ﬁrst page selectors, page-break-inside, widows, orphans|
Better control over printing with CSS constructs.
|Advanced visual effects||Safari 4|
Firefox 3.5 (tranforms only)
Gradients, linear or radial, with key points and “color-stops” that work similarly to a Photoshop gradient.
-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|
|Deﬁne CSS colors with an alpha channel for transparency that is not inherited by child elements. See Andy Clarke’s screencast.|
|Multiple backgrounds||Safari 3|
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 ﬁnal release of Firefox 3.5 is yet to be seen.)
|Alternate Stylesheets||Firefox 2|
|Deﬁne named styles that cor|
respond 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|
|Local storage for modern web applications.|
|HTML 5 media support||Firefox 3.5|
Standards-based elements that support multimedia playback, and better scripting control.
(*Support in Opera is only partial, and not yet conﬁrmed.)
|HTML 5 multiple ﬁle uploads||Safari 4|
|Upload multiple ﬁles through one input ﬁeld. In the past, workarounds have typically been achieved using Flash or Java applets.|
|HTML 5 input type range||Safari 4|
|New element type for deﬁning a form value using a slider.|
|HTML5 drag-and-drop||Firefox 3.5|
|ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondragend, ondrop|
API for interactive web interfaces which ﬁre native drag and drop events in the browser. Additionally a dataTransfer object holds dragged data.
|Support for XHTMLnamespaced elements||Firefox 3|
|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.|
|HTML 5 ofﬂine support||Firefox 3.5|
(*MSIE 8 only supports ononline and onofﬂine events)
|HTML 5 Cross Document Messaging (XDM)||Firefox 3|
|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|
|Native Query Selectors||Firefox 3.5|
|querySelector, querySelectorAll (*not supported in 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|
|Request data from a URL on an outside domain securely.|
|XHR Progress Events||Firefox 3.5||Progress Events for Ajax requests.|
|Firefox 3.5 – TraceMonkey|
Safari 4 – Nitro
Chrome – V8
|Run background script processes on a webpage without interfering with user input. Similar to threading.|
(*Available in Chromeʼs latest developer release)
|ICC Color Proﬁles||Firefox 3.5|
|Images will more accurately reﬂect their representations in Photoshop.|
|WIA-ARIA support||Firefox 3|
|WIA-ARIA is a W3C speciﬁcation that makes modern Ajax web applications more accessible to people with disabilities.|
|Geolocation API||Firefox 3.5|
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)
|Improved Developer Tools||Safari 4|
|Safari 4 Web Inspector|
MSIE 8 Developer Tools
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.