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
Fungsi CSS dapat diidentifikasi dengan karakter apa?
::
[]
()
{}
:
CSS memiliki fungsi matematika bawaan?
Fungsi calc()
dapat ditempatkan di dalam calc()
lain seperti font-size: calc(10px + calc(5px * 3));
Manakah dari berikut ini yang merupakan fungsi bentuk CSS?
circle()
square()
polygon()
ellipse()
inset()
rect()