blob: 84b5f5276780dbb04237520c83b6fc25cb3d6639 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
---
title: '@document'
slug: Web/CSS/@document
tags:
- アットルール
- CSS
- リファレンス
browser-compat: css.at-rules.document
translation_of: Web/CSS/@document
---
{{CSSRef}}{{Deprecated_header}}
**`@document`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、文書の URL に基づいて、その中に含まれるスタイルルールを制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義のスタイルシートにも使うことができます。
```css
@document url("https://www.example.com/") {
h1 {
color: green;
}
}
```
## 構文
`@document` ルールには 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、ルールがその URL に効果を及ぼします。利用可能な関数は次の通りです。
- `url()`: 正確な URL に一致します。
- `url-prefix()`: 文書の URL が指定された値で始まる場合に一致します。
- `domain()`: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。
- `media-document()`: 動画、画像、プラグイン、またはそのすべての引数
- `regexp()`: 文書の URL が、指定された[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。
`url()`, `url-prefix()`, `domain()`, `media-document()` 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 `regexp()` 関数に与える値は、引用符で囲む*必要があります*。
エスケープされた値を `regexp()` 関数に与える場合は、 CSS でさらにエスケープする必要があります。例えば、一つの `.` (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現のルールを使ってエスケープし (`\.` にします)、次に CSS のルールを使ってエスケープしなければなりません (`\\.` にします)。
`@document` は現在のところ Firefox のみが対応しています。 Firefox 以外のブラウザーでこの機能を再現したい場合は、[このポリフィル](https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill) (@An-Error94 氏作) を使ってみてください。これは、ユーザースクリプトと [data-* 属性](/ja/docs/Web/HTML/Global_attributes/data-*)と[属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)を組み合わせて使用するものです。
> **Note:** このプロパティの -moz 接頭辞がついたバージョン `@-moz-document` があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。
## 形式文法
{{csssyntax}}
## 例
### CSS ルールで文書を特定
```css
@document url("http://www.w3.org/"),
url-prefix("http://www.w3.org/Style/"),
domain("mozilla.org"),
media-document("video"),
regexp("https:.*") {
/* ここの CSS ルールは次の場所に適用されます。
- "http://www.w3.org/" のページ
- URL が "http://www.w3.org/Style/" で始まるすべてのページ
- URL のホストが "mozilla.org" である、
または ".mozilla.org" で終わるすべてのページ
- スタンドアロンビデオ
- URL が "https:" で始まるページ */
/* 上で挙げたページを見辛くする */
body {
color: purple;
background: yellow;
}
}
```
## 仕様書
[当初](https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document)は {{SpecName('CSS3 Conditional')}} にありましたが、 `@document` は Level 4 に[延期されました](https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes)。
## ブラウザーの互換性
{{Compat}}
## 関連情報
- www-style メーリングリストの [Per-site user style sheet rules](https://lists.w3.org/Archives/Public/www-style/2004Aug/0135)
|
