• Transfer

Artikel ini adalah yang pertama dari siklus pada topik Taming CSS. Hari ini kita akan melihat teknologi Reset CSS..

Mengapa Anda membutuhkannya?

Setiap browser menetapkan gaya default untuk berbagai elemen HTML. Dengan bantuan RESET CSS, kami dapat meratakan perbedaan ini untuk memastikan Styles Cross Browser.

Misalnya, Anda menggunakan item sEBUAH. Dalam dokumen Anda. Sebagian besar browser seperti itu Internet Explorer. dan firefox add link warna biru dan tajam. Namun, bayangkan bahwa dalam lima tahun seseorang memutuskan untuk menciptakan browser baru (Mari kita sebut ultrabrowser). Pengembang browser tidak suka penekanan biru dan kesal, sehingga mereka memutuskan untuk mengalokasikan tautan merah dan huruf tebal. Ini didasarkan pada ini jika Anda menetapkan nilai dasar gaya untuk item tersebut sEBUAH., akan dijamin sebagaimana Anda ingin melihatnya, dan tidak lebih suka menampilkan pengembang ultrabrowser.

Tapi sekarang kita tidak memiliki indentasi sama sekali, termasuk antara paragraf individu! Apa yang harus dilakukan? Jangan berbohong dan tidak takut: di bawah pelepasan kita, kita menggambarkan aturan yang kita butuhkan. Membuatnya bisa dilakukan cara yang berbeda: Tentukan indentasi dari bawah atau di atas paragraf, tentukan dalam persen, piksel atau dalam em.

Yang paling penting, browser sekarang memainkan sesuai dengan aturan kami, dan bukan kami sesuai dengannya. Saya memutuskan untuk membuat dengan cara ini:

* (Margin: 0; Padding: 0;) P (Margin: 5px 0 10px 0;)

Akibatnya, kami memiliki apa yang bisa dilihat pada contoh ketiga.

Anda dapat membuat gaya Anda sendiri untuk diatur ulang, jika Anda menyelesaikan beberapa tugas tertentu dalam proyek Anda. Meskipun demikian, tidak ada langkah demi langkah kepemimpinan Dengan membuat reset CSS Anda sendiri. Rekomendasikan untuk prinsip Anda sendiri dan gaya Anda sendiri.

Untuk membantu Anda membuat pilihan, saya akan memberikan beberapa tautan lagi:

1. Kurang lebih - pilihan saya untuk mengatur ulang CSS (ed elliot).

2. Reset CSS Anda adalah hal pertama yang melihat browser

Reset Styles Setelah menginstal gaya Anda sendiri untuk item adalah pendekatan yang salah. Dalam hal ini, tidak ada yang baik untuk menunggu tampilan browser. Ingatlah bahwa Anda pertama kali menghubungkan reset CSS, dan kemudian semua gaya lainnya.

Ya, saya mengerti itu konyol, tetapi ini adalah salah satu kesalahan utama pengembang dari Mala hingga hebat. Banyak yang hanya melupakannya.

Beberapa orang mungkin mengajukan pertanyaan logis: mengapa itu terjadi? Jawabannya sederhana: aturan direkam di bawah teks file CSS (dan bahkan lebih rendah dengan koneksi mereka dalam dokumen), menimpa aturan yang dinyatakan sebelumnya.

Mari kita tidak bergerak sangat dari topik dan melanjutkan. Terapkan Gaya Eric Meyer untuk teladan kami, tetapi setelah Deskripsi properti kami, seperti yang ditunjukkan dalam 4 contoh. Matematika akan mengatakan hal berikut: "Apa yang diperlukan untuk membuktikan."

3. Gunakan dokumen CSS terpisah untuk reset CSS

Saya harus (tidak, mereka tidak memaksaku) untuk menyebutkan saran ini. Menggunakan file terpisah untuk reset CSS adalah praktik umum yang sejumlah besar dukungan pengembang.

Bahkan, saya mematuhi posisi kreasi satu file css besar Karena kinerja pendekatan ini yang lebih besar. Tapi B. masalah ini Saya cenderung setuju dengan sebagian besar: reset CSS harus diminum ke file terpisah (biasanya disebut reset.css). Dalam hal ini, Anda dapat menggunakannya dalam berbagai proyek tanpa melakukan upaya untuk bercabang dari aturan CSS lainnya.

4. Cobalah untuk menghindari menggunakan pemilih universal

Terlepas dari kenyataan bahwa konsep ini bekerja, aplikasinya paling sering tidak diinginkan karena ketidakcocokan dengan beberapa browser (misalnya, pemilih ini tidak diproses di Internet Explorer). Anda harus menggunakan teknik ini hanya untuk halaman sederhana, kecil, statis dan dapat diprediksi (jika Anda sudah harus melakukannya).

Saran ini sangat penting ketika Anda mengembangkan solusi seperti tema CMS. Anda tidak dapat memprediksi sebelumnya bagaimana itu akan digunakan dan bagaimana itu akan dimodifikasi. Lebih baik menggambarkan aturan CSS fundamental untuk semua item daripada digunakan untuk mekanisme pemilih universal yang tidak dapat diprediksi (bahkan volume) ini.

5. Hindari properti redundan saat menggunakan reset CSS

Alasan lain mengapa saya tidak suka file terpisah untuk reset CSS adalah potensi redundansi deklarasi properti CSS selanjutnya. Pengulangan individu gaya Anda di antara seluruh set file CSS adalah movietone dan harus dihindari. Tentu saja, kadang-kadang kita terlalu malas untuk mengikuti gaya gaya dan menggabungkan beberapa dari mereka, tetapi setidaknya mencoba!

Mari kita kembali ke RESET CSS dari Eric. Ini menetapkan nilai default untuk item-line, warna dan item latar belakang tubuh. Dengan cara berikut:

Tubuh (tinggi garis: 1; warna: hitam; latar belakang: putih;)

Misalkan Anda sudah tahu bagaimana elemennya akan terlihat tubuh.:

1. latar Belakang - Warna: #cccccc;
2. warna: # 996633;
3. Anda ingin secara horizontal mengulangi gambar latar belakang tertentu.

Dalam hal ini, tidak perlu membuat pemilih baru untuk menggambarkan properti Anda - Anda dapat mengaktifkannya dalam reset CSS. Ayo lakukan:

Tubuh (tinggi garis: 1; warna: # 996633; latar belakang: #ccc URL (tiled-image.gif) Ulangi-x kiri atas;)

Jangan takut untuk memodifikasi reset CSS itu sendiri. Atur sendiri, buatlah itu bekerja pada diri sendiri. Ubah, rebuild, hapus dan tambahkan sesuai kebutuhan Anda dalam kasus khusus Anda.

Eric Meyer mengatakan tentang ini: "Ini tidak terjadi ketika semua orang harus menggunakan reset CSS tanpa perubahan."

Atur ulang CSS. (Reset Styles) adalah memusatkan perhatian pada CSS, beberapa parameter elemen HTML yang diinstal oleh browser. Misalnya, elemen-elemen ini termasuk paragraf (tag), yang awalnya menyajikan bidang vertikal nonzero (CSS), daftar yang ditandai (tag) yang tidak memiliki bidang hanya, tetapi juga penanda tipe tertentu (CSS) dan sebagainya.

Sekarang mari kita pikirkan apa yang Anda butuhkan untuk mengatur ulang CSS ini, apa yang bisa dia berikan kepada kita? Nah, bayangkan Anda memuliakan halaman situs Anda dan pada saat yang sama belum mengubah bidang paragraf yang ditawarkan browser secara default, karena ukurannya telah sepenuhnya diatur. Tapi katakan padaku, tolong, dan di mana Anda memutuskan bahwa semua browser dunia, yang sudah ada dan masih muncul, akan membuat bidang dengan ukuran yang sama? Apalagi mengapa Anda berpikir bahwa browser di mana Anda menguji tata letak Anda tidak akan berubah dalam versi selanjutnya. Ukuran bidang ini tidak sepenuhnya dihapus sama sekali? Rasakan bau apa?

Jadi, membuang CSS, ayat-ayat itu hanya dikurung dari kesalahpahaman seperti itu, yaitu, mereka pertama-tama mengatur ulang semua nilai "kritis" dari properti CSS, dan kemudian mereka menambahkannya kembali, tetapi dengan ukurannya sendiri. Dengan demikian, Anda dapat yakin bahwa di semua browser situs akan terlihat sama. Anda tentu tidak dapat mengatur ulang gaya, tetapi hanya untuk mengatur tata letak parameter yang diperlukan Elemen, tetapi ada risiko bahwa suatu tempat sesuatu akan dilewatkan dan pada titik tertentu segala sesuatu "berenang".

Berdasarkan hal tersebut di atas, salah satu fitur dari bantuan CSS adalah bahwa setelah penggunaannya, banyak elemen HTML kehilangan tampilan yang biasa mereka. Dan jika hilangnya bidang dalam paragraf adalah untuk pemula, sesuatu yang diharapkan untuk pemula, maka misalnya, fakta bahwa tombol-tombol yang dibuat menggunakan tag atau tiba-tiba menjadi mirip secara eksternal dengan teks biasa - adalah kejutan yang lengkap. Tetapi ini seharusnya tidak malu, karena untuk gaya itu dan diatur ulang, sehingga silsilah kemudian tidak lupa untuk menentukannya dalam yang baru.

Ada banyak cara untuk mereset gaya, dan apa yang Anda pilih - itu hanya tergantung pada Anda, tetapi saya dapat memberi tahu Anda satu - reset terbaik adalah salah satu yang Anda buat sendiri, berdasarkan pengalaman dan kebiasaan Anda. Jika Anda belum memiliki pengalaman seperti itu, Anda dapat menggunakan salah satu opsi yang diusulkan di bawah ini.

Selalu tentukan gaya untuk mengatur ulang CSS di awal kode, jika tidak beberapa parameter mungkin tidak berfungsi karena prioritas Gaya.yang merupakan browser yang diinstal saat memproses halaman HTML dan kode CSS.

Setel ulang CSS dengan pemilih universal

* (Font-Family: Inherit; / * Semua elemen mewarisi dari headset font induknya * / gaya font: mewarisi; / * mewarisi desain * / font-weight: mewarisi; / * mewarisi lemak * / vertikal- Baseline; / * Penyelarasan garis dasar vertikal * / font-font: 100%; / * Ukuran font 100% * / latar belakang: transparan; / * Latar belakang semua elemen transparan * / perbatasan: 0; / * Hapus bingkai * / outline: 0; / * Hapus kontur * / margin: 0; / * Hapus bidang * / padding: 0; / * Hapus indentasi * /)

Deskripsi contoh

Dalam contoh ini dengan pemilih universal Gaya yang ditentukan segera diatur ulang pada semua elemen HTML yang akan ada di halaman. Seperti yang Anda lihat, sebagian besar properti ditentukan dengan tepat untuk jaring pengaman, sebagai nilai-nilai mereka dan sehingga browser harus menggantikan secara default sesuai dengan spesifikasi CSS. Tetapi seperti yang sudah Anda ketahui, dalam praktiknya, semua ini sama sekali berbeda dan jika properti ini memang diwarisi oleh elemen-elemen dari orang tuanya di semua browser terkemuka, bidang eksternal yang sama yang ditentukan oleh properti CSS tidak selalu sama dengan nol.

Tetapi ukuran kerangka kerja (CSS) dan kontur (CSS) bukan nol secara default, tetapi sudah sesuai dengan spesifikasi. Namun, ketebalan mereka diatur ulang, sehingga pengukur tidak akan lupa untuk menentukannya dengan jelas di mana itu perlu.

Atur ulang CSS dari Yahoo!

Tubuh, DIV, DL, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, Pra, Formulir, Fieldset, Input, Textarea, P, Blockquote, TD (Margin: 0; Padding: 0;) Fieldset, IMG, ABBR, Singkatan (batas: 0;) Alamat, Keterangan, Kode, DFN, EM, Kuat, Th, Var (Font-Style: Normal; Tabel Font;) (Perbatasan batas: runtuh; / * Perbatasan umum untuk tabel tabel * / border-spacing: 0; / * jarak pucat antara sel * /) Keterangan, th (teks-align: kiri; / * keselarasan teks ke tepi kiri * /) Ol, UL (daftar-gaya: tidak ada; / * Hapus penanda daftar * /) H1, H4, H3, H4, H5, H6 (ukuran font: 100%; FONT-WEAT:) Sebelum, T: Setelah (konten: ""; / * Kami membatalkan kutipan dari tag Q * /)

Deskripsi contoh

Yahu pada satu waktu telah mengembangkan versi reset eye-nya sendiri. Di sini, sifat elemen spesifik sudah berubah, yang memungkinkan untuk mencapai fleksibilitas yang lebih besar dalam mengendalikannya. spesies eksternal.. Misalnya, spidol dihapus dari daftar, dan tagnya adalah kutipan menggunakan properti CSS. Keuntungan dari pendekatan ini jelas, tetapi minusnya mencakup kode yang lebih banyak dan terkadang berlebihan. Tetapi tidak ada yang mengganggu Anda untuk mengubah reset CSS ke kebutuhan Anda. Misalkan Anda dapat menghapus beberapa yang tidak perlu bagi Anda. pemilih tag Atau tidak hanya menghapus kutipan, tetapi segera tanyakan penampilan yang diperlukan.

Setel ulang CSS dari Eric Meyer

Html, tubuh, div, span, applet, objek, iframe, h1, h4, h4, h4, h6, h6, p, blockquote, pre, a, abbr, akronim, alamat, besar, kutipan, dfn, Em, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, b, u, i, m, dt, dd, dt, dd, ol, ul, li, li, fiodset, Bentuk, label, legenda, tabel, keterangan, todbode, tfoot, teead, tr, th, td, artikel, samping, kanvas, detail, embed, gambar, figcaption, footer, header, hgroup, menu, nav, output, ruby, output, ruby, Bagian, Ringkasan, Waktu, Mark, Audio, Video (Margin: 0; Padding: 0; Border: 0; Ukuran font: 100%; Font: Warisan; Vertikal-align: Baseline,) Artikel, samping, detail, figcaption, Gambar, footer, header, hgroup, menu, nav, bagian (tampilan: / * Kami membuat item blok (untuk browser lama) * /) Tubuh (tinggi garis: 1; / * jalur Spacing. Teks pada halaman * /) ol, ul (daftar-gaya: tidak ada;) blockquote: sebelumnya, blockquote: setelah, q: sebelum, q: setelah (konten: ""; / * menghapus kutipan * / konten: Tidak ada; / * Tambahkan untuk loyalitas * /) Blockquote, Q (Kutipan: Tidak ada; / * Cara lain untuk menghapus tanda kutip * /) Tabel (Perkecil Border: Collapse; Border-Spacing: 0;)

Deskripsi contoh

Cara selanjutnya untuk mengatur ulang CSS yang disarankan Eric Meyer (Eric Meyer) - seorang pengembang web yang dikenal di kalangan tertentu. Di sini ia telah menambahkan reset gaya untuk tag dari HTML 5, yang, omong-omong, pada saat penulisan artikel ini, dan diri mereka sendiri masih sangat kurang didukung browser modern. Tetapi Anda selalu perlu melihat perspektif, bukan?

Bahkan, artikel ini dapat terus tak terhingga, karena, saya ulangi sekali lagi, pada titik tertentu, setiap gauge datang ke versi debitnya atau tidak menggunakannya sama sekali, mengandalkan perhatiannya.

Banyak verter digunakan yang disebut Reset CSS.Melayani untuk menghilangkan fitur dari browser yang berbeda. Sebenarnya, file ini Gaya mengatur ulang semua properti default CSS. Pada artikel ini, saya akan menunjukkan kode file ini dan memberi tahu perlu menggunakan reset CSS atau tidak.

Saya telah melihat banyak berbeda Reset CSS.Semuanya hampir sama. Anda dapat menggunakan ini:

Html, tubuh, div, span, applet, objek, iframe,
H1, H2, H3, H4, H5, H6, P, BlockQuote, Pra,
A, abbr, akronim, alamat, besar, kutipan, kode,
Del, dfn, em, font, img, ins, KBD, Q, S, Samp,
Kecil, mogok, kuat, sub, sup, tt, var,
B, u, aku, tengah,
DL, DT, DD, OL, UL, LI,
Fieldset, Formulir, Label, Legenda,
Tabel, keterangan, Todbody, Teffe, THEAD, TR, Th, TD (
Latar belakang: transparan;
Perbatasan: 0;
Ukuran font: 100%;
MARGIN: 0;
Garis Besar: 0;
Padding: 0;
Vertikal-align: baseline;
}
Tubuh (
Tinggi garis: 1;
}
Ol, ul (
Daftar-Gaya: Tidak Ada;
}
Blockquote, q (
Kutipan: Tidak ada;
}
Blockquote: Sebelumnya, Blockquote: Setelah,
T: Sebelumnya, T: Setelah (
Kandungan: "";
Konten: Tidak ada;
}
: fokus (
Garis Besar: 0;
}
Meja (
Perkecil batas: runtuh;
Border-Spacing: 0;
}

Saya pikir penggunaannya disebabkan dan sangat dimengerti, tetapi mengapa, misalnya, saya tidak menggunakan, seperti banyak verticker lainnya, ada baiknya menceritakannya. Pertama, itu file tambahan, Kedua, pemahaman Untuk diproses, tetapi yang paling penting - saya suka properti default. Misalnya, bidang yang sama di atas meja. Bagaimanapun, semua properti default tidak hanya menyukainya, tetapi sebagai yang paling opsi optimal. Tampilan berbagai elemen. Saya yakinkan Anda, reset lapisan. Sel-sel tabel, kemungkinan besar, Anda akan mengembalikannya dalam file utama. Dan jauh dari kenyataan bahwa nilai akan berbeda dari apa yang default. Jadi ternyata kita membersihkannya terlebih dahulu, dan kemudian kembali sama. Dan bersama dengan kekurangan pertama (file tambahan dan kode tambahan), banyak verteller tidak digunakan sama sekali. Reset CSS..

Bagaimanapun, menggunakan debit styling tidak buruk, Jadi Anda dapat menggunakannya dengan aman jika Anda berpikir bahwa penyederhanaan adaptasi situs di bawah berbagai browser akan benar-benar menyederhanakan Anda secara keseluruhan.

Setiap orang memiliki aturan pra-instal untuk merancang halaman web dan elemen pada mereka (pengguna agen stylesheet) terhubung secara otomatis secara default. Namun demikian, sebagian besar vestor ketika membuat proyek baru menambah spesial atur ulang file. CSS, yang membuat reset penuh gaya CSS dan memungkinkan pengembang untuk membuat dengan "lembar murni". Mengapa dan bagaimana semuanya selesai - saringan dalam artikel saat ini.

Jika Anda melihat pratinjau gambar pos, Anda akan melihat bahwa garis yang biasa di Safari, Chrome dan Firefox ditampilkan secara mutlak. dengan cara yang berbeda. Ya, kadang-kadang aturan di dalamnya bertepatan, misalnya, semua orang menyembunyikan tag kepala melalui layar: namun tidak ada pilihan, bagaimanapun, dalam banyak kasus ada perbedaan serius ketika merender objek pada halaman. Saya menduga bahwa beberapa pelanggan Anda mungkin tidak suka ketika versi final tata letak tidak terlihat pada tata letak.

Oleh karena itu, jika Anda adalah pengembang web pemula, publikasi akan sangat berguna untuk pengembangan umum. Ini adalah terjemahan dari catatan ini dengan ikhtisar Kondisi RESET CSS pada tahun 2018. Saya yakin bahwa pada tahun 2019 dan kemudian semua ini masih akan relevan, karena Topik ini sudah lebih dari 10 tahun (dari saat rilis solusi serupa pertama).

Mengapa Anda memerlukan pengaturan reset CSS

Seperti yang sudah Anda pahami dari aksesi, mereka memungkinkan Anda untuk menghilangkan ekstensi antara gaya dasar browser web dan membawa mereka ke satu pikiran standar plus-minus. Selalu berlaku di awal perkembangan kustom lainnya. Dalam artikel Erik Meyer tentang reset CSS selama sepuluh tahun yang lalu, alasan utama pendekatan ini disebutkan, tahun mana yang masih relevan:

Masalahnya terletak pada kenyataan bahwa browser yang berbeda memiliki pengaturan default, dan semuanya tidak sama. Kami berpikir bahwa kode kami mengubah desain halaman awal, tetapi ini tidak sepenuhnya begitu, dan dengan bantuan mengatur ulang file, kami dapat membuat jenis dokumen standar ini lebih banyak dimodifikasi untuk semua program. Karena itu, akan ada sedikit waktu untuk dihabiskan untuk memerangi dasar instalasi Firefox., Chrome, dll. Secara default.

Tetapi sekarang situasinya kurang bertentangan dengan tata letak?

Ya, memang, pada waktu kita, banyak parameter di agen pengguna menjadi lebih mirip. Hampir di mana-mana header H1 menetapkan ukuran font 2em dan indent horizontal 0,67EM. Namun, ini semua adalah perubahan yang relatif baru, dan minimal, Anda perlu memperhitungkan dukungan program lama program, di mana tidak ada konsistensi tersebut.

Selain itu, dalam beberapa kasus, tergantung pada jenis CSS Zeroing (tentang ini di bawah ini), chip ini masih bermanfaat bagi kami bahkan jika hanya browser web modern yang dipertimbangkan.

Tetapi apakah kita menerapkan gaya kita, mengesampingkan dasar?

Pendekatan ini adalah salah satu abstrak utama lawan dari pendekatan ini - pada akhirnya, dan parameter lain diganti dengan gaya mereka sendiri.css, jadi mengapa menambahkan file tambahan lain dan kurangi? Terlepas dari kenyataan bahwa dalam frasa ini masuk akal, penggunaan reset dibenarkan oleh dua momen:

• Pertama, ini membantu untuk menulis kode pembersih. Kami akan dapat membaginya menjadi beberapa bagian: Secara terpisah untuk desain proyek web dan seperangkat aturan yang berorientasi pada spesifikasi browser tertentu. Ini bukan untuk memanjat file CSS utama dengan segala macam Hacks IE, dll.
• Kedua, semua me-reset dengan beratnya sangat sedikit, dan unduhan mereka tidak memerlukan jumlah besar waktu.

Jenis reset CSS (Anda dapat mengunduh tautan di artikel)

Mulai dari tahun 2004, ketika perkembangan pertama seperti itu muncul, sekarang ada cukup banyak metode yang berbeda dalam kesulitan dan spesifisitasnya. Bahkan, ada 3 gol yang mencoba memecahkan reset gaya CSS:

1. Memperbaiki kesalahan pada stylesheet agen pengguna.
2. Pembatalan desain asli non-standar di browser Internet.
3. Membuat basis gaya yang kompatibel universal.

Ada opsi yang memutuskan ketiga tugas dan mereka yang diasah hanya di bawah satu masalah tertentu.

Koreksi Koreksi / Kesalahan

Pertimbangkan tujuan pertama yang disuarakan di atas. Seperti yang sudah Anda pahami, penghapusan kekurangan dan kawanan browser yang berbeda paling relevan untuk mendukung rilis usang. Salah satu contoh yang baik dari situasi seperti itu - ketika setelah penampilan HTML5 Internet Explorer 9 yang sama tidak menerapkan jenis tampilan yang benar ke objek baru.

Oleh karena itu, dalam solusi dengan jenis normalize.css, semua kesalahan diperhitungkan dan diproses:

/ ** * Tambahkan tampilan yang benar di IE. Atau Utama (tampilan: blok;)

/ ** * Tambahkan tampilan yang benar di IE. * / Utama (tampilan: blok;)

Karena tindakan ini diperlukan hanya untuk perangkat lunak lama, masuk akal untuk menggunakan postprocessor postcss seperti postcs yang dinormalisasi bersama dengan daftar browser untuk menambahkannya hanya ketika Anda perlu mengimplementasikan dukungan dari browser tertentu.

Contoh lain dari kode dari CSS murni, yang cocok termasuk program web modern - perbaiki elemen tampilan dan atribut yang disembunyikan.

[Tersembunyi] (Tampilan: tidak ada! Penting; // salah satu kasus penggunaan yang baik! PENTING }

(Tampilan: Tidak ada! Penting; // Salah satu kasus penggunaan yang baik! PENTING)

Hapus gaya browser yang khas

Ini adalah alasan kedua untuk mengatur ulang pengaturan CSS. Pada prinsipnya, masing-masing pendapat mereka tentang eksekusi apa pada stylesheet agen pengguna dianggap "khusus." Definisi penulis dari catatan asli cukup logis: ini adalah gaya yang bukan versi "telanjang" dari tampilan elemen.. Misalnya, menambahkan indentasi untuk berita utama dalam 2EM (berapa banyak yang melakukannya), idenya tidak buruk, tetapi mengapa itu 2EM, dan bukan 3EM atau tidak 4EM. Dalam hal ini, opsi dasar akan menjadi tidak adanya insidensi apa pun, yaitu, nol margin.

Paling sederhana pendekatan universal.menghapus indentasi / tag bidang:

* (Margin: 0; Padding: 0;)

* (Margin: 0; Padding: 0;)

Metode ini terlalu radikal, karena Berlaku untuk semua objek, bahkan di mana Anda tidak mengharapkan (dalam input yang sama). Sebagai alternatif, eric meyer reset CSS sering digunakan, yang menghilangkan parameter margin / padding, batas dan ukuran font (dalam 0 atau tidak ada) di mana ia secara logis dibenarkan:

Html, tubuh, div, span, applet, objek, iframe, h1, h4, h4, h4, h6, h6, p, blockquote, pre, a, abbr, akronim, alamat, besar, kutipan, dfn, Em, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, b, u, i, m, dt, dd, dt, dd, ol, ul, li, li, fiodset, Bentuk, label, legenda, tabel, keterangan, todbode, tfoot, teead, tr, th, td, artikel, samping, kanvas, detail, embed, gambar, figcaption, footer, header, hgroup, menu, nav, output, ruby, output, ruby, Bagian, Ringkasan, Waktu, Mark, Audio, Video (Margin: 0; Padding: 0; BORDER: 0; Ukuran font: 100%; Font: Inharit; Baseline;)

html, tubuh, div, span, applet, objek, iframe, h1, h4, h4, h4, h6, h6, p, blockquote, pre, a, abbr, akronim, alamat, besar, kutipan, dfn, Em, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, b, u, i, m, dt, dd, dt, dd, ol, ul, li, li, fiodset, Bentuk, label, legenda, tabel, keterangan, todbode, tfoot, teead, tr, th, td, artikel, samping, kanvas, detail, embed, gambar, figcaption, footer, header, hgroup, menu, nav, output, ruby, output, ruby, Bagian, Ringkasan, Waktu, Mark, Audio, Video (Margin: 0; Padding: 0; Border: 0; Ukuran font: 100%; Font: Inharit; Baseline;)

Override Styles.

Berbeda dengan bagian sebelumnya, di sini tugas utama bukan untuk mengatur ulang CSS dari objek tertentu, tetapi menimpanya dengan nilai mereka sendiri saat ini.

Misalnya, alih-alih mengatur semua ukuran 1EM dan margin \u003d 0 dalam sanitize.css, nilai lain ditetapkan:

/ ** * Perbaiki ukuran font dan margin pada elemen` H1` dalam konteks `bagian` dan *` artikel` di Chrome, Firefox, dan Safari. Atau H1 (ukuran font: 2em; margin: 0. 67em 0;)

/ ** * Perbaiki ukuran font dan margin pada elemen` H1` dalam konteks `bagian` dan *` artikel` di Chrome, Firefox, dan Safari. * / H1 (ukuran font: 2em; margin: 0.67em 0;)

Reboot Bootstrap akan menemukan ilustrasi lain dari tugas saat ini. Pengembang pergi sedikit lebih jauh dan meresepkan font dan warna latar belakang untuk tubuh.

// Tubuh // // 1. Lepaskan margin di semua browser. // 2. Sebagai praktik terbaik, oleskan default `latar belakang-warna` // 3. Tetapkan nilai teks-align yang eksplisit sehingga kita dapat menggunakan // nilai` inherit` pada hal-hal seperti`	`Elemen. Tubuh (margin: 0; // 1 font-family: $ Font - Family-Base; Ukuran font: $ Font - Ukuran-base; FONT-WEATE: $ Font - Line-Line - Tinggi: $ - Base; Warna: $ Tubuh - Warna; Teks- align: kiri; // 3 Background- Warna: $ bodi - // 2)

// body // // 1. Lepaskan margin di semua browser. // 2. Sebagai praktik terbaik, oleskan default `latar belakang-warna` // 3. Tetapkan nilai teks awal yang eksplisit sehingga kita dapat menggunakan nilai // inherit` pada hal-hal seperti ` `Elemen. Tubuh (Margin: 0; // 1 Font-Family: $ Font-Face-Base; Ukuran Font: $ Ukuran Font; Font-Weight: $ Font-Weight-Base; $ Tinggi garis: $ -Base; Warna: $ tubuh; teks-align: kiri; // 3 latar belakang-warna: $ body-bg; // 2)

TOTAL. Apa yang harus dipilih

Dalam catatan asli ada hasil dari survei yang sesuai dari

Pada artikel ini kita akan berbicara tentang mengatur ulang gaya dan mempertimbangkan contoh membuat file reset.css seperti itu.

Gagasan untuk melempar gaya muncul sekitar 10 tahun yang lalu. Yang benar-benar menyimpulkan bahwa dengan bantuan satu set kecil gaya CSS, membawa tampilan halaman di semua browser ke yang sama. Tentu saja tidak selalu berhasil, tetapi beberapa momen dapat diperbaiki - misalnya, perbatasan tidak mengerti di mana IE berlangsung di beberapa versi. Atau stroke biru (garis besar) di bidang.

Bukan untuk satu pengembang front-end bukan rahasia bahwa browser sangat pemilih dan setiap proses elemen html. Dengan caranya sendiri, tambahkan gaya standar Anda.

Karena ide-ide ini terbakar sejak lama, tidak mengherankan bahwa sudah ada file siap Reset, biasanya disebut reset.css, dan sambungkan ke semua proyek.

Kenapa dalam file terpisah? Ya, hanya karena lebih nyaman untuk mentransfernya dari proyek ke proyek.

Berikut ini adalah contoh reset.css dari 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | Lisensi 20110126: tidak ada (domain publik) * / html, tubuh, div, span, applet, objek, iframe, h1, h4, h4, h4, h5, h6, p, blockquote, a abbr, acronim, alamat, alamat, Besar, mengutip, kode, del, dfn, em, img, ins, kb, q, s, sampan, kecil, mogok, kuat, sub, sup, tt, var, b, u, tt, b, b, b, b, b, b, b, U, i, tengah, dl, dt, dd, ol, ul, li, fieldset, bentuk, label, legenda, meja, keterangan, todbode, tf, th, th, artikel, detail, Embed, gambar, figcaption, footer, header, hgroup, menu, nav, output, ruby, bagian, ringkasan, waktu, tanda, audio, video (margin: 0; padding: 0; perbatasan: 0; 100% ; Font: mewarisi; vertikal-align: baseline;) / * HTML5 display-peran ulang untuk browser yang lebih lama * / artikel, samping, detail, figcaption, gambar, footer, header, hgroup, menu, nav, bagian (tampilan: blok; ) Tubuh (tinggi garis: 1;) ol, ul (daftar-gaya: tidak ada;) blockquote, q (kutipan: tidak ada;) blockquote: sebelum, blockquote: peachter, q: setelah (konten: "" Konten: Tidak Ada;) Tabel (Perbatasan Bordir: C. Ollapse; Border-Spacing: 0; )

Ini hanya standar file ini yang diambil oleh lingkaran pengembang web tertentu.

Saya menyarankan Anda, apakah Anda seorang programmer berpengalaman atau hanya pemula untuk mengembangkan file reset Anda. Sebagai dasar, Anda dapat mengambil standar yang dijelaskan di atas, menambahnya dengan pemilihnya atau mengubah yang sudah ada. Berikut adalah contoh dari file seperti itu yang saya kembangkan untuk diri saya sendiri:

input, textarea, a, tombol, pilih (garis besar: tidak ada) img (batas: tidak ada;) hr (hapus: keduanya; border: tidak ada; latar belakang: tidak ada;) * (latar belakang-ulangi: tidak berulang;) / * HTML5;) / * Reset peran-peran untuk browser yang lebih tua * / artikel, samping, detail, figcaption, gambar, footer, header, hgroup, menu, nav, bagian (tampilan: blok;) tubuh (tinggi (daftar);) -Style: tidak ada; margin: 0; padding: 0;) blockquote, q (tanda kutip: tidak ada;) blockquote: sebelum, blockquote: peachter, q: setelah (konten: ""; None;) (Colapse Perbatasan: Runtuh; Spasi Batas: 0;)

Anda dapat KIP kode di atas untuk penggunaan pribadi, tetapi jika Anda menggunakannya di artikel Anda - letakkan tautan ke sumbernya.