CSS ruler (bug-free in Chrome)

dabblet.css

/*	CSS ruler (bug-free in Chrome)	*/
figure {
	margin: 3em;
	width: 500px;
	height: 20px;
	background: 
		linear-gradient(left, transparent 19px, rgba(255, 255, 255, .6) 19px) repeat-x,
		linear-gradient(left, transparent 4px,  rgba(255, 255, 255, .4) 4px) repeat-x,
		url(/img/noise.png),
		linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
	background-size: 20px 10px, 5px 5px, auto, auto;
	transition: 1s ease;
}

div {
	margin: 3em;
	width: 500px;
	height: 20px;
	background: 
		repeating-linear-gradient(left, transparent, transparent 19px, rgba(255,255,255,.6) 19px, rgba(255,255,255,.6) 20px) left top no-repeat,
		repeating-linear-gradient(left, transparent, transparent 4px, rgba(255,255,255,.4) 4px, rgba(255,255,255,.4) 5px) left top no-repeat,
		url(/img/noise.png),
		linear-gradient(hsla(200, 10%, 20%, .8), hsl(200, 10%, 20%));
	background-size: 100% 10px, 100% 5px, auto, auto;
	transition: 1s ease;
}

dabblet.html

<figure></figure>
<div></div>

settings.json

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