HTML and CSS Reference
In-Depth Information
■
A shim is a thin object, often made of wood that is used to fill a gap between two objects. in this context the
term refers to a relatively small piece of code that fills in the gap between a browser's current functionality and the full
HTMl5 specification. The term “shim” has been used in software development circles for a long time. The term polyfill
was introduced for referring to a browser-related shim. So, in this context, the two terms are synonymous.
Note
Adding More Polyfills
Now you're probably starting to feel a little better. With just two pretty easy changes (adding Modernizr and
resetting the styles), the page looks decent. However, upon closer inspection, there is a fairly long list of features
that are not working, including
•
Tables
•
Rounded corners
•
Gradient background fills
•
Striped articles
•
Animation
•
3D Transforms
•
Multiple-columns
Given a sufficient amount of patience and persistence (and of course time) you could probably implement
all of these features so that your page looks the same in both IE 7 and the latest version of Chrome. However, I
don't recommend that you do that. Essentially, you should make sure your page works great on the latest HTML5
compliant browsers and works acceptably on older browsers. It doesn't have to work great on every browser.
Consider the following:
•
Most users are not going to compare your site on a host of browsers and compare the
experience of each. Your page does not need to look identical in every browser.
•
If someone is using IE6, they are used to bad looking web sites. Implementing just a few
of these polyfills will probably make your page stand out as one of the better sites they've
visited.
•
HTML5 is supposed to make your job as web developer easier. However, if you try to
make every page work like native HTML5 on older browsers, you'll be spending far more
time, not less.
For each feature that your page uses that is not natively supported by commonly used browsers, you have
the following options:
•
Fail - Simply display an error stating this browser does not support the necessary features
and offer some suggested browsers to use. For example, the primary purpose of the
sample site you created in Chapter
5
was to demonstrate how web workers are used. If the
page is viewed by a browser that doesn't support web workers, there's no point trying to
make the page work. Just fail!
