In a CSS file, using Eclipse IDE, adding the header:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
should make eclipse check the elements for errors? (becouse it's not doing it).
If not, what's the difference of adding that header or not?
The @namespace module in css is for creating styles that apply only to certain namespaces. It's especially useful for applying CSS styles to XML documents. You can use it with xhtml and html5 as well, to apply styles only to documents and elements with certain xml namespaces (defined by the xmlns attribute, usually in the html tag).
For example, take a look at the following xhtml document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>@namespace examples</title>
<!-- This stylesheet defines an namespace prefix called "xhtml", and uses it to style all p elements in that namespace -->
<style type="text/css">
@namespace xhtml "http://www.w3.org/1999/xhtml";
xhtml|p
{
color: Red;
}
</style>
<!-- This stylesheet defines style that apply to an imaginary "superhtml" namespace. It shouldn't work for xhtml elements -->
<style type="text/css">
@namespace "http://www.w3.org/20X6/superxhtml";
p
{
font-style: italic;
}
</style>
<!-- This stylesheet uses a namespace URL with no namespace prefix, so all its styles apply to that namespace. -->
<style type="text/css">
@namespace xhtml "http://www.w3.org/1999/xhtml";
p
{
text-decoration: underline;
}
</style>
<!-- This stylesheet uses no namespace declaration, it applies to any document that includes it. -->
<style type="text/css">
p
{
font-size: 20pt;
}
</style>
</head>
<body>
<p>If this text is red, underlined, and 20pt, then you're using the http://www.w3.org/1999/xhtml namespace.</p>
</body>
</html>
Load that in Firefox 4, and it looks like this:
Notice the opening html tag: <html xmlns="http://www.w3.org/1999/xhtml" >. It has an xmlns attribute. Because of that, the CSS rules that match that namespace work in this document. The text is red, underlined, and 20pt. Notice however, that the text is NOT italic. Why? The style rule for italic paragraphs applied to a different namespace:
<!-- This stylesheet defines style that apply to an imaginary "superhtml" namespace. It shouldn't work for xhtml elements -->
<style type="text/css">
@namespace "http://www.w3.org/20X6/superxhtml";
p
{
font-style: italic;
}
</style>
Because the html tag didn't have an xmlns attribute that pointed to the made-up namespace at http://www.w3.org/20X6/superxhtml, this style rule was ignored.
Now, you might think that changing the xmlns in the html tag to the value "http://www.w3.org/20X6/superxhtml" would make the paragraph black and italic. However, it seems that all browsers that support the @namespace CSS declaration currently assume all xhtml/html documents are in the http://www.w3.org/1999/xhtml namespace, and style them accordingly, even if you try to change it.
Because of this, @namespace might not seem useful, but it is useful if you are sharing a stylesheet between multiple xml documents, or between an xhtml document and an xml document, and you want to have different styles for each.
To demonstrate, I'll create 3 files:
First, namespacecss.css:
@namespace xhtml "http://www.w3.org/1999/xhtml";
@namespace article "http://www.example.com/namespaces/article";
xhtml|p
{
color: Red;
}
article|p
{
color: Blue;
}
p
{
font-size: 20pt;
}
Next, namespacetest.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>@namespace examples</title>
<link type="text/css" href="namespacecss.css" rel="Stylesheet" />
</head>
<body>
<p>If this text is red, then you're using the http://www.w3.org/1999/xhtml namespace.</p>
</body>
</html>
Finally, an XML file, namespacetest.xml:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="namespacecss.css"?>
<document xmlns="http://www.example.com/namespaces/article">
<p>This should be blue</p>
</document>
Now, load the last 2 files into Firefox 4. namespacetest.html looks like this:
http://i56.tinypic.com/2zeca44.png
And namespacetest.xml looks like this:
The first style rule in namespacecss.css only applies to xhtml, so the xhtml paragraph is red. The second style rule only applies to our custom namespace, "article", so the paragraph in the xml file is blue. And the third rule applies to all namespaces, so the text is 20pt in both examples.
Further reading:
Thanks for asking this question! I learned a lot while answering it.
