Home
Writed by
On
5:59 PM , 
Saturday, April 23, 2011
KianHome - Perbedaan tampilan bloog atau website pada setiap browser memang berbeda, hal ini didasari oleh style bawaan browser itu sendiri, 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 web designer 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. 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.
Contoh yang lain, unordered list default milik Internet Explorer memiliki style berbeda dengan style pada firefox. Sehingga seorang web designer 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. 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.
Berikut kode CSS reset tersebut..
/* 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 */
Related Post :
trik
- Cara Membuat Kolom Widget Sejajar (Sama Tinggi)
- CSS3 : Efek Transisi Rotasi dengan simple dan sederhana
- Cara pasang gambar pada judul Gadget / Widget Blog
- Maaf teman, k'ian tidak bisa membalas Blogwalking saat ini
- Program Adsense Chitika dalam blog berbahasa Indonesia
- Cara buat kolom text magazine dengan CSS3
- Supaya kinerja situs atau blog lebih cepat
- Mengenal kode Box Shadow dengan CSS3
- Simple Tooltips dengan CSS & Jquery trik
- Efek dan style untuk Gambar pada Blogspot
- Setting domain blogspot dengan script Mobile blog otomatis
- Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)
- modification of the text with CSS 3 Text shadow
- Posting widget kategori tertentu dengan tambahan Thumbnails
- Show All total post dan Comment post pada blog
saya teu ngarti tah CSS reset teh sebenarna...kinerjanya mksdx :D ...Replay
Langsung dicobaa ...Replay
thanks sob infonya ...Replay