@namespace CSS at-rule
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
@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("/proxy/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 Namensräume können verwendet werden, um die universellen, Typ- und Attribut- Selektoren zu beschränken, sodass nur Elemente innerhalb dieses Namensraums ausgewählt werden. Die @namespace-Regel ist im Allgemeinen nur nützlich, wenn mit Dokumenten gearbeitet wird, die mehrere Namensräume enthalten — wie HTML mit eingebettetem SVG oder MathML, oder XML, das mehrere Vokabularien mischt.
Alle @namespace-Regeln müssen allen @charset- und @import-Regeln folgen und allen anderen At-Regeln und Stildeklarationen in einem Stylesheet vorangehen.
Mit @namespace kann der Standard-Namespace für das Stylesheet definiert werden. Wenn ein Standard-Namespace definiert wird, 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 Namespace-Präfix zu definieren. Wenn ein universeller-, Typ- oder Attribut-Selektor mit einem Namespace-Präfix versehen ist, dann passt dieser Selektor nur, wenn der Namensraum und der Name des Elements oder Attributs übereinstimmen.
In HTML werden bekannte Fremdelemente automatisch mit Namensräumen versehen. Das bedeutet, dass HTML-Elemente so gehandhabt werden, als befänden sie sich im XHTML-Namensraum (http://www.w3.org/1999/xhtml), auch wenn kein xmlns-Attribut im gesamten Dokument vorhanden ist, und die <svg>- und <math>-Elemente werden ihren jeweiligen Namensräumen zugewiesen (http://www.w3.org/2000/svg und http://www.w3.org/1998/Math/MathML).
Hinweis:
In XML hat ein Attribut, sofern es nicht direkt mit einem Präfix versehen ist (z.B., xlink:href), keinen Namensraum. Mit anderen Worten, Attribute erben nicht den Namensraum des Elements, auf dem sie sich befinden. Um dieses Verhalten anzupassen, gilt der Standard-Namespace in CSS nicht für Attribut-Selektoren.
Formale Syntax
@namespace =
@namespace <namespace-prefix>? [ <string> | <url> ] ;
<namespace-prefix> =
<ident>
Beispiele
Spezifizieren von Standard- und präfixierten Namensräumen
@namespace url("/proxy/http/www.w3.org/1999/xhtml");
@namespace svg url("/proxy/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
| Spezifikation |
|---|
| CSS Namespaces Module Level 3 # declaration |