CSS adalah Bahasa Pemrograman
Terdapat tiga bahasa yang bisa digunakan untuk membuat laman di web: HTML, CSS dan JavaScript. Pada zaman dahulu kala, tugas pemrograman komputer di peramban dilakukan sepenuhnya oleh JavaScript. Tapi beberapa fitur baru pada CSS saat ini sudah mampu untuk mengerjakan tugas-tugas yang dahulu hanya bisa dilakukan oleh JavaScript.
Tabel Konten
HTML, CSS dan JavaScript. Pada zaman dahulu kala, ketiga bahasa tersebut hidup dengan damai. HTML, memberikan tanda dan batas pada bagian-bagian tertentu di dalam dokumen. CSS, memberikan gaya dan dekorasi pada bagian-bagian dokumen yang telah ditandai oleh HTML.
Adalah JavaScript, yang bertugas untuk mengirim dan menerima pesan dari klien ke dokumen… agar klien dan dokumen dapat saling berinteraksi satu sama lain. Tanpa JavaScript, klien hanya akan mampu berkomunikasi secara pasif; sekadar untuk membuka dan menutup dokumen saja.
Hanya JavaScript, yang mampu mengendalikan tugas-tugas pemrograman komputer di sisi klien. Namun semuanya berubah saat CSS3 menyerang.
Pada prinsipnya, sebuah bahasa dapat dikatakan sebagai bahasa pemrograman apabila dia mampu menghitung dan mengambil keputusan. CSS bukan bahasa pemrograman karena dia tidak bisa menghitung dan mengambil keputusan. HTML juga begitu.
Tapi itu dulu. Beberapa fitur baru yang sudah aktif dan berbagai spesifikasi masa depan untuk CSS yang sedang dirancang oleh W3C justru membuat bahasa “gaya” ini menjadi tampak seperti bahasa pemrograman. Berikut adalah beberapa fitur baru pada CSS yang menurut Saya lebih cenderung ke arah bahasa pemrograman dibandingkan ke arah bahasa “gaya”.
CSS Punya Variabel
Fitur baru pada CSS ini memungkinkan pengembang untuk memisahkan komponen-komponen nilai ke dalam variabel, sehingga dapat digunakan kembali dan dimodifikasi nilainya berdasarkan kondisi tertentu tanpa harus mengubah kode pemanggilan data variabel yang sudah dituliskan setelahnya. Berikut ini adalah bagaimana kita menentukan warna sebelum era variabel:
div {
color: rgb(255, 0, 0);
}
Variabel pada CSS memungkinkan kita untuk mengeluarkan komponen-komponen warna dari fungsi rgb()
ke dalam variabel sehingga kita bisa mengubah intensitas warna merah, hijau dan biru secara tidak langsung tanpa harus mengubah keseluruhan deklarasi warna RGB yang sudah diterapkan:
:root {
--red: 255;
--green: 0;
--blue: 0;
}
div {
/* red */
color: rgb(var(--red), var(--green), var(--blue));
}
div:hover {
/* blue */
--red: 0;
--blue: 255;
}
CSS Punya Fungsi
Pada awalnya Saya tidak menyadari akan adanya fitur semacam ini pada CSS. Tapi melihat bagaimana orang-orang mulai menggunakan fitur variabel untuk mengontrol nilai argumen pada gradien dan sistem warna RGB membuat Saya menjadi “klik” dengan pernyataan bahwa terdapat fitur fungsi pada CSS.
CSS Punya Fitur Logika
Dalam JavaScript, kita menggunakan blok if
untuk bekerja dengan logika. CSS tidak punya fitur seperti itu. Tapi CSS punya fitur kueri @media
dan @supports
yang fungsinya sangat mirip dengan blok if
dalam bahasa pemrograman JavaScript:
div {
color: #000;
}
/* if (width <= 600px) { … } */
@media (max-width: 600px) {
div {
color: #fff;
}
}
/* if (width <= 600px && height <= 300px) { … } */
@media (max-width: 600px) and (max-height: 300px) {
div {
color: #fff;
}
}
/* if (display in div && div.display == grid) { … } */
@supports (display: grid) {
div {
display: grid;
}
}
/* if (!display in div || div.display != grid) { … } */
@supports not (display: grid) {
div {
float: left;
}
}
Selektor CSS, kalau dipikir-pikir juga sebenarnya bekerja sebagaimana fitur logika pada JavaScript. Karena perintah-perintah pada CSS akan berlaku pada elemen-elemen tertentu saja sesuai dengan selektor yang diberikan:
/* if (true) { … } */
* {
margin: 0;
}
/* if (p) { … } */
p {
margin: 0;
}
/* if (button.parent == p) { … } */
p > button {
margin: 0;
}
/* if (p.prev == p) { … } */
p + p {
margin: 0;
}
CSS Punya Fitur Pengulangan
Selektor CSS akan memberlakukan perintah pada semua elemen HTML yang cocok. Hal ini membuat selektor CSS bekerja sebagai iterator sebagaimana blok for
dan while
bekerja pada JavaScript:
/* div.each(v => v.color = #00f) */
div {
color: #00f;
}
CSS Punya Fitur Asinkron
Tidak percaya? Coba kamu panggil berkas-berkas fon dengan @font-face
kemudian tampilkan teks versi biasanya saja. Maka fon-fon dengan berat dan gaya yang berbeda tidak akan dimuat sebelum berat dan gaya tersebut tampak di permukaan:
@font-face {
font-family: 'Open Sans';
src: url('../woff/open-sans.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../woff/open-sans.b.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../woff/open-sans.i.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Open Sans';
src: url('../woff/open-sans.bi.woff') format('woff');
font-weight: bold;
font-style: italic;
}
* {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-style: normal;
}
/* Fon dengan berat `bold` tidak akan dimuat sampai elemen `<b>` tampak di dalam dokumen */
b {
font-weight: bold;
}
/* Fon dengan gaya `italic` tidak akan dimuat sampai elemen `<i>` tampak di dalam dokumen */
i {
font-style: italic;
}
Kita juga bisa memanfaatkan fitur kueri media untuk memuat latar gambar berukuran besar hanya ketika kita berada di perangkat dengan ukuran layar yang cukup lebar. Dengan begitu para pengguna yang akan membuka laman web kalian melalui perangkat seluler dapat mengunduh latar gambar dengan ukuran dan resolusi yang lebih kecil, sesuai dengan lebar layar perangkat seluler yang mereka pakai saat itu:
:root {
background: url('../jpg/800.jpg') no-repeat 50% 50%;
}
@media (min-width: 1600px) {
:root {
background-image: url('../jpg/1600.jpg');
}
}
Berikut ini adalah satu cara untuk memuat gambar latar hanya ketika kotak centang dicentang:
div {
background: transparent none no-repeat 50% 50%;
}
:checked + div {
background-image: url('../jpg/3000.jpg');
}
CSS Punya Fitur Animasi
Fitur CSS3 yang paling mengerikan menurut Saya adalah fitur animasi. Karena memindahkan posisi elemen tidak seharusnya dilakukan oleh CSS. Tapi sekarang kita bisa menggunakan CSS transisi dan animasi untuk memindahkan elemen dari tempat yang satu ke tempat yang lain dengan efek animasi. Sesuatu yang dulu telah biasa kita lakukan dengan bantuan jQuery:
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
div {
width: 100px;
height: 100px;
background: #000;
transition: opacity 1s ease-out;
animation: spin 10s linear infinite;
}
div:hover {
opacity: 0;
}
CSS Bisa Mengukur Waktu
Karena transisi dan animasi membutuhkan durasi, maka CSS dapat dikatakan mampu mengukur waktu.
CSS Bisa Menghitung
CSS bisa melakukan perhitungan matematika dengan memanfaatkan fungsi calc()
. Meskipun cara CSS dalam menghitung angka-angka tampak sedikit aneh karena calc()
mampu melakukan operasi matematika pada unit-unit dengan satuan yang berbeda, tapi dengan munculnya fitur ini saja sudah cukup untuk membuat Saya merasakan bahwa CSS semakin ke sini semakin mengarah ke bahasa pemrograman:
:root {
width: calc(100vw - 1em);
height: calc(100vh - 1em);
}
CSS Bisa Memberikan Perintah kepada Peramban
Dua properti baru pada CSS bernama will-change
dan contain
mampu memberikan perintah kepada peramban untuk melakukan tindakan-tindakan tertentu berdasarkan kemungkinan-kemungkinan perubahan yang akan terjadi pada bagian-bagian tertentu di dalam laman, dengan harapan proses render dapat berjalan dengan lebih efisien.
CSS Bisa Menjalankan Perintah dari Peramban
CSS env()
memungkinkan peramban untuk mengeset variabel global di dalam CSS berdasarkan variabel lingkungan yang diberikan oleh agen pengguna, untuk dapat diterapkan di dalam kode CSS kemudian.
CSS Animasi Menggulung?!
Properti scroll-behavior
adalah properti yang menurut Saya sangat tidak sesuai dengan tugas dan fungsi CSS pada web.
Terdapat begitu banyak fitur baru pada bahasa CSS saat ini yang semakin hari semakin aneh saja perilakunya hingga membuat Saya tidak habis pikir sebenarnya teknologi CSS mau diarahkan ke mana di masa depan. Kalian mungkin perlu membaca beberapa artikel di bawah ini untuk semakin meningkatkan rasa ingin tahu kalian mengenai kemampuan-kemampuan tidak lazim pada CSS yang dahulu mungkin hanya bisa dilakukan oleh JavaScript:
12 Komentar
Aqshal Tata
Kalau dipikir-pikir lagi, masuk akal juga. Sudah banyak sekali fitur-fitur di CSS yang menyaingi bahasa pemrograman JavaScript. Mungkin kedepannya, kita tidak perlu pakai JavaScript lagi 🤔
KangRian.NET
Kenapa saya harus gemar membaca.. beda halnya dengan menulis, tak pernah seindah membaca. 😌
*curhat~
Zen
Di bagian “CSS punya fitur logika” ada satu yang belum dicantumkan. Yaitu, CSS bisa mendeteksi apakah perangkat menggunakan light mode atau dark mode. Aku lupa kodenya tapi.
Taufik Nurrohman
Ini mas → /teknis/mode-terang-dan-gelap#ke:menggunakan-kueri-media
Nurhidayat
Betul juga ya. Selama ini yang saya tahu kode pemrograman itu ya seperti JavaScript, Python, PHP, dsb., dan saya gak tahu apakah CSS adalah kode pemrograman?
Nurhidayat
Mas kalau menyatukan skrip dari
lazysizes
dan parameter gambar Google biar responsif kira-kira bisa tidak ya?Emde Fikri
Mas, solusi untuk membuat iklan adsense, baik auto atau manual, tidak ditampilkan secara penuh tanpa padding dan margin bagaimana? Saya ingin iklan mengikuti luas body yang saya tetapkan. Apa pengaturan css yang tepat ya?
Taufik Nurrohman
Pakai pengaturan fixed-width nggak bisa mas?
Muslim Syamsul Arifin
Terima kasih banyak mas Taufik. Banyak sekali fitur CSS yang tertera di atas belum pernah saya ketahui sebelumnya. Langsung saja saya bookmark halaman ini untuk referensi. Good job. 👍
Eko27.com
Ternyata banyak sekali fungi dalam bahasa pemrograman CSS Banyak belajar dari postingan di web ini, semakin banyak ilmu yg didapat Terimakasih mas.
Arif
Apa yang mendasari Mas Taufik memutuskan untuk menggunakan flexbox di konten DTE (main dan aside)?
Saya memiliki asumsi bahwa flexbox lebih tepat digunakan untuk elemen inline block seperti ketika membuat card yang sejajar misalnya, sementara grid digunakan untuk elemen block seperti main dan aside.
Saya masih belum tahu bagaimana caranya menggunakan grid untuk main dan aside dan ketika di viewport yang lebar bilah sisi (aside) bisa berada dalam sisi kiri dan main berada di seberang kanan.
Alasannya, barangkali terdapat ideologi tertentu dalam penempatan aside di kiri konten utama, dan saya tertarik untuk juga menempatkan aside di sisi kiri. Kira-kira sejak 2017 awal mula saya mengikuti perkembangan DTE di Blogger, Mas Taufik menggunakan bilah sisi di kiri konten, bahkan kini pakai Mecha pun tetap sama.
Menurut Mas Taufik, apa persamaan dan perbedaan flexbox dan grid dalam implementasinya? Barangkali asumsi saya di atas tidak tepat atau malah keliru.
Taufik Nurrohman
Fitur-fitur baru pada CSS setahu Saya dibuat untuk menyesuaikan kebutuhan para pengguna.
Pada awalnya, kita membuat tampilan kolom dengan bantuan tabel, cuma kemudian ada kendala dari segi semantik: tidak semua tata letak kolom adalah tabel.
Kemudian orang-orang mulai menyarankan untuk memakai CSS float saja, walaupun pada prinsipnya CSS float lebih tepat digunakan untuk membuat perataan gambar di antara teks seperti yang biasa kita lihat pada aplikasi Microsoft Word.
Kemudian muncul CSS flexbox yang dapat meringkas kebiasaan kita dalam menambahkan deklarasi
clear: both
di blok bawah agar blok tersebut dan seterusnya tidak ikut terpengaruh oleh aliran elemen-elemen dengan gayafloat: left
ataufloat: right
. CSS flexbox juga sangat membantu untuk membuat tata letak fixed-fluid, dimana salah satu kolom dibuat memiliki lebar yang tetap, sedangkan kolom yang lainnya dibuat supaya responsif mengisi kekosongan yang ada sesuai dengan lebar layar saat itu. CSS flexbox juga memudahkan kita untuk membuat tata letak “kolom sama tinggi”. Mas bisa coba browsing bagaimana cara membuat tampilan kolom sama tinggi dengan CSS. Pada artikel-artikel lama, harusnya mas akan menemukan berbagai cara seperti dengan menggunakan CSS tabel, atau dengan menentukan ukuranpadding-bottom
yang sangat besar. Beberapa ada juga yang menggunakan bantuan jQuery. Untuk membuat tata letak seperti itu di zaman sekarang, pakai flexbox saja sudah cukup.Kemudian muncul lagi fitur CSS grid. Dari segi hasil, secara kasat mata tampaknya sama saja. Fungsinya adalah untuk membuat tampilan deret kolom dan baris seperti pada tabel. Keistimewaan dari CSS grid setahu Saya terletak pada kemampuannya dalam membuat kolom/baris menembus wilayah kolom/baris yang lain. Kalau pada atribut HTML tabel biasanya kita mengenal istilah
colspan
danrowspan
. Selain dari itu Saya tidak begitu tertarik dengan fitur CSS grid.Untuk yang ini ada berbagai pendapat. Coba mas googling saja mengenai saran tata letak bar sisi, lebih baik berada di sebelah kiri atau di sebelah kanan. Biasanya nanti mas akan masuk ke artikel-artikel yang berhubungan dengan UX. Keduanya punya kekurangan dan kelebihannya masing-masing.