メインコンテンツまでスキップ

no-unsupported-features

プロジェクトのターゲットブラウザ(browserslist 経由)でサポートされていない HTML要素や属性、または実験的(experimental)・**非標準(non-standard)**な要素・属性を使用している場合に警告します。

このルールはブラウザサポートの確認に @mdn/browser-compat-data を、実験的・非標準フラグの確認にビルトインのHTML仕様データを使用しています。

注意: プロジェクトに browserslist 設定がない場合、ブラウザサポートチェックは何も行いません(no-op)。checkExperimentalcheckNonStandard オプションは browserslist 設定がなくても動作します。

デフォルトの深刻度

warning

動作の仕組み

  1. ブラウザサポートチェック: プロジェクトの browserslist 設定を読み取り、各HTML要素・属性がすべてのターゲットブラウザでサポートされているか確認します。かつてサポートされていたがその後ブラウザから削除された機能も報告されます(例: "removed in 50")。
  2. 実験的チェック (checkExperimental): HTML仕様で実験的とマークされた要素・属性について警告します。recommended プリセットではこのオプションは有効化されません。必要に応じて手動で有効にしてください。
  3. 非標準チェック (checkNonStandard): HTML仕様で非標準とマークされた要素・属性について警告します。

オプション

オプションデフォルト説明
browsersliststring | string[]-browserslist クエリの上書き
browserslistConfigstring-browserslist 設定ファイルへの明示パス
browserslistEnvstring-browserslist 環境名(例: "production"
ignoreFeaturesstring[][]無視する機能
checkExperimentalbooleanfalse実験的な要素・属性を警告する
checkNonStandardbooleanfalse非標準な要素・属性を警告する

ignoreFeatures の形式

完全一致で判定します(グロブやワイルドカードパターンは使用できません)。

  • "dialog"<dialog> 要素を無視します(要素名の完全一致)
  • "input[list]"<input> 要素の list 属性を無視します

使用例

ブラウザサポートチェック

設定:

{
"rules": {
"no-unsupported-features": {
"options": {
"browserslist": "ie 11"
}
}
}
}

❌ 間違ったコード例

<dialog>ダイアログです</dialog>

✅ 正しいコード例

<div>コンテンツです</div>

実験的チェック

設定:

{
"rules": {
"no-unsupported-features": {
"options": {
"checkExperimental": true
}
}
}
}

❌ 間違ったコード例

<iframe credentialless></iframe>

✅ 正しいコード例

<iframe></iframe>

注意: 要素や属性が実験的かどうかは、markuplint にバンドルされたHTML仕様データに依存します。機能が実験的でなくなった場合、このルールは報告しません。

非標準チェック

設定:

{
"rules": {
"no-unsupported-features": {
"options": {
"checkNonStandard": true
}
}
}
}

❌ 間違ったコード例

<canvas moz-opaque></canvas>

✅ 正しいコード例

<canvas></canvas>

deprecated-element からの移行

v4.x の deprecated-element ルールは非推奨(deprecated)、廃止(obsolete)、非標準(non-standard)の3種類を検出していました。 v5.x では非標準の検出は no-unsupported-features ルールの checkNonStandard オプションに移管されました。

移行前 (v4.x)

deprecated-element が非標準要素を自動で検出

移行後 (v5.x)

非標準要素の検出には no-unsupported-features ルールを有効にしてください:

{
"rules": {
"no-unsupported-features": {
"options": {
"checkNonStandard": true
}
}
}
}

recommended プリセットを使用している場合は、compat プリセット経由で自動的に有効になっているため変更は不要です。

Interface

{
"no-unsupported-features": boolean
}

Options

{
"no-unsupported-features": {
"options": {
"browserslist"?: string | string[]
"browserslistConfig"?: string
"browserslistEnv"?: string
"ignoreFeatures"?: string[]
"checkExperimental"?: boolean
"checkNonStandard"?: boolean
}
}
}
PropertyTypeDefault ValueDescription
browsersliststring | string[]undefinedundefined
browserslistConfigstringundefinedExplicit path to a browserslist configuration file.
browserslistEnvstringundefinedBrowserslist environment name (e.g., "production").
ignoreFeaturesstring[]undefinedFeatures to ignore. Element name ("dialog") or attribute pattern ("input[list]").
checkExperimentalbooleanfalseWhether to warn about experimental elements and attributes.
checkNonStandardbooleanfalseWhether to warn about non-standard elements and attributes.

Default Severity

warning