used for parsing the User-Agent string and inferring physical and applicative properties about the device and its browser. — Karl Dubost and Robert Nyman
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?
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
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
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
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 }
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 ; }
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 ' ) ; }
(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
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 * / }
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!
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 ( ) ; } } ) ;
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
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
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 ' } ) ; }