2

I am dynamically creating an IFrame on a page and filling that IFrame with both content and styling. It appears that the browser combines all styles with the same name (regardless of case) to create the final style.

Here is an example: http://jsfiddle.net/6W2KP/3/

var fDoc = document.getElementById("myFrame").contentWindow.document;
var fStyle = fDoc.createElement("STYLE");
fStyle.innerHTML = ".ab{font-size:30px;}\n.AB{color:red;}\n.ac{font-weight:bold;}";
fDoc.head.appendChild(fStyle);
var p = fDoc.createElement("P");
p.className = "ab";
p.innerHTML = "Testing";
fDoc.body.appendChild(p);

Above, the font should not be red but it is; .ab .AB .aB and .Ab will all be used. Furthermore, this behaviour has been reproduced in both Firefox and Chrome.

This is contrary to everything I can find about the standards, which say class names are case sensitive. Can anybody explain this?

user3813695
  • 21
  • 2
  • Tip: Why would you name classes like that? This can give you a lot of trouble understanding your style sheets later. – emerson.marini Jul 07 '14 at 19:26
  • Looks like the specs arent all that clear about it being CI. Tbh I'd never do this, you have infinite number of readable names, you can use dash, underscore, all kinds of stuff. Naming classes ab AB is just stupid. – MightyPork Jul 07 '14 at 19:29
  • 1
    [This answer](http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive) says that CSS is **not** case-sensitive. So .ab is the same as .aB. For more info, see [**this link**](https://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior) - _In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive. (This also applies to getElementsByClassName.)_ – blex Jul 07 '14 at 19:31
  • Purely a demonstration. I came across this behavior and am looking to see if there is a valid reason the browsers implement the code this way. It seems contrary to the HTML standard. – user3813695 Jul 07 '14 at 19:31
  • @blex My understanding is that the answers says **selectors** are generally case-insensitive but "HTML class names are case-sensitive". Two different things, unless I am mistaken. – user3813695 Jul 07 '14 at 19:34
  • 1
    it's because the empty frame is in quirks. don't use quirks. – dandavis Jul 07 '14 at 19:34
  • Furthermore, I added a part to the JSFiddle showing that this behavior is different outside of the IFrame. – user3813695 Jul 07 '14 at 19:38
  • @dandavis If the IFrame is being rendered is quirks mode can you tell me how to force it into standards mode? – user3813695 Jul 07 '14 at 19:45
  • navigate to a url with a doctype, or document.write() a valid html document. – dandavis Jul 07 '14 at 19:52
  • Thanks for clearing this up. I would answer and mark this answered but I can't yet. – user3813695 Jul 07 '14 at 20:23
  • It's been answered here: http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive – LcSalazar Jul 07 '14 at 20:36
  • Note that CSS itself is case insensitive. You can write `{color:red}` or `{Color:Red}`; no difference. However, _selectors_ are not part of CSS proper; they follow the rules of the language CSS runs on. If the selector is `Div`, it would work for an HTML file, but not for an XHTML file, which requires lowercase tags names. – Mr Lister Jul 08 '14 at 07:54

0 Answers0