@supports @documentに関する覚え書き

公開：2011年06月13日 17:25
更新：2011年06月13日 18:07

「CSS Conditional Rules Module Level 3」にあるFeature queriesとDocument queriesの簡単な説明と覚え書きです。
Media-specific style sheets（@media）は色んなところで解説されてるのでここではやりません。

この記事を書いている時点で、「CSS Conditional Rules Module Level 3」はEditor’s Draft 7 June 2011が最新版ですので、それに従って説明したいと思います。
内容は今後アップデートされるでしょうし、これはあくまでも簡単な覚え書きですので、ぜひ原文もご参照ください。

CSS Conditional Rules Module Level 3

Feature queries: the ‘`@supports`’ rule

@supportsルールは、ユーザーエージェントがCSSのプロパティ: 値をサポートするかどうかをテストする条件付きグループのルールです。
@supportsの文法はMedia Queriesに似ていますが、条件によってはより複雑になります。

例としてdisplay: flexboxがサポートされている場合の指定は以下のようになります。

@supports ( display: flexbox ) {
  body, #navigation, #content {
    display: flexbox;
  }
  #navigation {
    background: blue;
    color: white;
  }
  #article {
    background: white;
    color: black;
  }
}

逆にdisplay: flexboxがサポートされていない場合に適用するには以下のようになります。

@supports not ( display: flexbox ) {
  body {
    width: 100%;
    height: 100%;
    background: white;
    color: black;
  }
  #navigation {
    width: 25%;
  }
  #article {
    width: 75%;
  }
}

次の例はbox-shadowがベンダープレフィックスも含め、サポートされているかどうかを示します。box-shadowがサポートされている場合にはシャドウと文字色が指定されます。

@supports ( box-shadow: 2px 2px 2px black ) or
          ( -moz-box-shadow: 2px 2px 2px black ) or
          ( -webkit-box-shadow: 2px 2px 2px black ) or
          ( -o-box-shadow: 2px 2px 2px black ) {
  .outline {
    color: white;
    box-shadow: 2px 2px 2px black;
    -moz-box-shadow: 2px 2px 2px black;
    -webkit-box-shadow: 2px 2px 2px black;
    -o-box-shadow: 2px 2px 2px black;
  }
}

andとorの混乱を避けるために、カンマまたはスペースを使用して明示的にする必要があります。
同様に、and, orとnotは優先順位の混乱を避けるために演算子を括弧でくくる必要があります。

たとえば、次のような指定はinvalidとなります。

@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  /* ... */
}

これは次のように書かなければなりません。

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  /* ... */
}

@supports (transition-property: color) or
          ((animation-name: foo)) and
           (transform: rotate(10deg))) {
  // ...
}

Document queries: the ‘`@document`’ rule

@documentルールは、ドキュメントURLによってスタイルが適用される条件付きグループのルールです。スタイルシート、ユーザースタイルシート、全体ではなく一部のページにのみ適用するスタイルシートに使用できます。
@documentルールの条件は、カンマでセパレートされたURL matching functionsリストで、これらの関数のいずれかがtrueと判定された場合に条件がtrueと評価されます。

<url>

url()関数は正確なURLマッチング関数です。
指定されたURLがドキュメントのURLと正確に一致するとき、条件はtrueと評価されます。

たとえば、http://www.w3.org/Style/CSS/上のsummary要素に適用する場合は以下のようになります。これは他のページには適用されません。

@document url("http://www.w3.org/Style/CSS/") {
  summary {
    background: yellow;
    color: black;
  }
}

url-prefix(<string>)

url-prefix()関数はURL接頭辞にマッチングする関数です。
ドキュメントURLが引数のinitial substringを含んでいる場合trueと評価されます。これはURLと引数が一致している場合もtrueと評価されます。
引数が空の文字列の場合は、全てのドキュメントがtrueと評価されます。

次の例はhttp://www.w3.org/Style/CSS/とhttp://www.w3.org/Style/CSS/Test上にあるsummary要素に適用され、http://www.w3.org/やhttp://www.example.com/Style/CSS/には適用されません。

@document url-prefix("http://www.w3.org/Style/CSS/") {
  summary {
    background: yellow;
    color: black;
  }
}

domain(<string>)

domain()関数は、ドメインにマッチングする関数です。
（すいませんこの辺の説明は原文を参照してください）

以下の例ではhttp://www.w3.org/Style/CSS/, http://w3.org/Style/CSS/, http://lists.w3.org/Archives/Public/www-style/のページ上でbody要素のフォントサイズが変更されますが、http://www.example.com/Styleでは適用されません。

@document domain("w3.org") {
  body {
    font-size: 16px ! important;
  }
}

regexp(<string>)

<string>はJavaScriptのパターンと一致する必要があります。
マッチングが失敗したとき、CSS構文エラーにはなりません。また、CSS構文エラーのエラーハンドリングは行われません。

（正規表現についての説明は原文を参照してください）

http://www.w3.org/TR/2011/PR-CSS2-20110412/といったページのbody要素のフォントサイズを変更する場合の例です。

@document regexp("http://www.w3.org/TR/\\d{4}/[^/]*-CSS2-\\d{8}/") {
  body {
    font-size: 20px ! important;
  }
}

正規表現内のバックスラッシュは\\のようにCSSエスケープしなければなりません。

Feature queries: the ‘@supports’ rule