color-gamut media query example

HTML

<div class="container">
  <p class="srgb"></p>
  <p class="p3"></p>
  <p class="rec2020"></p>
  <div class="image"></div>
</div>

CSS

.srgb:before {
  content: 'Your browser does not support color-gamut media query.'
}
@media screen and (color-gamut: srgb) {
  .srgb:before {
    content: 'sRGB Color Space Support is reported.'
  }
  .image {
    background-image: url("https://webkit.org/blog-files/color-gamut/Iceland-sRGB.jpg")
  }
}

@media screen and (color-gamut: p3) {
  .p3:before {
    content: 'DCI P3 Color Space Support is reported.'
  }
  .image {
    background-image: url("https://webkit.org/blog-files/color-gamut/Iceland-P3.jpg");
  }
}

.container {
  width: 600px;
  position: relative;
}
.image {
  width: 600px;
  height: 400px;
}