ใช้ Normalize.css เพื่อการพัฒนาที่เป็นเนื้อเดียวกัน

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

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

รีเซ็ตเบราว์เซอร์เทียบกับทำให้ปกติ

เป็นเวลาหลายปีที่ฉันได้ใช้การรีเซ็ต CSS ของ Eric Meyer เอง สิ่งเหล่านี้เพียงพอสำหรับโครงการส่วนใหญ่ของฉันและไม่ได้ทำให้เกิดปัญหาที่สำคัญ อย่างไรก็ตาม Normalize เปลี่ยนมุมมองการรีเซ็ตของฉันเพราะมันทำงานต่างจากการรีเซ็ต CSS เป็นสิ่งสำคัญที่คุณจะต้องเข้าใจความแตกต่าง.

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

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

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

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

“ฉันจะต้องยืนยันว่าการปรับสภาพให้เป็นมาตรฐานนั้นดีกว่าการรีเซ็ต มันจะส่งผลให้ CSS ถูกถ่ายโอนข้ามลวดน้อยลงใช้ค่าเริ่มต้นของ UA ได้ดีขึ้นและมีความเข้าใจที่ดีขึ้นเกี่ยวกับองค์ประกอบต่างๆ ความหมาย เพื่อแสดง.”

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

หากคุณต้องการลองรีเซ็ต CSS ที่นี่เป็นตัวเลือกยอดนิยม:

รีเซ็ตของ Eric Meyer
รีเซ็ต HTML5
HTML5Doctor รีเซ็ต

กำหนดค่าปกติ

ผู้สร้าง Normalize Nicolas Gallagher เขียนโพสต์เกริ่นนำที่มีข้อความนี้:

“Normalize.css เป็นไฟล์ CSS ขนาดเล็กที่ให้ความสอดคล้องของเบราว์เซอร์ที่ดีกว่าในการกำหนดค่าเริ่มต้นขององค์ประกอบ HTML มันทันสมัย HTML5 พร้อมทางเลือกในการรีเซ็ต CSS แบบดั้งเดิม.”

ในช่วงหลายปีที่ผ่านมานี้ได้กลายเป็นห้องสมุดที่น่าเชื่อถือซึ่งนักพัฒนาซอฟต์แวร์ทั่วโลกใช้ Normalize ยังถูกใช้ในระดับหนึ่งใน Bootstrap และ Pure CSS.

มีสองวิธีในการใช้ Normalize ในโครงการ: แก้ไขซอร์สเพื่อกำหนดสไตล์ชีต Normalize ของคุณเองหรือใช้เป็นฐานและเพิ่มสไตล์ที่ด้านบน.

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

อีกทางเลือกหนึ่งคือนักพัฒนาบางคนรวมไฟล์ Normalize.css ทั้งหมดและสร้างสไตล์ชีทของพวกเขาเอง สไตล์ชีต Normalize แบบเต็มขยายโค้ด 420+ บรรทัดซึ่งเท่ากับ ~ 6.8KB ที่ไม่บีบอัด.

ไม่มีวิธีใดดีไปกว่าวิธีอื่นและคุ้มค่าที่จะทำตามสิ่งที่ดีที่สุดสำหรับแต่ละโครงการหรือเวิร์กโฟลว์ที่คุณต้องการ.

ในการเริ่มต้นให้ดาวน์โหลดสำเนา Normalize จาก GitHub หรือโฮสต์จาก CDN ภายนอก คุณยังสามารถดึง Normalize เวอร์ชันล่าสุดได้โดยตรงจาก NPM ดังนี้:

npm ติดตั้ง - บันทึก normalize.css

หากคุณไม่ต้องการดาวน์โหลดไฟล์ใด ๆ คุณสามารถสร้างโปรเจค CodePen ใหม่ซึ่งสามารถผนวก Normalize ได้ด้วยการคลิกปุ่ม.

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

กฎ Normalize แต่ละข้อมีความคิดเห็น CSS ที่สอดคล้องกันซึ่งอธิบายถึงสิ่งที่ทำและแก้ไขปัญหา / ข้อบกพร่องใดบ้าง บางคนเห็นได้ชัดเช่นการตั้งค่า จอแสดงผล: บล็อก ในองค์ประกอบ HTML5 ที่ใหม่กว่า.

คนอื่นจะไม่ค่อยเห็นเช่นรหัส SVG นี้ซึ่งซ่อนอยู่ใน Internet Explorer:

svg: ไม่ (: root) ล้น: ซ่อนอยู่

ฉันขอแนะนำ skimming สไตล์ชีทเพื่อดูว่ามันทำงานอย่างไรและเรียนรู้ว่า Normalize จะเหมาะกับโครงการของคุณหรือไม่.

Normalize.css ในการออกแบบเว็บ

เวอร์ชันล่าสุดของ Normalize v4.0 ให้การสนับสนุนเบราว์เซอร์อย่างกว้างขวาง.

Chrome (สองอันสุดท้าย)
Edge (สองอันสุดท้าย)
Firefox (สองรายการสุดท้าย)
Firefox ESR
Internet Explorer 8+
Opera (สองรายการสุดท้าย)
Safari 6+

จากสิ่งที่ฉันสามารถบอกได้ Normalize อาจรองรับเบราว์เซอร์เวอร์ชันเก่าที่มีการปรับปรุงอย่างต่อเนื่องเช่น Firefox แต่ “เป็นทางการ” การสนับสนุนรวมถึง Chrome / Edge / FF / Opera สองเวอร์ชันล่าสุดเท่านั้น.

นอกจากนี้ IE6 + และ Safari 4+ ยังรองรับ Normalize v1 แต่รุ่นนั้นไม่ได้รับการอัพเดตอีกต่อไป.

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

แหล่งข้อมูลเพิ่มเติม

มีไม่มากพอที่จะสอนโดยเฉพาะเกี่ยวกับ Normalizeize ดังนั้นการเรียนรู้ส่วนใหญ่เกิดขึ้นจากการทำ.

และตามจริงแล้วมีไม่มากที่จะอธิบายว่าคุณไม่สามารถรับได้โดยการอ่านสไตล์ชีทและคัดลอก / แก้ไขรหัสตามต้องการ แต่ถ้าคุณกำลังมองหาข้อมูลที่เกี่ยวข้องอื่น ๆ ฉันได้เพิ่มลิงก์ด้านล่าง.

วิดีโอแนะนำ