HTML5 Forms

Chris Coyier stellt eine nette Methode vor HTML5 Formulare mit JavaScript auch älteren Browsern feature complete anzubieten.

Der “Trick” ist Yepnope.js und Modernizr.

Yepnope is a “script loader” which will load scripts conditionally. You give it some kind of boolean value (true or false), if it’s true, it’ll load one set of scripts (or css), if it’s false, a different set. Where do we get that boolean value? From testing a feature with Modernizr.

Die Kombination von Yepnope und Modernizr sieht recht vielversprechend aus.

 

EnhanceJS

Bei der Filament Group las ich gerade über EnhanceJS:

Introducing EnhanceJS, a JavaScript framework designed specifically to deliver a usable experience to the widest possible audience, by testing the browser to determine whether it is capable of correctly supporting a range of essential CSS and JavaScript properties, and delivering features only to those that pass the test.

Aussehen tut das dann so;

<script type="text/javascript" src="enhance.js"></script>	
<script type="text/javascript">
	enhance({
		loadStyles: [
			'css/enhancements.css'
		],	
		loadScripts: [
			'js/jquery.min.js',
			'js/enhancements.js'
		]
	});   
</script>

Bei Zeiten mal testen…

 

EnhanceJS

Mal wieder ein spannendes Projekt von der Filament Group: EnhanceJS.

EnhanceJS is a new JavaScript framework (a single 2.5kb JavaScript file once minified/gzipped) that that automates a series of browser tests to ensure that advanced CSS and JavaScript features will render properly before they’re loaded to the page, enabling you to build advanced, modern websites without introducing accessibility problems for people on browsers that aren’t capable of supporting all advanced features. It’s designed to be easily integrated into a standard progressive enhancement workflow: just construct the page using standard, functional HTML, and reference any advanced CSS and JavaScript files using EnhanceJS to ensure they’re only delivered to browsers capable of understanding them.

Im Einsatz könnte das in etwa so aussehen:

<script type="text/javascript" src="enhance.js"></script>	
<script type="text/javascript">
	enhance({
		loadStyles: [
			'css/enhancements.css'
		],	
		loadScripts: [
			'js/jquery.min.js',
			'js/enhancements.js'
		]
	});   
</script>
 

Content Switcher without JavaScript

Schönes Beispiel für Progressive Enhancement: Louis Lazaris erklärt einen Content Switcher der auch ohne JavaScript funktioniert und deep linking untersützt.

Als mir diese Technik zum ersten mal über den Weg gelaufen ist habe ich eine Weile gebraucht um zu verstehen wie das gelöst wurde, dabei ist es eigentlich recht simple 😉

 

Graceful degradation vs progressive enhancement

dev.opera erklärt den Unterschied zwischen Graceful degradation und progressive enhancement.

It can be said that both progressive enhancement and graceful degradation try to do the same thing: keep our products useful to every user. Progressive enhancement is a more sophisticated and at the same time stable way of assuring that but it takes more time and effort. Graceful degradation can be used more easily as a patch for an already existing product; it means harder maintenance later on, but requires less initial work.