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

• CSS Animation

• 3D Transforms

• Multiple columns

You can fairly easily implement animation by using JavaScript to change the background image as a timer
expires. That's the way it was normally done before we had CSS animation. Implementing a 3D transform in an
older browser, however, just isn't going to work. I would categorize both of these as nice to have but not really
worth the trouble so we'll leave these features out if the browser doesn't support them.
The one feature that would be nice to emulate is the multiple column support. There are shims available
for this such as the one described in this article: http://www.csscripting.com/css-multi-column . And I guess
they must work in some simple scenarios but they failed miserably with this page. Perhaps with enough time
and patience I could get something to work but this is one of those hard decisions. Is it worth the effort? In some
unique circumstances it might be but, in general, you probably shouldn't spend 80% of your time on a nice-to-
have feature that will only affect a few percent of the expected audience.
One thing you should consider, though, is hiding elements that aren't functional. The range control, for
instance, doesn't do anything and it's not even supported so it just looks like a textbox. You should hide that.
Also, the now static picture of the moon isn't very interesting either. So you'll hide these elements. The range
control is hidden by setting its visibility attribute to hidden. The div that contains the moon image needs to be
shrunk down to 0px so it doesn't take up space. (You could also set the display property to None - either method
accomplishes the same thing.)

eXerCISe 7-6. hIDING eLeMeNtS

1. First, you'll need to assign an id attribute to the range control so it can be more

easily selected in JavaScript. Add the code shown in bold to the input element:

<div class="rotateContainer">
<p>This is really cool...</p>
<img class="rotate" id="phone"
src="images/phonebooth.jpg"
alt="phonebooth" />
<input type="range" min="-180" max="180" step="18"
value="0" onchange="rotateImage(this.value)"
id="rotateDegrees " />
<br />

2. Then add the following code to the script element at the bottom of the Index.

cshtml file:

if (!Modernizr.csstransforms3d) {
document.getElementById("rotateDegrees").style.visibility = "hidden";
}
if (!Modernizr.cssanimations) {
document.getElementById("moon").style.width = "0px";
document.getElementById("moon").style.height = "0px";
}