Which next-gen browser?
We survey the latest versions of the web’s hottest browser brands and
identify features that will impact the way you work today and tomorrow
One of the problems the
internet has always
faced is also regarded
as one of its biggest
strengths. Nobody owns
it, and to a greater extent nobody has the
authority to govern or dictate it – if such a
notion was possible.
The framework it is built on is open
and you don’t need to have any kind
of special licence to build content for it.
What’s more, the commercial forces that
compete for online territory don’t have
to agree on how they operate. This has
never been more unfortunate than within
the browser market, where some of the
world’s biggest software companies
struggle to become your favoured
window onto the world wide web. All
claim first and foremost to offer the best
viewing experience, with faster and more
secure performance for demanding
consumers – but what about the support
for the developers building the content?
This is where things get more alarming.
You see, the considerations for what goes
on under the hood tend to be brushed
under the carpet and discretely ignored.
What then transpires is that web designers
and coders suddenly make disgruntled
noises about the lack of genuine CSS
support, odd interpretations of the
document object model (DOM), horrible
little holes or glitches and God knows
what else. Sadly, this strife isn’t merely
confined to the beta release phases
of the new Internet Explorer, Firefox,
Opera, Safari et al, but instead becomes
a characteristic that developers have to
put up with. So why don’t we just stop
whingeing and boycott the troublesome
browsers until they take notice? Nice
theory, but if your hated browser happens
to have a decent market share of users,
then alienating them with an unforgiving
website could be fatal. Instead, we’re
forced to find workarounds that make
things work across as many browsers and
devices as possible – even Dreamweaver
automatically adds code!
So seeing as we’re checking out
some of the new CSS3 tags this issue,
we thought an overview of the features
and specs for the current generation of
browsers might be a useful idea. Primarily
with developers in mind, we’ll briefly
describe the publicised merits of Internet
Explorer 8, Firefox 3, Opera 9.5 and Safari
3, while looking at where they sit in
regards to the popular Acid standards test.
INTERNET EXPLORER 7 & 8
As the world’s leader can Microsoft show
everyone the way with its latest browers?
As the unmistakeable leader of the
browser market, Microsoft’s Internet
Explorer would naturally bear the brunt
of bad press. Popularity is a doubleedged
sword when it comes to aspects of
security, a particular bone of contention
for IE as attackers will always target the
commonest denominator – but what
about web standards? Sadly, Microsoft’s
ability to almost guarantee ubiquity by
packaging the client with Windows hasn’t
seen it adopt the moral high ground
when it comes to supporting established
development rules either. For example,
version 7 is known to support a mere 54
per cent of the CSS2.1 specification, which
is some 40 per cent behind equivalent
estimates for Firefox and Opera. As you’ll
see from our boxout, this is also reflected
in the results of recent Acid tests and
arguably the worst performance of Acid2
and Acid3 out of the bunch. What also
seems evident is that different versions of
IE don’t tend to improve the level of web
standards support from the one before,
or are at least erratic in terms of the issues
addressed. One of the things this means
for developers is that they must code
certain hacks into pages optimised for
IE versions whereby the browser selects
what code to run from a series of switch
statements only it can read. These are
known as conditional comments:
<p><!--[if IE]>
According to the conditional comment,
this is Internet Explorer
<![endif]-->
<!--[if IE 4]>
According to the conditional comment,
this is Internet Explorer 4
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment,
this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment,
this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment,
this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment,
this is Internet Explorer 7
<![endif]-->
Similarly, you will have noticed when
coding script for multiple browsers that
often referencing the page document
object model can be tough. In simple
terms, this often affects how JavaScript
can interact with elements such as text
boxes, images, forms, object arrays or
whatever. Internet Explorer uses the
Trident layout engine and therefore
renders or builds pages differently, which
then impacts on universal DOM rules.
A typical hack here has been to code
browser identity checks into scripts to
use specific DOM calls where needed and
work around such inconsistencies. The
example below shows how checking the
browser name can be used to load an
Internet Explorer optimised page instead
of the normal Index:
<script language=”JavaScript” type=”text/JavaScript”>
if(navigator.appName == “Microsoft Internet Explorer”)
{
window.location = “ExplorerIndex.html”
}
window.location == “Index.html”
</script>
The real message here is that Internet
Explorer has contributed to a negative
trend of code ‘hacking’ to overcome
standards neglect. This creates a very
disjointed approach and something not
many web developers would advise,
instead recommending better crossbrowser
testing of content and stripping
back of the features that cause grief.
Throw into the mix that Internet Explorer
8 will eschew many of the workarounds
needed for version 7 and you’ve got even
more of a balancing act to maintain!
VERSION 8 BETA
The good news is that early signs of
Internet Explorer 8 suggested Microsoft
was going back to the drawing board on
standards support. It took great pride in
releasing the beta version to the public
at its MIX developer conference in March,
showing how webpages rendered exactly
the same as its contemporaries – wow,
finally! However, reception of the new
version has been lukewarm to say the
least, with doubts over commitments
to fully support CSS2.1 and even more
worries over support for CSS3. Only a few
selectors are known to feature for the
latter, although we should remember that
the browser remains very much a work in
progress. At the moment it can claim an
Acid2 test pass, but does horribly on Acid3
despite all the other older clients gaining
much higher scores.
Another point to bear in mind is our
earlier one about catering for different
versions of Explorer. The beta of version
8 lets users switch between ‘standards
mode’ and an emulation of the quirky
IE7 so that the enhancements don’t
effectively ‘break the web’. However,
there’s also a provision made for
developers who wish to declare or force
the rendering engine that the new
browser should use so as to get the
intended result. This ‘meta switching’
idea is essentially a more robust and
simpler way to hard code compatibility,
and involves placing a line similar to
the one below in the <head> of your
document’s page:
<meta http-equiv=”X-UA-Compatible”
content=”IE=8” />
OPERA 9.5
Small but perfectly formed, this is one cult phenomenon that seems
determined to bring high levels of standards support to the masses
Developed originally as a research project
in 1994 at Norwegian telecommunications
firm Telenor, Opera was first released as
a browser to the public in 1996. Version
2.0, as it was christened then, only ran
on Windows, although it was quickly
ported for other devices and platforms in
the following years. Mobile support has
subsequently become a key part of what
the browser represents commercially,
with the Opera Mini version for mobile
phones proving hugely popular alongside
clients built especially for the Nintendo DS
and Wii consoles.
With the desktop version now open
to Mac and PC users, Opera boasts a
meagre but devoted market share of
approximately one per cent – although
it remains highly regarded for being a
trailblazer of new features and standards
compliancy. In fact, previous iterations up
to version 9.5 have often had to include
capabilities for improving the rendering of
standards bereft websites, simply because
Opera adheres to and supports them
so strictly. It is credited as being one of
the first to implement CSS and currently
claims support for the following:
HTML 4.01, XHTML 1.1 (plus Basic,
Mobile Profile, +Voice), HTML 5 (partial)
CSS2.1, CSS 3 (partial)
WML 2.0, XSLT, XPath, XSL-FO,
ECMAScript 3 (JavaScript), DOM 2
XMLHttpRequest (see box out), HTTP 1.1
Unicode, SVG 1.1, GIF89a, JPEG and PNG
(with alpha)
If you check out our Acid testing
section of this feature, you’ll spot that
Opera 9.5 gets the best score of the
bunch – despite only managing 83/100.
It’s worth pointing out that the visual
result is easily the most coherent of all
four and that the Opera team claim to
have nonstable development versions
achieving maximum marks. Also from
the list, you’ll see that Opera has partial
support for HTML 5, when in fact it is
reported to lead the way with support for
the new specification:
Canvas element
contentEditable
Cross-document messaging
Element.tabindex attribute and the
Element, {blur, focus} methods
getElementsByClassName
Embed and Video
Navigator.onLine attribute and the
Window, {online,offline} events
Server-sent events
Web Forms 2.0
SAFARI 3.1
Apple’s own OS X browser doesn’t do much shouting when it comes
to standards support – so what’s it like and where’s it going next?
Apple released Safari 3.1 in March with an
updated rendering engine that boasted
speed gains over already impressive
performance times. In accordance
with literature released at the time
( http://docs.info.apple.com/article.html?artnum=307467) it also added
some next-generation standards support
too, including basic animation effects
with CSS transforms/transitions and the
much touted <video> and <audio> tag
elements expected in Firefox 3.1:
<video src=myMovie.mov autoplay>
</video> //example of HTML 5’s video
tag
@font-face {
font-family: JuicyFruit;
src: url(‘JuicyFruit-Regular.ttf’);
} //example of CSS3’s @font-face
In addition to adding the @font-face
CSS3 attribute (above) for facilitating
custom typefaces regardless of system
install, the browser has also implemented
offline storage facilities for web
application development. This HTML
5 addition could be big news for RIA
builders and emulates the likes of Adobe
AIR and Google Gears whereby caching of
data allows for offline operation. We can’t
unfortunately find any evidence of this
facility being demonstrated properly yet
and it’ll be a while before any of this stuff
goes mainstream while waiting for the
other browsers to catch up.
VERSION 4
There’s not much concrete information
about where Apple will take its browser
from the current version 3; however,
speculation is rife. Here’s a look at some of
the key areas being talking about…
JavaScript speeds gains of 53 per cent
Set to appear in the forthcoming
Snow Leopard update of OS X
Ability to save webpages and launch
them from the desktop. These
site-specific browsers or SSBs are
effectively UI-reduced clients that
provide direct access to web apps
Incorporation of various CSS-based
graphic improvements, including
gradients, masks and reflections
FIREFOX 3
As the main contender to the browser crown
does Firefox look so rosy to web developers?
With a reputed user base of just under
20 per cent worldwide, Firefox is the
most popular browser after Microsoft
Internet Explorer 8. A product of the
Mozilla Corporation and available freely
under an open-source licence, it started
out as a client known as Phoenix in
2002 and was only released under the
Firefox moniker in 2004. Recent versions,
including the latest third, have largely
been characterised by tabbed browsing,
the ability to install extensions that add
additional functionality and a wellpublicised
edge over Internet Explorer
when it comes to security.
In terms of standards compliance and
page rendering, Firefox uses the Gecko
layout engine to implement current
specifications and pre-empt those likely
to be introduced at a later date. Mozilla
actually does a great job of informing
developers of new nightly builds and
bug fixes on its Bugzilla forum ( https://bugzilla.mozilla.org), where notifications
on new developments for future versions
are also posted.
As far as the current version goes, it
manages a 71/100 in Acid3 and boasts a
number of new features or additions of
interest to developers:
HTML 4 - <script> tag must have a
closing (/script) tag
JavaScript 1.8 – Script object made
obsolete and no longer supported
Microformats – global Microformats
object added for accessing API
HTML 5 – drag, dragend (events)
and activeElement, hasFocus
(DOM attributes)
DOM – 12 new methods added
SVG 1.1 – All filters supported and
foreignObject, pattern, mask (elements)
Animated PNG (APNG) image format
CODENAME ‘SHIRETOKO’
This is the codename for Firefox 3.1 and
various new enhancements that should
be of great interest to web developers
are being talked about. A posting on
Wikipedia claims that support for HTML
5’s <video> tag is to be implemented,
which will allow video objects to be
defined and operated within the page
much like images – with src, width,
height properties, etc. Ajax and Web
2.0 fans will be interested to hear that
cross-site XMLHttpRequest capabilities
are planned for the release, which will
have huge benefits in building complex
web apps and simplifying mashup
work. Based on the Gecko 1.9.1 engine,
it is also widely anticipated that Firefox
3.1 will have full CSS3 selector support,
having had preAlpha builds pass a
number of homebrew tests ( www.css3.
info/selectors-test/test.html) with flying
colours. Expect to find these additions:
A winner would be nice…
So what conclusions can we draw from
this browser round-up, and where does
it leave them all in respect to how they
perform? Well, first we should stress
that judging them on the Acid tests
should not be a sole barometer of how
good the browser is from a developer’s
perspective. This is merely a well-known
benchmark in the same way that speed
tests are used to measure page loading
times or JavaScript parsing – the results
don’t really mean all that much in
practice. Until one of them can boast 100
per cent performance on standards and
page rendering, the rest will never be
pressured into following suit.
What’s more, can such brilliance ever
be attained when the specifications and
rules that define the many technologies
we use are always evolving? Couple that
with the fact that browser vendors are
usually only motivated by achieving
a download ubiquity, which is mainly
driven by end users. Unfortunately,
they are an audience who largely don’t
know whether bad performance is down
to a site’s design or the browser they
use – and let’s face it, rarely are they
disgruntled enough to investigate it.
For the developers, we have to admit
that the inconsistencies between the
latest crop of web browsers are as
evident as ever, but hopefully everyone
can take heart that work is being done to
bring them together. In a climate where
the genetics of online design is changing,
it seems likely that necessary advances
and cross-platform implementations of
HTML 5, CSS3 and Ajax will be influential
in releases to come. There is evidence
that while each browser still has work to
do, each one seems keen to improve.
If you have got any news or opinions
on the latest browsers, development
issues you’ve spotted or rumours on
forthcoming versions, then email the
Web Designer team at webdesigner@imagine-publishing.co.uk or share
your thoughts on our forum at www.webdesignermag.co.uk
|