Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 2cc1469154
Fetching contributors…

Cannot retrieve contributors at this time

220 lines (116 sloc) 10.893 kb
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Spacing Out on CSS Namespaces | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="One of my favourite past times is opening up a random email from the CSS mailing list and going down a rabbit hole. On one rainy day, I found myself &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/spacing-out-on-css-namespaces.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/book-reviews-for-april-2010.html" title="Book Reviews for April 2010">❬</a>
<a class="next" href="/notes-from-javascript-n00b.html" title="Notes from a JavaScript n00b">❭</a>
</nav>
<header>
<time datetime="2010-05-06T00:00:00-07:00" pubdate><span class='month'>May</span> <span class='day'>06</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/spacing-out-on-css-namespaces.html">Spacing Out on CSS Namespaces</a></h1>
</header>
<div class="entry-content"><p>One of my favourite past times is opening up a random email from the <a href="http://lists.w3.org/Archives/Public/www-style/">CSS mailing list</a> and going down a rabbit hole. On one rainy day, I found myself staring at the specifications for <a href="http://www.w3.org/TR/css3-namespace/#intro">CSS Namespaces module</a>. </p>
<p></p>
<h3>Namespaces</h3>
<p>As Wikipedia defines it, a <a href="http://en.wikipedia.org/wiki/XML_namespace">namespace</a> provides a list of uniquely identifiable elements and attributes in an XML document. Here is how you would define the namespace of an XHTML document:</p>
<pre><code>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;</code></pre>
<p>The URL in the code above is simply the name of that namespace and does not refer to an actual location online. Browsers do not use or process URL. It is just an easy way to understand what that namespace is referring to when someone is reading the source code of the document. </p>
<h3>CSS Namespaces</h3>
<p>In 2007, Bert Bos <a href="http://xhtml.com/en/css/conversation-with-css-3-team/">explained why CSS Namespaces were introduced</a>:
<blockquote><p>The Namespaces module is very small, very simple, and probably rarely needed, but just because it is simple, it doesn&#8217;t cost much to add it to CSS. Indeed, many browsers have supported it for a long time already.</p>
<p>The only thing it defines is how to declare an XML Namespace prefix in CSS. That is needed if you want to use selectors that only match elements in a certain namespace. </p></blockquote>
<p>For example, SVG shares some common elements (e.g. <code>&lt;a&gt;</code>) and <a href="http://www.w3.org/TR/SVG/styling.html#PropertiesFromCSS2">CSS properties</a> with HTML with XML and HTML. If you are using the same stylesheet for both HTML and SVG documents, then it is best to separate out the styles for SVG and HTML to prevent any overlap.</p>
<h3>Usage</h3>
<ol>
<li><p>Declare your XHTML doctype and define a namespace:</p>
<pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;&gt;</code></pre>
</li>
<li><p>In your style sheet, declare the default namespace for the CSS rules:</p>
<pre><code>@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg"; </code>
</pre>
</li>
<li><p>Use the rules specific to each namespace. If you have declared the above namespaces, you can scope CSS rules to only apply to SVG elements which have the same namespace as above:</p><pre><code>svg|a { color: white; } </code></pre><p>All the other rules will be applied to HTML elements by default. </p></li>
</ol>
<h3>Using it with HTML 5</h3>
<p><a href="http://hsivonen.iki.fi/html5-parser-improvements/">HTML5 allows inline SVG and MathML</a>, which means you can style HTML, inline SVG and MathML elements using the same stylesheet.</p>
<p>The advantage of HTML5 parsing is that, HTML5 parsers should <a href="http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Syntax_and_Parsing">implicitly assign namespaces to known vocabularies (so far SVG, XML, and MathML)</a>, if the document is <a href="http://wiki.whatwg.org/wiki/HTML_vs._XHTML">HTML</a> (and <em>not</em> XHTML). This means, you do not have to use <code>xmlns</code> to explicitly specify the namespace for SVG or MathML elements in your HTML5 document.</p>
<p>The bad news is, only <a href="http://nightly.mozilla.org/">Firefox nightly builds</a> with <code>html5.enabled = true</code> set on <code>about:config</code> parse and recognize inline SVG or MathML.</p>
<p>Here is a <a href="http://nimbupani.com/demo/namespaces/index.html">demo of using CSS Namespaces for a HTML5 page with inline SVG</a> (mind you, it only works on Firefox nightlies with html5 parser enabled). If you are one of the 99.9% of the population that does not use Firefox nightlies, this is how it is supposed to look:</p>
<p><img src="http://nimbupani.com/files/css3namespace-screenshot.png" alt="screenshot of css3 namespaces demo"></p>
<p>The dinosaur on the left is an inline SVG image which uses styles defined in the SVG namespace. <p>
<p>As the spec mentions, it is not often you will find use for it. Though, <a href="http://www.iecss.com/firefox-3.6.3.css">Firefox user agent style sheet</a> uses namespaces to separate the default styles for web pages from those for Firefox UI (which uses <a href="http://en.wikipedia.org/wiki/XUL">XUL</a>).</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-05-06T00:00:00-07:00" pubdate><span class='month'>May</span> <span class='day'>06</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-05-06-spacing-out-on-css-namespaces.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/spacing-out-on-css-namespaces.html';
var disqus_identifier = 'http://nimbupani.com/spacing-out-on-css-namespaces.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.