Example 1 — the CSS Counter Styles Module

dabblet.css

/* Example 1 — the CSS Counter Styles Module */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
	width: 80%;
	max-width: 42em;
	margin: auto;
	font: 1em/1.5 Georgia, serif;
}
h1 {
	font-weight: normal;
}
hr,
footer {
	margin: 2.5em 0;
}
pre {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
}
pre,
code,
samp,
var {
	word-wrap: break-word;
	white-space: pre-wrap;
}
figure {
	margin-left: 0;
	margin-right: 0;
}
figcaption {
	clear: left;
	padding-top: 1.5em;
}
.semantic-list {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
.semantic-list li {
	position: relative;
}
.semantic-list span {
	position: absolute;
	left: -3em;
	width: 2em;
	text-align: right
}
.sidenote {
	font-size: 82.5%;
	font-style: italic;
}

dabblet.html

<h1>Example 1 — the CSS Counter Styles Module</h1>

<p>The CSS3 Lists module defines counters based on seven algorithms:</p>

<ul>
<li><del><code>repeating</code></del> <code>cyclic</code></li>
<li><del><code>non-repeating</code></del> <code>fixed</code></li>
<li><code>symbolic</code></li>
<li><code>alphabetic</code></li>
<li><code>numeric</code></li>
<li><code>additive</code></li>
<li><code>override</code></li>
</ul>

<p>Using these in a new <code>@counter-style</code> declaration you can replicate all of the CSS 2 <code>list-item-type</code> values, plus Firefox’s extra values. In addition this allows you to <em>define your own list counters</em>, for example:</p>

<blockquote>
<p>A “dice” counter style can be defined as:</p>
<pre><code>@counter-style dice {
  type: additive;
  additive-symbols: 6 '⚅', 5 '⚄', 4 '⚃', 3 '⚂', 2 '⚁', 1 '⚀';
  suffix: '';
}</code></pre>
<p>It will then produce lists that look like:</p>
<ul class="semantic-list">
<li><span>⚀</span> One</li>
<li><span>⚁</span> Two</li>
<li><span>⚂</span> Three</li>
<li>…</li>
<li><span>⚅⚄</span> Eleven</li>
<li><span>⚅⚅</span> Twelve</li>
<li><span>⚅⚅⚀</span> Thirteen</li>
</ul>
<footer>— <cite><a href="http://dev.w3.org/csswg/css3-lists/#symbolic">CSS Lists and Counters Module Level 3</a></cite></footer>
</blockquote>

<aside class="sidenote"><p>The spec also defines <strong>all</strong> the present CSS 2 <code>list-item-type</code> values, although the ones not in CSS2.1 are currently “at risk”.</p></aside>

<hr />

<ul>
	<li><a href="http://dev.w3.org/csswg/css3-lists/">CSS Lists and Counters Module Level 3</a></li>
	<li><a href="http://dabblet.com/gist/4193014" title="dabblet.com">This example on Dabblet</a></li>
</ul>

<footer>From <a href="http://thewebevolved.com/"><cite>Beginning HTML5 and CSS3 — The Web Evolved</cite></a>, Chapter 13</footer>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"result"}