2

I would like to use modernizr in drupal to take adcvantage of css media queries, box-shadow and border-radius. I have followed the installation instructions perfectly. I have installed the Drupal Modernizer module and created and properly placed my customized Modernizer build to include support for these three features. Does modernizr just pick up my already existing media queries and css3 styles automatically or do I have to do something else?

2 Answers 2

1

Modernizer detects feature support in browsers and adds css classes to the HTML element based on those features. You use those css classes to target newer features to browsers that support them. While it will add HTML5 support to older browsers via the HTML5Shiv, it will not add CSS3 support.

To add support for CSS3 features in older browsers, you'll need to add a polyfill Modernizer has a method called Modernizr.load() that lets you load the polyfill only when you need it.

1

Modernizr does not add support for any HTML or CSS feature; it simply tests the browser's support for the feature. Of the three features you listed, I would strongly recommend against polyfills for border-radius and box-shadow, and only recommend a polyfill for CSS media queries. Both border-radius and box-shadow have natural fallback values: 0px/none.

If you'd like to know more about using Modernizr.load() within Drupal, I've written documentation for the module. My apologies, but the examples should be updated since they reference boxshadow and that is precisely what I just said to avoid :) However, the example code is still valid.

https://drupal.org/node/1913830

Here are some slides explaining all of the features of the Modernizr Drupal module, including the Test API, the Modernizr.load() API, and some thoughts regarding the future of how we discuss browser compatibility:

http://rupl.github.io/meet-modernizr/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.