dataset & data-* 属性

- LS

要素にカスタムデータを適用およびアクセスする方法。

Chrome

  1. 4 - 6:部分的にサポート
  2. 7 - 44:サポート
  3. 45 - 54:サポート
  4. 55 - 123:サポート
  5. 124:サポート
  6. 125 - 127:サポート

Edge

  1. 12 - 16:サポート
  2. 17 - 123:サポート
  3. 124:サポート

Safari

  1. 3.1 - 5:部分的にサポート
  2. 5.1 - 17.3:サポート
  3. 17.4:サポート
  4. 17.5 - TP:サポート

Firefox

  1. 2 - 5:部分的にサポート
  2. 6 - 50:サポート
  3. 51 - 124:サポート
  4. 125:サポート
  5. 126 - 128:サポート

Opera

  1. 9 - 11:部分的にサポート
  2. 11.1 - 12.1:サポート
  3. 15 - 31:サポート
  4. 32 - 41:サポート
  5. 42 - 108:サポート
  6. 109:サポート

IE

  1. 5.5 - 10:部分的にサポート
  2. 11:サポート

Android版 Chrome

  1. 124:サポート

iOS版 Safari

  1. 3.2 - 4.3:部分的にサポート
  2. 5 - 17.3:サポート
  3. 17.4:サポート
  4. 17.5:サポート

Samsung Internet

  1. 4 - 23:サポート
  2. 24:サポート

Opera Mini

  1. すべて:部分的にサポート

Opera Mobile

  1. 10 - 11:部分的にサポート
  2. 11.1 - 12.1:サポート
  3. 80:サポート

Android版 UC Browser

  1. 15.5:サポート

Android ブラウザ

  1. 2.1 - 2.3:部分的にサポート
  2. 3 - 4.4.4:サポート
  3. 124:サポート

Android版 Firefox

  1. 125:サポート

QQ Browser

  1. 14.9:サポート

Baidu Browser

  1. 13.52:サポート

KaiOS Browser

  1. 2.5:サポート
  2. 3:サポート

部分的なサポートとは、data-*属性を使用し、getAttributeを使用してアクセスできることを指します。

「サポート」とは、datasetプロパティを使用して値にアクセスできることを指します。現在の仕様はHTML要素のサポートのみを参照しており、SVG/MathML要素のサポートも一部のブラウザのみに限られています。

リソース
MDN Web Docs - dataset
MDN ガイド - data-* 属性の使用
dataset を使用したデモ
HTML5 Doctor の記事
has.js テスト
WebPlatform Docs