Why should you do feature testing?
As CSS Shapes support is knocking on the door of release in stable browser versions, I want to encourage you to get a head start using the feature. Until it is widely supported, you might want to have a fallback in place or display a notice to users with browsers that don’t yet support the feature. Modernizr is a good tool to enable this feature detection.
How we can test for the shapes support?
Let’s take a look at the following examples:
The most important part of the first example is the if-condition that checks for “Modernizr.shapes” and decides to show an informational message if shapes support is not detected.
You can also also specify custom CSS selectors for cases when Shapes support is detected. Modernizr adds the ‘shapes’ class to the html root tag if shapes are supported, and the ‘no-shapes’ class if not. If you want to know more about how Modernizr works, please check out the documentation.
The key point of the second example is the .shapes prefix before the h1 selector, which applies the custom style to every h1 tags only if the support is detected.
How do you get Modernizr with CSS Shapes support?
- Open modernizr.org and go to the Download section.
- Check the box for CSS Shapes under Non-core detects.
- Check the box for Modernizr.testAllProps() under Extensibility.
- Generate and Download the code.
- Include the generated Modernizer.js in your HTML file.
Modernizr is a powerful tool for testing HTML and CSS feature support. I encourage you to use it if you’re experimenting with the latest and greatest web features.