@namespace
The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.
Overview
The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| The CSSNamespaceRule interface describes an object representing a single CSS at-rule. | 47 | 12 | 53 | 10.1 | 47 | 10.3 |
| The read-only namespaceURI property of the CSSNamespaceRule returns a string containing the text of the URI of the given namespace. | 47 | 12 | 59 | 10.1 | 47 | 10.3 |
| The read-only prefix property of the CSSNamespaceRule returns a string with the name of the prefix associated to this namespace. If there is no such prefix, it returns an empty string. | 47 | 12 | 59 | 10.1 | 47 | 10.3 |
| Other | ||||||
| @namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet. | 1 | 12 | 1 | 3 | 18 | 1 |
Syntax
@namespace svg url(http://www.w3.org/2000/svg);
@namespace url(http://www.w3.org/1999/xhtml);
svg|a {
fill: blue;
}Live demo
Use cases
Using @namespace
The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features