xml - Adding namespace to a css should make the IDE validate the code? -
in css file, using eclipse ide, adding header:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); should make eclipse check elements errors? (becouse it's not doing it).
if not, what's difference of adding header or not?
the @namespace module in css creating styles apply namespaces. it's useful applying css styles xml documents. can use xhtml , html5 well, apply styles documents , elements xml namespaces (defined xmlns attribute, in html tag).
for example, take @ 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> <!-- stylesheet defines namespace prefix called "xhtml", , uses style p elements in namespace --> <style type="text/css"> @namespace xhtml "http://www.w3.org/1999/xhtml"; xhtml|p { color: red; } </style> <!-- stylesheet defines style apply imaginary "superhtml" namespace. shouldn't work xhtml elements --> <style type="text/css"> @namespace "http://www.w3.org/20x6/superxhtml"; p { font-style: italic; } </style> <!-- stylesheet uses namespace url no namespace prefix, styles apply namespace. --> <style type="text/css"> @namespace xhtml "http://www.w3.org/1999/xhtml"; p { text-decoration: underline; } </style> <!-- stylesheet uses no namespace declaration, applies document includes it. --> <style type="text/css"> p { font-size: 20pt; } </style> </head> <body> <p>if text red, underlined, , 20pt, you're using http://www.w3.org/1999/xhtml namespace.</p> </body> </html> load in firefox 4, , looks this:
http://i51.tinypic.com/295pt86.png
notice opening html tag: <html xmlns="http://www.w3.org/1999/xhtml" >. has xmlns attribute. because of that, css rules match namespace work in document. text red, underlined, , 20pt. notice however, text not italic. why? style rule italic paragraphs applied different namespace:
<!-- stylesheet defines style apply imaginary "superhtml" namespace. shouldn't work xhtml elements --> <style type="text/css"> @namespace "http://www.w3.org/20x6/superxhtml"; p { font-style: italic; } </style> because html tag didn't have xmlns attribute pointed made-up namespace @ http://www.w3.org/20x6/superxhtml, style rule ignored.
now, might think changing xmlns in html tag value "http://www.w3.org/20x6/superxhtml" make paragraph black , italic. however, seems browsers support @namespace css declaration assume xhtml/html documents in http://www.w3.org/1999/xhtml namespace, , style them accordingly, if try change it.
because of this, @namespace might not seem useful, is useful if sharing stylesheet between multiple xml documents, or between xhtml document , xml document, , want have different styles 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 text red, you're using http://www.w3.org/1999/xhtml namespace.</p> </body> </html> finally, 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 blue</p> </document> now, load last 2 files firefox 4. namespacetest.html looks this:
http://i56.tinypic.com/2zeca44.png
and namespacetest.xml looks this:
http://i52.tinypic.com/foq5o3.png
the first style rule in namespacecss.css applies xhtml, xhtml paragraph red. second style rule applies our custom namespace, "article", paragraph in xml file blue. , third rule applies namespaces, text 20pt in both examples.
further reading:
- css3 namespaces module - w3c candidate recommendation
- @namespace reference @ sitepoint.com
- blog post css namespaces anne van kesteren
thanks asking question! learned lot while answering it.
Comments
Post a Comment