Lemon Biru Terbelah Menjadi Dua oleh Davisco

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
  1. CSS Punya Variabel 
  2. CSS Punya Fungsi 
  3. CSS Punya Fitur Logika 
  4. CSS Punya Fitur Pengulangan 
  5. CSS Punya Fitur Asinkron 
  6. CSS Punya Fitur Animasi 
  7. CSS Bisa Mengukur Waktu 
  8. CSS Bisa Menghitung 
  9. CSS Bisa Memberikan Perintah kepada Peramban 
  10. CSS Bisa Menjalankan Perintah dari Peramban 
  11. CSS Animasi Menggulung?! 

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:

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

  • 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?

  • 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. 👍






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal