Solution: HTML5 feature video is detected by Modernizr.video. Modernizr.video[format] detects HTML5 video format feature. Modernizr.rgba detects rgba() feature of HTML5, hsla() is detected by Modernizr.hsla

Solution: Modernizr.csstransforms detects CSS 2D transforms introduced by HTML5. CSS 3D transform is detected by Modernizr.csstransforms3d. Input types are detected by Modernizr.inputtypes[type], Input Attributes is detected by Modernizr.input[attribute].

Solution: Modernizr 3.1.0, Modernizr 3.1.1, Modernizr 3.4.0 and Modernizr 3.5.0 are the updated versions of modernizr which fixes some bugs and some updated the feature. Modernizr 3.5.0 can detect CSS Grids. In this latest Modernizr, we use two syntaxes, one is Modernizr.cssgrid, and an old syntax Modernizer.cssgridlegacy. In addition, there is a polyfill available named PEP.

Solution: If modernizr’s class names are clashing with already existing class then we use classPrefix inside the configuration. It works same as hidden detects that adds .hidden class. Syntax is { “classPrefix”: “tee”, “feature-detects”: [“dom/hide”]}, this means instead of  we will get .

Solution: If you want to create your own feature detects you can simply use Modernizr.addTest, a string is passed generally in lowercase without any punctuation like Modernizr.addTest(feature, test). It returns the Boolean value. Modernizr._domPrefixes works same as _prefixes. Modernizr.atRule is one of modernizr API(Application Programming Interface) having syntax like – Modernizr.atRule(prop).

Solution: If you want to create your own feature detects you can simply use Modernizr.addTest. Modernizr.hasEvent helps in determining browser support. It does detection of div element by default. Syntax is hasEvent(‘video’). But if we want to give an object to detect something other than div, we can give second argument as hasEvent(‘blur’, window). It also returns a Boolean value. Modernizr.atRule is one of modernizr API(Application Programming Interface) having syntax like – Modernizr.atRule(prop). Modernizr.prefixed Modernizr API takes string CSS value in Document Object Model.

Solution: For checking programmatically we use Modernizr.mq, it checks if the window of current browser matches a media query or not. Syntax is
var qu= Modernizr.mq(‘(min-width: 300px)’); 
if(qu) {// browser window is larger than 300 px}
We should use only valid media query. Modernizr.prefixed Modernizr API takes string CSS value in Document Object Model. Modernizr._prefixes is internal list of prefixes. To check whether a given CSS property is supported by browser, Modernizr.testAllProps API.

Solution: Modernizr.testProp is just like Modernizr.testAllProps but only difference is it doesn’t check for vendor. The features that can’t be check by IDL is checked by Modernizr.testStyles, it takes CSS rule and embed it onto current page with DOM elements. Syntax is
Modernizr.testStyles (rule,callback,[nodes],[testnames]).
We can add additional div elements also on the page as per requirement. Modernizr.prefixedCSS is same like Modernizr.prefixed except it returns result in hyphenated form.

Solution: For checkin prefixed CSS properties we use Modernizr.prefixedCSS value. Syntax is
Modernizr.prefixedCSSVAlue (prop,value).
Modernizr.prefixed takes string css value in camelCase. Modernizr.prefixed takes string css value in camelCase. Modernizr.prefixedCSS returns hyphenated value. Modernizr._prefixes is internal list of prefixes.

Solution: Modernizr._prefixes is internal list of prefixes. It is set against things like prefixedCSS and prefixed. It is an array of kebab-case vendor.
E.g. var ru= Modernizr._prefixes.join(‘transform: rotate(10deg);’); ru == ‘transform: rotate(10deg)’; webkit- transform: rotate(10deg); moz-transform: rotate(10deg); o-transform: rotate(10deg); ms-transform: rotate(10deg);’
Modernizr.prefixedCSSVAlue (prop,value). Modernizr.prefixed takes string css value in camelCase. Modernizr.prefixedCSS returns hyphenated value.