underscore in beginning of css ID in IE9 quirks mode does not register

Question

I have a dynamically loaded CSS file that contains a css line with an ID like this:

#__my_css_id{

   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
   position: fixed;
   background-color: #202020;
}

I CANNOT change the fact that this page renders in quirks mode as it is a remotely hosted script (my script that is). Some pages are quirks, some are not.

When in quirks mode and IE9 (didn't try other IE versions) the css does not seem to load properly or at all. In fact, if I DEBUG the css using IE debugger (F12) then I see all the CSS but all the css IDS say UNKNOWN if they begin with the two underscores like this #__

If I debug the elements and check the css, none of the css rules are there. Does quirks mode not allow underscores in the beginning of the css ID?

Thanks!

Well for starters, IDs are suppose to start with a letter, so that right there isn't technically legal markup. That isn't just for quirks mode either; that's still a valid rule for Standards Mode. See: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — vcsjones, Jun 13 '11 at 04:05
I'm trying to avoid naming collisions so I thought I'd be safe to add the underscores. What would be a better solution? — Brian Gruber, Jun 13 '11 at 04:30
Just "namespace" your ids to avoid conflict, similar to what you're already doing but with a valid value. Example: `#MY-id1 #MY-id2`. (and remember they are case sensitive) — Wesley Murch, Jun 13 '11 at 04:37
I wanted a more globally unique way, so I thought with the double underscore I could increase the likelihood of avoiding collisions... I guess if my namespace is weird enough that helps. — Brian Gruber, Jun 13 '11 at 05:32

Paul Sweatte · Answer 1 · 2012-04-14T17:02:20.310

Double underscore works in CSS2, but quirks mode is a partial implementation of CSS1. The CSS2 spec says:

In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

While underscore is an invalid character in CSS1:

In CSS1, selectors (element names, classes and IDs) can contain only the characters A-Z, 0-9, and Unicode characters 161-255, plus dash (-); they cannot start with a dash or a digit; they can also contain escaped characters and any Unicode character as a numeric code (see next item).

underscore in beginning of css ID in IE9 quirks mode does not register

1 Answers1