It's a Mod World - A Practical Guide to Rocking Modernizr

5,445 views

Published on

Short and sweet guide to using Modernizr in your web projects.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,445
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
71
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • It's a Mod World - A Practical Guide to Rocking Modernizr

    1. 1. IT’S A MOD WORLDA PRACTICAL GUIDE TO ROCKING MODERNIZR
    2. 2. WHAT IS IT?“Modernizr is a small and simple JavaScriptlibrary that helps you take advantage of emergingweb technologies (CSS3, HTML 5).”~from modernizr.comTells you whether or not the currentbrowser has HTML5 and CSS3 featuresnatively implemented.
    3. 3. THE WHOFaruk Ateş@KuraFirePaul Irish@paul_irishAlex Sexton@slexaxton
    4. 4. WHERE?• http://modernizr.com• Follow: @modernizr• Contribute: https://github.com/Modernizr/Modernizr
    5. 5. HOW DOES MODERNIZR WORK?• Uses feature detection to test browsers for support of HTML5 and CSS3 features• Brings an end to browser sniffing
    6. 6. WHAT DOES THAT MEAN?
    7. 7. BROWSER SNIFF BADol_skool_browser_detect: function() { if(navigator.appName===Netscape && navigator.appVersion===5.0 (Macintosh; en-US)){ // Do something magical for FireFox Mac users. }}• Not reliable• Not “future-proof”
    8. 8. I CAN HAZ FEATURE DETECTION?the_mod_way: function() { if(!Modernizr.input.placeholder){ // No declarative HTML5 "placeholder" support add_my_focus_event(); }}• More reliable• More “future-proof”
    9. 9. USE HTML5 SEMANTIC ELEMENTS• Allows you to use semantic HTML5 elements (same as html5shim/html5shiv)• Renders block level elements as divs in non-supporting browsers• Allows you to style elements in your CSS
    10. 10. MODERNIZR DOES NOTModernizr does not add missing functionality to browsers
    11. 11. UNDER THE HOOD Tests over 20 HTML5 and CSS3 features• Modernizr tries to create and do something with new features in the DOM• Browser understands: yay support!• Browser does not understand: ahhh
    12. 12. SOME PHILOSOPHY
    13. 13. PROGRESSIVE ENHANCEMENTProgressive enhancement is a strategy for web design that emphasizesaccessibility, semantic HTML markup, and external stylesheet andscripting technologies. Progressive enhancement uses web technologies ina layered fashion that allows everyone to access the basic content andfunctionality of a web page, using any browser or Internet connection,while also providing those with better bandwidth or more advancedbrowser software an enhanced version of the page. ~from wikipedia• Use semantic markup• Take advantage of great stuff in the experience layer
    14. 14. DO WEBSITES NEED TO LOOK THE SAME IN ALL BROWSERS?
    15. 15. ANSWERhttp://dowebsitesneedtolookexactlythesameineverybrowser.com/ Thanks Dan Cederholm @simplebits
    16. 16. CONTROL• Take advantage of new HTML5 and CSS3 features without loosing control in old browsers• Use declarative HTML and CSS when possible and fall back on procedure JavaScript when not
    17. 17. USE IT1. Download it from modernizr.com2. Include modernizr-1.7.min.js in your page3. Add "no-js" class to the <html> element
    18. 18. WHAHOPPINED?Google Chrome:<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websocketsrgba hsla multiplebgs backgroundsize borderimageborderradius boxshadow textshadow opacitycssanimations csscolumns cssgradients cssreflectionscsstransforms no-csstransforms3d csstransitionsfontface video audio localstorage sessionstoragewebworkers applicationcache svg inlinesvg smilsvgclippaths">
    19. 19. WHAHOPPINED?FireFox:<html class="js flexbox canvas canvastext no-webglno-touch geolocation postmessage no-websqldatabaseno-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsizeborderimage borderradius boxshadow textshadowopacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstoragesessionstorage webworkers applicationcache svg no-inlinesvg no-smil svgclippaths">
    20. 20. WHAHOPPINED?IE 8:<html class="js no-flexbox no-canvas no-canvastextno-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-historydraganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacityno-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3dno-csstransitions fontface no-video no-audiolocalstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">
    21. 21. A FEW EXAMPLES...
    22. 22. PLACEHOLDERvar App = function(){ var default_full_name = Full Name; return { init: function() { if(!Modernizr.input.placeholder){ App.add_focus_events(); } }, add_focus_events: function(){ // Set the default values $(#full_name).val(default_full_name); // Add the focus and Blur events $(#full_name).focus(function(){ if($(this).val()===default_full_name){ $(this).val(); }}); $(#full_name).blur(function(){ if($(this).val()===){ $(this).val(default_full_name); }}); }; }}();$(document).ready(function($j){ App.init();});
    23. 23. BORDER RADIUS & BOXSHADOW// original rule that looks nice#content { border: 2px outset #666;}// target browsers that support border radius// tweaking the border a little.borderradius #content { border: 1px solid #141414; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;}// target browsers that support boxshadow// remove the border altogether for browsers that support boxshadow.boxshadow #content { border: none; -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; box-shadow: rgba(0,0,0, .5) 3px 3px 6px;} Example credit: Faruk Ateş - A List Apart
    24. 24. FONT FACE// original rule that looks niceh1 { color: #e33a89; font: 27px/27px Baskerville, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; margin: 0; text-shadow: #aaa 5px 5px 5px;}// tweak size and text shadow for browsers that support @font-face@font-face { src: url(Beautiful-ES.ttf); font-family: "Beautiful";}.fontface h1 { font: 42px/50px Beautiful; text-shadow: none;} Example credit: Faruk Ateş - A List Apart
    25. 25. LEARN MORE & SOURCES• Modernizr (Download + Great Documentation): http://www.modernizr.com• Taking Advantage of HTML5 and CSS3 with Modernizr: http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with-modernizr/• HTML5 Cross Browser Polyfills https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-browser-Polyfills
    26. 26. YOURS TRULYMichael EnslowPrincipal Developer andCo-founder of MisterMachinehttp://mistermachine.comFollow me: @menslow

    ×