Previewer test

dabblet.css

/**
 * Previewer test
 */

background: #f06;
background: linear-gradient(left bottom, 
	    hsla(340, 100%, 50%,.7), yellow);
background: url(http://placekitten.com/330/340);
content: '\2665';
min-width: 100px;
width: 2in;
transition-duration: 6s;
transition-duration: 1000ms;
transition-timing-function: cubic-bezier(.2,.6,.8,.8);
transition-timing-function: ease-in;
transform: rotate(45deg);
transform: rotate(-.125turn); /* negative angle */
font-family: Dabblet, 'Palatino Linotype', "Times New Roman", sans-serif;
font-family: fantasy; /* single font-family */
font: bold 100%/1.5 Monaco, Consolas, monospace;

dabblet.html

<img src="http://placekitten.com/330/340" alt="Awwww" />

&#x2665;

&hearts;

settings.json

{"view":"separate","prefixfree":"1","page":"css"}

BTW, it'd be cool if with code blocks like

transition-duration: 6s;

transition-duration: 1000ms;

The line that is overriden would have font-style: line-through like this:

transition-duration: 6s;

transition-duration: 1000ms;

Also, it'd be great for properties that are supported by different browsers, like in

background: #f06;
background: linear-gradient(left bottom, 
        hsla(340, 100%, 50%,.7), yellow);

to show somehow this fact. So, you'd know in what actual conditions the background would be overriden.

Maybe, like in your latest dribbles, show the browser icons near the popup with preview? Something like that would be useful.

The strikethrough would require actually parsing the code, which I don't want to do, for performance reasons.

As for browser support, I guess that's possible, but I'd need to hook onto an API to get the data, and I don't think one exists.

Well, for API: you can try to use the http://caniuse.com/js.php — it seems that all it's data is stored there and there is enough data for this task. However, it would be wise to contact them and ask if they can provide only the needed data in an easier form for you.

I don't like the idea of doing it only for the stuff caniuse has. If I do something like that, it should be for everything. Maybe if the W3C provides an API for its testsuite, which I think will eventually happen.

Ok I understood. Ah, another idea for a site, if I'd have some extra time, I'd consider creating and maintaing a site what could answer the question of “which browsers support this property or value”.

Well, sooner or later something would appear in the internets, would it from the W3C, caniuse, someone else or from me, I'd let you know if I'd stumble upon it :)