@document

  • Revision slug: Web/CSS/@document
  • Revision title: @document
  • Revision id: 433315
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment Revert to revision of 2013-05-10 13:13:20 by Sheppy

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The @document rule is an at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A @document rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL.

The main use case is for user-defined stylesheets, though this at-rule can be used on author-defined stylesheets too.

The functions available are:

  • url(), which matches an exact URL
  • url-prefix(), which matches if the document URL starts with the value provided
  • domain(), which matches if the document URL is on the domain provided (or a subdomain of it)
  • regexp(), which matches if the document URL is matched by the regular expression provided. The expression must match the entire URL.

Syntax

The values provided to the url(), url-prefix(), and domain() functions can optionally be enclosed by single or double quotes. The values provided to the regexp() function must be enclosed in quotes.

Escaped values provided to the regexp() function must additionally escaped from the CSS. For example, a . (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to \.), then escape that string using CSS rules (to \\.).

Examples

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* CSS rules here apply to:
     + The page "http://www.w3.org/".
     + Any page whose URL begins with "http://www.w3.org/Style/"
     + Any page whose URL's host is "mozilla.org" or ends with
       ".mozilla.org"
     + Any page whose URL starts with "https:" */

  /* make the above-mentioned pages really ugly */
  body { color: purple; background: yellow; }
}

Specifications

Initially in {{ SpecName('CSS3 Conditional', '', '') }}, @document has been postponed to the level 4.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("1.8") }} {{ property_prefix("-moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
regexp() {{ CompatNo() }} {{ CompatGeckoDesktop("6.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
regexp() {{ CompatNo() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>@document</code> rule is an at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A <code>@document</code> rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL.</p>
<p>The main use case is for user-defined stylesheets, though this at-rule can be used on author-defined stylesheets too.</p>
<p>The functions available are:</p>
<ul>
  <li><code>url()</code>, which matches an exact URL</li>
  <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided</li>
  <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it)</li>
  <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can optionally be enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <strong>must</strong> be enclosed in quotes.</p>
<p>Escaped values provided to the <code>regexp()</code> function must additionally escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; regexp("https:.*")
{
  /* CSS rules here apply to:
     + The page "http://www.w3.org/".
     + Any page whose URL begins with "http://www.w3.org/Style/"
     + Any page whose URL's host is "mozilla.org" or ends with
       ".mozilla.org"
&nbsp;&nbsp;&nbsp;  + Any page whose URL&nbsp;starts with "https:" */

  /* make the above-mentioned pages really ugly */
  body { color: purple; background: yellow; }
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p name="Browser_compatibility"><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document" title="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{ SpecName('CSS3 Conditional', '', '') }}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes" title="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to the level 4.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.8") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>regexp()</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("6.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>regexp()</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_at_rules() }}</li>
  <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li>
  <li>
    <p>The file <code><a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a></code> is a user stylesheet on Gecko-based browsers.</p>
  </li>
</ul>
Revert to this revision