Can Someone Confirm That I am Doing This Browser Specific CSS Right

Question

I have in my css this class:

.middleContent { overflow: hidden; display:inline-block; }

This works in IE but not in FF or Chrome so I wrote this out and just wanted to do a sanity check here because I am not sure how to write this out and might need direction.

To leave it working in IE I left the above line:

.middleContent { overflow: hidden; display:inline-block; }

So for Firefox and Chrome do I add the following lines like this:

For Firefox:

@-moz-document url-prefix() { 
  .middleContent { overflow: hidden; }
}

For Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .middleContent { overflow: hidden; }
 }

Thanks for any help or advice on this.

Answer 1

Yes, you are correct. To Target Chrome :

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 div{top:0;} 
}

To Target any firefox:

@-moz-document url-prefix() { 
      .selector {
         color:lime;
      }
    }