JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film
Freestyle Logo

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Implementing HTML5 Support

With HTML5, there are some new tags and with them come problems with older browsers rendering the page similarly on all browsers. So there are lots of little tweaks needed. See notes below for each block. Copy the code below and replace the default code from Dreamweaver.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!--The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.
"IE=edge" tells Internet Explorer to use the highest mode available to that version of IE.
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>CHANGE ME!!!!</title>
<!--This tells the browser to make the width of the page equal to the device width such as mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--You can create and display your own 32x32px favicon which is the tiny image icon used in the URL-->
<link rel="shortcut icon" href="pathToYour/project#/images/favicon.png" >
<!--Normalizing a webpage essentially makes all browsers render the page consistently - lots of fixes for all the different browser issues-->
<link rel="stylesheet" href="http://www.freestyleacademy.rocks/styles/normalize.css">
<link rel="stylesheet" href="pathToYour/p#-styles.css">

<script src="http://www.freestyleacademy.rocks/jquery/modernizr.js"></script><!--See http://modernizr.com/-->
<script src="http://www.freestyleacademy.rocks/jquery/minified.js"></script><!--Main jQuery library-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.js"></script><!--Easing libraries-->
<script src="http://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="http://www.freestyleacademy.rocks/jquery/animate-css-rotate-scale.js"></script>

<!--This css-transform.js patch for jQuery 1.3.1+ allows you to set and get CSS Transforms in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+, and Opera 11+ in a uniform way with the jQuery css() method. You can simply do the following rather than using browser specific properties (-webkit-, -moz-, -ms-, -o-):

         $("#example").css("transform", "rotate(7deg)");

         instead of

         #example {
                  transform:rotate(7deg);
                  -o-transform:rotate(7deg); /* Opera */
                  -ms-transform:rotate(7deg); /* IE 9 */
                  -moz-transform:rotate(7deg); /* Firefox */
                  -webkit-transform:rotate(7deg); /* Safari and Chrome */
         }
-->
<script src="http://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See http://ricostacruz.com/jquery.transit/-->
<script src="pathToYour/p#-scripts.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script>
         document.createElement("header" );
         document.createElement("footer" );
         document.createElement("main" );
         document.createElement("section");
         document.createElement("aside" );
         document.createElement("nav" );
         document.createElement("article");
         document.createElement("hgroup" );
         document.createElement("time" );
</script>
<noscript>
         <strong>Warning !</strong>
         Because your browser does not support HTML5, some elements are simulated using JScript.
         Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
</noscript>
<![endif]-->
</head>
<body onUnload=""><!--This refreshes the page to default view if user goes away and return via the browser back button-->
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site content here -->

</body>
</html>