Pure js NPM package to check hdr support in css (browser and hardware)

homepage | github

Install it in a project

npm install isit-hdr-ready

You can use it in your markup like this:

<p class="hdr-not-ready-message">✅ Browser support sRGB</p>
<p class="hdr-ready-message hidden">✅ Browser and Hardware is HDR ready</p>

Then check hdr support and change block, picture or js logic:

import isitHDRReady from "isit-hdr-ready";

const hdrReadyMessage = document.querySelector(".hdr-ready-message");
if (isitHDRReady()) {
  hdrReadyMessage.classList.remove("hidden");
}