Pengenalan CSS: Sejarah dan Versi

Selain HTML dan JavaScript, CSS merupakan bahasa style sheet yang wajib dipelajari jika kita ingin menjadi web developer.

Dengan CSS, kita bisa membuat halaman HTML yang menarik secara visual, termasuk menambahkan warna, mengubah jenis huruf, menyesuaikan tata letak, hingga membuat animasi.

Hampir semua situs web yang ada di internet menggunakan CSS untuk menata desain atau tampilannya.

Sebelum belajar menggunakan CSS, ada baiknya kita pelajari terlebih dahulu apa itu CSS, bagaimana sejarahnya, dan ada berapa versi CSS.

Mari kita pelajari lebih lanjut.

1. Apa Itu CSS?
2. Sejarah CSS
3. Daftar Versi CSS
4. Bagaimana Cara Menggunakan CSS Versi Terbaru?
5. Dimana Saya Menemukan Fitur Baru CSS?
6. Cara Mengecek Apakah Browser Mendukung Fitur Baru CSS

Apa Itu CSS?

Cascading Style Sheets (CSS) adalah bahasa style sheet deklaratif yang berfungsi mengontrol tampilan halaman web di browser.

Browser menerapkan deklarasi gaya CSS ke elemen HTML yang dipilih, deklarasi gaya berisi properti dan nilai yang menentukan bagaimana halaman web atau elemen HTML ditampilkan.

CSS adalah salah satu dari tiga teknologi inti web, bersama dengan HTML dan JavaScript. CSS biasanya digunakan untuk menata elemen HTML, tapi juga bisa digunkaan untuk bahasa markup lain termasuk XML dan SVG.

Sejarah CSS

CSS pertama kali diusulkan oleh Håkon Wium Lie pada 10 Oktober 1994, Lie saat itu bekerja di organisasi yang sama dengan penemu HTML, Tim Berners-Lee, yaitu CERN (Oranisasi Eropa untuk Riset Nuklir).

Di tahun tersebut beberapa bahasa style sheet diusulkan dan didiskusikan dengan World Wide Web Cosortium, menghasilkan CSS (CSS1) yang dirilis pada thaun 1996.

Håkon Wium Lie adalah seorang pelopor web asal Norwegia yang mendapatkan gelar MS dalam Studi Visual pada tahun 1991.

Pada 17 Februari 2006, ia berhasil mempertahankan tesis PhD-nya di Universitas Oslo, tesis tersebut menjelaskan latar belakang asal-usul CSS dan dasar pemikriannya.

Sejak tahun 1998, ia menjabat sebagai CTO di Opera Software, perusahaan yang mengembangkan Opera Browser.

Style sheet sudah ada dengan berbagai bentuk sejak awal kemunculan Standard Generalized Markup Language (SGML) pada tahun 1996. CSS dibuat khusus untuk style sheet web.

Sejak tahun 1997, CSS dikembangkan oleh kelompok kerja CSS (CSS Working Group) yang dibuat oleh World Wide Web Cosortium (W3C).

Daftar Versi CSS

Berikut daftar CSS yang dirilis dari awal hingga saat ini:

Setiap versi yang dirilis ada penambahan atau pengurangan fitur, tapi lebih sering penambahan fitur.

Bagaimana Cara Menggunakan CSS Versi Terbaru?

Tidak seperti aplikasi smartphone atau PC dimana kita perlu memperbarui aplikasi untuk menggunakan versi terbaru yang dirilis.

Untuk menggunakan versi atau fitur baru CSS, kita bisa langsung menggunakan fitur-fitur tersebut.

Tapi, pastikan fitur tersebut sudah didukung oleh browser yang digunakan oleh pengguna situs kita dan browser yang kita gunakan.

Ini cukup penting, karena jika pengunjung menggunakan browser lama yang belum mendukung fitur tersebut, fitur ini tidak akan bekerja (tidak berpengaruh apa-apa atau dianggap tidak ada).

Kalau properti atau fitur baru yang kita gunakan hanya digunakan di beberapa bagian kecil halaman HTML, mungkin tidak begitu terlihat.

Tapi, kalau fitur tersebut mempengaruhi tata letak halaman web, tentu saja ini bisa menjadi masalah besar, misalnya CSS Grid.

Alhasil, situs kita akan terlihat berantakan.

Untuk mengetahui apakah fitur baru CSS didukung oleh browser atau tidak, ini akan kita pelajari di bawah.

Dimana Saya Menemukan Fitur Baru CSS?

Untuk menemukan fitur-fitur baru CSS, buka halaman standar dan draft css di W3C.

Di halaman tersebut kita bisa memfilter berdasarkan tag CSS dan status. Berikut daftar dan arti masing-masing status:

• Working Draft: dokumen yang telah diterbitkan W3C untuk ditinjau oleh komunitas, termasuk Anggota W3C, publik, dan organisasi teknis lainnya.
• Candidate Recommendation: dokumen yang menurut W3C telah ditinjau secara luas dan memenuhi persyaratan teknis Working Group.
• Proposed Recommendation: spesifikasi yang telah diterima oleh W3C dengan kualitas yang cukup (matang) untuk menjadi Standar, W3C mengirimkan laporan ke Komite Penasihat W3C untuk pengesahan akhir.
• W3C Recommendation: spesifikasi atau seperangkat pedoman yang dibuat setelah konsensus yang ekstensif yang telah menerima pengesahan dari Anggota W3C dan Direktur.
• Working Group Note (Group Note): catatan Working Group yang diterbitkan oleh Working Group yang disewa untuk menunjukkan bahwa pekerjaan telah berakhir pada topik tertentu.
• Proposed Edited Recommendation: rekomendasi yang diterbitkan untuk tinjauan komunitas terhadap perubahan, beberapa di antaranya dapat memengaruhi kesesuaian.
• Retired: catatan tentang pekerjaan yang tidak lagi dilakukan secara aktif.

Jadi, jika kita ingin mengetahui fitur baru yang sudah dirilis, filter berdasarkan status Recommendation dan versi ke Latest.

Cara Mengecek Apakah Browser Mendukung Fitur Baru CSS

Tidak semua orang menggunakan browser versi terbaru, orang awam biasanya tidak begitu peduli dengan pembaruan aplikasi bukan hanya browser.

Oleh karena itu, ketika kita menggunakan fitur baru CSS periksa terlebih dahulu apakah fitur tersebut sudah didukung oleh banyak browser.

Caranya:

1. Buka situs Can I Use.
2. Ketik nama fitur atau properti baru yang ingin digunakan di kolom pencarian yang disediakan.

Misalnya properti background-attachment. Ini hasilnya:

Situs tersebut akan menampilkan nomor versi berbagai browser. Nomor di dalam kotak merah, hijau, dan kuning adalah nomor versi yang memiliki arti berbeda:

• Merah berarti fitur ini belum didukung oleh browser dengan versi tersebut, misalnya di Safari versi 14 properti background-attachment belum di didukung.
• Kuning berarti didukung sebagian, dalam kasus properti background-attachment misalnya Firefox versi 2 sampai 24 hanya mendukung nilai fixed saja belum mendukung nilai local.
• Hijau berarti sudah didukung sepenuhnya, artinya kita bisa menggunakan properti ini di browser dengan versi tersebut.

Untuk informasi lengkapnya, cukup arahkan kursor ke versi browser, nanti akan muncul informasi detailnya.