Feature detection using Modernizr and how to exploit it 12 December 2013 by: Bobby Lie 

Browser detection 

Short explanation User agent detection (or sniffing) is the mechanism used for parsing the User-Agent string and inferring physical and applicative properties about the device and its browser. — Karl Dubost and Robert Nyman 

Get UA string v a r U A = n a v i g a t o r . u s e r A g e n t ; c o n s o l e . l o g ( U A ) ; Chrome's UA string: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36 v a r i s C h r o m e = " / C h r o m e / i " ; i f ( i s C h r o m e . t e s t ( U A ) ) { / / t r u e / / d o s o m e t h i n g f o r C h r o m e o n l y } e l s e { / / f a l s e / / d o w h a t e v e r y o u w a n t } Piece of cake huh? 

Detect the mighty Internet Explorer v a r U A = n a v i g a t o r . u s e r A g e n t ; v a r i s I E = " / ( M S I E | I E ) / i " ; i f ( i s I E . t e s t ( U A ) ) { / / G O T C H A ! ! ! } 

BUMMER!!! 

IE 11 UA String Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko 

The problem Each release of Internet Explorer updates the user-agent string Sites that rely on the user-agent string should be updated to used modern techniques, such as feature detection, adaptive layout, and other modern practices — Internet Explorer Dev Center All version of IE UA Strings 

It's time for features detection using Modernizr 

What is it exactly? Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies It adds classes to the html element that explain precisely what features are and are not natively supported — Modernizr documentation 

Install Modernizr 

Without Modernizr With Modernizr Features detection list 

Example: CSS Reflection Browser with CSS reflection support . c s s r e f l e c t i o n s i m g { ‐ w e b k i t ‐ b o x ‐ r e f l e c t : b e l o w 2 0 p x ; } Browser without CSS reflection support . n o ‐ c s s r e f l e c t i o n s i m g { b o x ‐ s h a d o w : 0 2 5 p x 5 p x # 4 4 4 ; } Example 

Example: border-radius b u t t o n { b a c k g r o u n d : # 3 3 3 ; c o l o r : # e e e ; } . b o r d e r r a d i u s b u t t o n { b o r d e r ‐ r a d i u s : 1 0 p x ; } . n o ‐ b o r d e r r a d i u s b u t t o n { b a c k g r o u n d : t r a n s p a r e n t u r l ( ' p a t h / t o / f a l l b a c k ‐ i m a g e . j } 

Example: border-radius (old school) No matter what, all browsers will use image for button although some browsers support b o r d e r ‐ r a d i u s property. b u t t o n { b a c k g r o u n d : t r a n s p a r e n t u r l ( ' p a t h / t o / f a l l b a c k ‐ i m a g e . j c o l o r : # e e e ; } 

Example: WebP image format d i v { / * d e f a u l t s t y l e s * / } . w e b p d i v { b a c k g r o u n d ‐ i m a g e : u r l ( ' i m g . w e b p ' ) ; } . n o ‐ w e b p d i v { b a c k g r o u n d ‐ i m a g e : u r l ( ' i m g . j p g ' ) ; } 

Ok that's cool, what's next? It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties It provides a script loader so you can pull in polyfills to backfill functionality in old browsers — Modernizr documentation 

Check supported features via JS i f ( M o d e r n i z r . i n p u t t y p e s . d a t e ) { c o n s o l e . l o g ( ' s u p p o r t d a t e i n p u t t y p e ' ) ; / * D o t h i n g s u s i n g d a t e i n p u t t y p e * / } e l s e { c o n s o l e . l o g ( ' b r o w s e r d o e s n o t s u p p o r t d a t e i n p u t t y p e / * D o o t h e r t h i n g s * / } 

(not so) Good old time . . . < s c r i p t s r c = " j q u e r y . j s " > < / s c r i p t > < ! ‐ ‐ A l l b r o w s e r s w i l l l o a d t h i s ‐ ‐ > < s c r i p t s r c = " d a t e p i c k e r . j s " > < / s c r i p t > < s c r i p t s r c = " m a i n . j s " > < / s c r i p t > < / b o d y > Other browsers download resources that they actually don't need, and it is bad! 

Load polyfills or plugins on demand . . . < s c r i p t s r c = " j q u e r y . j s " > < / s c r i p t > < s c r i p t s r c = " m a i n . j s " > < / s c r i p t > < / b o d y > M o d e r n i z r . l o a d ( { t e s t : M o d e r n i z r . i n p u t t y p e s . d a t e , / / t e s t f o r i n p u t t y p e d a t e n o p e : ' j s / d a t e p i c k e r . j s ' , / / i f n o t s u p p o r t e d l o a d t h i s f i l e c o m p l e t e : f u n c t i o n ( ) { / / s c r i p t l o a d e d , w h a t ' s n e x t ? $ ( ' s e l e c t o r ' ) . d a t e p i c k e r ( ) ; } } ) ; 

Example: Datepicker 1/2 i f ( M o d e r n i z r . i n p u t t y p e s . d a t e ) { d o c u m e n t . w r i t e ( ' t h i s b r o w s e r s u p p o r t i n p u t t y p e d a t e ' ) ; } e l s e { d o c u m e n t . w r i t e ( ' t h i s b r o w s e r d o e s n o t s u p p o r t i n p u t t y p e d a t e ' ) ; } this browser support input type date mm/dd/yyyy 

Example: Datepicker 2/2 i f ( ! M o d e r n i z r . i n p u t t y p e . d a t e ) { M o d e r n i z r . l o a d ( { l o a d : [ ' j s / d a t e p i c k e r . m i n . j s ' , ' c s s / d a t e p i c k e r . m i n . c s s ' ] , c o m p l e t e : f u n c t i o n ( ) { $ ( ' # d a t e p i c k e r ' ) . a t t r ( ' t y p e ' , ' t e x t ' ) ; d a t e P i c k e r C o n t r o l l e r . c r e a t e D a t e P i c k e r ( { f o r m E l e m e n t s : { ' d a t e p i c k e r ' : ' % d / % m / % y ' } } ) ; } } ) ; } mm/dd/yyyy 

Awesome, how about detect certain viewport width? 

Modernizr got it covered. Huray \0/ M o d e r n i z r . m q ( ' [ m e d i a q u e r i e s ] ' ) ; Check media queries support i f ( M o d e r n i z r . m q ( ' o n l y a l l ' ) ) { / / M e d i a q u e r i e s i s s u p p o r t e d , d o y o u r s t u f f } e l s e { / / L o a d m e d i a q u e r i e s p o l y f i l l M o d e r n i z r . l o a d ( { l o a d : ' p o l y f i l l . j s ' } ) ; } 

Case study: Eduzone 1/2 

Case study: Eduzone 2/2 

Little bonus from Modernizr, HTML5Shiv built in 

Thank you, any questions?