From 7846695685a9a36b48719282cbdeeedc83b1c4c8 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 21 Apr 2022 10:38:31 +0900
Subject: [PATCH] Add: Restrictions - Namespace

---
 docs/Restrictions.md | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/docs/Restrictions.md b/docs/Restrictions.md
index c0a6728..cd4eb0c 100644
--- a/docs/Restrictions.md
+++ b/docs/Restrictions.md
@@ -11,6 +11,7 @@
   * [DOM structure cannot be modified](#dom-structure-cannot-be-modified)
   * [Shadow DOM](#shadow-dom)
   * [XUL](#xul)
+  * [Namespace](#namespace)
 
 <!-- markdown-toc end -->
 
@@ -122,3 +123,42 @@ Example of legacy documents that will help.
 
 Another case.  
 Like [`<toolbar align="end"></toolbar>`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute/align), [`attributes`](https://udn.realityripple.com/docs/Archive/Mozilla/XUL/Attribute) is set and CSS of same property may not be appplied. (Ex. [`box-align: start`](https://udn.realityripple.com/docs/Web/CSS/box-align))
+
+### Namespace
+In older codes, the following [namespace](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) is commonly seen:
+
+```css
+@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+```
+
+However, it is [only applicable to XUL](https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces), so it is recommended to use with `prefix`.
+```css
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Use */
+xul|search-textbox {
+  border: 2px solid red !important;
+}
+html|input {
+  border: 2px solid green !important;
+}
+```
+
+If you want to limit the coverage to some pages, you can use [`@-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document):
+```css
+/* Main browser UI */
+@-moz-document url(chrome://browser/content/browser.xhtml) {
+  /* Your CSS */
+}
+
+/* Library UI */
+@-moz-document url("chrome://browser/content/places/places.xhtml") {
+  /* Your CSS */
+}
+
+/* PageInfo UI */
+@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") {
+  /* Your CSS */
+}
+```