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

Category : CSS

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 エスケープしなければなりません。

Leave a Reply