About CSS Framework… ^_^
21 May 2010 Leave a Comment
Tutorial Menggunakan Blueprint CSS Framework
CSS Framework merupakan salah satu sarana yang baik bagi para web developer untuk menggunakan CSS tanpa harus mendalami syntax dari CSS. Ada beberapa CSS Framework yang tersedia secara gratis di internet. Beberapa diantaranya dibuat oleh situs yang tak lagi asing bagi anda: Google dan Yahoo.
Tutorial ini khusus mengulas mengenai kode-kode CSS yang sudah terdapat di dalam Blueprint CSS. Perihal penggunaan script Ruby tambahan yang termasuk di dalam bundle framework ini akan dibahas dalam sesi yang lebih advanced.
Mendapatkan Source Code Blueprint CSS
Blueprint dapat diakses dan diunduh melalui situs Blueprintcss.org. Anda akan disuguhi oleh file ZIP atau TAR yang kemudian membutuhkan software decompressor untuk membukanya. Untungnya setiap Operating System (XP, Mac, Linux) sudah memilikinya, jadi saya asumsikan anda sudah membuka dan mengekstrak file tersebut.
Jenis-Jenis File CSS di Dalam Blueprint CSS
Untuk tutorial ini, harap langsung menuju folder “blueprint” dan melihat ketiga file CSS di dalam folder tersebut. Blueprint membagi style-style CSS mereka ke dalam 3 file:
- screen.css : CSS yang berperan untuk menentukan layout seperti yang anda lihat di layar monitor anda saat ini. File ini digunakan untuk tipe media “screen” dan “projection”, hal ini meliputi semua tipe layar monitor yang diproyeksikan dari PC atau Laptop.
- print.css : Seperti screen.css, hanya kali ini ditujukan untuk media printing. Style ini muncul ketika anda menekan tombol “Print” pada browser anda.
- ie.css : Style ini ditujukan khusus untuk Internet Explorer (IE).Bagi yang belum mengetahui, IE adalah browser besutan perusahaan raksasa Microsoft. Browser ini memiliki masalah yang bertumpuk-tumpuk yang selalu muncul setiap kali ada update terbaru.
Banyak aturan-aturan yang sudah disepakati di dalam World Wide Web Consortium (konsorsium yang menyebabkan setiap website yang anda lihat di dunia ini sama di browser manapun) tidak berlaku untuk browser IE.
Karena sifat IE yang tidak konsisten inilah, maka hampir setiap website memiliki “aturan khusus” untuk memperbaiki tampilan pada browser IE. Karena bagaimanapun, pengguna IE di dunia masih sangat banyak mengingat IE adalah browser yang didapat oleh pengguna Windows langsung dari CD/DVD instalasinya.
Untuk menggunakannya, masukkan kode berikut ini di dalam tag head:
<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”css/blueprint/print.css” type=”text/css” media=”print”>
<!–[if lt IE 8]>
<link rel=”stylesheet” href=”css/blueprint/ie.css” type=”text/css” media=”screen, projection”>
<![endif]–>
Atribut media digunakan untuk mempertegas penggunaan CSS tersebut. Print.css diletakkan setelah screen.css supaya dapat mendifinisikan ulang aturan-aturan CSS pada media printing.
Sedangkan ie.css diletakkan di dalam Conditional Comment. Conditional Comment ini hanya dapat dilihat oleh browser IE. Hal ini dikarenakan IE merender halaman web dengan metode yang berbeda dengan browser-browser lainnya. “Kejanggalan” inilah yang justru menjadi celah yang dimanfaatkan website designer untuk memperbaiki kebobrokan ini.
Sumber : http://cssasyik.com/2009/11/tutorial-menggunakan-css-framework/
