Odo Device

Device-specific settings for JS and CSS

Support

IE9+

Dependencies

None.

Settings

OdoDevice.HAS_TRANSITIONS = null;
OdoDevice.HAS_CSS_ANIMATIONS = null;
OdoDevice.HAS_TRANSFORMS = null;
OdoDevice.CAN_TRANSITION_TRANSFORMS = null;
OdoDevice.HAS_TOUCH_EVENTS = null;
OdoDevice.HAS_POINTER_EVENTS = null;
OdoDevice.HAS_LOCAL_STORAGE = null;

/**
 * Prefixed style properties.
 * @enum {string|boolean}
 */
OdoDevice.Dom = {
  ANIMATION: ,
  ANIMATION_DURATION: ,
  TRANSFORM: ,
  TRANSITION: ,
  TRANSITION_PROPERTY: ,
  TRANSITION_DURATION: ,
  TRANSITION_TIMING_FUNCTION: ,
  TRANSITION_DELAY: ,
};

/**
 * Prefixed css properties.
 * @enum {string}
 */
OdoDevice.Css = {
  ANIMATION: '',
  ANIMATION_DURATION: '',
  TRANSFORM: '',
  TRANSITION: '',
  TRANSITION_PROPERTY: '',
  TRANSITION_DURATION: '',
  TRANSITION_TIMING_FUNCTION: '',
  TRANSITION_DELAY: '',
};

Methods

prefixed(propName, value)

Like Modernizr.prefixed, returns the prefixed style property if it exists. You can provide a second argument to test if the value sticks after applying it. In some cases a browser will not support all the values for a property. iOS 9.3, for example, supports touch-action: manipulation, but not touch-action: pan-y.

OdoDevice.prefixed('tapHighlightColor') // 'WebkitTapHighlightColor'
OdoDevice.prefixed('touchAction', 'pan-y') // `"touchAction"` in Chrome `false` in iOS 9.3

hyphenate(str)

Hyphenates a javascript style string to a css one.

OdoDevice.hyphenate('WebkitTapHighlightColor') // '-webkit-tap-highlight-color'