@namespace

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

@namespace ist eine At-Regel, die XML-Namensräume zur Verwendung in einem CSS-Stylesheet definiert.

Probieren Sie es aus

@namespace svg url("http://www.w3.org/2000/svg");

a {
  color: orangered;
  text-decoration: underline dashed;
  font-weight: bold;
}

svg|a {
  fill: blueviolet;
  text-decoration: underline solid;
  text-transform: uppercase;
}

<p>
  <a href="#">This is an ordinary HTML link</a>
</p>

<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="15">This is a link created in SVG</text>
  </a>
</svg>

Syntax

css

/* Default namespace */
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/* Prefixed namespace */
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

Die definierten Namensräume können verwendet werden, um die universellen, Typ- und Attribut- Selektoren nur auf Elemente innerhalb dieses Namensraums zu beschränken. Die @namespace-Regel ist im Allgemeinen nur nützlich, wenn man mit Dokumenten arbeitet, die mehrere Namensräume enthalten – wie HTML mit eingebettetem SVG oder MathML oder XML, das mehrere Vokabulare mischt.

Alle @namespace-Regeln müssen allen @charset- und @import-Regeln folgen und allen anderen At-Regeln und Stilerklärungen in einem Stylesheet vorausgehen.

@namespace kann verwendet werden, um den Standardnamensraum für das Stylesheet zu definieren. Wenn ein Standardnamensraum definiert ist, gelten alle universellen und Typ-Selektoren (aber nicht Attribut-Selektoren, siehe Hinweis unten) nur für Elemente in diesem Namensraum.

Die @namespace-Regel kann auch verwendet werden, um ein Namensraum-Präfix zu definieren. Wenn ein universeller, Typ- oder Attribut-Selektor mit einem Namensraum-Präfix versehen ist, passt dieser Selektor nur, wenn der Namensraum und der Name des Elements oder Attributs übereinstimmen.

In HTML werden bekannte Fremdelemente automatisch Namensräumen zugewiesen. Das bedeutet, dass HTML-Elemente so handeln, als ob sie sich im XHTML-Namensraum (http://www.w3.org/1999/xhtml) befinden, selbst wenn es nirgends im Dokument ein xmlns-Attribut gibt, und die <svg>- und <math>-Elemente werden ihren richtigen Namensräumen zugewiesen (http://www.w3.org/2000/svg bzw. http://www.w3.org/1998/Math/MathML).

Hinweis: In XML hat ein Attribut keinen Namensraum, es sei denn, es wird direkt auf dem Attribut ein Präfix definiert (z.B., xlink:href). Mit anderen Worten, Attribute erben nicht den Namensraum des Elements, auf dem sie sich befinden. Um dieses Verhalten nachzubilden, gilt der Standardnamensraum in CSS nicht für Attribut-Selektoren.

Formale Syntax

@namespace = 
  @namespace <namespace-prefix>? [ <string> | <url> ] ;  

<namespace-prefix> = 
  <ident>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Angabe von Standard- und präfixierten Namensräumen

css

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
a {
}

/* This matches all SVG <a> elements */
svg|a {
}

/* This matches both XHTML and SVG <a> elements */
*|a {
}

Spezifikationen

Specification
CSS Namespaces Module Level 3 # declaration