Podcast CSS - 020: Fungsi
Sejauh ini, Anda telah mempelajari beberapa fungsi CSS.
Dalam modul grid,
Anda telah diperkenalkan dengan minmax() dan fit-content(),
yang membantu Anda mengukur elemen.
Dalam modul warna,
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 umum, sehingga memberi Anda pemahaman yang jauh lebih baik tentang tempat dan cara menggunakannya.
Apa yang dimaksud dengan fungsi?
Fungsi adalah potongan kode mandiri yang bernama yang menyelesaikan tugas tertentu. Fungsi diberi nama sehingga Anda dapat memanggilnya dalam kode dan meneruskan data ke fungsi. Hal ini dikenal sebagai meneruskan argumen.
Banyak fungsi CSS merupakan fungsi murni,
yang berarti jika Anda meneruskan argumen yang sama ke dalamnya,
fungsi tersebut akan selalu memberikan hasil yang sama,
terlepas dari apa yang terjadi dalam kode Anda lainnya.
Fungsi ini akan sering dihitung ulang saat nilai berubah di CSS Anda,
serupa dengan elemen lain dalam bahasa,
seperti nilai bertingkat yang dikomputasi seperti currentColor.
Dalam CSS, Anda hanya dapat menggunakan fungsi yang disediakan, bukan menulisnya sendiri, tetapi fungsi tersebut dapat disusun bertingkat dalam satu sama lain dalam beberapa konteks, sehingga memberinya lebih banyak fleksibilitas. Kita akan membahasnya secara lebih detail nanti dalam modul ini.
Pemilih fungsional
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Anda telah mempelajari pemilih fungsional di
modul class pseudo
yang memerinci fungsi seperti
:is() dan
:not().
Argumen yang diteruskan ke fungsi ini adalah pemilih CSS, yang kemudian dievaluasi.
Jika ada kecocokan dengan elemen,
bagian lain dari aturan CSS akan diterapkan pada elemen tersebut.
Properti khusus 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 khusus juga terpengaruh oleh jenjang 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() menggunakan 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 nilainya.
.my-element {
background: var(--base-color, hotpink);
}
Anda juga dapat meneruskan nilai deklarasi penggantian ke dalam 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.
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 dari elemen <a>
dan menyetelnya sebagai content dari elemen pseudo ::after.
Jika nilai atribut href dari elemen <a> berubah,
hal ini akan otomatis tercermin dalam atribut content ini.
.my-element {
background-image: url('/path/to/image.jpg');
}
Fungsi url() mengambil URL string dan digunakan untuk memuat gambar, font, dan konten.
Jika URL yang valid tidak diteruskan atau resource yang ditunjuk URL tidak dapat ditemukan,
tidak ada yang akan ditampilkan oleh fungsi url().
Fungsi warna
Anda telah mempelajari semua hal tentang fungsi warna dalam modul color. Jika Anda belum membacanya, sebaiknya Anda melakukannya.
Beberapa fungsi warna yang tersedia di CSS adalah
rgb(), rgba(), hsl(), hsla(), hwb(), lab(), dan lch().
Semua ini memiliki bentuk yang serupa di mana argumen konfigurasi diteruskan dan warna dikembalikan.
Ekspresi matematika
Seperti banyak bahasa pemrograman lainnya, CSS memberikan fungsi matematis yang berguna untuk membantu berbagai jenis kalkulasi.
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 menetapkan ukuran lebar elemen
sebesar 100% dari elemen induknya,
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 ditempatkan di dalam fungsi calc() lainnya.
Anda juga dapat meneruskan properti kustom dalam fungsi var() sebagai bagian dari ekspresi.
min() dan max()
Fungsi min()
menampilkan nilai komputasi terkecil dari satu atau beberapa argumen yang diteruskan.
Fungsi max()
melakukan hal yang 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 merupakan nilai terbesar antara 20vh
—yang merupakan 20% dari tinggi area pandang—dan 20rem.
{b>clamp()<b}
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 menyesuaikan 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—
akan menghasilkan fungsi clamp() dengan titik kalkulasi relatif.
Anda dapat mempelajari fungsi min(), max(), dan clamp() lebih lanjut dalam
artikel ini.
Bentuk
Properti CSS
clip-path,
offset-path, dan
shape-outside
menggunakan bentuk untuk memotong kotak Anda 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 mengukurnya.
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 pengisian SVG sebagai argumen.
Hal ini memungkinkan bentuk yang sangat kompleks dapat digambar di alat grafis
seperti Illustrator atau Inkscape, lalu disalin ke CSS.
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 di sumbu tengahnya.
Anda juga dapat menggunakan fungsi
rotateX(),
rotateY(), dan
rotateZ()
untuk memutar elemen pada sumbu tertentu.
Anda dapat melewati satuan derajat, belokan, 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);
}
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 memiliki skala 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);
}
Selain itu, seperti fungsi rotate, terdapat
fungsi scale3d().
Ini mirip dengan scale(), tetapi menggunakan tiga argumen: faktor skala X, Y, dan Z.
Terjemahan
Fungsi translate() memindahkan elemen sambil 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);
}
Seperti halnya fungsi transformasi lainnya, Anda dapat 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.
Kemiringan
Anda dapat mencondongkan 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 hanya akan memengaruhi sumbu X dan jika Anda menentukan keduanya,
argumen 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 memberi kesan jarak dan dapat digunakan untuk menciptakan depth of field dalam desain Anda.
Contoh oleh David Desandro ini, dari artikelnya yang sangat berguna, menunjukkan cara penggunaannya,
beserta properti perspective-origin-x dan perspective-origin-y untuk membuat pengalaman 3D yang benar-benar.
Fungsi, gradien, dan filter animasi
CSS juga menyediakan fungsi yang membantu Anda menganimasikan elemen, menerapkan gradien pada elemen tersebut, dan menggunakan filter grafis untuk memanipulasi tampilannya. Agar modul ini sesingkat mungkin, modul tersebut dibahas dalam modul tertaut. Semuanya mengikuti struktur yang mirip dengan fungsi yang didemonstrasikan dalam modul ini.
Menguji pemahaman Anda
Menguji pengetahuan Anda tentang fungsi
Karakter apa yang dapat diidentifikasi oleh fungsi CSS?
[]{}():::CSS memiliki fungsi matematika bawaan?
Fungsi calc() dapat ditempatkan di dalam calc() lain seperti font-size: calc(10px + calc(5px * 3));
Manakah dari hal berikut yang merupakan fungsi bentuk CSS?
ellipse()square()circle()rect()inset()polygon()