Get CanIUse Info just One Click - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Get CanIUse Info just One Click, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article HTML5, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Get CanIUse Info just One Click
link : Get CanIUse Info just One Click

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/AVvXsEgxMc1qktrzb9xDl9sCMcxe5oceoXVy21dM4D1QXKA9tmon3MX8LYaMviS1JZU1q573Eoq5-gZuQ1AFGkqAvYdfdbFr-ZYWevDwTZ3ZuCc_ItTwDdOZhR0x6vlRCu8LmoVTYVv4ubHrNxM/s100-c/';
stats.firefox.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVAv5SN6UIOtdca3KY7qjvh614Y0CAXXe6KBlALE21zl4LOC7zOjbfOoe0c2Sh7tNjb_svrxyKqeaNNQXCJqOrJrdZ_WuE2B5CmsgxFQEjleQ9NxIKfHq9LbFrUD9__v9ymki0pHR6mn7/s100-c/';
stats.chrome.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMcWIsFFO6UEsGJDaehrVhga4GMPmJBJwIEuZ1Vgm4TEwG6WRF5zzKlwd9-5f5n684K3A00Igo9Mryu7O6s8Bho2-ueL5heVrSZeH3ICOIR9zoboKKlRKRUab1tfU2PUHEC7bUdA7SIr1/s100-c/';
stats.safari.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtxT9ZkFsKE_DbM2bPqGMMFZAsvoe71IXsLA2q0dv8cfcuUGIcaxWgPIBe4MCGIgXe1OtsiNAoH9RKtI8XvxjXwuzLPcGaYHDvlsBGxI1__h8OQDCzKPrfPRfmJWGMKeBsNwehuHjhsUQv/s100-c/';
stats.opera.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZga2Bzo_VzpENA65e95Hlo_LpXFFgNZNGqconEmKMvtqJq3PQ89_VCmoyj3GlrNwCXTq0pKSpsc6sC5qg4J27T_lllXiEELZmZmTINwA8axSC4268wKF8XhBaBH40OIawbfFU4ZUvKag/s100-c/';
stats.edge.name = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq-_YavJHR5h7Ks8Rq4g0y_b1U9ykH6AtWgq1wcGterSj95_n1bKtiS9A4JnwZUYgbEE7fnY6-gvE7pgVrAC7WaOprN1uMn1ZsDOXa9GTvsEK4pe7CI9DcUQWjLZPlILazmTKe9ILycaE/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.

Thus articles Get CanIUse Info just One Click

that is all articles Get CanIUse Info just One Click This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Get CanIUse Info just One Click with the link address https://autopostingblogspot.blogspot.com/2015/08/get-caniuse-info-just-one-click.html