Learning Modernizr - A Definitive Modernizr Course

Discover how modernizr uses feature detection to tailor web experiences across browsers, using CSS and JavaScript to test support for features like box-shadow and provide graceful fallbacks.

Explore how Modernizr performs feature detection by running tests against browser capabilities, using the development version to reveal how geolocation and drag-and-drop tests work.

Download the latest development version of modernizer and add it to your page with a script tag using a relative link, then verify loading in the web inspector.

Create a custom Modernizr build by selecting tests like opacity, geolocation, and local storage, then generate, download, and include it in your page.

Explore other Modernizr features, including the html5shiv for Internet Explorer 8 compatibility and the print and standard shiv options, enabling section, article, header, and footer tags for accessibility and SEO.

Explore progressive enhancement by using rgba with alpha for modern browsers while providing a fallback color for older browsers, demonstrating how two declarations progressively enhance css styling.

Explore modernizer classes to implement progressive enhancement for box shadow, applying different CSS for browsers that don't support it and preserving visuals across platforms.

Learn to use Modernizr classes to target box-shadow support, applying box-shadow rules only on supporting browsers and fallback border properties on older ones.

Learn how Modernizr detects when JavaScript is disabled using the no-js and js classes, showing how the no-js message appears or disappears.

Explore the modernizr object and how it adds classes to the DOM, exposes a browser feature map, and lets you conditionally run code based on support.

Learn how to conditionally run javascript using feature tests, gracefully handle lack of local storage with Modernizr, and manage an address book that stores and lists people in local storage.

Continue exploring conditional javascript with Modernizr, guarding your code with a local storage check. Display clear alerts when features are unavailable and keep older browsers from breaking the app.

Learn to add custom tests to Modernizr using the addTest API, including a placeholder test from the forms folder. Implement and validate tests using create element and browser checks.

Explore conditional loading of polyfills with Modernizr, configure builds with Modernizr load, and apply placeholder polyfills via feature detection for browsers lacking the feature.

Learn to conditionally load polyfills with modernizr.load by testing placeholder support and directing assets to the yep or nope branches.

Explore lesser-known modernizer features, the modernizer object, and how modernizer prefixed detects vendor prefixes for CSS transitions, media queries, and documentation.

Explore lesser used Modernizr features, including prefix detection for older browsers' features, testing requestAnimationFrame with prefixed names, and using media query strings via Modernizr to conditionally run scripts.

Explore modernizer features, including test styles, test prop, test all props, and has event; learn how css is set and verified with vendor prefixes.

Finish the course by building a project with modernizr, using a small customized download, and explore the documentation, code changes, and caniuse compatibility tables.