Css3 Detection

CSS3 detection - yaitu script pendeteksi ada/tidak nya properti css3 didalam website. Script ini dibuat untuk memudahkan sebuah website untuk mengenali apakah browser dapat mendukung CSS3 atau tidak. CSS3 adalah script yang dikembangkan dari script awal CSS (Cascading Style Sheet)untuk membuat tampilan lebih menarik.
Apakah anda sudah mengerti tentang CSS??Berikut ulasan nya :

Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip dengan template pada Microsoft Word: anda dapat megubah penampilan pada dokumen Word dengan mengubah format pada style dokumen. Begitu pula anda dapat mengubah penampilan halaman web dengan mengubah format pada tag HTML tertentu melalui Style Sheet, untuk selanjutnya menggantikan spesifikasi default dari browser untuk tag-tag tersebut.

Nah, Dengan menggunakan berbagai property dari CSS ini, CSS3 mampu membuat animasi gerak, Transisi warna, Gradasi warna, Bayangan / shadow, Garis belok, dan masih banyak lainnya. Dengan CSS3, Website ini juga semakin lebih baik lho !  

Nah Langsung saja, kita akan Praktek kan , bagaimana cara javascript mendeteksi ada / tidaknya property CSS3 dari browser yang anda gunakan..
Langkah Pertama, buatlah sebuah index.html. Kemudian Copy source code dibawah ini :

<title>CSS3 DETECTION</title>
<script>        
var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if ( prop in div.style ) return true;

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         }
      }
      return false;
   };
})();  

/* Peringatan : property yang saya gunakan untuk uji coba ini adalah property 'text-shadow' dari CSS3 */
     if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
     } else {
         alert('PERINGATAN! Browser Ini tidak mendukung adanya "CSS 3" dalam property kami.. mohon gunakan browser lain atau meng-UPGRADE browser anda untuk dapat menikmati tampilan website kami... WARNING ! This browser DOES NOT support CSS 3 property, Please use other browser to enjoy our web content !');
        window.open('http://mozilla.org','_blank','');
     }
</script>   

---

Nah Setelah anda copy source code nya, cobalah di 2 browser, yaitu dengan Mozilla versi 6 keatas, dan dengan Internet Explorer versi 8 kebawah. Jika tidak muncul Alert atau pesan, Berarti browser tersebut mengenali Property CSS3 "TextShadow". Namun, Jika muncul alert (pesan), berarti browser anda tidak mensupport property CSS3 tersebut..

Sekian, Tutorial ini, semoga bermanfaat dan silahkan komentar nya ....