คุณใช้ HTML5 รีเซ็ต CSS ใดและเพราะเหตุใด [ปิด]

คุณใช้ HTML5 รีเซ็ต CSS ใดและเพราะเหตุใด มีกรณีที่คุณพบว่าครอบคลุมมากกว่านี้หรือไม่?

ฉันเริ่มใช้ HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ดูเหมือนจะใช้ได้ แต่ฉันสงสัยว่าจะมีอะไรที่ดีกว่านี้หรือไม่

พูดจริง: แม้ว่า markdowns kaikaiจะถูกต้อง แต่คุณจะต้องรีเซ็ต * padding & margin เป็น 0 เท่านั้น

แม้ว่า 99% ของพวกเราไม่มีทรัพยากรหรือกำลังคนที่จะติดตามเบราว์เซอร์หลายร้อยเวอร์ชัน ดังนั้นแผ่นรีเซ็ตจึงเป็นสิ่งจำเป็นสำหรับเว็บไซต์ทั่วไป

html5reset :( มันรบกวนเกินไป)

ฉันเพิ่งดูที่http://html5reset.org/

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

และ:

html {overflow-y: scroll;}

ฉันเข้าใจว่ามันมีเจตนาที่ดี แต่นั่นไม่ใช่หน้าที่ของแผ่นรีเซ็ต มันตั้งสมมติฐานมากเกินไป

BluePrint Reset: (พิมพ์เขียว)

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

อะไรขึ้นกับ 1.5 แล้วทำไมพื้นหลังเป็นสีขาว (ฉันรู้ว่ามันใช้สำหรับการแก้ไข แต่ก็ยังไม่จำเป็น)

Normalize.css :( ไม่ปกติ)

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

เริ่มต้นได้ดีกับ webkit / ie แฮ็ก แต่

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;
}

ทุกแท็กส่วนหัวถูกกำหนดเป้าหมาย & พวกเขาไม่ได้รีเซ็ตความสูงบรรทัดของร่างกาย

ฉันแน่ใจว่าสิ่งที่กล่าวมาทั้งหมดทำงานได้ดี แต่อาจจะถูกลบล้างมากเกินความจำเป็น

Eric Meyer

ยูอิ

HTML5Boilerplate

ข้างต้นเป็นข้อมูลเพิ่มเติมสำหรับมืออาชีพที่มี Boilerplate เอนไปทางด้าน (มากกว่าเป็นมิตร) ฉันแน่ใจว่าเนื่องจากความนิยม ในขณะนี้ 80% ของการรีเซ็ตแบบกำหนดเองของฉันเป็นแบบสำเร็จรูป

ฉันจะไปแม้ว่าทั้งสามทีละนิดและทำด้วยตัวเองมันไม่ใช่วิทยาศาสตร์จรวด

Normalize.cssเหมาะสำหรับทั้งเบราว์เซอร์เดสก์ท็อปและมือถือและใช้ในเทมเพลต HTML ที่เป็นที่นิยมมากมาย

แต่สิ่งที่เกี่ยวกับการใช้allคุณสมบัติCSS ที่รีเซ็ตคุณสมบัติ CSS ยกเว้นdirectionและunicode-bidi? ด้วยวิธีนี้คุณไม่จำเป็นต้องรวมไฟล์เพิ่มเติมใด ๆ :

{
    all: unset
}

CSS allได้รับการสนับสนุนอย่างกว้างขวางยกเว้นใน IE / Edge ในทำนองเดียวกันกับunset.

reset.cssใช้โดยพิมพ์เขียว CSSกรอบทำงานได้ดีและรวมถึงองค์ประกอบ HTML5 จะรวมอยู่ในไฟล์screen.css

พิมพ์เขียวเป็นแหล่งข้อมูลที่มีประโยชน์สำหรับการสร้างต้นแบบไซต์ใหม่อย่างรวดเร็วและซอร์สโค้ดได้รับการจัดระเบียบอย่างดีและควรค่าแก่การเรียนรู้

Eric Meyer ยังเปิดตัว v2 ของการรีเซ็ต CSS ของเขา (และตอนนี้เขาทำมาเกือบหนึ่งปีแล้ว):

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

1. รักษาค่าเริ่มต้นที่เป็นประโยชน์ซึ่งแตกต่างจากการรีเซ็ต CSS จำนวนมาก
2. ปรับรูปแบบให้เป็นมาตรฐานสำหรับองค์ประกอบ HTML ที่หลากหลาย
3. แก้ไขข้อบกพร่องและความไม่สอดคล้องกันของเบราว์เซอร์ทั่วไป
4. ปรับปรุงการใช้งานด้วยการปรับปรุงเล็กน้อย
5. อธิบายว่าโค้ดทำอะไรโดยใช้ความคิดเห็นโดยละเอียด

Normalize.css

* {
    margin: 0;
    padding: 0;
}

เรียบง่าย แต่มีประสิทธิภาพทั้งหมด อาจโยน:

body {
    font-size: small;
}

เพื่อการวัดที่ดี

ข้อมูลจำเพาะ HTML5 ประกอบด้วยการประกาศ CSS ที่แนะนำสำหรับเบราว์เซอร์ที่รองรับ CSS เพื่อความสนุกฉันจึงจับมันและเปลี่ยนกลับในที่ที่มันสมเหตุสมผล คุณสามารถดูผลที่ได้ในบทความนี้

อย่างไรก็ตามฉันไม่แนะนำให้ใช้สิ่งนี้ในการผลิต เป็นการพิสูจน์แนวคิดและอาจใช้เพื่อให้คำแนะนำได้ดีกว่าการใช้เป็นสไตล์ชีตที่ตั้งค่าใหม่ทั้งหมด คำแนะนำอื่น ๆ ก่อนหน้านี้อาจเป็นทางเลือกที่ดีกว่า

ฉันใช้ Normalize หรือการรีเซ็ตจาก HTML5 Doctor และฉันแก้ไขให้พอดีกับโปรเจ็กต์ที่ฉันกำลังทำอยู่

BTW เป็นเพียงแนวคิดของการใช้การรีเซ็ตที่เป็นมาตรฐานมากหรือน้อย