Supporting Older Browsers - HTML5 with Visual Studio 2012 - page 152

• Polyfill - Implement an alternate solution to provide the needed feature. This can

range from very simple solutions to rather complex. For example, if a gradient fill is not
supported you could just use a solid color fill, or you could provide a shim and implement
a gradient using JavaScript.

• Ignore - Just leave the feature unimplemented. For example, you could ignore rounded

corners; in older browsers they'll be square corners.

There are no hard and fast rules here; you'll need to decide on a case-by-case basis which features are
important to you and how much time you're willing to spend making them work on older browsers. In the rest
of this chapter I will demonstrate some techniques to backfill some of these features using mostly-open source
shims that are publicly available. I don't want to leave you with the impression, however, that you have to backfill
every feature. In fact, several of these features for this demo, including multi-column support, 3D transforms, and
animation will be ignored as they are just not that important.

■ There are a plethora of shims and polyfills available. This article provides a good reference if you're looking
for something specific: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills .
Keep in mind that these may not always work properly so test them and keep what works. Also, combining various
shims can create some interesting results, as the side effects from one can break another one.

Tip

Displaying Tables
As you test your page in several browsers, note the features that are not working correctly and then prioritize
them. In this case, the aside element should be alongside the main content, not at the end of the page. In my
opinion, this is the most critical issue and should therefore be addressed first.

■ Tables were first supported in iE8. if you change the browser mode to iE8, you'll see the sidebar is alongside
the main content. So table support is only an issue for iE7 and older. You might consider simply ignoring the issue
and explain that your site works best with iE8 and newer. To see how many users that would affect, check out the
latest browsers' stats at http://www.w3schools.com/browsers/browsers_stats.asp . According to these
statistics, that's only about 2% of the total number of browsers in use. These statistics represent an overall usage;
you may have a specific target audience that can have different characteristics.

Tip

To support tables in IE6 and IE7, you'll use a behavioral CSS extension, which allows you to embed a
JavaScript in a style sheet. An extension is invoked by adding a rule like this:
header
{
behavior: url(customBehavior.htc);
}

The implementation is provided in an HTML component (HTC) file with the .htc extension. There are a few
things about using .htc files that you should be aware of.