20111129 modernizr
DESCRIPTION
How to use Modernizer for building HTML5 and CSS3 websitesTRANSCRIPT
Modernizr2011.11.29@EZABLE 讀書會
brooky
2011年11月29日星期二
Why
2011年11月29日星期二
We want HTML5
We want CSS3
I need CSS transition
Web Socket would help a lot
could I have
Text-Shadow ?
linear-gradient please !!
2011年11月29日星期二
Good example
http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
2011年11月29日星期二
2011年11月29日星期二
an open-source JavaScript library that helps you build the next generation of HTML5 and
CSS3-powered websites.
2011年11月29日星期二
What can Modernizr do for designers?
2011年11月29日星期二
CSS3 fall-back design
Responsive Design for different
devices
pics from: http://webdesignernotebook.com/css/how-to-use-modernizr/
2011年11月29日星期二
What can Modernizr do for developers?
2011年11月29日星期二
Load polyfills for old browsers
test HTML5 & CSS3 capability
2011年11月29日星期二
Start using Modernizr
2011年11月29日星期二
Include Modernizr
2011年11月29日星期二
After loading Modernizr<html class="js canvas canvastext geolocation rgba
hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio
cufon-active fontface cufon-ready">
2011年11月29日星期二
After loading Modernizr<html class="js canvas canvastext geolocation rgba
hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio
cufon-active fontface cufon-ready">
2011年11月29日星期二
More predefined class:http://www.modernizr.com/docs/#features-css
check classes of
HTML
2011年11月29日星期二
linear-gradient with fallback
2011年11月29日星期二
text-shadow with fallback
2011年11月29日星期二
Modernizr + pollyfills
2011年11月29日星期二
Pollyfills
pollfills
Modern Browsers
Old Browsers
2011年11月29日星期二
More Polyfills:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
HTML5 geo with fallback
2011年11月29日星期二
Test HTML5 capability
2011年11月29日星期二
from: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html
2011年11月29日星期二
Practice
2011年11月29日星期二
Q: JS is not reliable?
2011年11月29日星期二
Summary
2011年11月29日星期二
what Modernizr does do for you
2011年11月29日星期二
detect native availability of features
2011年11月29日星期二
what Modernizr does NOT do
2011年11月29日星期二
add missing functionality to browsers
2011年11月29日星期二
Thank you
2011年11月29日星期二
One more thing...
2011年11月29日星期二
Use progressive enhancement
2011年11月29日星期二
don’t sacrifice accessibility
2011年11月29日星期二
don’t sacrifice performance
2011年11月29日星期二
Reference
Modernizr: http://www.modernizr.com/
Modernizr features: http://www.modernizr.com/docs/#features-css
Build an Awesome Image Gallery with jQuery, Modernizr, and CSS3http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
2011年11月29日星期二
HTML5 Cross Browser Pollyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Speeding up with Modernizrhttp://www.contrast.ie/blog/speeding-up-with-modernizr/
yepnopehttp://yepnopejs.com/
2011年11月29日星期二
Using Modernizr to detect HTML5 and CSS3 browser supporthttp://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html
Taking Advantage of HTML5 and CSS3 with Modernizrhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
Sniff my browser: The Modernizr inadequacyhttp://nefariousdesigns.co.uk/archive/2011/05/sniff-my-browser-the-modernizr-inadequacy/
2011年11月29日星期二