SlideShare a Scribd company logo
IT’S A MOD WORLD
A PRACTICAL GUIDE TO
 ROCKING MODERNIZR
WHAT IS IT?
“Modernizr is a small and simple JavaScript
library that helps you take advantage of emerging
web technologies (CSS3, HTML 5).”
~from modernizr.com

Tells you whether or not the current
browser has HTML5 and CSS3 features
natively implemented.
THE WHO
Faruk Ateş
@KuraFire

Paul Irish
@paul_irish

Alex 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 BAD
ol_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 NOT

Modernizr 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 ENHANCEMENT
Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies in
a layered fashion that allows everyone to access the basic content and
functionality of a web page, using any browser or Internet connection,
while also providing those with better bandwidth or more advanced
browser 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?
ANSWER
http://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 IT
1. Download it from modernizr.com

2. Include modernizr-1.7.min.js in your page

3. 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 websockets
rgba hsla multiplebgs backgroundsize borderimage
borderradius boxshadow textshadow opacity
cssanimations csscolumns cssgradients cssreflections
csstransforms no-csstransforms3d csstransitions
fontface video audio localstorage sessionstorage
webworkers applicationcache svg inlinesvg smil
svgclippaths">
WHAHOPPINED?
FireFox:
<html class="js flexbox canvas canvastext no-webgl
no-touch geolocation postmessage no-websqldatabase
no-indexeddb hashchange no-history draganddrop no-
websockets rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow textshadow
opacity no-cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-csstransforms3d no-
csstransitions fontface video audio localstorage
sessionstorage webworkers applicationcache svg no-
inlinesvg no-smil svgclippaths">
WHAHOPPINED?
IE 8:
<html class="js no-flexbox no-canvas no-canvastext
no-webgl no-touch no-geolocation postmessage no-
websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets no-rgba no-hsla no-
multiplebgs no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-textshadow no-opacity
no-cssanimations no-csscolumns no-cssgradients no-
cssreflections no-csstransforms no-csstransforms3d
no-csstransitions fontface no-video no-audio
localstorage sessionstorage no-webworkers no-
applicationcache no-svg no-inlinesvg no-smil no-
svgclippaths">
A FEW EXAMPLES...
PLACEHOLDER
var 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 nice
h1 {
  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 TRULY
Michael Enslow

Principal Developer and
Co-founder of Mister
Machine

http://mistermachine.com

Follow me: @menslow

More Related Content

What's hot

Use Xdebug to profile PHP
Use Xdebug to profile PHPUse Xdebug to profile PHP
Use Xdebug to profile PHP
Seravo
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
Wataru OKAMOTO
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
Christian Heilmann
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
Francesco Fullone
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
Christian Heilmann
 
Search in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize itSearch in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize it
Otto Kekäläinen
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! Site
Daniel Kanchev
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
Christopher Schmitt
 
Bower power
Bower powerBower power
Bower power
Eric Carlisle
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
Beau Lebens
 
Blazor - An Introduction
Blazor - An IntroductionBlazor - An Introduction
Blazor - An Introduction
JamieTaylor112
 
Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)
Otto Kekäläinen
 
Hidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! SiteHidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! Site
Daniel Kanchev
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
Riccardo Coppola
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
Jun Hu
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
WordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress SecurityWordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress Security
Tiia Rantanen
 

What's hot (20)

Use Xdebug to profile PHP
Use Xdebug to profile PHPUse Xdebug to profile PHP
Use Xdebug to profile PHP
 
Mastering WordPress Vol.1
Mastering WordPress Vol.1Mastering WordPress Vol.1
Mastering WordPress Vol.1
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
Search in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize itSearch in WordPress - how it works and howto customize it
Search in WordPress - how it works and howto customize it
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! Site
 
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
Bower power
Bower powerBower power
Bower power
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
 
Blazor - An Introduction
Blazor - An IntroductionBlazor - An Introduction
Blazor - An Introduction
 
Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)
 
Hidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! SiteHidden Secrets For A Hack-Proof Joomla! Site
Hidden Secrets For A Hack-Proof Joomla! Site
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
WordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress SecurityWordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress Security
 

Viewers also liked

Answer to question 3 of A2 evaluation
Answer to question 3 of A2 evaluationAnswer to question 3 of A2 evaluation
Answer to question 3 of A2 evaluation
salesianas2011
 
Branding China: From Maker to Innovator
Branding China: From Maker to InnovatorBranding China: From Maker to Innovator
Branding China: From Maker to Innovator
Kantar
 
590 2
590 2590 2
F14 101 syllabus
F14 101 syllabusF14 101 syllabus
F14 101 syllabus
Gale Pooley
 
Exam 3 review
Exam 3 reviewExam 3 review
Exam 3 review
Gale Pooley
 
El niño recreando el mundo....
El niño recreando el mundo....El niño recreando el mundo....
El niño recreando el mundo....
Ana Azuela
 
Advertising Beyond Borders -Ghana
Advertising Beyond Borders -GhanaAdvertising Beyond Borders -Ghana
Advertising Beyond Borders -Ghana
Kantar
 
Hen 368 lecture 12 hospital market
Hen 368 lecture 12 hospital marketHen 368 lecture 12 hospital market
Hen 368 lecture 12 hospital market
Gale Pooley
 
bada waala connect
bada waala connectbada waala connect
bada waala connect
Arman Sharma
 
Ch 30 the monetary system part 2
Ch 30 the monetary system part 2Ch 30 the monetary system part 2
Ch 30 the monetary system part 2
Gale Pooley
 
Cyprus comenius calendars 2011
Cyprus comenius calendars 2011Cyprus comenius calendars 2011
Cyprus comenius calendars 2011
panikkx
 
Hodges literacy and today’s technnology presentation
Hodges literacy and today’s technnology presentationHodges literacy and today’s technnology presentation
Hodges literacy and today’s technnology presentation
Ginger46
 
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლებიმსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
Jerzyius Kankius
 
590 8
590 8590 8
P2 Spelling List Term 1
P2 Spelling List Term 1P2 Spelling List Term 1
P2 Spelling List Term 1
linajuliana
 
141128 wan紹介資料
 141128 wan紹介資料 141128 wan紹介資料
141128 wan紹介資料
Yuichi Morito
 
Salzburg
SalzburgSalzburg
Salzburg
Umberto Pacheco
 
Millward Brown's Media Presentation - Ghana
Millward Brown's Media Presentation - GhanaMillward Brown's Media Presentation - Ghana
Millward Brown's Media Presentation - Ghana
Kantar
 
Evaluation 2
Evaluation 2Evaluation 2
Evaluation 2
salesianas2011
 
ITP events portfolio by Preeta Panicker
ITP events portfolio by Preeta PanickerITP events portfolio by Preeta Panicker
ITP events portfolio by Preeta Panicker
Preeta Panicker
 

Viewers also liked (20)

Answer to question 3 of A2 evaluation
Answer to question 3 of A2 evaluationAnswer to question 3 of A2 evaluation
Answer to question 3 of A2 evaluation
 
Branding China: From Maker to Innovator
Branding China: From Maker to InnovatorBranding China: From Maker to Innovator
Branding China: From Maker to Innovator
 
590 2
590 2590 2
590 2
 
F14 101 syllabus
F14 101 syllabusF14 101 syllabus
F14 101 syllabus
 
Exam 3 review
Exam 3 reviewExam 3 review
Exam 3 review
 
El niño recreando el mundo....
El niño recreando el mundo....El niño recreando el mundo....
El niño recreando el mundo....
 
Advertising Beyond Borders -Ghana
Advertising Beyond Borders -GhanaAdvertising Beyond Borders -Ghana
Advertising Beyond Borders -Ghana
 
Hen 368 lecture 12 hospital market
Hen 368 lecture 12 hospital marketHen 368 lecture 12 hospital market
Hen 368 lecture 12 hospital market
 
bada waala connect
bada waala connectbada waala connect
bada waala connect
 
Ch 30 the monetary system part 2
Ch 30 the monetary system part 2Ch 30 the monetary system part 2
Ch 30 the monetary system part 2
 
Cyprus comenius calendars 2011
Cyprus comenius calendars 2011Cyprus comenius calendars 2011
Cyprus comenius calendars 2011
 
Hodges literacy and today’s technnology presentation
Hodges literacy and today’s technnology presentationHodges literacy and today’s technnology presentation
Hodges literacy and today’s technnology presentation
 
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლებიმსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
მსოფლიო ქალაქები გეოურბანისტიკის საფუძვლები
 
590 8
590 8590 8
590 8
 
P2 Spelling List Term 1
P2 Spelling List Term 1P2 Spelling List Term 1
P2 Spelling List Term 1
 
141128 wan紹介資料
 141128 wan紹介資料 141128 wan紹介資料
141128 wan紹介資料
 
Salzburg
SalzburgSalzburg
Salzburg
 
Millward Brown's Media Presentation - Ghana
Millward Brown's Media Presentation - GhanaMillward Brown's Media Presentation - Ghana
Millward Brown's Media Presentation - Ghana
 
Evaluation 2
Evaluation 2Evaluation 2
Evaluation 2
 
ITP events portfolio by Preeta Panicker
ITP events portfolio by Preeta PanickerITP events portfolio by Preeta Panicker
ITP events portfolio by Preeta Panicker
 

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

GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
Sergejus Barinovas
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
James Panton
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
Christopher Schmitt
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Responsive content
Responsive contentResponsive content
Responsive content
honzie
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
applicake
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
markuskobler
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
Christopher Schmitt
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Brian Moon
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
Christopher Schmitt
 

Similar to It's a Mod World - A Practical Guide to Rocking Modernizr (20)

GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Responsive design
Responsive designResponsive design
Responsive design
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 

Recently uploaded

MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
Debmalya Biswas
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
Zilliz
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 

Recently uploaded (20)

MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)Gen AI: Privacy Risks of Large Language Models (LLMs)
Gen AI: Privacy Risks of Large Language Models (LLMs)
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Retrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with RagasRetrieval Augmented Generation Evaluation with Ragas
Retrieval Augmented Generation Evaluation with Ragas
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 

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

  • 1. IT’S A MOD WORLD A PRACTICAL GUIDE TO ROCKING MODERNIZR
  • 2. WHAT IS IT? “Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5).” ~from modernizr.com Tells you whether or not the current browser has HTML5 and CSS3 features natively implemented.
  • 3. THE WHO Faruk Ateş @KuraFire Paul Irish @paul_irish Alex Sexton @slexaxton
  • 4. WHERE? • http://modernizr.com • Follow: @modernizr • Contribute: https://github.com/Modernizr/Modernizr
  • 5. HOW DOES MODERNIZR WORK? • Uses feature detection to test browsers for support of HTML5 and CSS3 features • Brings an end to browser sniffing
  • 7. BROWSER SNIFF BAD ol_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. 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. 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. MODERNIZR DOES NOT Modernizr does not add missing functionality to browsers
  • 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
  • 13. PROGRESSIVE ENHANCEMENT Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. ~from wikipedia • Use semantic markup • Take advantage of great stuff in the experience layer
  • 14. DO WEBSITES NEED TO LOOK THE SAME IN ALL BROWSERS?
  • 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. USE IT 1. Download it from modernizr.com 2. Include modernizr-1.7.min.js in your page 3. Add "no-js" class to the <html> element
  • 18. WHAHOPPINED? Google Chrome: <html class="js flexbox canvas canvastext webgl no- touch geolocation postmessage websqldatabase no- indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
  • 19. WHAHOPPINED? FireFox: <html class="js flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no- websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity no-cssanimations csscolumns cssgradients no- cssreflections csstransforms no-csstransforms3d no- csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no- inlinesvg no-smil svgclippaths">
  • 20. WHAHOPPINED? IE 8: <html class="js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no- websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no- multiplebgs no-backgroundsize no-borderimage no- borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no- cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audio localstorage sessionstorage no-webworkers no- applicationcache no-svg no-inlinesvg no-smil no- svgclippaths">
  • 22. PLACEHOLDER var 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. 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. FONT FACE // original rule that looks nice h1 { 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. 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. YOURS TRULY Michael Enslow Principal Developer and Co-founder of Mister Machine http://mistermachine.com Follow me: @menslow

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n