• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
It's a Mod World - A Practical Guide to Rocking Modernizr
 

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

on

  • 4,826 views

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

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

Statistics

Views

Total Views
4,826
Views on SlideShare
4,817
Embed Views
9

Actions

Likes
5
Downloads
57
Comments
0

2 Embeds 9

http://twitter.com 7
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \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 It's a Mod World - A Practical Guide to Rocking Modernizr Presentation Transcript

  • IT’S A MOD WORLDA PRACTICAL GUIDE TO ROCKING MODERNIZR
  • 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.
  • THE WHOFaruk Ateş@KuraFirePaul Irish@paul_irishAlex Sexton@slexaxton
  • WHERE?• http://modernizr.com• Follow: @modernizr• Contribute: https://github.com/Modernizr/Modernizr
  • HOW DOES MODERNIZR WORK?• Uses feature detection to test browsers for support of HTML5 and CSS3 features• Brings an end to browser sniffing
  • WHAT DOES THAT MEAN?
  • 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”
  • 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”
  • 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
  • MODERNIZR DOES NOTModernizr does not add missing functionality to browsers
  • 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
  • SOME PHILOSOPHY
  • 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
  • DO WEBSITES NEED TO LOOK THE SAME IN ALL BROWSERS?
  • ANSWERhttp://dowebsitesneedtolookexactlythesameineverybrowser.com/ Thanks Dan Cederholm @simplebits
  • 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
  • USE IT1. Download it from modernizr.com2. Include modernizr-1.7.min.js in your page3. Add "no-js" class to the <html> element
  • 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">
  • 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">
  • 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">
  • A FEW EXAMPLES...
  • 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();});
  • 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
  • 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
  • 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
  • YOURS TRULYMichael EnslowPrincipal Developer andCo-founder of MisterMachinehttp://mistermachine.comFollow me: @menslow