Is there a way to apply different CSS properties for different browsers?

Question

I am making a website. I want to hide a element when I open Chrome browser, but that element won't hide when it is opened in Firefox. In short, I just have to change the display property in CSS to hide or un-hide the element in different browsers.

Answer 1

There are a couple of ways you can do this.

1. One way is to use media queries that target a specific browser. This is awkward to work with and i'm not sure there are media queries for all browsers, here you can read more about it

   Example:

   /* on Chrome version 29 and above */
   @media screen and (-webkit-min-device-pixel-ratio:0 and (min-resolution:.001dpcm) {
       .my-class {
           background-color: red;
       }
   }
   

2. Another possibility is for you to find what the used browser with JS (can read about it here) and then add some kind of class or attribute to your element or to the body itself. You can then use this to style the element as you need

   Example:

   const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
   if (isChrome) {
       document.body.setAttribute('os', 'chrome');
   }
   

   and then on your css

   body[os="chrome"] .your-class {
       background-color: blue;
   }