HTML Questions & Answers – Adding HTML Features Safely with Modernizr

This set of HTML Question Bank focuses on “Adding HTML features safely with Modernizr”.

1. What is Modernizr?
a) CSS style sheet
b) JavaScript Library
c) The source code of a web page
d) PHP file
View Answer

Answer: b
Explanation: Small JavaScript Library is Modernizr. It detects the availability of implementations for new web technologies. Many browsers do not support the new features that were introduced by HTML5. Modernizr provides a way to detect new features.

2. What is the JavaScript check for the HTML5 video feature?
a) Modernizr.video
b) Modernizr.video[format].
c) Modernizr.rgba
d) Modernizr.rgba
View Answer

Answer: a
Explanation: 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

3. Modernizr.csstransformss detects _________
a) CSS 2D transforms
b) CSS 3D transforms
c) Input Types
d) Input Attributes
View Answer

Answer: a
Explanation: 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].
advertisement
advertisement

4. Which latest browser is able to detect CSS Grids?
a) Modernizr 3.5.0
b) Modernizr 3.4.0
c) Modernizr 3.2.0
d) Modernizr 3.1.0
View Answer

Answer: a
Explanation: 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.

5. classPrefix is used when _____________
a) it is mandatory prefix before all the classes
b) class name clashes
c) when there is no any class in the code
d) not mandatory it depends on user
View Answer

Answer: b
Explanation: 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 <html class=”hide”> we will get <html class=”tee-hidden”>.

6. Which of the following can be helpful in creating your own feature detect?
a) Modernizr.addTest
b) Modenizer.on
c) Modernizr._domPrefixes
d) Modernizr.atRule
View Answer

Answer: a
Explanation: 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).

7. Which of the following is used to determine browser support?
a) Modernizr.addTest
b) Modernizr.hasEvent
c) Modernizr.atRule
d) Modernizr.prefixed
View Answer

Answer: b
Explanation: 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.
advertisement

8. For checking programmatically we use _________
a) Modernizr.mq
b) Modernizr.prefixed
c) Modernizr._prefixes
d) Modernizr.testAllProps
View Answer

Answer: a
Explanation: 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.

advertisement

9. The features that can’t be detected by checking idle are checked by ____________
a) Modernizr.prefixedCSS
b) Modernizr.testAllProps
c) Modernizr.testStyles
d) Modernizr.testProp
View Answer

Answer: c
Explanation: 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.

10. For testing prefixed CSS properties we use _____________
a) Modernizr.prefixed
b) Modernizr.prefixedCSS
c) Modernizr._prefixes
d) Modernizr.prefixedCSS value
View Answer

Answer: d
Explanation: 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.

11. Which of the following is internal list of prefixes?
a) Modernizr._prefixes
b) Modernizr.prefixedCSS value
c) Modernizr.prefixedCSS
d) Modernizr.prefixed
View Answer

Answer: a
Explanation: 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.

12. Which of the following detects support for basic Worker API?
a) web workers
b) shared workers
c) data workers
d) blob workers
View Answer

Answer: a
Explanation: The support of basic web worker is detected by web workers. Web workers mean running a script in the background for web content. Shared workers detect support of shared workers, data workers detect support for creating Web Workers from Data URI’s. Blob workers detect support for creating web workers from Blob URI.

13. Which of the following detects support for the method of the form?
a) input formtarget
b) input formmethod
c) input formenctype
d) input formaction
View Answer

Answer: b
Explanation: input formmethod detects support for formmethod attribute, input formtarget detects for formtarget attribute on forms, input formenctyp detects for the support of formenctype attribute, it overrides form enctype attribute, input formactin detects for the support of formaction attribute.

14. Which of the following check support for non-alpha, lossy webp?
a) Webp
b) Webp Lossless
c) Webp Animation
d) Webp Alpha
View Answer

Answer: b
Explanation: Webp Lossless detects for lossless webp, non-alpha webp support. Webp tests for all forms of webp support like alpha, lossy, animated, lossless etc. Webp Animation detects for the support of animation in webp, Webp Alpha detects the support of transparent webp.

15. Which of the following detects for the support of size attribute of an image?
a) JPEG 2000
b) JPEG XR
c) Image crossOrigin
d) Sizes
View Answer

Answer: d
Explanation: Sizes test for the sizes attribute for images. Image crossOrigin is used to check the support of crossOrigin attribute on images, it allows cross domain images on a canvas, JPEG 2000 and JPEG XR are respectively for the check of JPEG 2000 and JPEG XR formats on the images.

Sanfoundry Global Education & Learning Series – HTML.

To practice HTML Question Bank, here is complete set of 1000+ Multiple Choice Questions and Answers.

If you find a mistake in question / option / answer, kindly take a screenshot and email to [email protected]

advertisement
advertisement
Subscribe to our Newsletters (Subject-wise). Participate in the Sanfoundry Certification contest to get free Certificate of Merit. Join our social networks below and stay updated with latest contests, videos, internships and jobs!

Youtube | Telegram | LinkedIn | Instagram | Facebook | Twitter | Pinterest
Manish Bhojasia - Founder & CTO at Sanfoundry
Manish Bhojasia, a technology veteran with 20+ years @ Cisco & Wipro, is Founder and CTO at Sanfoundry. He lives in Bangalore, and focuses on development of Linux Kernel, SAN Technologies, Advanced C, Data Structures & Alogrithms. Stay connected with him at LinkedIn.

Subscribe to his free Masterclasses at Youtube & discussions at Telegram SanfoundryClasses.