HTML and CSS Reference
In-Depth Information
When you decorate your house, you find cracks or holes in walls
and wooden surfaces that need to be filled so that the surface
is level. To achieve this, you use a white filler paste that gives
you a smooth, level surface upon which you can paint, hang
wallpaper, or otherwise decorate.
This chapter introduces polyfilling, which is a way to fill the holes
in browser support using JavaScript (or any appropriate technol-
ogy such as Flash if it makes sense) to level the playing field.
We've seen that the HTML5 shiv allows new HTML5 elements
to be styled in oldie. But what about all the exciting APIs we've
introduced?
The method is
•
Code your page according to the standard APIs and test in
browsers that support all the features you need to use.
•
Using JavaScript, feature-detect each of the features that
your site requires to work.
•
If a feature is unavailable in the browser, lazy-load a polyfill
script that fakes support.
•
Pat yourself on the back and have a cup of tea and a
custard cream.
There is a downside: really creaky browsers might end up load-
ing a lot of scripts, so performance could be terrible. This is a
matter of testing thoroughly.
Yo u m i g h t a l s o b e s o m e w h a t s u r p r i s e d a t t h i s h a c k y a p p r o a c h .
After all, isn't the point of HTML5 to let us make modern web
apps without hacks and fallbacks? Well, yes, it is. The crucial dif-
ference with the polyfilling method is that new browsers use only
the modern standards, without any hacks. The hacks are only
there to patch up old browsers; this approach has been termed
“regressive enhancement,” because we're hacking for a dwin-
dling number of old browsers, rather than hacking forever after.
The polyfilling method also means clean code; we code to the
spec in our markup and scripts in the first instance, and only
(optionally) load additional hacks using our off-the-shelf polyfill-
ing scripts. It's what marketing types call a “win-win situation,”
because they're not always wrong about everything.
NoTE
Shivs vs Shims:
Did Bruce & Remy mean
“shiv”? Yes folks. The HTML5
shiv was coined by John Resig
who later admitted (or realised)
that he really meant shim, but
the name stuck, so now it's the
HTML5 shiv. It's a bit stabby, but
it works.
NoTE
Just remember that
a polyfill isn't progressive
enhancement—nor does it partic-
ularly support graceful degrada-
tion. A polyfill typically requires
JavaScript in the first place.
