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;
}
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/AVvXsEjviH7dfGMceOkk-4xJFkPm0nIghL6wLwGkup373ethgBLM3xTU3CB3h1tTonziWPGXP3R-fEWV2Klr25wK6chG1IQch-DiR4pX31bWaO-M2UEqsftdxzn-cdX6X4PYGLaKYYrBe_BbNR0/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQiO8QHFa12chaBq9SsfxfOjPOjWaifGP-Xsz5zkf-jvXEcPUM6MxMKsYctDJBiUvE8bheMWvvZw4TGeeETI9jyCL9udObHhCVVSfUhyphenhyphenL7Qc64hcxSkKbH4dvio9XGuSldR7_KRFIOkWl/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4GpYLtEXjWk0vT7J80ig6dQsP-Os_ZYPcE0i7SU41OMzCXMPP1_hQMlQ-uI3y-E4cZt1_6gwoD6yMNeA66XaQw3yaHjZgSXNwpBdjxVyz-0W7z7GYR15NLbMfJ1jSmk10AR_d0B8FMvx/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIL4NZ0_V7_Hp5WaDCy_Qz9wkv_wAaOR_8xePv3tSNBnkGX4zrDEsR85O08gv4o3jIHLfvOycPBFyt1vVaeTiyG9YRnWKGmYkNkev-oW7fN0NpUt8UrBn1mgnxDA8lfsQ3qhrpv6LKlmdV/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHjML1KPF5euR7n0Ajop9fnM5Cg8bWCGIFWDrML0ZI6FkMymb-01L6EN4-eMPh9TiIgODO2GXfADzZVlBuppfJR8CknMldnqW9FeU5bfuJ31rKFGfACn5jyZ-FasivgLerlh6CqOPhK4/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbffS9P_HGojQ3pg6orVeS4osT_hIiyf6-5ePtKitNyUnpDNGd2TG2IAr92z1INTz4iMXf6_loj25u3j50ZRhMivkqGM4d3MJS8HLlIHGHCSFAe6yhe21Mc37xyN4zf6ZsRDB5zl4t2ew/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>
(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/AVvXsEjviH7dfGMceOkk-4xJFkPm0nIghL6wLwGkup373ethgBLM3xTU3CB3h1tTonziWPGXP3R-fEWV2Klr25wK6chG1IQch-DiR4pX31bWaO-M2UEqsftdxzn-cdX6X4PYGLaKYYrBe_BbNR0/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQiO8QHFa12chaBq9SsfxfOjPOjWaifGP-Xsz5zkf-jvXEcPUM6MxMKsYctDJBiUvE8bheMWvvZw4TGeeETI9jyCL9udObHhCVVSfUhyphenhyphenL7Qc64hcxSkKbH4dvio9XGuSldR7_KRFIOkWl/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4GpYLtEXjWk0vT7J80ig6dQsP-Os_ZYPcE0i7SU41OMzCXMPP1_hQMlQ-uI3y-E4cZt1_6gwoD6yMNeA66XaQw3yaHjZgSXNwpBdjxVyz-0W7z7GYR15NLbMfJ1jSmk10AR_d0B8FMvx/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIL4NZ0_V7_Hp5WaDCy_Qz9wkv_wAaOR_8xePv3tSNBnkGX4zrDEsR85O08gv4o3jIHLfvOycPBFyt1vVaeTiyG9YRnWKGmYkNkev-oW7fN0NpUt8UrBn1mgnxDA8lfsQ3qhrpv6LKlmdV/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHjML1KPF5euR7n0Ajop9fnM5Cg8bWCGIFWDrML0ZI6FkMymb-01L6EN4-eMPh9TiIgODO2GXfADzZVlBuppfJR8CknMldnqW9FeU5bfuJ31rKFGfACn5jyZ-FasivgLerlh6CqOPhK4/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbffS9P_HGojQ3pg6orVeS4osT_hIiyf6-5ePtKitNyUnpDNGd2TG2IAr92z1INTz4iMXf6_loj25u3j50ZRhMivkqGM4d3MJS8HLlIHGHCSFAe6yhe21Mc37xyN4zf6ZsRDB5zl4t2ew/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
Kalau kepengen link info via wikipedia, you dapat baca get wikipedia headline using jquery wiki.
