Modernizr2011.11.29@EZABLE          brooky
Why
linear -gra di                                                 e         nt          We want    CSS3                please...
Good example                   http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
anopen-sourceJavaScript library                that helps youbuild          HTML5         the next generation of          ...
What can Modernizr do   for designers?
CSS3 fall-                                      back design  Responsive  Design           for different             device...
What can Modernizr do   for developers?
polyfillsLoad      forold browsers                test HTML5 &                  CSS3 capability
Start using Modernizr
Include Modernizr
After loading Modernizr <html class="js canvas canvastext geolocation rgba   hsla no-multiplebgs borderimage borderradiusb...
After loading Modernizr <html class="js canvas canvastext geolocation rgba   hsla no-multiplebgs borderimage borderradiusb...
check                                              classes of                                                HTML         ...
linear-gradient with fallback
text-shadow with fallback
Modernizr + pollyfills
Pollyfills            pollfills   Old                  ModernBrowsers               Browsers
HTML5 geo with fallbackMore Polyfills:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Test HTML5 capability
from: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html
Practice
Q: JS is not reliable?
Summary
what Modernizr does do       for you
detect native availability      of features
what Modernizr does      NOT do
add missing functionality      to browsers
Thank you
One more thing...
Use progressive enhancement
don’t sacrifice accessibility
don’t sacrificeperformance
ReferenceModernizr:http://www.modernizr.com/Modernizr features:http://www.modernizr.com/docs/#features-cssBuild an Awesome...
HTML5 Cross Browser Pollyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsSpeeding up with Mode...
Using Modernizr to detect HTML5 and CSS3browser supporthttp://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.ht...
20111129 modernizr
Upcoming SlideShare
Loading in …5
×

20111129 modernizr

2,091 views

Published on

How to use Modernizer for building HTML5 and CSS3 websites

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,091
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
59
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

20111129 modernizr

  1. 1. Modernizr2011.11.29@EZABLE brooky
  2. 2. Why
  3. 3. linear -gra di e nt We want CSS3 please !! We want HTML5 transition CSSI nee d could I have Web Socket would help a lotText-Shadow ?
  4. 4. Good example http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
  5. 5. anopen-sourceJavaScript library that helps youbuild HTML5 the next generation of and CSS3 websites. -powered
  6. 6. What can Modernizr do for designers?
  7. 7. CSS3 fall- back design Responsive Design for different devicespics from: http://webdesignernotebook.com/css/how-to-use-modernizr/
  8. 8. What can Modernizr do for developers?
  9. 9. polyfillsLoad forold browsers test HTML5 & CSS3 capability
  10. 10. Start using Modernizr
  11. 11. Include Modernizr
  12. 12. After loading Modernizr <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradiusboxshadow opacity no-cssanimations csscolumns no- cssgradients no-cssreflections csstransforms no- csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
  13. 13. After loading Modernizr <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradiusboxshadow opacity no-cssanimations csscolumns no- cssgradients no-cssreflections csstransforms no- csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
  14. 14. check classes of HTML More predefined class:http://www.modernizr.com/docs/#features-css
  15. 15. linear-gradient with fallback
  16. 16. text-shadow with fallback
  17. 17. Modernizr + pollyfills
  18. 18. Pollyfills pollfills Old ModernBrowsers Browsers
  19. 19. HTML5 geo with fallbackMore Polyfills:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  20. 20. Test HTML5 capability
  21. 21. from: http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html
  22. 22. Practice
  23. 23. Q: JS is not reliable?
  24. 24. Summary
  25. 25. what Modernizr does do for you
  26. 26. detect native availability of features
  27. 27. what Modernizr does NOT do
  28. 28. add missing functionality to browsers
  29. 29. Thank you
  30. 30. One more thing...
  31. 31. Use progressive enhancement
  32. 32. don’t sacrifice accessibility
  33. 33. don’t sacrificeperformance
  34. 34. ReferenceModernizr:http://www.modernizr.com/Modernizr features:http://www.modernizr.com/docs/#features-cssBuild an Awesome Image Gallery withjQuery, Modernizr, and CSS3http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
  35. 35. HTML5 Cross Browser Pollyfillshttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-PolyfillsSpeeding up with Modernizrhttp://www.contrast.ie/blog/speeding-up-with-modernizr/yepnopehttp://yepnopejs.com/
  36. 36. Using Modernizr to detect HTML5 and CSS3browser supporthttp://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.htmlTaking Advantage of HTML5 and CSS3 withModernizrhttp://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/

×