diff --git a/files/en-us/glossary/namespace/index.md b/files/en-us/glossary/namespace/index.md index 9bca7f21de90e48..05ac87ed8d771b8 100644 --- a/files/en-us/glossary/namespace/index.md +++ b/files/en-us/glossary/namespace/index.md @@ -8,8 +8,14 @@ page-type: glossary-definition Namespace is a context for identifiers, a logical grouping of names used in a program. Within the same context and same scope, an identifier must uniquely identify an entity. -In an operating system a directory is a namespace. Each file or subdirectory has a unique name, but one file may use the same name multiple times. +In an operating system, a directory is a namespace. Each file or subdirectory within a directory has a unique name; the same name can be used multiple times across subdirectories. + +In HTML, CSS, and XML-based languages, a namespace is the explicitly declared or implied dialect to which an element (or attribute) belongs. ## See also +- [Namespaces crash course](/en-US/docs/Web/SVG/Namespaces_Crash_Course) +- [CSS namespaces](/en-US/docs/Web/CSS/CSS_namespaces) module +- CSS {{CSSXref("@namespace")}} +- [`Document.createElementNS()`](/en-US/docs/Web/API/Document/createElementNS) method - [Namespace](https://en.wikipedia.org/wiki/Namespace) on Wikipedia diff --git a/files/en-us/web/css/css_namespaces/index.md b/files/en-us/web/css/css_namespaces/index.md index cd45549387e7122..cc9982efa9ad708 100644 --- a/files/en-us/web/css/css_namespaces/index.md +++ b/files/en-us/web/css/css_namespaces/index.md @@ -7,7 +7,13 @@ browser-compat: css.at-rules.namespace {{CSSRef}} -The **CSS namespaces** allows authors to specify [XML namespaces](/en-US/docs/Web/SVG/Namespaces_Crash_Course) in CSS. +The **CSS namespaces** module defines the syntax for using {{glossary("namespace", "namespaces")}} in CSS. + +CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces. + +The [`@namespace`](/en-US/docs/Web/CSS/@namespace) at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `` element isn't limited to HTML. You may want to style the ``s within your SVGs differently from the links in your HTML. You also will likely want to ensure that {{domxref("Document.querySelectorAll", "querySelectorAll(\"a\")")}} selects the right kind of element. Namespacing can help. + +The `@namespace` rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language. ## Reference @@ -15,6 +21,36 @@ The **CSS namespaces** allows authors to specify [XML namespaces](/en-US/docs/We - {{cssxref("@namespace")}} +## Guides + +- [Namespaces crash course](/en-US/docs/Web/SVG/Namespaces_Crash_Course) + + - : Deep dive into what a namespace is and how they are used in XML and XML-based markup languages. + +## Related concepts + +- CSS [namespace separator (`|`)](/en-US/docs/Web/CSS/Namespace_separator) combinator +- CSS [type selectors](/en-US/docs/Web/CSS/Type_selectors) +- CSS [universal selector](/en-US/docs/Web/CSS/Universal_selectors) +- {{DOMXRef("CSSNamespaceRule")}} interface + - {{DOMXRef("CSSNamespaceRule.namespaceURI")}} property + - {{DOMXRef("CSSNamespaceRule.prefix")}} property +- [`Document.createAttributeNS()`](/en-US/docs/Web/API/Document/createAttributeNS) method +- [`Document.createElementNS()`](/en-US/docs/Web/API/Document/createElementNS) method +- [`Document.getElementsByTagNameNS()`](/en-US/docs/Web/API/Document/getElementsByTagNameNS) method +- [`Element.getAttributeNodeNS()`](/en-US/docs/Web/API/Element/getAttributeNodeNS) method +- [`Element.getAttributeNS()`](/en-US/docs/Web/API/Element/getAttributeNS) method +- [`Element.getElementsByTagNameNS()`](/en-US/docs/Web/API/Element/getElementsByTagNameNS) method +- [`Element.hasAttributeNS()`](/en-US/docs/Web/API/Element/hasAttributeNS) method +- [`Element.namespaceURI`](/en-US/docs/Web/API/Element/namespaceURI) property +- [`Element.removeAttributeNS()`](/en-US/docs/Web/API/Element/removeAttributeNS) method +- [`Element.setAttributeNS()`](/en-US/docs/Web/API/Element/setAttributeNS) method +- [`Element.setAttributeNodeNS()`](/en-US/docs/Web/API/Element/setAttributeNodeNS) method +- [`NamedNodeMap.getNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/getNamedItemNS) method +- [`NamedNodeMap.removeNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/removeNamedItemNS) method +- [`NamedNodeMap.setNamedItemNS()`](/en-US/docs/Web/API/NamedNodeMap/setNamedItemNS) method +- {{glossary("Namespace")}} glossary term + ## Specifications {{Specifications}} @@ -22,3 +58,11 @@ The **CSS namespaces** allows authors to specify [XML namespaces](/en-US/docs/We ## Browser compatibility {{Compat}} + +## See also + +- [``](/en-US/docs/Web/SVG/Element/a#example) SVG element +- [CSS `url()` function](/en-US/docs/Web/CSS/url) +- [CSS at-rules](/en-US/docs/Web/CSS/At-rule) +- [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions) +- [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)