CSS namespace for feature toggling

dabblet.css

/*  CSS namespace for feature toggling */
@namespace borders "http://www.w3.org/1999/xhtml";
@namespace darkness "http://www.w3.org/1999/xhtml";
@namespace layout "http://www.w3.org/1999/xhtml";
/* delete 'DELETEME': */
@namespace DELETEMEeffects "http://www.w3.org/1999/xhtml";
/* cripple implicit namespace URL for breaking defaults: */
@namespace "http://www.w3.org/1999/xhtml";
body { font-family: Georgia, serif; }
code { font-family: monospace, monospace; outline: 1px dotted; }
borders|p { border: 10px solid red; }
darkness|body { background-color: #000; color: #ccc; }
darkness|p { background-color: #666; border-color: #999; }
layout|p { padding: 1em; border-width: 0.3em;}
layout|body { max-width: 30em; margin: 0 auto; }
effects|p { animation: x 5s infinite alternate linear; transform-origin: top center }
@keyframes x {	from { transform: scale(1) } to { transform: scale(1.5) } }

dabblet.html

<p>Exploiting CSS <code>@namespace</code> for getting centralized togglable "style settings" without need for coments or imports.

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}