Sejarah dan Perkembangan CSS

Oke guys kali ini saya akan membahas tentang CSS, atau singkatan dari Cascading Style Sheet. Biasanya CSS digunakan pada pembuatan website-website untuk lebih banyak mendapatkan animasi yang menarik. Oke kali ini langsung saja menuju ke TKP untuk mempelajari lebih lanjut apa itu CSS, kemudian bagaimana sejarah dan perkembangan CSS. Cekidot menuju TKP J :

Ini TKPnya J

CSS (Cascading Style Sheet)

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah atau aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS itu merupakan salah satu bahasa pemrograman web yang mengatur komponen yang ada didalam website agar web dapat menjadi urut, rapi dan terstruktur, CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file.

Sama halnya dengan HTML, CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS

·         CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan  huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

·         CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 

·         CSS 3 

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Kelebihan CSS 3 dengan CSS versi sebelumnya :

Û    Mengatur dan mempercantik tampilan dari sebuah website.

Û    Sebaiknya membuat file CSS3 yang terpisah dari file html (External Style Sheet) dan dapat dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan file. Karena, jika terjadi perubahan layout pada website, kita hanya perlu mengedit file cssnya saja, tanpa mengubah file htmlnya. Oleh karena itu, External Style Sheet lebih direkomendasikan daripada Inline Style Sheet.

Û    Dengan CSS3, situs website dapat berkembang dan lebih interaktif lagi.

Û    Bisa mengurangi ukuran file yang akan di-load dan lebih ringan.

Û    Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.

Û    Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3 semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar size-nya daripada CSS3. Tidak hanya jQuery saja, peran Flash saja sudah mulai tergantikan dengan adanya CSS3.

Kekurangan CSS 3 dengan CSS versi sebelumnya :

³        Kodingan berbeda dengan versi sebelumnya

³        Tampilan pada Browser berbeda – beda

³        Dibutuhkan waktu lebih lama untuk membuatnya

³        Kodingan di setiap Web Browser berbeda seperti halnya :

Perbedaan Website yang sudah menggunakan CSS 3 dan HTML 5 dan website yang belom menggunakannya :

§  Dari segi interface website, jika menggunakan HTML5 dan CSS3 terdapat animasi, efek warna dan border.

§  Lihat source website

Perbedaan CSS3 dan versi sebelumnya :

CSS3 sama halnya seperti CSS, hanya saja fitur fitur yang ada padaCSS tidak selengkap pada CSS3. Dengan kata lain CSS3 memiliki fitur-fitur tambahan seperti :

Borders

§  border-color

§  border-image

§  border-radius

§  box-shadow

Backgrounds

§  background-origin dan background-clip

§  background-size

§  multiple backgrounds

Color

§  HSL colors

§  HSLA colors

§  opacity

§  RGBA colors

Text Effects

§  text-shadow

§  text-overflow

§  word-wrap

User-interface

§  box-sizing

§  resize

§  outline

§  nav-top, nav-right, nav-bottom, nav-left

Selectors

§  attribute selectors

Basic box model

§  overflow-x, overflow-y

Generated Content

§  content

Other modules

§  media queries

§  multi-column layout

§  Web fonts

§  speech