The @supports Statement

A few days ago, I was writing code for my website, and while I was doing that, I ran into a nasty little problem. And that problem is that some browsers don't actually support CSS keyframe animation. Well, that is some browsers on some lower-end android phones. But as a web developer, it is my job to make a website accessible and usable on as many devices as possible.

The animation itself is not a big deal, the browser would just ignore it if it doesn't recognize it and nothing would break. Normally that is... However, in my case it was a big deal. The reason behind this is because the items that are animated have an initial opacity value of 0 ! So if the keyframe statement were to be ignored, the items would remain invisible.

And if I put this value in the keyframe statement, it would result in a jerky animation, since the items by default in the user agent style sheets, have an opacity value of 1. So what you would see would be a visible item, that instantly disappears, and then slowly appears again. That actually looks more terrible than it sounds.

The solution ?
Yes, you guessed it ! @supports is the solution.
If you wrap the keyframes statement and the class with the opacity value of 0 both inside of supports, and set the condition of the supports statement to be an animation, then it will only run if the browser supports CSS keyframe animations. Otherwise, it will keep the normal opacity value of 1, and the items would still be visible on older browsers. And in the case scenario that the browser doesn't even support the @supports statement, then it will ignore it and its contents altogether, and the items would still be visible.

I know this all might have sounded a bit complicated, so I will put an example below:

@supports (animation: SomeAnimation 1s ease forwards) {

   .invisible {
      opacity: 0;
   }
   .Animation {
       transform: translateY(100px);
       animation: SomeAnimation 1s ease forwards;
   }
   @keyframes SomeAnimation {
       to {
         transform: translateY(0);
         opacity: 1;
       }
   }
}

This code block might clarify what I was talking about much better ! @supports is indeed a life saver. You would only know how useful it really is once you need to use it to fix an issue ! :)

I hope that you enjoyed this post. I personally enjoyed writing it quite a lot.

If you happen to find any mistakes in this post, feel free to correct me in the comments. Life is a never ending classroom afterall. :)

The image being used, was created by Nick Karvounis, and is an Open Source image.