Pemilih Warna HTML5

Seperti yang saya nyatakan dalam posting saya HTML5 Date Picker, Opera 11 berada di depan beberapa browser web non-beta lainnya dalam menerapkan beberapa tag HTML5 yang diharapkan. Dalam posting ini, saya melihat implementasi Opera dari "color picker" HTML5 sebagai ilustrasi tentang apa yang mungkin dilakukan ketika browser lain mulai menambahkan implementasi mereka sendiri.

Saya menggunakan kode HTML sederhana berikut untuk mendemonstrasikan color picker Opera 11.

ColorPicker.html

   HTML5 Color Picker Demonstrated  function newBackgroundColor(color) { document.bgColor = color; document.colorForm.selectedcolor.value = color; }     

Select Background Color

Selected Color

Tidak banyak kode di atas untuk pemilih warna (hanya dengan atribut "nama" dan acara "onchange" untuk membuat segalanya menjadi sedikit lebih menarik). Sebelum mendemonstrasikan kode ini beraksi di lima browser utama, saya akan menunjukkan bahwa kode ini berfungsi di semua browser. Apa yang membedakan perlakuan Opera dari browser lain adalah bahwa Opera menyediakan kontrol elegan untuk memungkinkan pengguna memilih warna atau mengetikkan kode warna. Browser lain (versi non-beta) tidak memberikan kontrol yang bagus saat ini, tetapi kode masih berfungsi di dalamnya jika pengguna mengetikkan string warna yang dikenali.

Pemilih Warna Opera 11

Rangkaian snapshot layar berikutnya mendemonstrasikan perlakuan Opera terhadap pemilih warna. Gambar menunjukkan bahwa sekumpulan kecil warna disajikan terlebih dahulu untuk dipilih dan bahwa pengguna dapat memilih dari sekumpulan warna yang lebih besar atau bahkan menentukan warna khusus. Kode JavaScript sederhana dipanggil saat warna dipilih dan warna latar belakang diubah sesuai.

"Pemilih Warna" Firefox 3.6

Firefox 3.6 tidak mendukung pemilih warna seperti halnya Opera 11. Memang, ini disajikan sebagai bidang teks sederhana. Kabar baiknya adalah jika pengguna mengetik String yang dapat diartikan sebagai kode warna yang valid, fungsionalitasnya masih berfungsi dengan baik. Ini ditunjukkan di set snapshot layar berikutnya.

"Pemilih Warna" Chrome 8

"Dukungan pemilih warna" Chrome 8 sangat mirip dengan Firefox 3.6 seperti yang diilustrasikan pada tiga gambar berikutnya.

"Color Picker" Safari 5

Safari 5 memberikan tingkat dukungan yang sama untuk pemilih warna seperti Chrome 8 dan Firefox 3.6.

"Color Picker" Internet Explorer 8

Dukungan Internet Explorer 8 mirip dengan semua browser yang sebelumnya dilindungi selain Opera 11.

Kesimpulan

Mengenai pemetik tanggal / waktu, Opera 11 memimpin paket browser web non-beta dalam kematangan penerapan pemilih warna dan oleh karena itu memberikan ilustrasi terbaik tentang apa yang dapat menjadi tag ini. Seperti halnya pemilih tanggal, saya menantikan hari ketika kami memiliki pemilih warna elegan yang bekerja di semua browser utama dan digunakan melalui markup HTML sederhana. Hari ini, untuk mendapatkan ini, kita perlu menggunakan sesuatu di luar HTML standar seperti Flex atau pemilih warna yang disediakan oleh pustaka JavaScript pihak ketiga.

Artikel ini, "HTML5 Color Picker", awalnya diterbitkan oleh JavaWorld.