Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Memulai dengan Fungsi-Fungsi Matematika CSS Level 4

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Notasi fungsional adalah bagian dari CSS Values and Units Module, yang juga merupakan rumah bagi fungsi-fungsi matematika yang berguna seperti calc(), dan pada level 4 min() dan max(). Fungsi-fungsi kuat ini membuka pintu luar biasa bagi para penulis CSS yang membutuhkan kemampuan logika matematika dalam CSS. Dalam artikel ini kita akan membahas calc(), min() dan max() dan bagaimana ketiganya dapat berguna dalam pekerjaan Anda saat ini. Mari kita mulai!

Apa itu Notasi Fungsional?

Notasi Fungsional adalah salah satu dari sembilan bagian induk (bagian delapan tepatnya) dari Modul Nilai dan Modul W3C CSS. Pada Draf Editor Tingkat 4, Notasi Fungsional sekarang menyimpan subbagian lebih lanjut seperti toggle() yang memungkinkan berpindah antara nilai-nilai, dan referensi atribut melalui penggunaan attr(). Ada juga subbagian lain yang menarik yang disebut "Ekspresi Matematika" yang mencakup fungsi matematika kita yang mudah calc(), min() dan max().

Mari kita beralih ke definisi W3C untuk membantu kita memahami apa yang dimaksud dengan Notasi Fungsional:

Notasi fungsional adalah jenis nilai komponen yang dapat mewakili jenis yang lebih kompleks atau meminta pemrosesan khusus. Sintaks dimulai dengan nama fungsi segera diikuti oleh kurung kiri, diikuti oleh argumen (s) ke notasi yang diikuti oleh kurung kanan. ”

Dalam istilah awam, mereka mengatakan itu adalah "nama fungsi", seperti calc, diikuti dengan membuka (dan menutup) tanda kurung. Tapi apa yang terjadi di antara mereka?

Memperkenalkan Ekspresi Matematis

Seperti disebutkan, "Ekspresi Matematika" adalah sebuah sub-bagian dari "Notasi Fungsional", tetapi apa mereka dan apa yang mereka lakukan? Sekali lagi, mari beralih ke W3C, di mana mereka didefinisikan sebagai:

“Fungsi matematika, calc(), min(), dan max(), memungkinkan ekspresi matematika dengan penambahan(+), pengurangan(-), perkalian(*), dan pembagian(/) untuk digunakan sebagai nilai komponen.”

Itu berarti calc(), min() dan max() adalah "fungsi matematika" yang memungkinkan "ekspresi" dalam tanda kurung untuk "menghitung nilai". Oke, itu sudah jelas sekarang. Istilah "ekspresi" hanyalah cara mewah untuk mengatakan "logika matematika benar-benar diperbolehkan dalam tanda kurung".

Diperkenalkan pada level 4 adalah definisi yang baru diperbarui untuk melengkapi apa yang kita ketahui sejauh ini:

“Komponen fungsi matematika dapat berupa nilai literal, fungsi matematika lainnya, atau ekspresi lain, seperti attr(), yang mengevaluasi ke jenis argumen yang valid (seperti <lenght>).”

Untuk lebih memperjelas, "fungsi matematika lain" yang direferensikan di sini adalah calc(), min() dan max(), tetapi mereka juga menyatakan fungsi-fungsi ini dapat bersarang di dalam satu sama lain. Anda dapat menulis calc(min()), min(calc()), calc(max (min())), calc(min(attr ())) dan seterusnya. Namun, saran saya adalah untuk melakukan yang terbaik dan menghindari pusaran bersarang, bahkan dengan kemampuan untuk melakukannya seperti yang ditunjukkan oleh spec.

Sekarang mari kita ucapkan "halo" sekali lagi kepada beberapa fungsi matematika yang luar biasa yang hampir kehilangan kesempatan untuk berjabat tangan dengan Kelompok Kerja CSS.

Selamat Datang Kembali min() dan maks()

Fungsi min() dan max() adalah dua fungsi matematika yang membuat tanda mereka, tetapi hanya setelah mereka hampir dihapus dari Draft Values dan Unit Level 4 Editor. Terima kasih kepada Lea Verou, angin perubahan memaksa mereka masuk dan aku tidak bisa lebih bahagia.

“Mungkin sekarang bahwa Nilai 3 telah menjadi CR, waktunya untuk mempertimbangkan kembali menambahkan min() dan max() kembali ke Nilai 4?

Penulis melakukan weird hacks dengan calc() untuk meniru mereka dalam font-size dan line-height, yang mereka sebut "CSS locks". Jika Anda mencari di Google CSS locks, Anda akan melihat seberapa luas peretasan ini, yang menunjukkan kebutuhan pengarang yang jelas.

Selanjutnya, ketika variabel CSS menjadi lebih banyak digunakan, kebutuhan untuk min() dan max() akan menjadi lebih besar. Saya ingat beberapa masalah yang membuat kami kehilangannya 6 tahun yang lalu sekarang dapat diselesaikan dengan invalid pada waktu nilai yang dihitung  yang Variabel diperkenalkan. ”- Lea Verou

Karena saran Lea tentang GitHub, min() dan max() telah secara resmi dimasukkan kembali ke dalam Draft Editor tentang Nilai dan Kesatuan CSS level 4 termasuk adopsi awal oleh WebKit. Pengembang dapat bereksperimen dan mengeksplorasi secara pribadi menggunakan WebKit Nightly (mulai 10/24/17). Berikut adalah komitmen WebKit untuk anehnya penasaran di mana dukungan secara ajaib diberikan untuk min() dan max().

Sekilas Sekilas di clamp()

Potongan buah bibir lain yang menarik dalam benang GitHub yang sama yang dimulai oleh Lea Verou adalah komentar di mana Tab Atkins menyarankan fungsi clamp() yang sebenarnya. clamp() secara harfiah akan "clamp" nilai antara nilai-nilai batas.

"... Saya setuju bahwa clamp(), yang secara teknis berlebihan, cukup sering berguna sehingga mungkin layak untuk ada."

Astaga! Ini akan menjadi tambahan untuk ekspresi matematis. Fungsi seperti clamp() adalah kemenangan yang pasti untuk kebutuhan responsif saat ini dan tentu saja akan menjadi teman yang disambut baik oleh bahasa.

Diskusi saat ini berkisar di sekitar jenis sintaksis di atas dan saya kebetulan menjadi salah satu yang setuju dengan saran; itu masuk akal dan dibaca dengan cara yang logis. Saya hanya ingin tahu apa yang akan terjadi pada penggunaan min() dan max() jika clamp() benar-benar membuat kehadiran di masa depan.

Dengan obrolan air dingin kami keluar dari jalan memungkinkan fokus pada fungsi matematika yang sebenarnya kami datang ke sini untuk mendiskusikan; calc(), min() dan max().

Sekarang Bertemu calc()

Ini adalah salah satu fungsi matematika favorit saya untuk keapikan CSS dan dapat melakukan segala macam sihir. Sintaksnya juga tidak terlalu kasar, begitu Anda mengerti, dan dukungannya sangat bagus.

Dalam contoh di atas kami memiliki nama fungsi (calc) diikuti oleh tanda kurung kami yang berisi "ekspresi", atau dengan kata lain ... logika matematika.

“Fungsi calc() memungkinkan ekspresi matematika dengan penambahan (+), pengurangan (-), perkalian (*), dan pembagian (/) untuk digunakan sebagai nilai komponen.” - W3C

Sekali lagi, ini suka berbicara karena mengatakan "Anda dapat melakukan matematika dalam tanda kurung".

Sehubungan dengan ekspresi, penufrelis dapat memberikan nilai generik seperti 50%, 2em, 40, dan dapat menggunakan calc() di mana pun <length>, <frequency>, <angle>, <time>, <percentage>, <number>, atau <interger> nilai diizinkan. Unit favorit saya untuk digunakan dan diperiksa dalam wild adalah unit viewport (vh,vw, vmin, vmax). Ini adalah nilai dimensi layar yang sangat berguna dengan tipografi dan tata letak seperti yang akan kita lihat.

calc() dalam Wild

Contoh di atas hanyalah salah satu cara untuk menangani tipografi yang responsif. Menggunakan kombinasi query media, Sass, calc() dan unit viewport, Mike membuktikan kepada kita bagaimana tipografi yang responsif dapat menskala sempurna antara nilai-nilai piksel tertentu.

Berikut adalah demo tipografi rahang yang menjatuhkan menggunakan unit calc() dan unit tampilan oleh Tim Brown. Demo ini digunakan untuk artikelnya yang membahas tentang CSS Locks yang saya sarankan untuk Anda baca jika tipografi adalah sesuatu yang Anda pedulikan.

Unit viewport dan calc() juga dapat membantu menciptakan beberapa pola tata letak yang paling favorit. Dalam demo di atas, calc() digunakan untuk mengurangi tinggi footer dari ketinggian viewport (vh). Solusi cerdas oleh Chris Coyier untuk teman lama kami, The Sticky Footer, sangat sering diminta. Demo ini juga berfungsi dengan baik ketika dikombinasikan dengan variabel CSS juga.

Tentu saja ada kasus lain ketika datang ke aplikasi dan negara-negara yang dinamis dalam demo ini oleh David Khourshid. David menggunakan calc() untuk latar belakang, nilai offset, transformasi, filter, opasitas, dan bahkan lebar. Ini juga merupakan demo besar bagi mereka yang ingin terjun ke React bersama dengan variabel CSS.

Sekarang mari kita lihat dua fungsi matematika tambahan yang pasti akan Anda nikmati, saat ini dikenal sebagai min() dan max().

min() dan max(): mendefinisikan kendala

Seperti yang disebutkan sebelumnya, fungsi-fungsi ini masih dalam tahap awal, jadi demo yang menampilkan kasus penggunaan suram, tetapi jangan biarkan hal itu membuat Anda takut untuk bereksperimen. Untuk menyelidiki min() dan max() Anda harus mengunduh WebKit setiap malam. Setelah diunduh, Anda bebas membuka Nightly (ikon hitam) dan mulai bekerja.

Ingat ketika kita belajar ekspresi apa? Itu hanya cara mewah untuk mengatakan "logika matematika". Sebagai contoh:

Setiap ekspresi dipisahkan koma dengan ekspresi tambahan yang mengikuti. Kami juga dapat beralih ke spesifikasi yang secara eksplisit menyatakan aturan yang sama ini:

“Nilai terhitung dari fungsi min() atau max() adalah daftar ekspresi yang dipisahkan koma” - W3C

Jika Anda melewatkan bagian yang sangat penting dari penjelasan, spek hanya menyatakan daftar ekspresi yang dipisahkan koma seperti yang kita lakukan di cuplikan kode sebelumnya.

“Fungsi min() atau max() mewakili yang terkecil (paling negatif) atau terbesar (paling positif), berturut-turut, perhitungan dipisahkan koma yang dikandungnya.” - W3C

Apakah Anda menangkap semuanya? Mereka hanya mengatakan yang terkecil (paling negatif) atau terbesar (paling positif). W3C hanya memberi kita izin untuk menulis angka negatif sebagai bagian dari ekspresi kita.

Mari luangkan waktu sekarang untuk melihat bagaimana min() dan max() membuktikan diri mereka dalam demo kerja; berpegang pada topi Anda.

min() dan max() dalam kehidupan nyata

Berikut adalah demo yang menampilkan beberapa kasus penggunaan untuk min() dan maks() menggunakan width komponen dan font-size. Width memiliki kendala minimum dan kendala maksimum sementara font-size komponen kami juga dijepit dengan nilai minimum dan maksimum. Ingat ini hanya akan bekerja di WebKit Nightly pada tulisan ini; jika Anda ingin melihat animasi dalam tindakannya, lihat GIF ini (yang terlalu berat untuk ditempelkan ke halaman).

Dalam contoh di atas, saya memulai hal-hal dengan membatasi width dan melakukannya dalam satu baris.

Dengan menggunakan pendekatan di atas, saya dapat menyertakan kendala menengah vs. hanya minimum dan maksimum. Baris kode ini memberi tahu browser "Cobalah untuk mengatur lebar menjadi 70vw, tetapi jangan biarkan lebih rendah dari 200px (100px * 2), atau lebih tinggi dari 500px." Ada juga jalan lain yang bisa Anda turunkan untuk mencapai hasil yang serupa.

Untuk menjelaskan secara lebih rinci, ini setara dengan minimum, menengah dan akhirnya nilai kendala maksimum. Nesting max() dalam min() membantu menjepit antara batasan yang diinginkan.

Jika kami menggunakan min-width dan max-width, kami akan mencapai tujuan yang setara dengan pencapaian kami dengan min() dan max(). Saya ingin tahu apakah properti seperti min-width akan menjadi usang yang mendukung fungsi matematika seperti min() dan max() di tahun-tahun mendatang.

Dalam hal font-size saya menggunakan pendekatan min / maks yang sama untuk membuat tipografi yang responsif dan mengunci.

Saya memberi tahu browser "Cobalah untuk mengatur ukuran font menjadi 4vw, tetapi jangan biarkan lebih rendah dari 1rem, atau lebih tinggi dari 2rem." Sayangnya tidak ada yang setara seperti min-font-size dan max-font-size seperti yang kami miliki untuk lebar, tetapi pada spesifikasi CSS Fonts Level 4 yang bisa menjadi kenyataan.

Ini tentu saja berita yang mengasyikkan dan penulis sama bersemangatnya ketika berhadapan dengan nilai-nilai yang menghambat dalam CSS.

menggunakan mesin pencari untuk memburu CSS Locks, Anda akan menemukan banyak sekali artikel dan demo. CodePen juga menampilkan berbagai pena di bawah pencarian CSS Loks lainnya. Bagi mereka yang baru mengenal ide CSS Locks biarkan saya menjelaskan lebih detail.. "Tipografi yang fleksibel dengan CSS Locks" namun teknik ini pertama kali diperkenalkan oleh Mike Riethmuller dalam artikelnya "Kontrol yang tepat atas tipografi yang responsif".> calc() dan viewport untuk heading dan body copy yang ditingkatkan atau diturunkan tergantung pada dimensi layar. Jenis pembatasan ini adalah apa yang kami ketahui sebagai "CSS Locks"..
  • Viewport Unit berbasis tipografi oleh Zell Lieww
  • Matematika CSS Locks oleh Florens Verscheldee
  • CSS "locks" oleh Chris Coyierr
  • Cairan tipografi oleh Geoff Grahamm
  • Tipografi Responsif dan Cairan Dengan vh Dan vw Unit oleh Michael Riethmullerr
  • Tipografi Responsif Cairan Dengan CSS Poly Fluid Sizing oleh Jake Wilsonn
font-size dengan dibawa JavaScript, sementara CSS berada di belakang. Saya akan membiarkan Anda memutuskan sendiri bagaimana perasaan Anda tentang JavaScript bercampur sendiri dengan CSS..
calc() atau telah bereksperimen dengan min() dan max() beri tahu kami di komentar. Selamat meng-coding!!
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.