@namespace
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
@namespace ist eine At-Regel, die XML-Namespaces 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
/* Default namespace */
@namespace url("XML-namespace-URL");
@namespace "XML-namespace-URL";
/* Prefixed namespace */
@namespace prefix url("XML-namespace-URL");
@namespace prefix "XML-namespace-URL";
Beschreibung
Die definierten Namespaces können verwendet werden, um die universellen, Typen- und Attribut-Selektoren einzuschränken, sodass sie nur Elemente innerhalb dieses Namespace auswählen. Die @namespace-Regel ist im Allgemeinen nur nützlich, wenn man mit Dokumenten arbeitet, die mehrere Namespaces enthalten – beispielsweise HTML mit eingebettetem SVG oder MathML oder XML, das mehrere Vokabulare mischt.
Alle @namespace-Regeln müssen allen @charset- und @import-Regeln folgen und vor allen anderen At-Regeln und Style-Deklarationen in einem Stylesheet stehen.
@namespace kann verwendet werden, um den Standard-Namespace für das Stylesheet zu definieren. Wenn ein Standard-Namespace definiert ist, gelten alle universellen und Typen-Selektoren (aber nicht Attribute-Selektoren, siehe unten stehende Anmerkung) nur für Elemente in diesem Namespace.
Die @namespace-Regel kann auch verwendet werden, um ein Namespace-Präfix zu definieren. Wenn ein universeller, Typen- oder Attribut-Selektor mit einem Namespace-Präfix versehen ist, dann passt dieser Selektor nur, wenn der Namespace und der Name des Elements oder Attributs übereinstimmen.
In HTML werden bekannte Fremdelemente automatisch Namespaces zugewiesen. Das bedeutet, dass HTML-Elemente so wirken, als wären sie im XHTML-Namespace (http://www.w3.org/1999/xhtml), selbst wenn es kein xmlns-Attribut im Dokument gibt, und die <svg>- und <math>-Elemente erhalten ihre entsprechenden Namespaces (http://www.w3.org/2000/svg und http://www.w3.org/1998/Math/MathML).
Hinweis:
In XML hat ein Attribut, es sei denn, ein Präfix wird direkt darauf definiert (z.B., xlink:href), keinen Namespace. Mit anderen Worten, Attribute erben nicht den Namespace des Elements, auf dem sie sich befinden. Um dieses Verhalten abzubilden, gilt der Standard-Namespace in CSS nicht für Attribut-Selektoren.
Formale Syntax
@namespace =
@namespace <namespace-prefix>? [ <string> | <url> ] ;
<namespace-prefix> =
<ident>
Beispiele
Standard- und präfixierte Namespaces angeben
@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 |
Browser-Kompatibilität
Loading…