API Cat CSS

Menurut penulis materi, terjemahan yang kami terbitkan hari ini, CSS Paint API adalah teknologi yang sangat menarik. Selain itu, kita berbicara tidak hanya tentang kemampuannya saat ini, tetapi juga tentang fenomena yang disajikan kepadanya, dan bahwa penampilannya menandai awal dari perubahan yang sangat luar biasa di dunia CSS. Di sini kita akan berbicara tentang API Paint CSS dan alasan kemunculannya, dan berbicara tentang cara menggunakannya.

Apa itu API Cat CSS?

API yang dimaksud hanyalah sebagian kecil dari rangkaian spesifikasi baru yang sedang dikembangkan sebagai bagian dari proyek CSS Houdini. Menjelaskan secara singkat proyek ini, intinya bermuara pada kenyataan bahwa ia memberi pengembang akses tingkat rendah ke mekanisme CSS internal.

CSS Paint API memungkinkan Anda untuk memanggil fungsi paint() dalam situasi di mana, dalam kondisi normal, pekerjaan akan dilakukan, misalnya, dengan nilai tertentu yang menjelaskan beberapa jenis gambar. Contoh umum dari ini adalah properti background-image , ketika bekerja dengan mana Anda dapat menggunakan fungsi url() untuk mengirimkan tautan ke file gambar sistem:

 area { background-image: url('assets/myimage.jpg'); } 

CSS Paint API memungkinkan Anda untuk memanggil, alih-alih fungsi yang serupa, fungsi paint() , dan meneruskannya worklet yang disebut, dijelaskan oleh JavaScript. Vorklet dapat dianggap sebagai bagian dari kode yang memungkinkan pengembang untuk menggambar hampir semua yang diinginkan secara terprogram. Dan, karena kita berbicara tentang JavaScript, gambar dapat dibuat dinamis. Dengan sendirinya, API ini sangat mirip dengan HTML5 Canvas API, dan sekarang kita akan berbicara tentang cara kerjanya.

Fitur CSS Paint API

Jika sekarang Anda memiliki perasaan bahwa semua ini terdengar bagus, tetapi terlihat rumit, dan Anda berpikir bahwa Anda cukup nyaman menggunakan gambar biasa, perlu diingat bahwa gambar biasa tidak kehilangan relevansinya dengan munculnya teknologi baru. Menggunakan mereka, seperti yang selalu mereka lakukan, sangat normal. Fakta bahwa sesuatu yang baru telah muncul di cakrawala, dan mungkin menjanjikan, tidak berarti bahwa setiap orang harus segera menggunakan yang baru ini untuk menyelesaikan semua masalah yang ada. Namun, gambar biasa bersifat statis. API baru menarik dengan ide membuat gambar dinamis.

Mari kita berpikir tentang fungsi CSS linear-gradient . Masalahnya sangat kuat. Lihatlah ini sebagai contoh. Tetapi dapatkah Anda bayangkan betapa lebih mudahnya untuk mencapai efek yang sama yang dibentuk oleh lapisan yang tumpang tindih jika Anda tidak harus menggunakan banyak gambar latar belakang? Namun, ini bukan satu-satunya poin. Jika Anda mempelajari API Paint CSS, Anda dapat mengetahui bagaimana gambar tersebut dibuat selama eksekusi program, dan ini bisa sangat berguna (sebenarnya, inilah yang kami rencanakan untuk dilakukan di sini).

Bagaimana dengan fungsi CSS kerucut-gradien ? Bisa dikatakan, itu belum didukung oleh browser tanpa polyfill. Menggunakan API baru memungkinkan Anda untuk membuat gradien berbentuk kerucut, menyesuaikan parameternya, yang tidak terlalu berbeda dari apa yang ada dalam spesifikasi. Semua ini berarti bahwa dalam praktiknya, menggunakan API baru, Anda dapat membuat polyfill asli Anda sendiri. Dan ini luar biasa.

Perlu diingat bahwa semua ini adalah bagian dari kelompok fitur yang lebih besar yang dikenal sebagai CSS Houdini. Inilah yang dikatakan dokumentasi proyek tentang hal itu: "Tujuan Satuan Tugas CSS-TAG Houdini (CSS Houdini) adalah untuk bersama-sama mengembangkan mekanisme yang memecahkan misteri dari teknologi penataan laman web dan membangun tata letak mereka."

Kedengarannya bagus, bukan? Dan, pada kenyataannya, mekanisme baru ini bertujuan memungkinkan pengembang untuk memperluas fungsionalitas CSS itu sendiri, memberi mereka alat styling yang lebih baik, dukungan lintas browser dan kemampuan untuk membuat polyfill.

Proses standardisasi teknologi baru mungkin memakan waktu. Pertama, saran dibuat untuk fitur CSS baru. Berikutnya - spesifikasi ditulis, proses lain terjadi. Akibatnya, pembuat browser menerapkan spesifikasi baru. Dan, karena pengembang sering tidak sabar untuk mulai menggunakan fitur-fitur baru sesegera mungkin, mereka harus mempertimbangkan fakta bahwa browser lama mungkin tidak mendukung inovasi, dan bahwa jika beberapa spesifikasi belum sepenuhnya diimplementasikan, mungkin, dalam prosesnya pengembangan, serius berubah. Mungkin tidak ada yang perlu dibicarakan tentang nuansa khas implementasi berbagai teknologi di berbagai browser. Proyek Houdini dapat melangkah cukup jauh dalam mengurangi masalah-masalah ini, memungkinkan kami untuk mengembangkan fungsionalitas browser kami sendiri, menggunakannya dan dengan tenang menunggu produsen browser untuk mengimplementasikan fitur-fitur tertentu. Berikut adalah beberapa materi tentang topik ini. Yang pertama didedikasikan untuk kekuatan Houdini, dan yang kedua adalah menggunakan kemampuan proyek ini untuk membuat animasi yang kompleks.

Dukungan untuk CSS Paint API oleh browser

Bisakah saya menggunakan API API CSS hari ini? Kami dapat memberikan jawaban positif untuk pertanyaan ini, meskipun harus dicatat bahwa jauh dari semua browser mendukung teknologi ini. Untuk mendapatkan informasi dukungan untuk API ini, Anda dapat menggunakan sumber daya caniuse.com .


Dukungan untuk API Paint CSS oleh berbagai browser (Juli 2018)

Seperti yang Anda lihat, API ini hanya mendukung Chrome sejauh ini. Tapi bagaimanapun juga, mari kita bicara tentang cara menggunakannya. Kami akan membahas konstruksi perangkat lunak yang diperlukan untuk membuat API baru berfungsi. Ini termasuk fitur CSS baru dan beberapa mekanisme JavaScript yang cukup baru. Contoh kita akan dibagi menjadi tiga langkah.

Langkah # 1: CSS

Ingatlah bahwa untuk membuat gambar menggunakan CSS Paint API, widget adalah fragmen kode JS. Karena itu, sebagai permulaan, kita perlu memberi nama worklet dan menyebutnya dalam CSS. awesomePattern saja awesomePattern . Akibatnya, CSS akan terlihat seperti ini:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

Persiapan awal telah selesai, tetapi sampai sisa contoh kita siap, semua ini tidak akan berhasil.

Langkah # 2: JavaScript

Sekarang kita perlu menggambarkan worklet menggunakan JS. Di sini diperlihatkan bagaimana, dalam skrip utama, skrip lain dimuat yang mengimplementasikan fungsi yang kita butuhkan.

 CSS.paintWorklet.addModule('patternWorklet.js'); 

Pada tahap ini, sekali lagi, tidak ada yang terjadi, karena yang paling menarik disembunyikan dalam file patternWorklet.js .

Dalam file patternWorklet.js kita perlu mendaftarkan kelas vorklet:

 registerPaint('awesomePattern', Shape); 

Di sini kita memanggil fungsi registerPaint() dan memberikan apa yang kita anggap sebagai worklet, dalam hal ini awesomePattern . Selain itu, kami meneruskan fungsi ini tautan ke kelas yang akan kami tulis, dalam hal ini, Shape . Perintah ini harus ditambahkan setelah deklarasi kelas terkait. Saat mendeklarasikan dan menggunakan kelas, Anda tidak bisa mengandalkan sesuatu seperti mekanisme untuk meningkatkan deklarasi fungsi. Sebelum Anda dapat menggunakan kelas, Anda harus mendeklarasikannya.

Selanjutnya, kita akan menggunakan sintaks untuk mendeklarasikan kelas ECMAScript 2015 dan menulis kelas yang akan menggambar gambar latar belakang. Karena kelas ini sekarang terdaftar sebagai kelas kelas pekerja, kita dapat menggunakan beberapa mekanisme khusus di dalamnya yang akan tersedia secara otomatis di dalamnya.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

Callback paint() memiliki parameter ctx , geom dan properties . Parameter ctx sama dengan konteks rendering 2D yang dapat diperoleh dari elemen <canvas> . Yah, hampir sama. Faktanya adalah <canvas> memungkinkan Anda membaca data piksel, tetapi CSS Paint API tidak mengizinkannya. Terlepas dari perbedaannya, menggunakan ctx , kita dapat menggunakan metode output grafik yang sama yang digunakan saat bekerja dengan elemen <canvas> . Dalam contoh ini, menggunakan fungsi arc() , kita menggambar sebuah lingkaran.

Dua nilai pertama yang diteruskan ke fungsi arc() adalah koordinat X dan Y dari pusat lingkaran, dalam piksel, relatif terhadap titik asal yang terletak di sudut kiri atas elemen. Namun, saya ingin lingkaran berada di tengah elemen. Untuk mengatasi masalah ini, parameter geom berguna bagi kami. Ini memberikan akses ke objek PaintSize , yang merupakan deskripsi pengaturan gambar. Secara khusus, merujuk padanya, kita dapat membaca parameter width dan height , dan inilah yang kita butuhkan untuk memusatkan lingkaran.

Akibatnya, kita sampai pada kode ini:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

Anda dapat melihat versi contoh di CodePen yang berfungsi . Sebenarnya, inilah yang dihasilkan oleh kode ini.


Lingkaran dibuat dengan API Cat CSS

Semua ini bagus, tetapi contoh kita sangat sederhana. Mari, alih-alih lingkaran yang biasa, gambarlah sesuatu yang lebih menarik. Misalnya - seperti logo situs web asterisk - css-tricks.com.


Asterisk dibuat dengan API Cat CSS

Ini adalah proyek CodePen yang memungkinkan Anda melakukan ini.

Saat Anda melihat kode JS untuk proyek ini, perhatikan metode drawStar() dan banyak fungsi yang digunakan saat bekerja dengan elemen <canvas> .

Langkah # 3: Properti CSS Kustom

Menggunakan teknologi baru, kita bisa melangkah lebih jauh dari menggambar lingkaran dan bintang. Kita dapat melihat fitur kuat dari properti CSS khusus (variabel). Ngomong-ngomong, mereka sendiri sangat menarik. Dalam kasus kami, mereka ternyata sangat berguna.

Misalkan kita ingin dapat mengubah ukuran atau warna dari logo yang dibuat sebelumnya. Parameter ini dapat ditempatkan dalam kode CSS dalam bentuk properti khusus, dan kemudian menggunakannya dalam program melalui parameter ketiga, diteruskan ke callback paint() . Ini tentang parameter properties .

Kami menambahkan properti --star-scale ke kode-CSS kami, yang bertujuan mengendalikan ukuran gambar, dan properti --star-scale --star-color , yang digunakan untuk mengatur perubahan warna logo secara langsung di CSS. Inilah yang kami dapatkan:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

Sekarang kembali ke kelas workcloth. Di sini kita perlu berinteraksi dengan properti pengguna yang dijelaskan di atas. Ini dilakukan dengan menggunakan metode inputProperties , yang memberi kita akses ke semua properti CSS dan nilai yang diberikannya.

 static get inputProperties() { return ['--star-scale','--star-color']; } 

Sekarang Anda dapat bekerja dengannya dalam metode paint() :

 const size = parseInt(properties.get('--shape-size').toString()); 

Secara alami, nilai yang diperoleh dapat digunakan dalam kode yang bertanggung jawab untuk pembentukan gambar. Ini mengarah pada fakta bahwa jika kita, dalam kode CSS, mengubah nilai properti --star-scale atau --start-color , ini akan segera mempengaruhi bagaimana gambar akan terlihat.


Pengaruh properti CSS khusus pada gambar jadi

Fungsi ini diimplementasikan dalam proyek CodePen yang sama dengan yang kami sebutkan di atas.

Ngomong-ngomong, perlu dicatat bahwa ketika menggunakan API baru, semua properti CSS biasa yang terkait dengan pengaturan latar belakang elemen, seperti background-size background-repeat dan background-repeat , akan bekerja dengan cara yang sama seperti sebelumnya. Mereka tidak kehilangan relevansi.

Ringkasan

CSS Paint API adalah teknologi yang sangat kuat yang kemampuannya tidak terbatas untuk membuat gambar latar belakang.

Bayangkan bahwa elemen tersebut harus memiliki perbatasan khusus, misalnya, yang tidak sepenuhnya terlihat, atau ganda. Mungkin untuk mencapai efek seperti itu, Anda biasanya menggunakan pseudo-elements ::before atau ::after , atau mungkin box-shadow dikonfigurasi secara khusus. Borders (dan banyak lagi) dapat diimplementasikan menggunakan CSS Paint API dan properti border-image .

CSS Paint API menyatukan banyak fitur hebat, seperti widget, kelas ECMAScript 2015, dan fitur <canvas> . Selain itu, ia menyediakan pengembang dengan perangkat lunak manajemen gambar berbasis JavaScript. Misalnya, menggunakan mekanisme acara, Anda dapat mengatur pembaruan properti khusus, yang berarti gambar itu sendiri, seperti, misalnya, dilakukan di sini , di mana acara click memulai proses memperbarui properti di fungsi requestAnimationFrame , yang memungkinkan Anda membuat animasi setiap kali pengguna mengklik tombol. Selain itu, bahkan koordinat kursor mouse ketika Anda mengklik diperhitungkan.

Pada pandangan pertama, semua ini mungkin tampak sedikit membingungkan, tetapi mari kita lihat beberapa bagian lain dari proyek Houdini yang mungkin kita temui:

• API Layout CSS memungkinkan pengembang untuk melakukan sesuatu seperti display: layout('myCustomLayout') . Contoh tipikal adalah pembuatan tata letak gaya batu Anda sendiri, tetapi jangkauan penggunaan fitur ini jauh lebih luas.
• Properti CSS dan Nilai API memungkinkan Anda untuk mengatur jenis properti khusus.
• API Worklet Animasi CSS mendorong operasi pemrosesan animasi di luar aliran utama, yang seharusnya diterjemahkan menjadi animasi yang sangat halus.

Akibatnya, kita dapat mengatakan bahwa, secara harfiah di depan mata kita, ada kemunculan teknologi yang membuka banyak peluang baru bagi pengembang web. Proses standardisasi dan implementasi mereka di browser tidak begitu cepat, tetapi mereka, sangat mungkin, akan memiliki dampak luar biasa pada segala sesuatu yang berkaitan dengan styling halaman web.

Pembaca yang budiman! Bagian mana dari aplikasi API API CSS yang menurut Anda paling menarik?