1

My case happens to be for AngularJS, but really this is a general question.

When using AngularJS, there are features that require custom attributes like ng-repeat for example. The recommendation is to prefix it with data- so "older browsers" won't remove it (where in Angular's case, some functionality would be removed). At what point is that no longer required? IE8? IE9? It doesn't make a lot of difference to add them, but it would be nice to actually know (instead of just doing it blindly) which browsers are requiring it, or better yet, when it's safe to stop adding the prefix.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
user605331
  • 3,718
  • 4
  • 33
  • 60
  • It actually says [*If you want to use an HTML validating tool, you can instead use the data-prefixed version*](http://docs.angularjs.org/#creating-custom-directives_matching-directives). – Álvaro González Dec 12 '13 at 12:40
  • 1
    By now, I wrote some SPA using AngularJS that also have to work on IE8+ - and even IE8 has no problems with custom attributes. There are only problems if you want to use custom tags. Just make sure to read the [Developer Guide regarding IE8](http://docs.angularjs.org/guide/ie). – naeramarth7 Dec 12 '13 at 12:42
  • older browsers won't treat `data-` any differently than `ng-`. Neither is part of html4 spec. WIth that said, browsers don't seem to have any problems with unknown attributes. Have used arbitrary attributes for years and they worked even in IE6 – charlietfl Dec 12 '13 at 13:47

1 Answers1

2

There are no (at least common) browsers that have an issue with random attributes that don't use the data prefix. Technically, custom attributes are should be prefixed with data in order to be "valid" but in practice, there is no current drawback to leave off the prefix. The spec suggests using the data prefix because it is future proof. For example, if you create an angular directive called mask and use it like so: <div mask></div>, then if HTML6 introduces an attribute called mask, you have a conflict. data-mask, however, is guaranteed to never become a conflict.

While I personally don't care at all if my page validates with an HTML validation tool, the future proof offered by data is appealing.. I have been leaving it off for convenience. In most cases, it probably wouldn't be much work to refactor anything that becomes a conflict in the future - which is very unlikely anyway.

What you may have been thinking of is Angular's usage of custom elements, like if you wanted to use your mask directive as <mask></mask>. In order to make custom elements work in older IE, read here http://docs.angularjs.org/guide/ie.

m59
  • 43,214
  • 14
  • 119
  • 136