Fungsi

Sejauh ini dalam kursus ini, Anda telah mempelajari beberapa fungsi CSS. Dalam modul petak, Anda telah diperkenalkan dengan minmax() dan fit-content(), yang membantu Anda menentukan ukuran elemen. Dalam 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 dapat meneruskan data ke fungsi. Hal ini dikenal sebagai meneruskan argumen.

Diagram fungsi seperti yang dijelaskan di atas

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 di atas, 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 serupa 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(), rgba(), hsl(), hsla(), hwb(), lab(), dan lch(). 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.

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

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 ini.

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(), menggunakan 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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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() mengambil empat argumen.

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

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

Skala

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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.

Terjemahan

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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.

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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 animate elemen, menerapkan gradien ke elemen tersebut, dan menggunakan filter grafis untuk memanipulasi tampilannya. Agar modul ini sesingkat mungkin, 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

Fungsi CSS dapat diidentifikasi oleh karakter mana?

::
[]
{}
:
()

CSS memiliki fungsi matematika bawaan?

Salah
Benar

Fungsi calc() dapat ditempatkan di dalam calc() lain seperti font-size: calc(10px + calc(5px * 3));

Benar
Salah

Manakah dari opsi berikut yang merupakan fungsi bentuk CSS?

square()
inset()
rect()
polygon()
circle()
ellipse()