Tutorial Web Design: Menggunakan CSS Reset

Pada tutorial css kali ini saya akan membahas Tips Desain Web. Sudah menjadi pengetahuan yang umum jika masing-masing browser Internet memiliki style bawaan tersendiri, sebagai contohnya margin default atau padding default pada Internet Explorer itu memiliki nilai  yang berbeda dengan Mozilla Firefox ataupun Chrome, contoh yang lain, unordered list default milik Internet Explorer memiliki style berbeda dengan style pada firefox. Sehingga seorang desain web seringkali direpotkan oleh hal ini, biasanya seorang web designer menggunakan javascript untuk mendeteksi user menggunakan browser apa, kemudian jika user menggunakan browser internet maka javascript mencocokkan stylenya dengan file berisi style khusus untuk internet explorer, begitu juga dengan mozilla firefox dan browser lain, file stylenya juga berbeda. Benar-benar merepotkan karena kita harus membuat style yang berbeda untuk browser yang berbeda. Tapi hasilnya sangat baik.

Penulis sendiri awalnya memang seperti itu, memang merepotkan. Tapi belakangan penggunaan CSS Reseter semakin populer digunakan, karena fungsinya sama baiknya dengan menggunakan file file yang berisi style yang berbeda menyesuaikan dengan browsernya. Dalam teknik pencocokan style, ketika user menggunakan internet explorer maka style yang digunakan pun biasanya dinamakan dengan ie.css, jika user menggunakan firefox maka style yang digunakan biasanya dinamakan dengan default.css, dan lain-lain sebagainya, dalam teknik css reset, kita cukup menggunakan satu buah file css saja,  namun di tambahkan dengan barisan kode yang dapat mereset kondisi css, sehingga browser tidak memiliki nilai default dari style-style yang ada. Alias 0 (null).

Berikut adalah css reset yang biasa digunakan :

/* RESET */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

height: auto;

border-top-width: 0;

border-bottom-width: 0;

border-left-width: 0;

}

blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

blockquote, q {quotes: none;}

:focus {outline: 0;}

.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}

ins {text-decoration: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

body {background-color: white;background-position: center center;}

/* RESET */

Sebenarnya ada beberapa teknik reset yang digunakan dalam desain web. Anda tidak lagi direpotkan oleh perbedaan tampilan layout antara Internet Explorer dengan Mozilla Firefox atau yang lainnya. Sehingga hasilnya nanti tampilan css di firefox juga mirip dengan tampilan menggunakan browser internet yang lain. 

Selamat Mencoba.

http://www.ilmuwebsite.com

Temukan semuanya tentang Pasang Iklan, bisnis, Iklan Baris, iklan gratis