วิธีใช้ normalize.css; หากไม่มีจุดเริ่มต้นก็สามารถหลุดพ้นจากมือได้อย่างรวดเร็ว มีวิธีเริ่มต้นใช้ CSS เพื่อทำให้หน้าเว็บของคุณดูสะอาดตาและใช้งานง่าย ตัวอย่างเช่น คุณสามารถใช้ไฟล์ Normalize CSS หรือไฟล์อื่นที่สร้างชุดของสไตล์พื้นฐาน
โพสต์นี้จะแสดงวิธีใช้ไฟล์ Normalize CSS คุณจะรู้ด้วยว่าทำไมนักพัฒนาบางคนถึงใช้มันแทนคนอื่น คุณจะได้เรียนรู้วิธีใช้งานและเข้าใจวิธีการทำงาน ในตอนท้ายของโพสต์ จะแสดงตัวอย่างโค้ดบางส่วนจากไฟล์ Normalize
ขั้นตอนในการใช้ normalize.css
เพิ่ม Javascript จากด้านบนไปที่ index.js เพิ่ม normalize.css (และ friends) เป็น package.json: ใช้ตัวโหลดที่ถูกต้องใน webpack.config.js: เพิ่มไฟล์ index.html เพื่อดูผลลัพธ์: ติดตั้งทุกอย่าง npm ติดตั้ง tart the Webpack devserver:./node_modules/.bin/webpack-dev-server –open
Normalize CSS ทำอะไรได้บ้าง
คุณสมบัติ CSS บางอย่างมีค่าเริ่มต้นที่ตั้งค่าโดยเบราว์เซอร์ทั้งหมด แต่แต่ละเบราว์เซอร์ตั้งค่าที่แตกต่างกัน เพื่อแก้ไขปัญหานี้ สามารถใช้ไฟล์ Normalize CSS เพื่อให้เบราว์เซอร์ทั้งหมดมีจุดเริ่มต้นเดียวกัน แต่ละเบราว์เซอร์มีกฎสไตล์ของตนเองซึ่งตั้งค่าไว้เป็นค่าเริ่มต้น กฎเหล่านี้กำหนดเป้าหมายองค์ประกอบที่แตกต่างกันและใช้ค่าที่แตกต่างกัน
ด้วยเหตุนี้ หากคุณสร้างสไตล์ของคุณโดยไม่มีพื้นฐาน หน้าเว็บของคุณมีแนวโน้มที่จะดูแตกต่างออกไปในเบราว์เซอร์ต่างๆ สิ่งนี้ทำให้นักพัฒนาหลายคนเข้าใจได้ชัดเจนว่าพวกเขาจำเป็นต้องแก้ไขข้อบกพร่องใน CSS ของตน เมื่อตรวจพบในขั้นตอนการพัฒนาช้า รหัสอาจกลายเป็นเรื่องยากที่จะจัดการและยากที่จะทราบว่ามีอะไรผิดปกติ
Normalize พยายามแก้ไขปัญหานี้โดยมุ่งเน้นไปที่กฎเริ่มต้นจากเบราว์เซอร์ต่างๆ เพื่อสร้างบรรทัดฐาน ไฟล์ Normalize จะให้กฎเหล่านี้เป็นค่าเริ่มต้น
FAQ
Normalize css ทำงานอย่างไร
Normalize css ทำให้เบราว์เซอร์แสดงองค์ประกอบทั้งหมดได้สม่ำเสมอมากขึ้นและสอดคล้องกับมาตรฐานสมัยใหม่ มันกำหนดเป้าหมายเฉพาะสไตล์ที่ต้องการการปรับให้เป็นมาตรฐานเท่านั้น
ฉันจะลิงก์ css ที่ปรับให้เป็นมาตรฐานกับ HTML ได้อย่างไร
รวมการพึ่งพา หากต้องการใช้ Normalize.css ให้รวมไฟล์ต้นฉบับต่อไปนี้ในหน้าเว็บของคุณ: ทั่วโลกเทียบกับบริบท … การใช้บริบท Normalize.css
ฉันควรใช้การทำให้เป็นปกติหรือรีเซ็ต CSS หรือไม่
หากคุณต้องการให้สไตล์ทั้งหมด รวมถึงระยะขอบและช่องว่างภายในถูกรีเซ็ตในทุกเบราว์เซอร์ ให้ใช้การรีเซ็ต css จากนั้นใช้การตกแต่งและสไตล์ทั้งหมดด้วยตัวคุณเอง หากคุณชอบสไตล์ในตัวแต่ต้องการการซิงโครไนซ์ระหว่างเบราว์เซอร์มากขึ้น เช่น การทำให้เป็นมาตรฐาน ให้ใช้การทำให้เป็นมาตรฐาน