garyv/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    This is an attempt to make a HTML boilerplate that simplifies progressive enhancement.
It operate under the assumption that their are two types of browsers:

those that support HTML5
those that don't

By HTML5, I'm not just talking about markup - I'm using the more nebulous definition that includes many JavaScript APIs and CSS selectors associated with modern web applications.
A breif script in the head judges if the browser is worthy. This is based on detection of two modern DOM API's: one for selecting elements, and one for attaching events.
After that, one can use the .html5 class in CSS and the html5 Boolean in JavaScript to target only HTML5 browsers.
The rules of progressive enhancement still apply - a webpage's basic content and functionality should be written using basic code that all browsers can understand, and special features are layered on top of it based on feature detection. This just simplifies the process a bit by passing a swift judgement about a browser's general support of contemporary web standards.
As a bonus, the a snippet at the end gently informs users of IE8 and below about how obsolete their browser is and where they can download a better one. This gives most uninformed users a direct path for accessing the full website in HTML5, while still leaving the basic website open to anyone who does not change their browser.
Demo here - http://tinyurl.com/bb4r9qf

  
## detect-html5.html
<!doctype html>
<html>
<head>
  <title>
    Detect HTML5 browsers
  </title>
  <meta charset='utf-8'>
  <script>
     var html5 = document.querySelector && window.addEventListener &&
    (document.documentElement.className = 'html5');
  </script>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      font-size: 4em;
    }
    .html5 body {
      background: black;
      color: black;
      text-shadow: 0 0 35px red,
                   0 0 10px orange,
                   0 0 8px  blue,
                   0 0 3px  white;
    }
  </style>

</head>
<body>

  <div class='page'>
    <p>hello</p>
  </div>

  <script>
    if (html5) {

        // native methods
        window.addEventListener('DOMContentLoaded', function(){
          var page = document.querySelector('.page p');
          page.innerHTML = 'Hello awesome browser!';
        }, false);
    }
  </script>

  <!--[if lt IE 9]>
  <script src='http://ie6-upgrade-message.googlecode.com/svn/trunk/IE6UpgradeMessage.js'></script>
  <script>
    IE6UpgradeMessage.text = "We notice you are using an old version of Internet Explorer. Click here to upgrade your web browser.";
    IE6UpgradeMessage.url = "http://outdatedbrowser.com/en";
  </script>
  <![endif]-->
</body>
</html>

## html5.js
// html5 mini framework
var html5 = document.querySelector && window.addEventListener &&
(document.documentElement.className = 'html5') &&
($ = function(s){ return document.querySelector(s) }) &&
($.all = function(s){ return [].slice.call(document.querySelectorAll(s)) }) &&
($.bind = function(x,e,c){ x.addEventListener(e,c,!1) }) &&
($.attr=function(){return arguments.length-2?$.attr(arguments[0],arguments[1])!=arguments[2]&&arguments[0].setAttribute(arguments[1],arguments[2]):arguments[0].getAttribute(arguments[1])});

// test - if html5 browser, click any image alerts and sets the image's alt test
if (html5) {
  var firstImage = $('img');
  var allImages = $.all('img');

  allImages.forEach( function(img){

    $.bind( img, 'click', function(){
      alert('img clicked!');
      $.attr( img, 'alt', 'Awesome!' );
      return false;
    });

  });

}
	<!doctype html>
	<html>
	<head>
	<title>
	Detect HTML5 browsers
	</title>
	<meta charset='utf-8'>
	<script>
	var html5 = document.querySelector && window.addEventListener &&
	(document.documentElement.className = 'html5');
	</script>
	<style>
	body {
	font-family: sans-serif;
	text-align: center;
	font-size: 4em;
	}
	.html5 body {
	background: black;
	color: black;
	text-shadow: 0 0 35px red,
	0 0 10px orange,
	0 0 8px blue,
	0 0 3px white;
	}
	</style>

	</head>
	<body>

	<div class='page'>
	<p>hello</p>
	</div>

	<script>
	if (html5) {

	// native methods
	window.addEventListener('DOMContentLoaded', function(){
	var page = document.querySelector('.page p');
	page.innerHTML = 'Hello awesome browser!';
	}, false);
	}
	</script>

	<!--[if lt IE 9]>
	<script src='http://ie6-upgrade-message.googlecode.com/svn/trunk/IE6UpgradeMessage.js'></script>
	<script>
	IE6UpgradeMessage.text = "We notice you are using an old version of Internet Explorer. Click here to upgrade your web browser.";
	IE6UpgradeMessage.url = "http://outdatedbrowser.com/en";
	</script>
	<![endif]-->
	</body>
	</html>
	// html5 mini framework
	var html5 = document.querySelector && window.addEventListener &&
	(document.documentElement.className = 'html5') &&
	($ = function(s){ return document.querySelector(s) }) &&
	($.all = function(s){ return [].slice.call(document.querySelectorAll(s)) }) &&
	($.bind = function(x,e,c){ x.addEventListener(e,c,!1) }) &&
	($.attr=function(){return arguments.length-2?$.attr(arguments[0],arguments[1])!=arguments[2]&&arguments[0].setAttribute(arguments[1],arguments[2]):arguments[0].getAttribute(arguments[1])});

	// test - if html5 browser, click any image alerts and sets the image's alt test
	if (html5) {
	var firstImage = $('img');
	var allImages = $.all('img');

	allImages.forEach( function(img){

	$.bind( img, 'click', function(){
	alert('img clicked!');
	$.attr( img, 'alt', 'Awesome!' );
	return false;
	});

	});

	}