Is there any option to show browser specific block

Question

Hi I want to show block which depends on browser in concrete4 8.5.1 CMS Once block will have GIF and other will have AV1 video. But as AV1 is not supported by all browser I will like to show gif and the one which supports will hide the GIF and show AV1. PHP version is 7.3

I have tried differnet css but did not work https://rafael.adm.br/css_browser_selector/

Answer 1

Try to detect with modernizr the browser feature needed to reproduce the video:

https://modernizr.com/download?setclasses

You can look in specific for video: https://modernizr.com/download?video-setclasses&q=video

Modernize give you true or false on each feature you check, for example you can check html5video, if true then add class .active to the video container if not add .active to the gif container.

Answer 2

Without knowing your code, and based on the particular browser selector example you posted, I would suggest the following approach. Let's say IE doesn't support video, and chrome does, and you have 2 separate containers with class="gif" for the container with the gif and class="video" for the container with the video:

.video {
  display: none;
}
.gif {
  display: none;
} 
.ie .gif {
  display: inline-block;
}
.chrome .video {
  display: inline-block;
}