Hal-hal Mendasar Tentang CSS3

Ada beberapa hal-hal mendasar tentang CSS3 yang perlu dipahami. Selama hampir dua dekade standar Cascading Style Sheets (CSS) telah digunakan untuk mengontrol presentasi dari halaman web.

HTML mendefinisikan apakah sesuatu: judul, paragraf, alamat, gambar, dll. CSS menggambarkan bagaimana unsur yang disajikan kepada pengguna, termasuk kualitas seperti color, border, dan dimensi.

CSS termasuk kontrol presentasi yang beberapa desainer web bahkan menganggap, seperti cara layanan text-to-speech menampilkan konten halaman web.

Semua aturan presentasi asli dari CSS didesain untuk konten statis; yaitu, elemen HTML yang tidak berubah dari waktu ke waktu.

Sampai saat ini, jika Anda menginginkan sebuah gambar memudar pada halaman web, hanya ada beberapa teknologi web yang dapat Anda gunakan, yang paling populer di antaranya adalah JavaScript dan Flash.

Sekarang, kita memiliki CSS3; Perubahan, Transisi, dan Modul Animasi . Ini merupakan ekstensi dari sintak CSS yang didukung di semua browser modern, tumpangtindih, dan dalam beberapa kasus, menggantikan peran dari JavaScript dan Flash.

Sementara CSS3 bukan tanpa keterbatasan, teknologi adalah jalan ke depan untuk banyaknya konten web yang dinamis.

Prefik Vendor CSS

Untuk memungkinkan inovasi CSS3 oleh pengembang browser, komunitas pengembangan web menyetujui bahwa tiap browser akan memiliki prefik unik tersendiri untuk disusulkan atau properti percobaan CSS. Lihat tabel di bawah ini:

Prefix	Browser
-moz-	Firefox
-o-	Opera
-webkit-	Safari/Chrome/Konqueror
-ms-	Internet Explorer 9+

Modul CSS3

CSS3 telah dipisahkan kedalam “modul-modul”. Berisi “spesifikasi CSS lama” (yang dipisahkan kedalam bagian-bagian terkecil). Dan lagi, modul baru ditambahkan.

Beberapa modul-modul CSS3 yang paling penting adalah:

Selector
Model Box
Background dan Border
Nilai Gambar dan Konten
Efek Teks
Perubahan 2D/3D
Animasi
Layout Kolom Multi
Antarmuka Pengguna

Dukungan Browser CSS3

Perubahan CSS3 secara penuh didukung oleh beberapa versi browser, dengan prefik vendor:

Internet Explorer 9 (IE10 tidak membutuhkan prefik)
Firefox 3.5 dan diatasnya
Chrome 4 dan diatasnya
Safari 3.1 dan diatasnya
Opera 10.5 dan diatasnya
iOS Safari 3.2 dan diatasnya
Android 2.1 dan diatasnya

Keterbatasan Animasi CSS3

Sementara Perubahan, Transisi, dan Animasi CSS3 yang sangat kuat, ada beberapa properti yang mereka tidak dapat berpengaruh, setidaknya saat ini:

CSS3 tidak dapat mengontrol scroll bar atau “scroll” seluruh bagian dokumen
Gradien tidak dapat dianimasikan (meskipun hal ini mungkin dapat dilakukan dengan SVG atau JavaScript).