Get CanIUse Info just One Click

Sebagai developer sudah seharusnya memahami ilmu yang dikuasainya. Jika berkecimpung dengan bahasa HTML ya harus sudah paham, kalau bahasa CSS musti begitu juga dan lain sebagainya. Cerita punya alur AA Koben akan berbagi tutorial bagaimana cara memberitahukan support CSS code! Salah satu web yg menjadi rujukan dalam kasus ini adalah www.caniuse.com Dengan memberikan link info kepada website tersebut, sobat tidak usah lagi capek-capek menuliskan/memberitahukan bahwa kode CSS ini mendukung terhadap mozilla, google chrome, safari, etc. Plus opsi link ke website dokumen www.w3.org
Contoh begini...

Ketika kita akan memberitahukan salah satu properti HTML5 (Video), kita cukup menuliskan dengan syntax HTML seperti berikut <get-caniuse>video</get-caniuse> Nanti akan muncul ikon kecil di sebelah kanan tulisan video, tinggal klik ikon tersebut maka akan muncul gambar support browser engine plus link info ke 2 web yg gue bicarakan tadi.
Demo & source: codepen.io/tevko/full/OVQeyP - github.com/tevko/getCaniuse

get-caniuse {
display: inline-block;
}
get-caniuse * {
box-sizing: border-box;
}
get-caniuse .caniuse-card {
max-width: 500px;
position: absolute;
border: solid 1px #555;
background-color: #fff;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 15px #000;
}
get-caniuse .caniuse-card p {
margin-top: 0;
}
get-caniuse .caniuse-card .title {
font-weight: bold;
font-size: 21px;
}
get-caniuse .caniuse-card .caniuse-close {
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
font-size: 19px;
}
get-caniuse .caniuse-card .caniuse-supports {
padding: 15px 0;
text-align: center;
}
get-caniuse img {
cursor: pointer;
padding-left: 3px;
vertical-align: middle;
}
get-caniuse .CIU_bs_supported {
width: 75px;
height: 75px;
}

Silahkan hias-hias sendiri kode css dasar itu.

<script type='text/javascript'>//<![CDATA[
(function(){window.CIU={settings:{elems:'get-caniuse',cIco:'http://www.google.com/s2/favicons?domain=caniuse.com',CIUData:'',dataURL:'https://raw.githubusercontent.com/Fyrd/caniuse/master/data.json',objFormatted:false},init:function(){this.createLinks();},createLinks:function(){var s=this.settings,cElems=document.querySelectorAll(s.elems);Array.apply(null,cElems).forEach(function(elem,idx){elem.addEventListener('click',this.getCIUData.bind(elem,elem.innerHTML,s));var i=new Image();i.src=s.cIco;i.style.width='15px';i.style.display='inline-block';elem.appendChild(i);}.bind(this));},getCIUData:function(string,s,e){if(!this.classList.contains('caniuse-disabled')){s.CIUData===''?CIU.retrieveJSON(string,this):CIU.getClosestMatch(string,this);}},retrieveJSON:function(string,elem){var s=this.settings,request=new XMLHttpRequest();request.open('GET',s.dataURL,true);request.onload=function(){if(request.status>=200&&request.status<400){s.CIUData=JSON.parse(request.responseText).data;this.getClosestMatch(string,elem);}else{this.fallBack(string);}}.bind(this);request.onerror=function(){this.fallBack(string);}.bind(this);request.send();},fallBack:function(string){window.open('http://caniuse.com/#search='+string);},getClosestMatch:function(string,elem){if(elem.querySelector('.caniuse-card')!==null){elem.querySelector('.caniuse-card').style.display='block';elem.classList.add('caniuse-disabled');}else{var s=this.settings,strFormat=string.replace(/-/g,'').toUpperCase(),regexp=new RegExp('\('+strFormat+'\)'),keys=Object.keys(s.CIUData),requestedKey;if(!s.objFormatted){keys.forEach(function(key){var keyFormatted=key.replace(/-/g,'').toUpperCase();s.CIUData[keyFormatted]=s.CIUData[key];delete s.CIUData[key];console.log(key)});s.objFormatted=true;keys=Object.keys(s.CIUData);}
keys.forEach(function(key){if(key.match(regexp)){requestedKey=key;}});requestedKey===undefined&&this.fallBack(string);this.makeCard(s.CIUData[requestedKey],elem,string);}},makeCard:function(obj,elem,string){var getSupportData=function(){var stats=obj.stats,checking=[stats.ie,stats.firefox,stats.chrome,stats.safari,stats.opera,stats.edge],supported='';
stats.ie.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2JX2iYvFtEnjLG4AkGSvzMFecjqJqpfgy-QVSUGa5ZWP0yDcT0JEX48uzNlPWQLgv73KDkihkJaeJQ7NhA0hWDivpSvC0QThyphenhypheniYTGJQNxF7VGhyphenhyphenIPQcFVUQV7iKN0vPKI1NSA1DY6Q9g/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTfcHamOSAYJpDnNNpYuYmpL-2nPRcZYcJ45XucmAwgKj3_ikwjJqGOeFV-lP5-EJSvUdof7W_55jGL3S4a5wUxhmlXoyJguTxV5yWcszQfJCOgpq5ERzRoaWl_35OQJnkTOAs8zpZ3l8Z/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtAClPNdJDZ1PyYi6CI6GLGrzrlHY3LjlEIg33kuyvYT49nRlK8Q3foyEZnjT1mcNd58Rt7vl6mYyfbMXggE6zkDyaiwSxhGmIvLhmDrn8aq_KVCfNudoGz5W5_dWB8_Puza6indrIO6U/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlApBEIjehRRgKRh6zbmQrTbtM5WgjYH4DFX_8pgyPAoEVPrYDC7riGG20Ue70M6g-QyuDqnTKoIxZXmyx_5a8Q8HCUSgJtr9HqO0eEPXGICvYOb-ELBQyqR7Uh609is1DgjhXwVImewM/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Kl8WtEmNWmdmaOXve7ErOQvRhJry0As3ppRA-x5LP1eNymrgdSLA7HCvkHs3jrMtS6i00Xv-znqHRue8sHHzRx5Cd2ozECj6AtiZv__1BW7UmxBI1QapsTlAKPf7KZAAWCBpuUk-K8w/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDf_zPZI1i7Lo-usU9Tt_0afV2LTUR463IJuVwVvL6nLpYRYd4Vo6FM36NgyTsRnFhlnBe1eDwXlXpEA4X6PgSsXIsBvg8iGOxx765g4JYeH3ElaBH5pE0q4xurdnZ75x8hdsyKtYClJM/s100-c/';
checking.forEach(function(check){Object.keys(check).forEach(function(key){if(supported.indexOf('<img class="CIU_bs_supported" src="'+check.name+'">')===-1&&(check[key]==='y'||check[key]==='p'||check[key]==='a x #2'||check[key]==='a #1')){supported+='<img class="CIU_bs_supported" src="'+check.name+'">';}});});return supported;};var card='<div class="caniuse-card">'
+'<p class="title">'
+obj.title
+'</p>'
+'<p class="description">'
+obj.description
+'</p>'
+'<a class="speclink" href="'+obj.spec+'" target="top">W3C Spec</a>'
+'<div class="caniuse-supports">'+getSupportData()+'</div>'
+'<a class="speclink" href="http://caniuse.com/#search='+string+'" target="top">See more on CanIUse.com...</a>'
+'<span class="caniuse-close">X</span>'
+'</div>';elem.innerHTML+=card;elem.classList.add('caniuse-disabled');elem.addEventListener('click',function(e){if(e.target.classList.contains('caniuse-close')){elem.classList.remove('caniuse-disabled');elem.querySelector('.caniuse-card').style.display='none';}});}};})();CIU.init();
//]]></script>

Simpan JavaScript itu sebelum/di atas tag </body> (Recommended) atau tag </head>

Pemakaian ketika akan melakukan postingan, harus pakek syntax <get-caniuse>BLAH-BLEH-BLOH</get-caniuse>

Browser Detection - codepen.io/brandonkennedy/pen/XbQdbW
Kalau kepengen link info via wikipedia, you dapat baca get wikipedia headline using jquery wiki.