Fungsi

Podcast CSS - 020: Fungsi

Dalam materi ini, Anda telah mempelajari beberapa fungsi CSS. Di modul grid, Anda diperkenalkan dengan minmax() dan fit-content(), yang membantu Anda mengukur elemen. Di modul color, Anda diperkenalkan dengan rgb(), dan hsl(), yang membantu Anda menentukan warna.

Seperti banyak bahasa pemrograman lainnya, CSS memiliki banyak fungsi bawaan yang dapat diakses kapan pun Anda membutuhkannya.

Setiap fungsi CSS memiliki tujuan tertentu, dalam pelajaran ini, Anda akan mendapatkan gambaran umum, sehingga memberi Anda pemahaman yang lebih baik tentang di mana dan bagaimana menggunakannya.

Apa itu fungsi?

Fungsi adalah bagian kode mandiri yang bernama dan menyelesaikan tugas tertentu. Sebuah fungsi diberi nama sehingga Anda dapat memanggilnya dalam kode dan dapat meneruskan data ke fungsi tersebut. Ini dikenal sebagai meneruskan argumen.

Banyak fungsi CSS yang merupakan fungsi murni, yang berarti bahwa jika Anda meneruskan argumen yang sama ke dalamnya, mereka akan selalu memberikan hasil yang sama, terlepas dari apa yang terjadi pada kode Anda lainnya. Fungsi-fungsi ini sering kali dikomputasi ulang seiring dengan perubahan nilai di CSS Anda, mirip dengan elemen lain dalam bahasa tersebut, seperti nilai beruntun yang dikomputasi seperti currentColor.

Dalam CSS, Anda hanya dapat menggunakan fungsi yang disediakan, daripada menulis sendiri, tetapi fungsi dapat disarangkan dalam satu sama lain dalam beberapa konteks, memberi mereka lebih banyak fleksibilitas. Kita akan membahasnya secara lebih mendetail, nanti di modul ini.

Pemilih fungsional

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Anda telah mempelajari tentang pemilih fungsional dalam modul pseudo-class fungsi yang terperinci seperti :is() dan :not() Argumen yang diteruskan ke fungsi ini adalah pemilih CSS, yang kemudian dievaluasi. Jika ada kecocokan dengan elemen, aturan CSS lainnya akan diterapkan pada URL tersebut.

Properti kustom dan var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Properti kustom adalah variabel yang memungkinkan Anda membuat token nilai dalam kode CSS. Properti kustom juga terpengaruh oleh turunan yang berarti mereka dapat dimanipulasi atau didefinisikan ulang secara kontekstual. Properti kustom harus diawali dengan dua tanda hubung (--) dan peka huruf besar/kecil.

var() fungsi mengambil satu argumen yang diperlukan: properti khusus yang ingin Anda tampilkan sebagai nilai. Dalam cuplikan di atas, fungsi var() memiliki --base-color yang diteruskan sebagai argumen. Jika --base-color ditentukan, var() akan menampilkan nilainya.

.my-element {
    background: var(--base-color, hotpink);
}

Anda juga dapat meneruskan nilai deklarasi penggantian ke fungsi var(). Artinya, jika --base-color tidak dapat ditemukan, deklarasi yang diteruskan akan digunakan, yang dalam kasus contoh ini adalah warna hotpink.

Fungsi yang menampilkan nilai

Fungsi var() hanyalah salah satu fungsi CSS yang menampilkan nilai. {i>Function<i} seperti attr() dan url() mengikuti struktur yang mirip dengan var()— Anda meneruskan satu atau beberapa argumen dan menggunakannya di sisi kanan deklarasi CSS.

a::after {
  content: attr(href);
}

Fungsi attr() di sini mengambil konten dari atribut href elemen <a> dan menyetelnya sebagai content dari elemen semu ::after. Jika nilai atribut href elemen <a> berubah, hal ini akan otomatis tercermin dalam atribut content ini.

.my-element {
    background-image: url('/path/to/image.jpg');
}

Fungsi url() menggunakan URL string dan digunakan untuk memuat gambar, font, dan konten. Jika URL yang valid tidak diteruskan atau sumber daya yang ditunjuk URL tidak dapat ditemukan, tidak ada yang akan ditampilkan oleh fungsi url().

Fungsi warna

Anda telah mempelajari semua hal tentang fungsi warna di modul color. Jika Anda belum membacanya, sangat disarankan untuk membacanya.

Beberapa fungsi warna yang tersedia di CSS adalah rgb(), rgba(), hsl(), hsla(), hwb(), lab(), dan lch(). Semua ini memiliki bentuk serupa di mana argumen konfigurasi diteruskan dan warna dikembalikan.

Ekspresi matematika

Seperti banyak bahasa pemrograman lainnya, CSS menyediakan fungsi matematika yang berguna untuk membantu berbagai jenis penghitungan.

calc()

calc() menggunakan ekspresi matematika tunggal sebagai parameternya. Ekspresi matematika ini dapat berupa campuran jenis, seperti panjang, angka, sudut, dan frekuensi. Unit juga dapat dicampur.

.my-element {
    width: calc(100% - 2rem);
}

Dalam contoh ini, fungsi calc() digunakan untuk mengukur lebar elemen sebagai 100% dari elemen induk yang dikandungnya, lalu menghapus 2rem dari nilai yang dihitung tersebut.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

Fungsi calc() dapat disusun bertingkat di dalam fungsi calc() lainnya. Anda juga dapat meneruskan properti kustom dalam fungsi var() sebagai bagian dari ekspresi.

min() dan max()

min() mengembalikan nilai komputasi terkecil dari satu atau beberapa argumen yang diteruskan. max() melakukan hal yang sebaliknya: dapatkan nilai terbesar dari satu atau beberapa argumen yang diteruskan.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Dalam contoh ini, lebar harus merupakan nilai terkecil antara 20vw —yaitu 20% dari lebar area pandang—dan 30rem. Tinggi harus merupakan nilai terbesar antara 20vh —yang merupakan 20% dari tinggi area pandang—dan 20rem.

{i>clamp()<i}

clamp() fungsi membutuhkan tiga argumen: ukuran minimum, ukuran ideal dan maksimum.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Dalam contoh ini, font-size akan berubah berdasarkan lebar area pandang. Unit vw ditambahkan ke unit rem untuk membantu zoom layar, karena terlepas dari tingkat zoom, unit vw akan memiliki ukuran yang sama. Mengalikan dengan unit rem—berdasarkan ukuran font root— menyediakan fungsi clamp() dengan titik penghitungan relatif.

Anda dapat mempelajari lebih lanjut fungsi min(), max(), dan clamp() di artikel ini.

Bentuk

Tujuan clip-path, offset-path dan shape-outside Properti CSS menggunakan bentuk untuk memotong kotak Anda secara visual atau memberikan bentuk agar konten mengalir.

Ada fungsi bentuk yang dapat digunakan dengan kedua properti ini. Bentuk sederhana seperti circle(), ellipse() dan inset() mengambil argumen konfigurasi untuk mengukurnya. Bentuk yang lebih kompleks, seperti polygon() ambil pasangan nilai sumbu X dan Y yang dipisahkan koma untuk membuat bentuk khusus.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Seperti polygon(), ada juga fungsi path() yang menggunakan aturan pengisian SVG sebagai argumen. Hal ini memungkinkan bentuk yang sangat kompleks yang dapat digambar dalam alat grafis seperti Illustrator atau Inkscape lalu disalin ke dalam CSS.

Transformasi

Terakhir dalam ikhtisar fungsi CSS ini adalah fungsi transformasi, yang miring, mengubah ukuran, dan bahkan mengubah kedalaman elemen. Semua fungsi berikut digunakan dengan properti transform.

Rotasi

Anda dapat memutar elemen menggunakan rotate() , yang akan memutar elemen pada sumbu tengahnya. Anda juga dapat menggunakan rotateX(), rotateY() dan rotateZ() fungsi untuk memutar elemen pada sumbu tertentu. Anda dapat meneruskan satuan derajat, putaran, dan radian untuk menentukan tingkat rotasi.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() mengambil empat argumen.

Tiga argumen pertama adalah angka, yang menentukan koordinat X, Y, dan Z. Argumen keempat adalah rotasi yang, seperti fungsi rotasi lainnya, menerima derajat, sudut, dan belokan.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Skala

Anda dapat mengubah penskalaan elemen dengan transform dan Fungsi scale(). Fungsi ini menerima satu atau dua angka sebagai nilai yang menentukan penskalaan positif atau negatif. Jika Anda hanya menentukan satu argumen angka, baik sumbu X dan Y akan diskalakan dengan cara yang sama dan mendefinisikan keduanya adalah singkatan untuk X dan Y. Sama seperti rotate(), ada scaleX(), scaleY() dan scaleZ() fungsi untuk menskalakan elemen pada sumbu tertentu.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Selain itu, seperti fungsi rotate, ada Fungsi scale3d(). Ini mirip dengan scale(), tetapi memerlukan tiga argumen: faktor skala X, Y, dan Z.

Terjemahan

translate() fungsi memindahkan elemen saat mempertahankan posisinya dalam alur dokumen. Mereka menerima nilai panjang dan persentase sebagai argumen. Fungsi translate() menerjemahkan elemen di sepanjang sumbu X jika satu argumen ditentukan, dan menerjemahkan elemen di sepanjang sumbu X dan Y jika kedua argumen ditentukan.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Anda bisa—seperti fungsi transformasi lainnya—menggunakan fungsi tertentu untuk sumbu tertentu, menggunakan translateX, translateY dan translateZ. Anda juga dapat menggunakan translate3d yang memungkinkan Anda untuk menentukan terjemahan X, Y dan Z dalam satu fungsi.

Kemiringan (skewing)

Anda dapat mencondongkan elemen, menggunakan skew() fungsi yang menerima sudut sebagai argumen. Fungsi skew() berfungsi dengan cara yang sangat mirip dengan translate(). Jika Anda hanya menentukan satu argumen, argumen tersebut hanya akan memengaruhi sumbu X dan jika Anda menentukan keduanya, maka akan mempengaruhi sumbu X dan Y. Anda juga dapat menggunakan skewX dan skewY untuk memengaruhi setiap sumbu secara terpisah.

.my-element {
  transform: skew(10deg);
}

Perspektif

Terakhir, Anda dapat menggunakan Properti perspective —yang merupakan bagian dari keluarga properti transformasi—untuk mengubah jarak antara pengguna dan bidang Z. Warna ini memberi kesan jarak dan dapat digunakan untuk menciptakan kedalaman bidang dalam desain Anda.

Contoh yang ditulis oleh David Desandro ini, dari artikelnya yang sangat berguna, menunjukkan cara penggunaannya, beserta properti perspective-origin-x dan perspective-origin-y untuk menciptakan pengalaman 3D yang sesungguhnya.

Fungsi, gradien, dan filter animasi

CSS juga menyediakan fungsi yang membantu Anda menganimasikan elemen, menerapkan gradien dan menggunakan filter grafis untuk memanipulasi tampilannya. Untuk membuat modul ini sesingkat mungkin, keduanya dibahas dalam modul tertaut. Semua alat tersebut mengikuti struktur yang mirip dengan fungsi yang ditunjukkan dalam modul ini.

Menguji pemahaman Anda

Menguji pengetahuan Anda tentang fungsi