Add: Restrictions - Namespace

This commit is contained in:
alstjr7375 2022-04-21 10:38:31 +09:00
parent 31a88a7020
commit 7846695685

View file

@ -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 */
}
```