xhtml tag names must be lowercase (in css)

[Inarus]

I have noticed that a lot of css breaks becuase in the css for example in dijit/themes/dijit.css selectors like the following appears:

.dijitTextBox INPUT.dijitInputField

This of course should resemble the following to conform to xhtml standards:

.dijitTextBox input.dijitInputField

I only really test in firefox, and this breaks when using the xhtml mime type.

[bill]

It's easy to fix the CSS, although I wonder if that's enough to make XHTML work. A lot of the JS code has uppercase names, ex:

this.editWidget.focusNode.tagName == "INPUT"

and

var inputs = this.domNode.getElementsByTagName("INPUT")

[bill]

Also, CC'ing Doug in case he knows a reason why we [often] use uppercase for tag names

[Inarus]

Screenshot of bug showing an Editor, DateTextBox?, 2 TimeTextBoxes? and a FilteringSelect?

[Inarus]

The screenshot uploaded above, you can see an extra down arrow on all the elements. This is the down arrow supplied by the value field on the input that should have been shifted out of view by the css. The css rules that do this however used the capitalised tag name so is not applied under xhtml.

Bill, I am right in thinking, that with the later two javascript examples given above, that getElementsByTagName and dojo.query would take care of the case?

[bill]

Replying to Inarus:

The screenshot uploaded above, you can see an extra down arrow on all the elements. This is the down arrow supplied by the value field on the input that should have been shifted out of view by the css. The css rules that do this however used the capitalised tag name so is not applied under xhtml.

Oh, I believe you that XHTML mode isn't working, I just want to be sure not to break HTML mode, for example on IE6/quirks.

Bill, I am right in thinking, that with the later two javascript examples given above, that getElementsByTagName and dojo.query would take care of the case?

No idea, you should test that (on an XHTML page).

But note that in #4925 you claim that the parser can't find dojoType declarations... all it is doing is a node.getAttribute("dojoType"). If getAttribute() doesn't take care of case then I doubt that getElementsByTagName() does.

[Inarus]

For firefox, both getElementsByTagName and getAttribute convert to lowercase, see the following, Though as far as I can tell, this isn't specified by the w3c for these functions. ​https://developer.mozilla.org/en/DOM/element.getElementsByTagName#Notes and ​https://developer.mozilla.org/en/DOM/element.getAttribute#Notes

This does confuse me though as to what *is* going on.

[bill]

Hmm that is confusing, well I guess we can deal with that problem later if it pops up.

For now, I'll update the CSS for dijit. If you are having problems with dojo core or dojox projects please open separate tickets for them. I do see a number of dojox projects using capitals in their CSS files.

[bill]

In [26332]:

Use lowercase tag names to be friendly to XHTML, fixes #13730.

[bill]

In [26333]:

Use lowercase tag names to be friendly to XHTML, refs #13730.