HTML and CSS Reference
In-Depth Information
16. At the top of the tools pane, you can select the browser mode as shown in
Figure
7-6
.
Figure 7-6.
Selecting the browser mode
17. Select internet Explorer 7 for the browser mode and the page should look like
Figure
7-2
. You can use the browser mode to see how your page will look in some of
the older versions of internet Explorer.
Making Some Simple Changes
There are a couple of really easy changes that will make the web page look much better. You'll start with those
and then later I'll show you some of the more involved solutions.
Using Modernizr
When supporting older browsers, the first thing you should do is employ the Modernizr open source JavaScript
library. This library performs two essential functions:
•
Detect the current browser's available features and provide this information as queryable
properties. For example, in your JavaScript, you can place conditional logic like this:
if (!Modernizr.cssanimations) {
alert("Your browser does not support CSS animation");
}
•
Provide shims to implement missing functionality. This includes the html5shim library
that allows you to style your content using the new elements such as
header
,
footer
,
nav
,
and
aside
.
■
Tip
So let's add the Modernizr library to your page and see what happens! The version of Modernizr that is
added to your MVC4 project is
modernizr-2.0.6-devlopment-only.js
. There are newer versions available from
the modernizr site but this will do fine for this exercise.
At the top of your
Index.cshtml
file, just after the
DOCTYPE
tag, add the following code:
<script src="~/Scripts/modernizr-2.0.6-development-only.js"></script>
