• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
20111129 modernizr
 

20111129 modernizr

on

  • 1,886 views

How to use Modernizer for building HTML5 and CSS3 websites

How to use Modernizer for building HTML5 and CSS3 websites

Statistics

Views

Total Views
1,886
Views on SlideShare
1,885
Embed Views
1

Actions

Likes
3
Downloads
50
Comments
0

1 Embed 1

http://us-w1.rockmelt.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20111129 modernizr 20111129 modernizr Presentation Transcript

    • Modernizr2011.11.29@EZABLE brooky
    • Why
    • 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 ?
    • 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 and CSS3 websites. -powered
    • What can Modernizr do for designers?
    • CSS3 fall- back design Responsive Design for different devicespics from: http://webdesignernotebook.com/css/how-to-use-modernizr/
    • 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 borderradiusboxshadow opacity no-cssanimations csscolumns no- cssgradients no-cssreflections csstransforms no- csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
    • 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">
    • check classes of HTML More predefined class:http://www.modernizr.com/docs/#features-css
    • 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 Image Gallery withjQuery, Modernizr, and CSS3http://www.sitepoint.com/build-an-awesome-image-gallery-with-jquery-modernizr-and-css3/
    • 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/
    • 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/