CSS reset HTML5 mana yang Anda gunakan dan mengapa? [Tutup]

123

CSS reset HTML5 mana yang Anda gunakan dan mengapa? Apakah ada satu yang Anda temukan untuk mencakup lebih banyak kasus?

Saya sudah mulai menggunakan HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Tampaknya berhasil, tetapi saya ingin tahu apakah ada yang lebih baik di luar sana.

Darryl Hein
sumber
Ini mirip ya, tapi saya lebih hanya mencari untuk menggunakan orang lain daripada memodifikasi satu untuk membuatnya bekerja jadi di kemudian hari, jika perlu, saya bisa menyalin versi yang lebih baru.
Darryl Hein
20
D_N Saya mengerti itu, tapi HTML5 memang memiliki pengaruh pada CSS, terutama pada CSS reset di mana Anda sekarang perlu menyertakan tag lain, seperti nav atau disamping.
Darryl Hein

Jawaban:

40

Pembicaraan sebenarnya: Meskipun penurunan harga, kaikai benar, Anda hanya perlu mengatur ulang * padding & margin ke 0.

Meskipun sayangnya 99% dari kita tidak memiliki sumber daya atau tenaga manusia untuk mengikuti ratusan versi browser yang ada. Jadi lembar reset sangat penting untuk situs web biasa.

html5reset: (Itu terlalu mengganggu)

Saya baru saja melihat di http://html5reset.org/

img,
object,
embed {max-width: 100%;}

Dan:

html {overflow-y: scroll;}

Saya mengerti itu memiliki niat baik tetapi, itu bukan pekerjaan lembar reset. Itu membuat terlalu banyak asumsi.

BluePrint Reset: (secara harfiah cetak biru)

body {
  line-height: 1.5;
  background: white;
}

Ada apa dengan 1.5. Dan mengapa latar belakang putih? (Saya tahu itu untuk mengoreksi tetapi masih tidak perlu)

Normalize.css: (Tidak normal)

https://github.com/necolas/normalize.css/blob/master/normalize.css

Ini dimulai dengan baik dengan beberapa peretasan webkit / ie, tetapi

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Setiap tag header ditargetkan. & mereka tidak mengatur ulang tinggi garis tubuh.

Saya yakin semua hal di atas melakukan pekerjaan yang diinginkan dengan baik, tetapi mungkin akan diganti lebih dari yang diperlukan.

Eric Meyer

YUI

HTML5Boilerplate

Di atas lebih untuk pro dengan Boilerplate yang condong ke sisi (terlalu bersahabat) Saya yakin karena popularitas. Saat ini 80% dari pengaturan ulang kustom saya adalah boilerplate.

Saya akan membahas ketiganya sedikit demi sedikit dan membuatnya sendiri, ini bukan ilmu roket.

undefined
sumber
2
Perhatikan bahwa normalize.css telah berubah sekarang; ukuran font judul tidak lagi disetel.
Ruben Verborgh
2
Perlu disebutkan bahwa Normalize.css tidak hanya mengelola browser desktop tetapi juga browser seluler seperti iOS Safari, Chrome untuk Android, browser stok, dll., Yang unik dalam dirinya sendiri. Untuk alasan ini dan lainnya Normalisasi dimasukkan ke dalam banyak kerangka kerja populer.
Matt Smith
Saya dulu menggunakan 'Eric Meyer' tetapi sekarang menggunakan 'YUI' reset style sheet karena ini: danielsokolowski.blogspot.ca/2012/11/…
Daniel Sokolowski
19

Normalize.css sangat bagus untuk browser desktop dan seluler dan digunakan di banyak template HTML populer.

Tapi bagaimana dengan menggunakan allproperti CSS yang mengatur ulang properti CSS kecuali directiondan unicode-bidi? Dengan begitu Anda tidak perlu menyertakan file tambahan apa pun:

{
    all: unset
}

CSS allmemiliki dukungan luas kecuali di IE / Edge. Begitu pula dengan unset.

Matt Smith
sumber
Menarik tetapi tampaknya ini adalah solusi paling lambat dan hanya didukung di Firefox, sehingga tidak dapat digunakan secara nyata (setidaknya untuk saat ini).
tomasz86
Benar bahwa hanya Firefox yang mendukungnya sekarang, tetapi saya pikir ini memiliki peluang bagus untuk berakhir di solusi seperti Modernizr. github.com/Modernizr/Modernizr/issues/1219
Matt Smith
6

The reset.css digunakan oleh Blueprint CSS framework bekerja dengan baik dan termasuk HTML5 elemen. Itu termasuk dalam screen.css mereka file .

Blueprint adalah sumber daya yang berguna untuk membuat prototipe cepat situs baru, dan kode sumbernya diatur dengan baik dan layak dipelajari.

calvinf.dll
sumber
4

Eric Meyer juga merilis v2 dari reset CSS-nya (dan dia melakukannya hampir setahun yang lalu sekarang):

http://meyerweb.com/eric/tools/css/reset/

Illes Peter
sumber
Sederhana namun efektif, dan lebih cepat daripada penyetelan ulang yang mengandalkan * pemilih universal.
tomasz86
3
  1. Mempertahankan default yang berguna, tidak seperti banyak reset CSS.
  2. Menormalkan gaya untuk berbagai elemen HTML.
  3. Memperbaiki bug dan inkonsistensi browser yang umum.
  4. Meningkatkan kegunaan dengan perbaikan halus.
  5. Menjelaskan kode apa yang menggunakan komentar rinci.

normalize.css

zzart
sumber
2
* {
    margin: 0;
    padding: 0;
}

sederhana namun sepenuhnya efektif. mungkin melempar:

body {
    font-size: small;
}

untuk ukuran baik.

kaikai
sumber
9
Zapping margin default dan padding pada kontrol formulir dapat menimbulkan efek yang tidak diinginkan dan kata kunci ukuran font yang diberi nama tidak memiliki perilaku yang sepenuhnya konsisten di seluruh browser. Ini terlalu sederhana. Itu juga gagal untuk mengatur gaya untuk elemen yang diperkenalkan di HTML 5, jadi mereka tetap ada display: inline.
Quentin
4
Saya tidak setuju. Margin dan padding adalah satu-satunya properti yang tidak dapat diprediksi. Properti ukuran font menggunakan kata kunci bernama untuk secara khusus menargetkan browser yang membacanya, yang membuat skala font YUI efektif di setiap browser utama ( developer.yahoo.com/yui/examples/fonts/fonts-size_source.html ). Saya juga tidak akan pernah ingin memaksakan aliran normal elemen dan jadi saya akan membiarkan elemen HTML 5 itu sendiri, hanya mengubah jenis tampilan atau posisi sesuai kebutuhan. Saya menyadari pilihan saya tidak populer, tetapi jauh lebih elegan daripada solusi lain dan berhasil.
kaikai
3
Tidak, tidak, tidak, tidak! Elemen HTML5 tidak memiliki properti display yang disetel, jadi dengan anggun mereka kembali ke default display: inline. Pernahkah Anda melihat diagram situs di mana header, footer, navigasi, kolom samping, hampir setiap bagian halaman mengalir sebaris ??? Maaf kaikai, tapi ini tidak bisa diterima!
Filip Dupanović
Sobat, saya bahkan bukan seorang ahli HTML5 (belum) dan saya tahu ini sama sekali bukan cara yang tepat untuk mengatur ulang.
Icemanind
4
Jawaban yang benar-benar valid. Satu-satunya kelemahan mungkin adalah *penyeleksi lambat, saya dengar.
Anton Strogonoff
2

Spesifikasi HTML5 menyertakan deklarasi CSS yang direkomendasikan untuk browser yang mendukung CSS. Untuk bersenang-senang, saya mengambilnya dan mengembalikannya, di tempat yang masuk akal. Anda dapat melihat hasilnya di artikel ini .

Namun , saya tidak merekomendasikan penggunaan ini dalam produksi. Ini lebih merupakan bukti konsep dan mungkin lebih baik digunakan untuk memberi petunjuk daripada berfungsi sebagai lembar gaya pengaturan ulang semua tujuan. Salah satu saran lain sebelumnya mungkin merupakan pilihan yang lebih baik.

Boldewyn
sumber
0

Saya menggunakan Normalisasi atau reset dari HTML5 Doctor, dan saya mengubahnya agar sesuai dengan proyek yang sedang saya kerjakan.

BTW hanya konsep menggunakan reset yang menjadi lebih atau kurang standar.

cornishninja
sumber
Apakah Anda memiliki detail tambahan?
James A Mohler
Saya tidak meninggalkan elemen yang saya tidak menggunakan ion proyek tertentu. Misalnya saya menghapus elemen formulir jika saya tidak menggunakan formulir. Saya yakin Anda mengerti. Tidak ada gunanya mengatur ulang elemen yang tidak Anda gunakan.
cornishninja
Untuk mendukung poin saya tentang mengubah pengaturan ulang agar sesuai dengan kebutuhan saya: cssreset.com/which-css-reset-should-i-use
cornishninja