Tutorial CSS: Membuat Tampilan Blog/Website Seragam di Semua Browser Dengan CSS RESET
Muh. Ashhar Bustan

Tutorial CSS: Membuat Tampilan Blog/Website Seragam Di Semua Browser Dengan CSS RESET

Seperti yang kita ketahui bahwa setiap browser (chrome, firefox, safari, edge, internet explorer) memiliki pembacaan CSS yang berbeda-beda. Sehingga terkadang mengakibatkan tampilan halaman website atau blog menjadi berantakan.

Untuk mengatasi masalah inkonsistensi browser tersebut maka dibutuhkan sebuah tekhnik agar nantinya blog atau website kita memiliki tampilan yang sama meskipun diakses menggunakan browser yang berbeda-beda, salah satunya yaitu dengan menggunakan CSS RESET.

Baca Juga: Tutorial Cara Memasang Syntaxhighlighter Pada Blog Atau Website


Tujuan dari CSS RESET ini adalah untuk mengurangi inkonsistensi browser dalam hal-hal seperti ukuran tinggi garis default, margin, ukuran font atau huruf, dan lain sebagainya.

CSS RESET yang akan saya bagikan disini bersifat general atau umum. Tidak ada warna default atau latar belakang ditetapkan untuk elemen body, dan sebagainya. Nantinya teman-teman tinggal menyesuaikan dengan setelan css dasar website masing-masing.

Baca Juga: Cara Membuat Rowspan Dinamis Pada Tabel Dengan PHP


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, 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,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

} 

 

Baca Juga: Source Code Bridging SIMRS GOS Dan SEP BPJS Untuk Insert SEP Versi Terbaru Dengan PHP


YANG LAIN:

Komentar