CSS/@document (非標準・非推奨)

@document

@documentルールは、特定の文書条件に基づいてCSSスタイルを適用するために使用されるものでした。ただし、このルールは非標準であり、現在は非推奨とされています。ブラウザによるサポートが限定的であるため、使用は推奨されません。

概要

@documentルールは、文書のURLやドメイン、パターンなどに基づいてスタイルを適用することを目的としていました。主にユーザーCSSやカスタマイズされたブラウザスタイルシートで使用されることを想定していました。

書式

基本的な構文は以下のようになっています：

@document [条件] {
  <スタイルルール>
}

[条件]: 対象文書を指定する条件。以下の値が使用可能でした：
- url(): 特定のURLに一致する場合。
- url-prefix(): 指定したURLの接頭辞に一致する場合。
- domain(): 指定したドメインに一致する場合。
- regexp(): 正規表現に一致する場合（ブラウザによってはサポートされない）。

使用例

以下は、@documentの使用例です：

@document url("https://example.com/") {
  body {
    background-color: lightblue;
  }
}

@document url-prefix("https://example.com/subpage/") {
  h1 {
    color: green;
  }
}

@document domain("example.com") {
  p {
    font-style: italic;
  }
}

@document regexp("https://.*\\.example\\.com/.*") {
  a {
    text-decoration: none;
  }
}

注意事項

非標準の機能
@documentはW3Cの正式なCSS仕様の一部ではなく、ブラウザ間のサポートが一貫していません。これにより、クロスブラウザの互換性に問題があります。
非推奨
現在は非推奨とされており、新しいプロジェクトで使用するべきではありません。
セキュリティリスク
正規表現（regexp()）の使用は、潜在的なセキュリティリスクやパフォーマンスへの影響を伴うため、さらに注意が必要です。

代替方法

現在、@documentを使用する代わりに、以下の方法を検討してください：

JavaScript: DOMを操作して条件に応じたスタイルを動的に適用する。
カスタムCSS: サーバーサイドで文書の種類に基づいたスタイルを適用する。
メディアクエリや属性セレクタ: 条件に応じたスタイル適用の代替手段。

ブラウザ対応

@documentは、Firefoxで一部サポートされていましたが、他の主要なブラウザ（Chrome、Safari、Edgeなど）では未サポートです。将来的なサポート追加の予定もありません。

結論

@documentルールは一部の特定の用途に有用と考えられていましたが、非標準であり、現在では使用が推奨されません。代替手段を利用して、標準的で安定した方法で条件付きスタイルを実現してください。

@document

概要

書式

使用例

注意事項

代替方法

ブラウザ対応

結論

関連情報