63 lines
No EOL
2.2 KiB
HTML
63 lines
No EOL
2.2 KiB
HTML
<h1 id="html5">HTML5 Shim</h1>
|
|
|
|
<h2>Target HTML5 and CSS3 elements safely</h2>
|
|
<div class="intro">
|
|
Want to start using HTML5 semantics but are put off by it because you still have a large audience of users using non compatible browsers ?
|
|
</div>
|
|
<div class="code-example" data-title="HTML5 & CSS3">
|
|
<p>DIV's are good, but HeadJS let's you be semantic and futuristic</p>
|
|
|
|
{% highlight html %}
|
|
/* Use CSS3 semantics */
|
|
<style>
|
|
article { text-shadow:0 0 1px #ccc; }
|
|
</style>
|
|
|
|
<!-- works in IE too -->
|
|
<article>
|
|
<header></header>
|
|
<section></section>
|
|
<footer></footer>
|
|
</article>
|
|
{% endhighlight %}
|
|
|
|
<p>HeadJS will detect if IE < 9 is present, and inject the necessary HTML5 Shim for you.</p>
|
|
<p>You will still need to use a HTML5 enabling stylesheet for it to work like <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, or just <a href="/site/assets/css/html5.min.css" target="_blank">download our file</a> and reference it in your HEAD.</p>
|
|
|
|
{% highlight html %}
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="html5.min.css" />
|
|
<script src="head.min.js"></script>
|
|
|
|
/* Use CSS3 semantics */
|
|
<style>
|
|
article { text-shadow:0 0 1px #ccc; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- works in IE too -->
|
|
<article>
|
|
<header></header>
|
|
<section></section>
|
|
<footer></footer>
|
|
</article>
|
|
</body>
|
|
</html>
|
|
{% endhighlight %}
|
|
|
|
<p>You can also enable/disable the injection via the <a href="#configuration">configuration</a> section.</p>
|
|
---
|
|
<p><em>But before you start believing all the hype around HTML5, be sure to give this a read ..you'll be surprised !</em></p>
|
|
<figure>
|
|
<a href="http://www.truthabouthtml5.com/#fivereasons" target="_blank"><img src="/site/assets/img/truth-about-html5.jpg" alt="The Truth About HTML5" width="51" height="81"></a>
|
|
<figcaption><em>The Truth About HTML5</em></figcaption>
|
|
</figure>
|
|
|
|
|
|
<div style="width:100%;">
|
|
<div onclick="blog.loadComments(this, 'api/1.0.0/html5', 'Leave a comment')" style="cursor: pointer;">
|
|
<h2>Show Comments</h2>
|
|
</div>
|
|
</div>
|
|
</div> |