Nacho Portion Monitor


    1.0.6 • Public • Published


    Detects the characteristics of the user’s display using 'environment-blending' CSS3 level 5 media query.

    Travis NPM Bundlephobia Bundlephobia Coveralls David DM David DM NodeJS License Snyk

    Magica11y cover


    Quoting from the CSS3 level 5 media queries specfication…

    The environment-blending media feature is used to query the characteristics of the user’s display so the author can adjust the style of the document. An author might choose to adjust the visuals and/or layout of the page depending on the display technology to increase the appeal or improve legibility.

    📺 environmentBlending() is part of 🔮 Magica11y, which provides a suite of functions to detect “user-preference” and “environment” media features.

    Magica11y functions are awesome because…

    • They have zero dependencies
    • They’re lightweight; e.g. environmentBlending() is just Bundlephobia minified, or Bundlephobia minified & gzipp’d
    • They use the window.matchMedia API underneath
    • They’re optimized for performance; all the module functions are designed in such a way that they exit early
    • They provide a clean, well-documented and semantic API to work with

    In addition to environmentBlending(), Magica11y also provides…

    🚀 Getting started

    🏗️ Installation

    You can install environmentBlending() using a package manager such as yarn or npm

    $ yarn add "@magica11y/environment-blending"
    # OR
    $ npm install --save "@magica11y/environment-blending"

    You can also include environmentBlending() from a CDN on your page, such as jsDelivr or unpkg

    <script src=""></script>
    <!-- OR -->
    <script src=""></script>

    🎲 Usage

    environmentBlending() is distributed as a UMD module, so you can use it as a browser global…

    var displayBlend = window.magica11y.environmentBlending.default();
    var isAugmentedRealityDisplay = (displayBlend === window.magica11y.environmentBlending.availableDisplayBlends.ADDITIVE);

    … or as a CommonJS module…

    const environmentBlending = require('@magica11y/environment-blending');
    const displayBlend = environmentBlending.default();
    const isAugmentedRealityDisplay = (displayBlend === environmentBlending.availableDisplayBlends.ADDITIVE);

    … or as an ES module…

    import environmentBlending, { availableDisplayBlends } from '@magica11y/environmentBlending';
    const displayBlend = environmentBlending();
    const isAugmentedRealityDisplay = (displayBlend === availableDisplayBlends.ADDITIVE);

    The availableDisplayBlends object contains all the possible values supported by the 'environment-blending' media query…

    • availableDisplayBlends.OPAQUE (spec: 'opaque')

      The document is rendered on an opaque medium, such as a traditional monitor or paper. Black is dark and white is 100% light.

    • availableDisplayBlends.ADDITIVE (spec: 'additive')

      The display blends the colors of the canvas with the real world using additive mixing. Black is fully transparent and white is 100% light. For example: a head-up display in a car.

    • availableDisplayBlends.SUBTRACTIVE (spec: 'subtractive')

      The display blends the colors of the canvas with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. For example: an LCD display embedded in a bathroom mirror.

    • null

      The display characteristics could not be determined.

    🏁 Typechecking

    You can import the Flow types from the provided libdefs in node_modules/@magica11y/environment-blending/lib by configuring them in your .flowconfig


    Now, you can use the Flow types as follows…

    // @flow
    import environmentBlending, { type DisplayBlend } from '@magica11y/environment-blending';
    const displayBlend: ?DisplayBlend = environmentBlending();

    🎩 Note: environmentBlending() returns a nullable type (i.e. DisplayBlend). So using the ? prefix to indicate nullable types is recommended (i.e. ?DisplayBlend).

    📜 License


    See for more details.

    Handcrafted with ❤️ by Rishabh.



    npm i @magica11y/environment-blending

    DownloadsWeekly Downloads






    Unpacked Size

    26.7 kB

    Total Files


    Last publish


    • rishabhsrao