Hello, my name is: Amy

This Week I Learned: @supports

Just like @media allows you to apply certain styles based on how the page is displayed (width/height/etc), @supports allows you allow styles based on feature detection.

I've heard about @supports for a while, but this was the first time I actually had a use case for it. The story was that I was having issues having a video maxing out either the height or the width of it's container. object-fit: cover does just what I needed; however object-fit isn't supported in IE or Edge.

If I could have just applied object-fit and have it just be ignored on browsers that don't support it that would have been fine. However, I needed to apply styles if object-fit was not present that would be a problem if it was.

This is where @supports came in, I was able to set the default styles as if object-fit was not present, and then reset those styles if object-fit is supported.

To trigger the styles within @supports to be used, you place a condition that you'd like to evaluate to true, in this case, (object-fit: cover) is the property that I was checking for.

.main-video video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
}

@supports (object-fit: cover) {
  .main-video {
    position: fixed;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    z-index: -1;
  }
  .main-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;

    // resets
    position: static;
    top: auto;
    left: auto;
    min-width: none;
    min-height: none;
    transform: none;
  }
}

Comments