Are HTML5 Data Attributes Case Insensitive

are html5 data attributes case insensitive?

You should always use lowercase characters. Even though some browser do automatically correct mistakes in the markup (that's what Chrome does for you here) it can cause errors and isn't valid HTML5.
From MDN:

• the name must not start with xml, whatever case is used for these
  letters;
• the name must not contain any semicolon (U+003A);
• the name
  must not contain capital A to Z letters.

EDIT

After some more research I've found this:

All attribute names on HTML elements in HTML documents get
ASCII-lowercased automatically, so the restriction on ASCII uppercase
letters doesn't affect such documents.

Case sensitive in data attribute

I think it has to do with the fact that data-* explicitly prevents the data key from having capital A to Z letters.

• the name must not start with xml, whatever case is used for these letters;
• the name must not contain any semicolon (U+003A);
• the name must not contain capital A to Z letters.

In the data-* naming scheme, a data attribute like data-show-id will be accessible in javascript using the key showId, because of this limitation the use of capital letters seems to be restricted in the key.

Also read:

All attributes on HTML elements in HTML documents get ASCII-lowercased
automatically, so the restriction on ASCII uppercase letters doesn't
affect such documents

How to preserve the case of a data attribute?

If your goal is to target myAttribute as key of dataset property, you should use data-my-attribute:

<div data-my-attribute="test"></div>

See following link regarding camelCased rule:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

PS: as Izkata commented it:

For reference for others, jquery also does conversion such that
$div.data('my-attribute') returns the same thing as
$div.data('myAttribute'). The vanilla javascript dataset property does
not do this.

Is HTML case sensitive?

No, but it's considered good practice to keep HTML markup lowercase.

html input attribute values in uppercase

What values are acceptable for a given attribute depend on the specific attribute.

Name and Id attributes can both include upper and lower case characters, and both are case sensitive.

In the DOM are node ids case sensititve?

Yes. It is case-sensitive. Attribute values are always case-sensitive. Different browsers seem to be doing different things though.

Handling document.getElementById is different across browsers:

1. Mozilla performs case-sensitive search.

2. Internet Explorer: IE 8 and later performs case-sensitive search, while IE 7 and earlier performs case-insensitive search.

jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

HTML5 allows us to create our own custom attributes to store data. Custom attributes can be called anything we like, like variable names, but they need to be prepended with the word 'data', and words are separated by dashes. You could add "foo", "bar", and "foo bar" data attributes to an input like this:

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

jQuery's .data() method will give you access to data-* attributes.

Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

would be accessible with

$('.myButton').data('productId');

jQuery 1.5 and 1.6

However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

is only accessible with

$('.myButton').data('productid');

Any data-* attributes become properties of the element’s dataset object. The new property names are derived as follows:

• The attribute name is converted to all lowercase letters.
• The data- prefix is stripped from the attribute name.
• Any hyphen characters are also removed from the attribute name.
• The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

Notice that the original attribute name data-product-id has been converted to productId in the dataset object. The name conversion process must be accounted for when naming data-* attributes. Since the attribute names are converted to lowercase, it is best to avoid using uppercase letters. The following example shows how several attribute names translate to dataset properties.

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

NOTE:

• Custom data attributes are typically used to store metadata that aids/simplifies JavaScript code.
• An element can have any number of custom data attributes.
• Custom data attributes should only be used if a more appropriate element or attribute does not exist. For example, you should not create a custom “text description” attribute on an image. The existing alt attribute is a better choice.
• The HTML5 specification clearly states data-* attributes should not be used by third party applications. This means that programs such as search engines should not rely on custom data attributes when preparing search results.

Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently. Finally, do remember that it’s still a little early to start using the dataset approach for functions your pages rely on, so be sure to provide an alternative for non-supporting browsers.

DEMO

How can I apply CSS selector to attribute values being case sensitive?

HTML5 actually contains an entire section dedicated to case-sensitivity for the purposes of selector matching. Here's what it says about attribute names and values:

Attribute and element names of HTML elements in HTML documents must be treated as ASCII case-insensitive for the purposes of selector matching.

Everything else (attribute values on HTML elements, IDs and classes in no-quirks mode and limited-quirks mode, and element names, attribute names, and attribute values in XML documents) must be treated as case-sensitive for the purposes of selector matching.

Of course, HTML 4 does not state anything about interop with selectors, but it does say that the title attribute in particular is case-sensitive. Since selectors depend on the document language for determining case-sensitivity, there is no difference here.

XHTML follows the same set of rules as XML does: all attribute values should be case-sensitive, so a selector must follow that case-sensitivity. Again, no difference.

So what you're seeing is entirely by design; there is no browser or spec issue.

---

Related Topics