Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Feature detection using Modernizr and how to exploit it

Bobby
December 12, 2013

Feature detection using Modernizr and how to exploit it

Introduction to Modernizr. Mostly I gave demo on my talk so some of this slide won't be really useful.

Bobby

December 12, 2013
Tweet

More Decks by Bobby

Other Decks in Technology

Transcript

  1. 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
  2. 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?
  3. 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 ! ! ! }
  4. 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
  5. 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
  6. 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
  7. 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 }
  8. 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 ; }
  9. 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 ' ) ; }
  10. 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
  11. 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 * / }
  12. (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!
  13. 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 ( ) ; } } ) ;
  14. 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
  15. 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
  16. 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 ' } ) ; }