GO Blog

Mengatur ulang gaya template blogger Anda, sering disebut sebagai CSS Reset atau Reset CSS adalah proses ulang (atau lebih tepatnya - pengaturan) gaya dari semua elemen ke nilai dasar sehingga menghindari perbedaan lintas-browser karena built-in pengaturan gaya default. Dengan mengatur ulang style blog Anda, Anda menghindari default ke gaya built-in browser, yang berbeda dari browser ke browser.

CSS Reset avoids menghindari inkonsistensi peramban

Misalnya, Anda menggunakan tag anchor <a> dalam dokumen HTML Anda. Biasanya, browser seperti Internet Explorer dan Firefox akan membuat itu di beri style biru dan digarisbawahi.

Tapi lima tahun dari sekarang, seseorang memutuskan untuk merilis browser baru (sebut saja UltraBrowser) dan mereka memutuskan bahwa mereka tidak suka biru dan link digarisbawahi - jadi bukannya mereka mengatur gaya default tag <a> merah dan boldfaced. Jika Anda selalu menetapkan nilai dasar untuk elemen <a> Anda, maka dijamin bahwa itu akan selalu sama, terlepas dari apa UltraBrowser berpikir elemen <a> akan terlihat sama.

Reset ke tempat semuanya dimulai

Konsep CSS reset pertama kali kembali dibahas secara resmi ketika dinosaurus masih berkeliaran di internet (2004 tepatnya) oleh Andrew Krespanis. Dalam artikelnya, ia menyarankan menggunakan pemilih yang universal (*) pada awal file CSS Anda untuk memilih semua elemen dan memberi mereka nilai 0 untuk margin dan padding, seperti:

* {
  margin: 0;
  padding: 0;
}

Tindakan pemilih yang universal seperti pencarian wildcard, mirip dengan pencocokan ekspresi reguler dalam pemrograman. Karena dalam kasus ini, * ini tidak didahului oleh pemilih lain, semua elemen (dalam teori - beberapa browser tidak sepenuhnya mendukung itu) adalah pertandingan dan karena itu semua margin dan paddings dari semua elemen dihapus (sehingga kita menghindari jarak perbedaan yang ditunjukkan).

Menerapkan pemilih margin / padding reset universal untuk contoh kita sebelumnya, sekarang kita menghapus semua spasi konsisten antara semua browser (dengan kata lain, kita tidak membuat browser berpikir untuk kita, kita menunjukkan kepada mereka siapa yang jadi bos).

Contoh: Menerapkan pemilih margin / Padding reset yang universal

Anda dapat melakukannya dengan beberapa cara - Anda dapat menempatkan margin (atau padding) di awal atau di atas paragraf Anda, atau keduanya. Anda dapat menggunakan ems sebagai unit atau piksel atau persentase.

Yang penting adalah bahwa kita memilih cara browser akan memunculkan itu. Sebagai contoh kita, saya memilih untuk menambahkan margin (bukan padding) baik di atas paragraf dan di bagian bawah - tapi itu pilihan saya, Anda mungkin ingin melakukannya secara berbeda.

Inilah yang saya gunakan:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Mendeklarasikan aturan gaya setelah pemilih universal.

Note: Contoh yang saya gunakan untuk diskusi adalah contoh sederhana. Jika Anda hanya menggunakan paragraf untuk halaman web Anda dan tidak ada unsur-unsur lain, Anda tidak akan ingin me-reset margin Anda ke 0 menggunakan pemilih yang universal hanya untuk menyatakan aturan gaya yang tepat setelah untuk paragraf Anda. Kita akan membahas ini lebih lengkap bersama dengan praktik terbaik lainnya nanti di bawah halaman.

mari kita telusuri contoh. Saya menggunakan Eric Meyer CSS reset Reloaded verbatim dalam contoh setelah menyatakan aturan gaya untuk margin <p> saya.

Menghindari redundansi dengan Reset CSS dan deklarasi gaya berikutnya

Alasan lain saya tidak suka memiliki stylesheet terpisah untuk reset CSS saya adalah bahwa hal itu dapat menyebabkan redudansi dengan aturan style lain setelah itu. Ini praktek yang baik untuk tidak mengulangi gaya Anda, dan meskipun kadang-kadang tidak dapat dihindari (karena Anda malas seperti saya), Anda harus melakukan upaya untuk mencoba. Kembali ke Eric Meyer CSS reset Reloaded seperangkat aturan, ia memberikan nilai default untuk line-height, warna, dan latar belakang dari elemen body seperti:

body {
  line-height: 1;
  color: black;
  background: white;
  }

Jika Anda sudah tahu bahwa gaya atribut tubuh (misalnya):

     background-color: # cccccc
     color: # 996633
     dan Anda ingin ubin gambar latar belakang horizontal

tidak ada gunanya menyatakan CSS pemilih lain untuk elemen body nanti di dokumen - Anda harus mengganti bagian CSS reset sebagai berikut:

body {
  line-height: 1;
  color: #996633
  background:#ccc url(your-tiled-image.gif) repeat-x top left;
  }

Jangan takut untuk menggunakan penilaian Anda sendiri. Tweak, re-struktur, menghapus, dan menambahkan hal-hal seperti yang Anda lihat cocok dan karena berkaitan dengan gaya tertentu.

Eric Meyer menekankan hal ini dalam diskusi tentang CSS reset Reloaded dengan pernyataan:

[...] Itu jauh dari titik di sini: bahwa ini bukan kasus "setiap orang harus menggunakan gaya ini dalam cara tertentu tanpa perubahan".

Demikian semoga bermanfaat...