How to Detect Firefox Users in Pure CSS

Is it possible to detect Firefox users in pure CSS?

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!

How do I detect the user’s browser and apply a specific CSS file?

If you have to detect browsers just to apply CSS, then you might want to rethink your CSS before going to browser-specific stylesheets. All it takes is for one browser to mimic another's user agent string, or a new version to be released, and everything breaks. Use the current standards and validate your code (http://validator.w3.org/), and you'll have to worry about far fewer cross-browser issues. Even just using  without a version number could break the layout in later versions.

That being said, if you want to style the page differently based on what CSS features are available, take a look at Modernizr. This way, you're only checking features, which won't be broken if a new version of the browser is released.

If all else fails and you really need to detect the visitor's browser, try jquery.browser. It's built into jQuery, and is simple to use. http://api.jquery.com/jQuery.browser/.

Targeting only Firefox with CSS

This solution does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

is there a way of targeting Firefox 3.6 and below using CSS?

body:-moz-last-node #element {/* ≤ Firefox 3.6 */}
:-moz-any(html) #element {/* ≥ Firefox 4 */}

The second rule is there to reset recent versions of Gecko-based browsers.

But remember that it will probably be dropped in favour of :matches() in the near future.

CSS width wierdness in Chrome and Firefox with Pure CSS

The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!

Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)

Example code

<!--whitespace in HTML = renders as a space between the divs-->
    <div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>

How can you detect the version of a browser?

You can see what the browser says, and use that information for logging or testing multiple browsers.

navigator.sayswho= (function(){
    var ua= navigator.userAgent;
    var tem; 
    var M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

console.log(navigator.sayswho); // outputs: `Chrome 62`

Pure CSS selector for Quirks/BackCompat mode for Chrome and Firefox

This isn't so much a CSS selector quirk as it is an HTML quirk, but the id and class attributes become case insensitive in quirks mode, which means selectors that differ in case will always match. See this answer and its first footnote for details.

If you can modify your HTML across all your pages, add a class to either your html or body element (the class name doesn't matter) and prefix your quirks selectors with that same class name, in a different case. Here's a code example:

<html class="quirks">
<!-- Or: <body class="quirks"> -->

#foo {
    width: 480px;
    padding: 10px;
}

/* Capital Q instead of small q, won't match in standards mode with a doctype */
.Quirks #foo {
    width: 500px;
}

This applies to all browsers.

If you cannot modify your HTML, then I don't believe there is a pure CSS solution for this that applies to all browsers. In previous versions of IE you could simply deliberately use CSS2.1 selectors to hide styles from IE5 quirks and older versions (like the good ol' html > body hack), but you can't do this with Chrome and Firefox, or the new interoperable quirks mode introduced in IE10, because they support the same advanced selectors in quirks and standards mode.

How to detect Safari, Chrome, IE, Firefox and Opera browsers?

Googling for browser reliable detection often results in checking the User agent string. This method is not reliable, because it's trivial to spoof this value.

I've written a method to detect browsers by duck-typing.

Only use the browser detection method if it's truly necessary, such as showing browser-specific instructions to install an extension. Use feature detection when possible.

Demo: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;