Compat lists

dabblet.css

/**
 * Compat lists
 */

dl.compat-list {
	position: relative;
	margin: 0;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1;
}

@keyframes show {
	from { transform: scale(0); opacity: 0; }
}

dl.compat-list dd > dl.compat-list {
	display: none;
	position: absolute;	background: white;
	width: 100px;
	padding: 10px 7px 10px 15px;
	border-radius: 10px;
	margin: -35px 0 0 15px;
	box-shadow: 2px 2px 5px rgba(0,0,0,.2);
	transform-origin: 0 1em;
}

dl.compat-list dd:hover > dl.compat-list,
dl.compat-list dt:hover + dd > dl.compat-list,
dl.compat-list dd:focus > dl.compat-list,
dl.compat-list dt:focus + dd > dl.compat-list {
	display: block;
	animation: show .3s cubic-bezier(.2,1.2,.7,1.2);
}

	dl.compat-list dd > dl.compat-list:before,
	dl.compat-list dt + dd > dl.compat-list:before {
		content: '';
		position: absolute;
		left: -10px;
		top: 20px;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-right-color: white;
		border-left: 0;
	}

dl.compat-list dt {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(http://docs.webplatform.org/w/skins/webplatform/images/cloud.svg) no-repeat center;
	margin: 0;
}
		
	dl.compat-list > dt > span {
		display: none;
		position: absolute;
		top: 35px;
		left: 0;
		z-index: 1;
		padding: .3em .5em;
		border-radius: .3em;
		margin-left: .2em;
		background: #694D9F;
		box-shadow: 1px 1px 5px rgba(0,0,0,.3);
		color: white;
		white-space: pre;
		transform-origin: .5em 0;
		font-weight: bold;
		line-height: 1.3;
	}
	
		dl.compat-list > dt > span:before {
			content: '';
			position: absolute;
			top: -.3em;
			left: .4em;
			width: 0;
			height: 0;
			border: 0.5em solid transparent;
			border-bottom-color: #694D9F;
			border-top: 0;
		}
		
		dl.compat-list > dt > span:after {
			xfont-style: italic;
			font-weight: normal;
			font-size: smaller;
		}
		
		dl.compat-list > dt.Supported > span:after {
			content: '\ASupported';
		}
		
		dl.compat-list > dt.Unsupported > span:after {	
			content: '\AUnsupported';
		}
		
		dl.compat-list > dt.Partial > span:after {
			content: '\APartial support';
		}
		
		dl.compat-list > dt.Unknown > span:after {
			content: '\AUnknown';
		}
	
	dl.compat-list > dt:hover > span {
		display: block;
		animation: show .3s cubic-bezier(.2,1.2,.7,1.2);	
	}

	dl.compat-list dt:before {
		content: '';
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: no-repeat center;
	}
	
	dl.compat-list dt.chrome:before,
	dl.compat-list dt.and_chr:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/chrome.png');
	}
	
	dl.compat-list dt.firefox:before,
	dl.compat-list dt.and_ff:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/firefox.png');
	}
	

	dl.compat-list dt.ie:before,
	dl.compat-list dt.ie_mob:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/ie.png');
		background-position: 40% 50%;
	}
	
	dl.compat-list dt.opera:before,
	dl.compat-list dt.op_mini:before,
	dl.compat-list dt.op_mob:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/opera.png');
	}
	
	dl.compat-list dt.safari:before,
	dl.compat-list dt.ios_saf:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/safari.png');
	}
	
	dl.compat-list dt.mobiles:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/mobile.png');
	}
	
	dl.compat-list dt.android:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/android.png');
	}
	
	dl.compat-list dt.bb:before {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/browsers/blackberry.png');
	}

dl.compat-list dd {
	display: inline-block;
	position: relative;
	top: -12px;
	width: 13px; height: 13px;
	margin: 0 0 0 -15px;
	border-radius: 50%;
	box-shadow: 1px 1px 3px rgba(0,0,0,.3), 0 1px 1px white inset;
	background: #f9f7f3 no-repeat center;
	background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/questionmark.svg');
	background-size: 8px auto;
	font-size: 0;	line-height: 0;
	color: transparent;
}
	
	dl.compat-list dl.compat-list dd {
		margin-right: 10px;
	}

	dl.compat-list dd.Unsupported {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/x.svg');
	}
	
	dl.compat-list dd.Partial {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/warning.svg');
	}
	
	dl.compat-list dd.Supported {
		background-image: url('http://docs.webplatform.org/w/skins/webplatform/images/checkmark.svg');
	}


body {
	background: #f9f7f3;
	margin: 50px;
}

dabblet.html

<dl class="compat-list">
   <dt class="Supported chrome"><span>Chrome</span></dt>
   <dd class="Supported">Supported</dd>

   <dt class="Supported firefox"><span>Firefox</span></dt>
   <dd class="Supported">Supported</dd>

   <dt class="Unsupported ie"><span>IE</span></dt>
   <dd class="Unsupported">Supported</dd>

   <dt class="Partial opera"><span>Opera</span></dt>
   <dd class="Partial">Supported</dd>

   <dt class="Unknown safari"><span>Safari</span></dt>
   <dd class="Unknown">Supported</dd>

   <dt class="Partial mobiles"><span>Mobiles</span></dt>
   <dd class="Partial">Partial
      <dl class="compat-list">
         <dt class="Supported android"><span>Android Browser</span></dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported bb"><span>Blackberry Browser</span></dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported and_chr"><span>Chrome for Android</span></dt>
         <dd class="Supported">Supported</dd>

         <dt class="Supported and_ff"><span>Firefox for Android</span></dt>
         <dd class="Supported">Supported</dd>

         <dt class="Unsupported ie_mob"><span>IE Mobile</span></dt>
         <dd class="Unsupported">Unsupported</dd>

         <dt class="Supported op_mob"><span>Opera Mobile</span></dt>
         <dd class="Supported">Supported</dd>

         <dt class="Unsupported op_mini"><span>Opera Mini</span></dt>
         <dd class="Unsupported">Unsupported</dd>

         <dt class="Supported ios_saf"><span>iOS Safari</span></dt>
         <dd class="Supported">Supported</dd>
      </dl>
   </dd>
</dl>

dabblet.js

// alert('Hello world!');

settings.json

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