---
title: '@document'
slug: Web/CSS/@document
tags:
  - At-Regel
  - CSS
  - Referenz
translation_of: Web/CSS/@document
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <strong><code>@document</code></strong> <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/At-Regel">at-rule</a> beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine <code>@document</code> Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.</p>

<p>Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.</p>

<p>Die verfügbaren Funktionen sind:</p>

<ul>
 <li><code>url()</code>, welche einen exakten URL matcht.</li>
 <li><code>url-prefix()</code>, welche matcht, falls der Dokument-URL mit dem angegebenen Wert beginnt.</li>
 <li><code>domain()</code>, welche matcht, falls der Dokument-URL zur angegebenen Domain (oder einer Subdomain davon) gehört.</li>
 <li><code>regexp()</code>, welche matcht, falls der Dokument-URL auf den angegebenen <a href="/de/docs/Web/JavaScript/Guide/Regular_Expressions">regulären Ausdruck</a> passt. Der Ausdruck muss den gesamten URL matchen.</li>
</ul>

<h2 id="Syntax">Syntax</h2>

<p>Die angegebenen Werte für die <code>url()</code>, <code>url-prefix()</code> und <code>domain()</code> Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die <code>regexp()</code> Funktion <strong>müssen</strong> durch Anführungenzeichen umschlossen sein.</p>

<p>Für die <code>regexp()</code> Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein <code>.</code> (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also <code>\.</code>) und anschließend durch die CSS Regeln (also <code>\\.</code>).</p>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: css">@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* CSS Regeln hier werden angewandt auf:
     - Die Seite "http://www.w3.org/".
     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
     - Jede Seite, deren URL mit "https:" beginnt */

  /* macht die oben erwähnten Seiten wirklich hässlich */
  body {
    color: purple;
    background: yellow;
  }
}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Ursprünglich</a> in {{SpecName('CSS3 Conditional', '', '')}}, wurde <code>@document</code> nach Level 4 <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">verschoben</a>.</p>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.at-rules.document")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <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>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.</li>
</ul>