Here I have a website in quirks mode. :( , and I am patching some pages into CSS1 Compat mode.
I'd like to reuse the existing CSS and keep one version only, however some values must be different in quirks and CSS mode as they have different box models.
Is there a selector that can tell whether the HTML was in quirks or standards mode? I know there are some CSS hacks for IE but I need to support 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.