How to target a specific browser of a specific device via CSS?

Question

I want target firefox of a mobile device. I´ve tried:

@media only screen and (max-width: 470px) { 
    @-moz-document url-prefix() {
       (here some CSS)
    }
}

But it doesn´t work... Any other suggestions?

Generally, if you're having to do that, there's probably bigger issues at play. Other than that JS broswer sniffing but it generally not recommended, — Paulie_D, Jun 20 '16 at 13:50
Do a brief search of your question before posting it on here. Chances are there is already much information out there, and there is: http://borishoekmeijer.nl/how-to-target-a-specific-browser/ or https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css?rq=1 — Boris, Jun 20 '16 at 13:51

score 2 · Accepted Answer · answered Jun 20 '16 at 13:55

This is often a job for a library such as "Modernizr", although it's not really an exact science.

This will detect the features of a browser, and will render classes on the body tag accordingly - You can then use these to implement features.

https://modernizr.com/

Alternativtly, if you really need to target the browser as firefox:

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
 // Do Firefox-related activities
 // Add a class to appropriate entity, and style using css / media query
}

Although it is not what I wanted, but a solution wich works with lot of code. Thank you for your idea... — user3612671, Jun 21 '16 at 08:23

How to target a specific browser of a specific device via CSS?

1 Answers1