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?
- 1Basically, no. So far as conditional comments go it's either IE or not-IE, unfortunately.David Thomas– David Thomas2011-05-03 18:44:00 +00:00Commented May 3, 2011 at 18:44
- Please use a descriptive title when posting a question instead of just a seperated set of keywords.Aron Rotteveel– Aron Rotteveel2011-05-03 18:46:41 +00:00Commented May 3, 2011 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.null– null2011-05-03 18:47:57 +00:00Commented May 3, 2011 at 18:47
- I want to change some element position only for Firefox. in other browsers it works correctly.zur4ik– zur4ik2011-05-03 18:51:06 +00:00Commented May 3, 2011 at 18:51
- 1@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– VoidKing2012-10-26 14:11:41 +00:00Commented Oct 26, 2012 at 14:11
Add a comment |
2 Answers
The Mozilla Developer Network states this is explicitly supported just for browser detection:
@-moz-document url-prefix() { #my-id { font-size: 100%; } } See the Firefox note in @document § browser compatibility, which states FF 61+ "only supports an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets."
Place this in your CSS file or between your <style type='text/css'> tags in your HTML.
Nowadays you can use the @supports CSS rule:
@supports not( -moz-appearance:none ){ /* Add non-firefox CSS code here */ } 
3 Comments
cmgharris
Really helpful. But to get it to work in Chrome, I had to add a space between 'not' and '('
darko99
It fits into scss also
Adam Katz
This is, unfortunately, a moving target. Refer to this list of Mozilla-only properties. You want something in that first section and without a trash can icon. At the moment,
orient looks among the best, as in @supports not (-moz-orient: block) { .firefox-only { display: none } }, but the other answer here is actually ~officially supported.