All geek questions in one place

Adding a namespace to css should force the IDE to check the code?

In the CSS file using the Eclipse IDE by adding the header:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

should force eclipse to check elements for errors? (because he does not).

If not, what's the difference in adding this header or not?

+4
source share
1 answer

The css @namespace module is for creating styles that apply only to specific namespaces. This is especially useful for applying CSS styles to XML documents. You can also use it with xhtml and html5 to apply styles only to documents and elements with specific 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>

Download this in Firefox 4 and it looks like this:

http://i51.tinypic.com/295pt86.png

Pay attention to the opening html tag: <html xmlns="http://www.w3.org/1999/xhtml" > . It has an xmlns attribute. Because of this, CSS rules matching this namespace work in this document. The text is red, underlined and 20pt. Note, however, that the text is NOT italic. What for? A style rule for italic paragraphs applies 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>

Since the html tag did not have an xmlns attribute that pointed to the created namespace at http://www.w3.org/20X6/superxhtml , this style rule was ignored.

Now you might think that changing xmlns in the html tag to the value http://www.w3.org/20X6/superxhtml will cause the item to be black and italic. However, it seems that all browsers that support the CSS @namespace currently assume that all xhtml / html documents are in the http://www.w3.org/1999/xhtml namespace and create them accordingly even if you try to change it.

Because of this, @namespace may not seem practical, but it is useful if you share 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 will 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, the 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 download the last 2 files in Firefox 4. namespacetest. html looks like this:

http://i56.tinypic.com/2zeca44.png

And namespacetest. xml is as follows:

http://i52.tinypic.com/foq5o3.png

The first style rule in namespacecss.css applies only to xhtml, so the xhtml paragraph is red. The second style rule applies only to our custom namespace, the “article,” so the paragraph in the XML file is blue. And the third rule applies to all namespaces, so in both examples the text is 20pt.

Further reading:

Thanks for asking this question! I learned a lot by answering it.

+5
source

Source: https://habr.com/ru/post/1347595/

More articles:


All Articles