Normalize.css และรีเซ็ต CSS แตกต่างกันอย่างไร

ฉันรู้ว่า CSS รีเซ็ตคืออะไร แต่เมื่อเร็ว ๆ นี้ฉันได้ยินเกี่ยวกับสิ่งใหม่นี้ที่ชื่อว่า Normalize.css

Normalize.cssและรีเซ็ต CSSแตกต่างกันอย่างไร

ความแตกต่างระหว่าง normalizing CSS และการรีเซ็ต CSS คืออะไร?

เป็นเพียงคำศัพท์ใหม่สำหรับการรีเซ็ต CSS หรือไม่

ฉันทำงานกับ normalize.css

ความแตกต่างที่สำคัญคือ:

1. Normalize.css รักษาค่าเริ่มต้นที่เป็นประโยชน์มากกว่าทุกอย่าง "unstyling" ตัวอย่างเช่นองค์ประกอบเช่นsupหรือsub"เพิ่งทำงาน" หลังจากรวม normalize.css (และทำให้มีความสมบูรณ์มากขึ้น) ในขณะที่องค์ประกอบนั้นมองไม่เห็นจากข้อความปกติหลังจากรวมเอา reset.css ดังนั้น normalize.css ไม่ได้กำหนดจุดเริ่มต้นที่มองเห็น (homogeny) กับคุณ สิ่งนี้อาจไม่เหมาะกับทุกคน สิ่งที่ดีที่สุดที่จะทำคือการทดสอบกับทั้งสองและดูว่าเจลใดที่คุณต้องการ

2. Normalize.css แก้ไขข้อผิดพลาดทั่วไปบางอย่างที่อยู่นอกขอบเขตสำหรับ reset.css แต่ก็มีขอบเขตกว้างกว่า reset.css และยังมีการแก้ไขข้อบกพร่องสำหรับปัญหาที่พบบ่อยเช่น: การตั้งค่าการแสดงผลสำหรับ HTML5 องค์ประกอบขาดfontมรดกโดยองค์ประกอบของแบบฟอร์มการแก้ไขfont-sizeการแสดงผลสำหรับpre, SVG ล้นใน IE9 และbuttonข้อผิดพลาดจัดแต่งทรงผมใน iOS

3. Normalize.css ไม่เกะกะเครื่องมือ dev ของคุณ การระคายเคืองทั่วไปเมื่อใช้ reset.css เป็นห่วงโซ่การถ่ายทอดขนาดใหญ่ที่แสดงในเครื่องมือการดีบัก CSS ของเบราว์เซอร์ นี่ไม่ใช่ปัญหากับ normalize.css เนื่องจากมีสไตล์เป็นเป้าหมาย

4. Normalize.css เป็นแบบแยกส่วน โครงการแบ่งออกเป็นส่วนที่ค่อนข้างอิสระทำให้คุณสามารถลบส่วนต่างๆได้ง่าย (เช่นการทำให้เป็นมาตรฐานของแบบฟอร์ม) หากคุณรู้ว่าเว็บไซต์ของคุณไม่จำเป็นต้องใช้

5. Normalize.css มีเอกสารที่ดีกว่า รหัส Normalize.css เป็นเอกสารแบบอินไลน์เช่นเดียวกับครอบคลุมในGitHub วิกิพีเดีย ซึ่งหมายความว่าคุณสามารถค้นหาว่าแต่ละบรรทัดของรหัสกำลังทำอะไรรวมอยู่ด้วยทำไมความแตกต่างระหว่างเบราว์เซอร์และเรียกใช้การทดสอบของคุณเองได้ง่ายขึ้น โครงการมีวัตถุประสงค์เพื่อช่วยให้ความรู้แก่ผู้คนเกี่ยวกับวิธีที่เบราว์เซอร์แสดงองค์ประกอบโดยค่าเริ่มต้นและทำให้พวกเขามีส่วนร่วมในการส่งการปรับปรุงได้ง่ายขึ้น

ฉันเขียนรายละเอียดเกี่ยวกับสิ่งนี้ในบทความเกี่ยวกับ normalize.css

ความแตกต่างที่สำคัญคือ:

• CSS รีเซ็ตมีเป้าหมายเพื่อลบสไตล์ของเบราว์เซอร์ในตัว องค์ประกอบมาตรฐานเช่น H1-6, p, strong, em, และ cetera สิ้นสุดมองเหมือนกันโดยไม่มีการตกแต่งเลย คุณควรจะเพิ่มการตกแต่งทั้งหมดด้วยตัวเอง

• Normalize CSSมีวัตถุประสงค์เพื่อทำให้สไตล์ของเบราว์เซอร์ในตัวสอดคล้องกันกับเบราว์เซอร์ องค์ประกอบเช่น H1-6 จะปรากฏเป็นตัวหนาขึ้นและใหญ่ขึ้นในลักษณะที่สอดคล้องกันในเบราว์เซอร์ คุณควรเพิ่มความแตกต่างในการตกแต่งตามความต้องการของการออกแบบของคุณเท่านั้น

หากการออกแบบของคุณก)ตามหลักการทั่วไปสำหรับการพิมพ์และอื่น ๆ และb) Normalize.css ใช้งานได้กับกลุ่มเป้าหมายของคุณจากนั้นใช้ Normalize.CSS แทนการรีเซ็ต CSS จะทำให้ CSS ของคุณเล็กลงและเร็วขึ้นในการเขียน

Normalize.css เป็นชุดรูปแบบส่วนใหญ่ขึ้นอยู่กับสิ่งที่ผู้เขียนคิดว่าจะดูดีและทำให้มันดูสม่ำเสมอในเบราว์เซอร์ รีเซ็ตแถบสไตล์โดยทั่วไปจากองค์ประกอบเพื่อให้คุณควบคุมการจัดแต่งทรงผมของทุกสิ่งได้มากขึ้น

ฉันใช้ทั้งสองอย่าง

สไตล์บางส่วนจากการรีเซ็ตบางส่วนจาก Normalize.css ตัวอย่างเช่นจาก Normalize.css มีสไตล์เพื่อให้แน่ใจว่าองค์ประกอบอินพุตทั้งหมดมีแบบอักษรเดียวกันซึ่งไม่ได้เกิดขึ้น (ระหว่างอินพุตข้อความและ textareas) รีเซ็ตไม่มีสไตล์ดังกล่าวดังนั้นอินพุตจึงมีแบบอักษรที่แตกต่างกันซึ่งไม่ต้องการโดยปกติ

ดังนั้นโดยพื้นฐานแล้วการใช้ไฟล์ CSS สองไฟล์จะช่วยให้ทุกอย่าง 'Equalizing' ได้ดีขึ้น)

ความนับถือ!

ครั้งแรกreset.cssเป็นห้องสมุดที่เลวร้ายที่สุดที่คุณสามารถใช้เพราะมันเอาโครงสร้างมาตรฐานของ HTML และแสดงทุกสิ่งที่คุณเขียนเป็นข้อความเพียงหลังจากการกำหนดค่าของการขยายขอบและคุณลักษณะอื่น ๆ 0ที่จะ ดังนั้นสำหรับตัวอย่างเช่นคุณจะพบว่าจะเป็นเช่นเดียวกับ<H1><H6>

ในทางกลับกันNormalize.cssใช้โครงสร้างมาตรฐานและแก้ไขข้อผิดพลาดเกือบทั้งหมดที่มีอยู่ในนั้น ตัวอย่างเช่นจะแก้ไขปัญหาด้วยการแสดงฟอร์มจากเบราว์เซอร์หนึ่งไปยังอีกเบราว์เซอร์ Normalize แก้ไขสิ่งนี้โดยการแก้ไขคุณสมบัตินี้เพื่อให้องค์ประกอบของคุณจะแสดงเหมือนกันในทุกเบราว์เซอร์

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

รักษาค่าเริ่มต้นที่เป็นประโยชน์ซึ่งไม่เหมือนกับการรีเซ็ต CSS จำนวนมาก

การรีเซ็ตดูเหมือนว่าจำเป็นที่จะต้องปฏิบัติตามข้อกำหนดการออกแบบที่กำหนดเองโดยเฉพาะอย่างยิ่งในโครงการออกแบบที่ซับซ้อนและไม่ใช้หม้อไอน้ำ ฟังดูราวกับว่าการทำให้เป็นมาตรฐานเป็นวิธีที่ดีในการดำเนินการกับการเขียนโปรแกรมเว็บอย่างหมดจดในใจ แต่เว็บไซต์ที่เกิดขึ้นบ่อยครั้งนั้นเป็นการผสมผสานระหว่างการเขียนโปรแกรมเว็บและกฎการออกแบบ UI / UX

บางครั้งทางออกที่ดีที่สุดคือใช้ทั้งคู่ บางครั้งก็ใช้ไม่ได้เลย และบางครั้งก็ใช้อย่างใดอย่างหนึ่ง หากคุณต้องการสไตล์ทั้งหมดรวมถึงส่วนต่างและการเว้นระยะห่างระหว่างเบราว์เซอร์ทั้งหมดให้ใช้ reset.css จากนั้นใช้การตกแต่งและสไตล์ทั้งหมดด้วยตัวคุณเอง ถ้าคุณชอบสไตล์บิวด์อิน แต่ต้องการซิงโครไนซ์ข้ามเบราว์เซอร์เช่นการทำให้เป็นมาตรฐานแล้วใช้ normalize.css แต่ถ้าคุณเลือกที่จะใช้ทั้ง reset.css และ normalize.css ให้เชื่อมโยงสไตล์ชีต reset.css ก่อนจากนั้นจะใช้สไตล์ชีต normalize.css (ทันที) ในภายหลัง บางครั้งมันก็ไม่ได้เป็นเรื่องที่ดีกว่าเสมอไป แต่เมื่อใดควรใช้แบบไหนเมื่อเทียบกับการใช้ทั้งแบบไหนและแบบไหน IMHO

คำถามนี้ได้รับการตอบแล้วหลายครั้งฉันจะสรุปโดยย่อสำหรับแต่ละตัวอย่างและข้อมูลเชิงลึก ณ เดือนกันยายน 2019:

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

ตัวอย่าง : <h1>แท็กภายใน<section>โดยค่าเริ่มต้น Google Chrome จะทำให้มีขนาดเล็กลงกว่า "คาดว่า" ขนาดของ<h1>แท็ก Microsoft Edge ตรงกันข้ามขนาด<h1>แท็ก"คาดหวัง" Normalize.css จะทำให้มันสอดคล้องกัน

สถานะปัจจุบัน : ที่เก็บ npm แสดงว่าแพ็คเกจ normalize.cssปัจจุบันมีการดาวน์โหลดมากกว่า 500k ครั้งต่อสัปดาห์ ดาว GitHub ในโครงการของพื้นที่เก็บข้อมูลมีมากกว่า 36k

• รีเซ็ต CSS - ตามชื่อแนะนำมันจะรีเซ็ตสไตล์ทั้งหมดเช่นลบสไตล์ผู้ใช้ของเบราว์เซอร์ทั้งหมด

ตัวอย่าง : มันจะทำสิ่งที่ต้องการด้านล่าง:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

สถานะปัจจุบัน : เป็นที่นิยมน้อยกว่า Normalize.css แพ็คเกจรีเซ็ต cssแสดงให้เห็นว่ามีการดาวน์โหลดประมาณ 26 พันครั้งต่อสัปดาห์ GitHub ดาวมีเพียง 200 ขณะที่มันสามารถสังเกตเห็นได้จากโครงการพื้นที่เก็บข้อมูล