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

Recommended for you

Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday

The document discusses various ways that web performance can be improved, including reducing the number of server requests, minimizing file sizes through compression and minification, leveraging caching, optimizing browser rendering through techniques like deferred parsing of JavaScript, and using tools to automate optimizations. It emphasizes that most of the end user response time is spent in the frontend and recommends starting performance improvements there.

wpoveronajsday2011
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

A lecture given at MIT in Boston about the benefits and technicalities of open web standards for Video and Audio. Lots of examples how to manipulate live video using CSS3 and Canvas.

chrisheilmannaudiomit
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

WordPress search customization is a topic we at Seravo get asked about on a frequent basis. There are many different ways to customize the search, and customers understandably want to learn the best practices. The search can be customized quite easily with small changes on PHP code level, and by utilizing MariaDB database’s built-in search functionality. You can also choose a more robust way to do this, and build a new ElasticSearch server just for your case. These slides are from the webinar on January 14th, 2021: https://seravo.com/blog/webinar-search-function-and-how-to-customize-it/

wordpresswordpress peformancewordpress search
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”

Recommended for you

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

This document provides tips on how to speed up a Joomla site. It recommends both application level optimizations like enabling compression, caching, and minimizing images/CSS/JS, as well as server level optimizations such as using a CDN, opcode caching, and reverse proxy servers. Proper optimization can significantly improve page load times and site speeds. The document demonstrates the impact of various optimizations through metrics like load time, page size, and speed scores. Overall optimization is positioned as an ongoing process to keep sites running efficiently.

joomla!apacheoptimization
Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011Taiwan Web Standards Talk 2011
Taiwan Web Standards Talk 2011

This document provides an overview of HTML5 and CSS3 features including new semantic HTML5 elements, multimedia capabilities like video and canvas, geolocation, and CSS3 properties for styling like borders, backgrounds, shadows, fonts, transitions and transforms. It includes code examples and screenshots to illustrate these new capabilities.

web standardshtml5css3
[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

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.

html5cssresponsive web design
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

Recommended for you

Bower power
Bower powerBower power
Bower power

This presentation will introduce Bower, a powerful package manager for libraries, frameworks, and all things front-end. We will cover basic Bower usage, integration into Grunt & Gulp build processes, tooling, and registering custom packages to be used by anyone.

javascriptbowerpackage management
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}}

The document discusses a presentation on using Flexbox, SASS, and Mustache templating for building user interfaces. The presentation covers general best practices, using SASS for variables, nesting, mixins and extends, Flexbox for responsive design, and Mustache templating. The presenter is Eric Carlisle, a UI/UX architect who will demonstrate coding techniques with these tools.

user interfaceresponsive web designuser interface development
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)

This document discusses using WordPress as a backend for building mobile and web applications. It introduces WordPress' REST API which allows accessing WordPress content via HTTP requests. It then outlines how to build a simple mobile-first app called WROPE using the WordPress REST API and the JavaScript library Backbone.js, including setting up models, collections, views and routing to retrieve and display WordPress posts.

spaweb applicationjavascript
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

Recommended for you

Blazor - An Introduction
Blazor - An IntroductionBlazor - An Introduction
Blazor - An Introduction

Blazor is a new web framework that allows web applications to be written in C# instead of JavaScript. It uses WebAssembly to run .NET code directly in the browser. Developers write Blazor apps using Razor components with HTML and C# code. At runtime, the Blazor runtime compiles the Razor components to WebAssembly, which generates the app's rendering tree and updates the DOM efficiently as the app runs. Blazor provides a way to build interactive client-side web UI using .NET instead of JavaScript.

blazor.net coreasp.net core 2
Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)Improving WordPress performance (xdebug and profiling)
Improving WordPress performance (xdebug and profiling)

Talk given at WordCamp Athens 2017, by Otto Kekäläinen. For more info, see blog post at https://seravo.com/measuring-wordpress-speed/

wordpresssoftware speedsoftware performance
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

This presentation provides information about the most common Joomla! attacks and how to protect from them. The basics of securing Joomla! sites are covered in details.

joomla!apachemysql
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">

Recommended for you

Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow

This document discusses using Bower and Grunt together to manage front-end dependencies and files in a workflow. Bower is used to declare and install dependencies, while Grunt plugins like grunt-bowercopy and grunt-contrib-clean are used to copy dependencies to consistent locations and clean files. Setting up this workflow with Bower, grunt-bowercopy, grunt-contrib-clean, and Git can help organize a project's dependencies, facilitate tracking without committing all files, and reduce build times.

bowergruntfront end
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

1. Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax. It defines detailed processing models to foster interoperable implementations and improves markup for documents and APIs for emerging web applications. 2. Todd Anglin discusses HTML5, CSS3, and techniques for using them today including progressive enhancement, feature detection, and libraries that help support older browsers. 3. He recommends trying a new HTML5/CSS3 technique like data attributes, border radius, box shadow, or animations using CSS transitions.

html5css3
Theming Wordpress for Your Showcases
Theming Wordpress for Your ShowcasesTheming Wordpress for Your Showcases
Theming Wordpress for Your Showcases

This document discusses theming WordPress for a showcase portfolio. It begins with an introduction to content management systems and WordPress. It then covers installing WordPress locally, important tools like text editors, and interacting with the database. The document outlines HTML/CSS for content and styling. It discusses building a simple theme with templates, widgets, and customization. Hands-on exercises guide customizing an existing theme. The document concludes with tips for moving a site live and maintaining WordPress.

wordpressshowcasecms
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

Recommended for you

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

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

html5
WordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress SecurityWordCamp Finland 2015 - WordPress Security
WordCamp Finland 2015 - WordPress Security

This document discusses WordPress security best practices. It outlines common threats like injection attacks and cross-site scripting. It recommends server-side measures like proper file permissions, limiting admin access, and monitoring servers. Client-side recommendations include using SSL, blocking PHP execution in directories, and obscuring details in wp-config.php. Specific plugins are also mentioned for enhancing security. Regular backups, updates, and monitoring are advised to help prevent and recover from hacks. The key message is that no system is completely secure, so diligence is important.

wordpressinformation securitywordcamp
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

The document discusses feedback received on a documentary. The most unexpected feedback was about noisy cars in an interview that could have been reduced. This feedback and examining other shots made the filmmaker realize some themes were represented too strongly. Additional feedback was that the documentary conveyed that youth today are changing their views on faith and religion, and the church could have a place among youth if balanced correctly. Feedback on lighting and lens flares in some shots was not surprising. Overall the feedback provided valuable lessons about obtaining audience perspectives early in the filmmaking process.

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

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 

Recently uploaded (20)

What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 

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