@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 definiert, die in einem CSS-Stylesheet verwendet werden sollen.

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 auf Elemente innerhalb dieses Namensraums zu beschränken. Die @namespace-Regel ist im Allgemeinen nur nützlich, wenn es um Dokumente mit mehreren Namensräumen geht – zum Beispiel HTML mit Inline-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 Stildeklarationen in einem Stylesheet vorangehen.

@namespace kann verwendet werden, um den Standard-Namensraum für das Stylesheet zu definieren. Wenn ein Standard-Namensraum definiert ist, gelten alle Universellen- und Typselektoren (aber nicht Attributselektoren, 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 Attributselektor mit einem Namensraum-Präfix versehen ist, dann passt dieser Selektor nur, wenn der Namensraum und der Name des Elements oder Attributs übereinstimmt.

In HTML werden bekannten fremden Elementen automatisch Namensräume zugewiesen. Das bedeutet, dass HTML-Elemente so agieren, als wären sie im XHTML-Namensraum (http://www.w3.org/1999/xhtml), selbst wenn es im Dokument kein xmlns-Attribut gibt, und die <svg>- und <math>-Elemente ihre richtigen Namensräume zugewiesen bekommen (http://www.w3.org/2000/svg bzw. http://www.w3.org/1998/Math/MathML).

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

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

Spezifikation von Standard- und Präfix-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