@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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

@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