Modernizr placeholder fallback
Download a copy of Modernizr with HTML5 input attributes and input types compatibility, host this via your own web site. It is not recommended to use the CDN for Modernizr, however there is a production copy available for temporary use only:
Modernizr input type fallback
Input types currently supported for Modernizr fallback include:
- input type=date
- input type=range
- input type=number
Jquery code for fallback solutions
Insert the Jquery and Modernizr links before the /head tag of your page. (I would usually prefer to load before /body for speed, however testing in IE7-IE9 revealed it only recognises the .js links in the head of the page, typical IE behaviour!) This includes a css file needed to style the Jquery fallbacks.
Jquery themes, including ‘roll your own’ available here.
Latest Google Jquery versions available here.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Download Modernizr as instructed above and insert link:
New tag to execute Modernizr check and Jquery fallback
Insert the tag below before the /body :
This tag will load the Modernizr checks to see if the fallback Jquery is needed, and if it is it will execute that code.
Tested in Firefox, Safari, IE 7-10, Chrome
See how it works on my web design cork page, includes slider/date input etc, and do comment below with any queries or suggestions!