Share On:

Browsers

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
Add content before or after all matching elements.

:focus, :hover, :active
States now supported for all elements.

display
Support for all table layout values: table-row-group, table-header-group, tablefooter-group, table-row, table-column-group, table-column, table-cell, table-caption.

outline
Color, style, and width of the outline frame.

quotes
Define what characters to use to bound 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
Gradients, linear or radial, with key points and “color-stops” that work similarly to a Photoshop gradient.

-webkit-mask
Obscure areas of images before they are rendered. Accepts images, -webkit-gradient, svg, and more.

-webkit-box-reflect
Create reflections specified by a direction, offset, and -webkit-mask.

-webkit-transition
Smooth interpolation between two CSS states. Accepts properties to transition, duration, delay, and timing functions. DOM events are fired when transitions are completed.

-webkit-animation
Builds on transitions, adding the ability to specify a specific set of “keyframes”.

-webkit-transform, -webkit-transform-origin, moz-transform, -moz-transform-origin
Translation, scale, rotation, and skew along any axis and around a specified origin, or manipulate directly using a transform matrix.

(*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 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
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

zp8497586rq
Share Article