Yang Baru di CSS 3

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet, merupakan sebuah kumpulan instruksi (script) yang digunakan untuk mengatur tampilan serta tata letak sebuah situs maupun blog, ataupun berbagai hal yang berkaitan dengan html. Penggunaan CSS ini sangat membantu untuk hampir semua pengelola blog atau situs karena dapat mempermudah proses pengaturan tampilan dan teta letak sebuah blog atau web dibanding dengan menggunakan kode murni html.

CSS tidak dapat dipisahkan dengan HTML karena keberadaan CSS sendiri adalah pelengkap dan penyempurna HTML, karena banyak pengaturan tampilan dan tata letak yang tidak dapat dilakukan di HTML itu sendiri.

Apa itu HTML ?

HTML Sendiri merupakan singkatan dari Hypertext Markup Language, merupakan instruksi (script) standar dan dasar dalam hal membuat dan menampilkan sebuah halaman. Oleh karena itu bila anda ingin belajar tentang CSS sebaiknya anda terlebih dahulu belajar tentang HTML, namun tidak perlu sampai mahir cukup dasar HTML saja.
Langsung saja kepada pokok pembahasan :

CSS 3 merupakan lanjutan dari CSS 1, CSS 2, CSS 2.1.
CSS 1 - merupakan fondasi atau dasar dari CSS dan hampir kebanyakan Script berada versi ini sehingga bila anda menggunakan CSS versi ini hampir dipastikan semua browser akan mendukungnya, kecuali jika browser yang anda gunakan itu sudah super lawas atau anda menonaktitkan fasilitas style di Browser yang anda gunakan. CSS versi ini mulai digunakan tahun 1996 atas prakarsa W3C.

CSS 2 - merupakan lanjutan dari CSS 2, CSS ini adalah yang paling banyak didukung oleh hampir seluruh browser yang ada, karena kelengkapan scriptnya. Dan CSS 2 ini telah menjadi standar webmaster dan webdesigner di seluruh dunia. CSS 2 ini lebih dititik beratkan pada pengoptimalan tampilan sebuah halaman blog atau blog dan mempermudah penggunanya untuk menggunakan dan mengaturnya. Versi ini mulai dipublikasikan dan digunakan mulai tahun 1998.

CSS 2.1 - merupakan versi perbaikan dari CSS 2, versi ini dibuat untuk mengoreksi beberapa bug dan error pada CSS sebelumnya, CSS 2.1 secara umum mencakup seluruh instruksi versi sebelumnya namun dengan perbaikan bug dan error CSS versi sebelumnya. Namun CSS versi ini hanya diimplementasikan di sebagian browser saja, sehingga bila kita tidak menggunakan browser yang mendukung CSS 2.1 maka intruksi CSS tersebut tidak akan berjalan sehingga berdampak pada tampilan sebuah situs atau blog yang menggunakan CSS versi 2.1.

CSS 3

CSS versi ini merupakan versi terbaru dari CSS, versi ini menitikberatkan pada cara mempercantik dan memperindah sebuah halaman web. terdapat banyak instruksi-instruksi (script) baru pada CSS 3, namun sebenarnya versi ini belum terdapat instruksi baku untuk seluruh Browser yang ada, hanya masing-masing pengembang browser yang mengembangkan CSS 3 ini (nggak tau kapan dijadikan standar CSS oleh seluruh Web Browser).

Konsekuensi hal tersebut di atas membuat CSS yang dibuat oleh browser tertentu tidak dapat digunakan di browser lain, Solusinya adalah bila anda ingin menerapkan CSS 3 pada blog atau situs anda maka  sebaiknya anda memasukkan CSS browser Extentention pada style attribute CSS misal :

 

Extention	Rendering Engine	Browsers	Contoh
-moz-	Mozilla	Firefox, Camino	-moz-border-radius
-ms-	Trident	Internet Explorer	-ms-layout-grid
-o-	Presto	Opera	-o-border-radius
-webkit-	Webkit	Chrome, Safari	-webkit-border-radius

 

Dengan cara di atas maka, maka masalah kompabilitas CSS 3 terhadap browser sudah dapat teratasi.

mungkin ini artikel yang dinanti-nanti oleh anda yaitu apa saja hal yang baru di CSS 3, berikut pembahasannya.

Hal-Hal Yang Baru Pada CSS 3

• Border – anda dapat merubah warna satu sisi dengan beberapa warna (tidak hanya satu warna), Border Image (border menggunakan gambar), dan Rounded Corner (pinggir border melengkung)
• Background – banyak gambar yang anda dapat tambahkan pada sebuah elemen, posisi background lebih akurat, background dapat resize, dan background dapat di potong.
• Color – Pengaturan color Opacity (transparansi), gradien pada background, dan HSL (Hue, Saturation, Level) pada nilai warna (Udah kaya photoshop aja ya !).
• Text – Text Shadow (bayangan teks), text overflow, dan word wrapping.
• Transformations – Scale, skew, move, dan merotasi sebuah elemen secara 2 dimensi maupun 3 dimensi.
• Transitions – transisi dinamis dasar (seperti transisi pada powerpoint)
• Box – menambah Drop shadow (bayangan pada sebuah kotak),  kotak dapat diresize sesuai keinginan pengguna, mengatur overflow secara horizontal ataupun vertikal, outline offset yang akan mengatur jarak antara outline dan border, menerapkan spesifikasi model kotak (box) untuk mengatur berapa lebar dan tinggi sebuah kotak (box).
• Content- CSS dapat menambahkan  isi (konten) pada sebuah pada sebuah elemen.
• Opacity- sebuah element dapat ditransparankan.
• Media – mengatur dan memberi gaya (style) pada resolusi layar, warna, aspek rasio, dan model layar tertentu sesuai media.
• Web fonts – kemampuan untuk menggunakan link kepada sebuah font untuk sebuah blog atau situs (fontnya nggak standar)

Demikian sebagian yang dapat bahas kali ini, lumayan cape juga … namun ini bukan artikel terakhir tentang CSS 3, malahan ini merupakan postingan pembuka, untuk lebih lanjutnya saya akan mencoba membahas CSS lebih mendalam lagi terutama CSS 3 sehingga dukungan dan komentar dari pada pembaca sekalian akan sangat membantu bagi penulis.