Wikibooks

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

< CSS

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

関連情報

編集
"https://ja.wikibooks.org/w/index.php?title=CSS/@document_(非標準・非推奨)&oldid=270703" より作成