astro-modernizr
v0.1.0
Published
Add Modernizr feature detection to your Astro site.
Downloads
5
Maintainers
yonicReadme
Astro + Modernizr
Build sites for the future and the past.
This is an Astro integration that adds Modernizr to your Astro site, a fast tool that detects which HTML, CSS and JS features do browsers support, allowing you to progressively enhance and future-proof your components and site with fine control and guaranteed accuracy.
Installation
Install the integration automatically using the Astro CLI:
pnpm astro add astro-modernizrnpx astro add astro-modernizryarn astro add astro-modernizrOr install it manually:
- Install the required dependencies
pnpm add astro-modernizrnpm install astro-modernizryarn add astro-modernizr- Add the integration to your astro config
+import modernizr from "astro-modernizr";
export default defineConfig({
integrations: [
+ modernizr({
+ options: [],
+ featureDetects: [
+ /* your feature detection tests */
+ ],
+ }),
],
});Configuration
The integration follows the same configuration as building Modernizr from the JS module to provide the smallest bundle as needed.
options
An array of the name of the different Modernizr API functions to include. By default, it doesn't include anything.
For a more sensible default, ["setClasses"] is good for adding CSS classes in accord to the support or not of certain features, instead of adding classes only if it does support them.
featureDetects
An array of all the features that you wish to test for. The complete supported list can be found here.
By default, it doesn't test for anything.
classPrefix
A string that you wish to use to prefix your classes. For example, "supported-".
By default, there is no prefix.
enableCSSClasses
A boolean to enable adding CSS classes to the root of the document (the <html> node). If false, regardless of adding setClasses to the options array, Modernizr will not add any classes (except for .no-js).
Enabled by default.
enableJSClass
A boolean to enable updating the .no-js class that Modernizr adds automatically to the root of the document to .js if JavaScript is enabled and working. The class won't be able to update if the browser halts scripts on error.
Enabled by default.
minify
A boolean that determines whether to minify the generated client JavaScript that'll be placed on the Astro page.
Enabled by default.
This differs from the default in the npm module, as the generated code will not be optimized by Vite. This is done by design for backwards compatibility with browsers that do not support ES6 modules.
scriptGlobalName
The name of the global object to be used by Modernizr.
By default, it is set to "window", and there shouldn't be any need to change it.
usePrefixes
A boolean that determines whether to check for vendor prefixes when testing a feature.
Enabled by default.
Usage
You can use Modernizr just like you would normally. Check the documentation for more details.
The integration exposes the Modernizr object globally on client scripts and offers typings to be used in optimized scripts. However, for backwards compatibility purposes it's heavily recommended to use Modernizr only in inline scripts.
<script is:inline>
if (Modernizr.awesomeNewFeature) {
// Use the new awesome feature!
} else {
// Get the old lame experience.
}
</script>Contributing
This package is structured as a monorepo:
playgroundcontains code for testing the packagepackagecontains the actual package
Install dependencies using pnpm:
pnpm i --frozen-lockfileStart the playground and package watcher:
pnpm devYou can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.
Licensing
MIT Licensed. Made with ❤️ by YonicDev.