Is it possible to detect Firefox users in pure CSS?

Question

Is it possible to detect Firefox Browser only with CSS like IE?

for example, IE browser can be detected like:

<!--[if IE 7]>
   /* IMPORTING CSS FOR IE */
<![endif]-->

Can be Firefox browser detected like this code?

Basically, no. So far as conditional comments go it's either IE or not-IE, unfortunately. — David Thomas, May 03 '11 at 18:44
Please use a descriptive title when posting a question instead of just a seperated set of keywords. — Aron Rotteveel, May 03 '11 at 18:46
The question is why you would want to detect Firefox? Do you have any certain reason to do so? Firefox CSS support isn't broken, unlike IE. — Konrad Borowski, May 03 '11 at 18:47
I want to change some element position only for Firefox. in other browsers it works correctly. — zur4ik, May 03 '11 at 18:51
@GlitchMr Are you serious? You think Firefox doesn't display things differently (like all individual browsers)? What do you mean why would he want to do this? I just got through making a complex form for a database-driven web-interface site, and Firefox is the only browser that for some reason likes to scrunch all the texareas too close to the other fields. If I spread them out then they are too far apart for IE and Chrome. I know that detecting a browser and styling differently based on this detection shouldn't be the first answer, but to wonder why he would want this is just, well, weird... — VoidKing, Oct 26 '12 at 14:11

score 61 · Accepted Answer · edited Jul 03 '20 at 17:45

61

Not that I know of, but you can try this:

@-moz-document url-prefix() {
 
    #my-id { font-size: 100%; }
 
}

This website has more options as well

You can place this in your CSS file or between your <style type='text/css'> tags in your HTML. Works Fine!

edited Jul 03 '20 at 17:45

Donald Duck

answered May 03 '11 at 18:44

Soatl

@Peppered Lemons Do you mind clarifying where that goes? CSS file, js file, or cshtml file? – VoidKing Oct 26 '12 at 14:14
2

awesome! Does anyone know whey the url-prefix() needs to be included? – hallodom Sep 26 '13 at 14:30

score 32 · Answer 2 · edited Jun 20 '20 at 09:12

32

Nowadays you can use the @supports CSS rule:

@supports not( -moz-appearance:none ){
  /* Add non-firefox CSS code here */
}

edited Jun 20 '20 at 09:12

Community

answered Aug 11 '17 at 16:37

mherchel

3

Really helpful. But to get it to work in Chrome, I had to add a space between 'not' and '(' – cmgharris Jan 25 '19 at 10:07
It fits into scss also – darko99 Jul 28 '20 at 16:19