Sebenarnya Koben sudah lama membaca mengenai Prefix free, tetapi belum paham untuk apa itu teh :"> Setelah merenung karena tidak ada tujuan walking-walking in the pret, ternyata script prefixfree full stylish coy! Karya master @leaverou and membuat prefixfree.js ketika travelling ke Oslo ;))Master mah lagi jalan² juga tetep saja bisa berkreasi, kita yang duduk terus kagak bisa-bisa belajar script :)) Baca postingan mengenai prefixfree on Smashing Magazines.
Sekarang timbul teka-teki, buat apaan c script -prefix-free itu?
Sebelum masuk ke sesi penjelasan, Koben pernah sentil², sebuah tools yang bernama cssFx.js? Tools yg memiliki fungsi menambahkan (prefixes) kode-kode teranyar dari variabel CSS3.
Misalkan kita akan membuat variabel box-shadow: 0px 0px 15px #000000; Secara otomatis dalam penulisannya kita harus mengikutsertakan kode serupa dengan dukungan ke browse lain.
| Basics | Mozilla | Chrome + Friends |
|---|---|---|
| box-shadow: 0px 0px 15px #000000; | -moz-box-shadow:0px 0px 15px #000000; | -webkit-box-shadow:0px 0px 15px #000000; |
Tools yg sangat berguna bagi nusa & bangsa :p Kembali ke urusan PrefixFree: Break free from CSS prefix hell! Ini versi scriptnya sob! Jadi kita tidak usah capai-capek menuliskan kode² dukungan untuk browse lainnya. Tinggal menuliskan kode intinya saja. Sisa kerja biarkan script prefixfree akan mengoperasikan secara otomatis, sesuai browse apa yg kalian pakai dalam melihat sebuah konten :-/
Mudeung apa ora ;)) Sikattt scriptnya prefixfree.js (only 2kb)
Biarpun telat mengertinya, yg penting jadi mengerti :) Mau bukti betapa ampuhnya script ini :-?
Buka salah satu demo keren berikut CSS3 image slider with stylized thumbnails. Lihat kotak bagian CSS, disana hanya menuliskan variable CSS3 transition: all 0.5s;, box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); and transform: scale(1.1);
Tidak membawa embel² awalan -moz-, -webkit-, -o- or -ms-
Happy prefix \m/
Tidak ada komentar:
Posting Komentar