Fungsi

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

The CSS Podcast - 020: Functions

Sejauh ini dalam kursus ini, Anda telah mempelajari beberapa fungsi CSS. Di modul petak, Anda telah diperkenalkan dengan minmax() dan fit-content(), yang membantu Anda menentukan ukuran elemen. Di modul color, Anda telah diperkenalkan dengan rgb(), dan hsl(), yang membantu Anda menentukan warna.

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

Setiap fungsi CSS memiliki tujuan tertentu. Dalam pelajaran ini, Anda akan mendapatkan ringkasan tingkat tinggi, yang memberi Anda pemahaman yang jauh lebih baik tentang tempat dan cara menggunakannya.

Apa yang dimaksud dengan fungsi?

Fungsi adalah potongan kode mandiri yang diberi nama dan menyelesaikan tugas tertentu. Fungsi diberi nama agar Anda dapat memanggilnya dalam kode dan meneruskan data ke fungsi. Hal ini dikenal sebagai meneruskan argumen.

Banyak fungsi CSS adalah fungsi murni, yang berarti bahwa jika Anda meneruskan argumen yang sama ke dalamnya, fungsi tersebut akan selalu memberikan hasil yang sama, terlepas dari apa yang terjadi di kode Anda yang lain. Fungsi ini akan sering dihitung ulang saat nilai berubah di CSS Anda, serupa dengan elemen lain dalam bahasa, seperti nilai cascade yang dihitung seperti currentColor.

Di CSS, Anda hanya dapat menggunakan fungsi yang disediakan, bukan menulis sendiri, tetapi fungsi dapat disusun bertingkat dalam beberapa konteks, sehingga memberikan fleksibilitas yang lebih besar. Kita akan membahasnya secara lebih mendetail nanti dalam modul ini.

Pemilih fungsional

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

Anda telah mempelajari pemilih fungsional di modul pseudo-class yang menjelaskan fungsi seperti :is() dan :not(). Argumen yang diteruskan ke fungsi ini adalah pemilih CSS, yang kemudian dievaluasi. Jika ada kecocokan dengan elemen, sisa aturan CSS akan diterapkan ke elemen 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 kaskade, yang berarti properti tersebut dapat dimanipulasi atau didefinisikan ulang secara kontekstual. Properti kustom harus diawali dengan dua tanda hubung (--) dan peka huruf besar/kecil.

Fungsi var() mengambil satu argumen yang diperlukan: properti kustom yang Anda coba tampilkan sebagai nilai.

Dalam cuplikan sebelumnya, fungsi var() memiliki --base-color yang diteruskan sebagai argumen. Jika --base-color ditentukan, var() akan menampilkan nilai.

.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 contoh ini adalah warna hotpink.

Fungsi yang menampilkan nilai

Fungsi var() hanyalah salah satu fungsi CSS yang menampilkan nilai. Fungsi 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 atribut href elemen <a> dan menetapkannya sebagai content elemen pseudo ::after. Jika nilai atribut href elemen <a> berubah, nilai 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 resource yang dituju URL tidak dapat ditemukan, tidak ada yang akan ditampilkan oleh fungsi url().

Fungsi warna

Anda telah mempelajari semua fungsi warna di modul warna. Jika Anda belum membacanya, sebaiknya baca artikel tersebut.

Beberapa fungsi warna yang tersedia di CSS adalah rgb(), hsl(), lab(), lch(), oklab(), oklch(), dan color(). Semua ini memiliki bentuk yang serupa, yaitu argumen konfigurasi diteruskan dan warna ditampilkan kembali.

Ekspresi matematika

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

Fungsi aritmetika

calc()

Fungsi calc() menggunakan satu ekspresi matematika 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 menentukan ukuran lebar elemen sebesar 100% dari elemen induk yang memuatnya, 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() lain. Anda juga dapat meneruskan properti kustom dalam fungsi var() sebagai bagian dari ekspresi.

min() dan max()

Fungsi min() menampilkan nilai terkecil yang dihitung dari satu atau beberapa argumen yang diteruskan. Fungsi max() melakukan hal sebaliknya: mendapatkan nilai terbesar dari satu atau beberapa argumen yang diteruskan.

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

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

clamp()

Fungsi clamp() menggunakan tiga argumen: ukuran minimum, ukuran ideal, dan maksimum.

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

Dalam contoh ini, font-size akan menjadi fleksibel 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— memberikan fungsi clamp() dengan titik penghitungan relatif.

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

Fungsi Trigonometri

Fungsi trigonometri memungkinkan Anda menemukan titik mana pun pada lingkaran berdasarkan sudut, membuat model fenomena siklus seperti gelombang suara, mendeskripsikan orbit, dan lainnya. Di CSS, Anda dapat menggunakan fungsi trigonometri untuk menetapkan properti berdasarkan rotasi, animasi waktu, memutar elemen berdasarkan titik, dan penggunaan lainnya.

Untuk informasi dan contoh selengkapnya, lihat artikel tentang fungsi trigonometri.

sin(), cos(), dan tan()

Fungsi sin(), cos(), dan tan() menggunakan argumen sudut dan menampilkan sinus, kosinus, dan tangen. Fungsi sin() dan cos() menampilkan angka antara -1 dan 1. Fungsi tan() menampilkan angka antara -Infinity dan +Infinity. Argumen sudut dapat berupa unit sudut yang didukung.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

Dalam contoh sebelumnya, --sine-degrees dan --sine-radians memiliki nilai yang sama (dalam hal ini 0.7071).

Pada contoh sebelumnya, fungsi sin() dan cos() digunakan untuk membuat animasi berosilasi pada sumbu x dan y dengan mengalikan hasilnya dengan jari-jari yang ditentukan. Menggunakan kedua fungsi sekaligus memungkinkan animasi mengorbit. Kita menggunakan properti kustom, --angle, untuk menganimasikan sudut dengan lancar untuk semua panggilan fungsi.

asin(), acos(), dan atan()

asin(), acos(), dan atan() adalah invers dari fungsi sin(), cos(), dan tan(), yang menggunakan angka sebagai argumen dan menampilkan nilai sudut antara -90deg dan 90deg. Fungsi asin() dan acos() menerima angka antara -1 dan 1, sedangkan fungsi atan() menerima angka antara -Infinity dan +Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

Fungsi atan2() menggunakan dua argumen yang mewakili titik relatif terhadap asal dan menampilkan sudut yang mewakili arah ke titik tersebut. Anda dapat menggunakannya untuk memutar elemen agar menghadap ke titik tertentu. Argumen dapat berupa angka, satuan ukuran, atau persentase, tetapi kedua argumen harus berupa jenis yang sama.

Pada contoh di atas, fungsi atan2() digunakan untuk menentukan sudut antara pusat area pandang dan posisi mouse saat ini. Perhatikan bahwa nilai y adalah argumen pertama, dan nilai x adalah argumen kedua. Sudut tersebut kemudian digunakan untuk memosisikan "pupil" relatif terhadap pusat "mata", sehingga mengikuti mouse.

hypot()

Fungsi hypot() menggunakan dua argumen panjang yang mewakili sisi segitiga siku-siku dan menampilkan panjang hipotenus. Anda dapat menggunakannya sebagai pintasan untuk menghitungnya menggunakan fungsi eksponensial. Kedua argumen harus memiliki jenis unit yang sama dan hypot() akan menampilkan jenis yang sama.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Fungsi eksponensial

pow() dan exp()

Fungsi pow() menggunakan dua argumen numerik, basis dan eksponen, dan menaikkan basis dengan pangkat eksponen. Kedua argumen harus berupa angka tanpa satuan. Fungsi exp() menggunakan satu argumen dan setara dengan memanggil fungsi pow() dengan dasar e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

Fungsi sqrt() menggunakan argumen numerik dan menampilkan akar kuadratnya. Argumen tidak boleh menyertakan unit.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

Fungsi log() menampilkan logaritma nilai numerik. Jika satu argumen diteruskan, argumen tersebut akan menampilkan logaritma natural. Jika argumen kedua diteruskan, fungsi log() akan menggunakan argumen kedua sebagai dasar untuk logaritma.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Fungsi terkait tanda tangan

abs()

Fungsi abs() menggunakan argumen numerik dan menampilkan nilai absolut (positif) dari nilai argumen.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

Pada contoh sebelumnya, nilai alpha -1 akan menghasilkan teks transparan, tetapi fungsi abs() menampilkan nilai absolut 1, yang menghasilkan teks yang sepenuhnya buram.

sign()

Fungsi sign() menggunakan argumen numerik dan menampilkan tanda argumen. Nilai positif menampilkan 1 dan nilai negatif menampilkan -1. Nilai nol menampilkan 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

Pada contoh sebelumnya, jika --value positif, nilai teratas akan menjadi 75vh. Jika negatif, nilai atas akan menjadi 25vh. Jika nol, nilai teratas akan menjadi 50vh.

Bentuk

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

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

.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 isi SVG sebagai argumen. Hal ini memungkinkan bentuk yang sangat kompleks yang dapat digambar di alat grafis seperti Illustrator atau Inkscape, lalu disalin ke CSS Anda.

Transformasi

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

Rotasi

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

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

Fungsi rotate3d() menggunakan empat argumen.

3 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);
}

Anda dapat menggunakan properti rotate individual untuk memutar elemen. Jika digunakan di luar properti transform, Anda dapat mentransisinya secara terpisah dari transformasi lainnya. Properti ini menerima nilai yang serupa dengan fungsi rotasi.

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, sumbu X dan Y akan diskalakan dengan cara yang sama dan menentukan keduanya adalah singkatan untuk X dan Y. Sama seperti rotate(), ada fungsi scaleX(), scaleY(), dan scaleZ() untuk menskalakan elemen pada sumbu tertentu.

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

Seperti fungsi rotate, ada fungsi scale3d(). Fungsi ini mirip dengan scale(), tetapi memerlukan tiga argumen: faktor skala X, Y, dan Z.

Anda dapat menggunakan setiap properti scale untuk menskalakan elemen. Jika digunakan di luar properti transform, Anda dapat mentransisikannya secara terpisah dari transformasi lainnya.

Terjemahan

Fungsi translate() memindahkan elemen sambil mempertahankan posisinya dalam alur dokumen. Fungsi ini 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 dapat—seperti halnya fungsi transformasi lainnya—menggunakan fungsi tertentu untuk sumbu tertentu, menggunakan translateX, translateY, dan translateZ. Anda juga dapat menggunakan translate3d yang memungkinkan Anda menentukan terjemahan X, Y, dan Z dalam satu fungsi.

Seperti scale dan rotate, Anda juga dapat menggunakan properti translate di luar properti transform untuk memindahkan elemen.

.my-element{
  translate: 20px 30px;
}

Penyimpangan

Anda dapat memiringkan elemen, menggunakan fungsi skew() 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, argumen tersebut akan memengaruhi 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. Hal ini memberikan kesan jarak dan dapat digunakan untuk membuat kedalaman bidang dalam desain Anda.

Contoh ini oleh David Desandro, dari artikelnya yang sangat berguna, menunjukkan cara penggunaannya, bersama dengan properti perspective-origin-x dan perspective-origin-y untuk menciptakan pengalaman 3D yang benar-benar nyata.

Fungsi, gradien, dan filter animasi

CSS juga menyediakan fungsi yang membantu Anda mengoanimasi elemen, menerapkan gradien ke elemen tersebut, dan menggunakan filter grafis untuk memanipulasi tampilannya. Agar modul ini tetap ringkas, modul tersebut akan dibahas dalam modul tertaut. Semuanya mengikuti struktur yang serupa dengan fungsi yang ditunjukkan dalam modul ini.

Memeriksa pemahaman Anda

Menguji pengetahuan Anda tentang fungsi