การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน
ลบรูปแบบเริ่มต้นของเบราว์เซอร์ที่ไม่สอดคล้องกันด้วยการรีเซ็ต CSS และสไตล์ชีต normalize
การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหา: ค่าเริ่มต้นของเบราว์เซอร์ไม่สอดคล้องกัน
เบราว์เซอร์ทุกตัวมี สไตล์ชีตของเบราว์เซอร์ ในตัว ซึ่งกำหนดรูปแบบเริ่มต้นสำหรับหัวข้อ ระยะขอบ ระยะเสริม รายการ และองค์ประกอบแบบฟอร์ม ค่าเริ่มต้นเหล่านี้แตกต่างกันในแต่ละเบราว์เซอร์ จึงทำให้รูปลักษณ์ไม่สอดคล้องกัน
การรีเซ็ต CSS
การรีเซ็ต CSS จะลบค่าเริ่มต้นของเบราว์เซอร์ทั้งหมดออก ทำให้คุณเริ่มต้นจากพื้นที่ว่าง การรีเซ็ตที่มีชื่อเสียงของ Eric Meyer จะกำหนดระยะขอบ ระยะเสริม และคุณสมบัติอีกหลายรายการให้เป็นศูนย์หรือไม่มีค่า
<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>
การทำให้ CSS เป็นมาตรฐาน
Normalize.css ใช้แนวทางที่แตกต่างออกไป แทนที่จะลบค่าเริ่มต้นทั้งหมด จะทำให้ค่าเริ่มต้นของเบราว์เซอร์สอดคล้องกันและแก้ไขข้อบกพร่องที่ทราบ โดยยังคงค่าเริ่มต้นที่มีประโยชน์ เช่น ขนาดหัวข้อไว้
ข้อแลกเปลี่ยนระหว่างการรีเซ็ตกับการทำให้เป็นมาตรฐาน
การเปรียบเทียบ:
- การรีเซ็ต: เริ่มจากพื้นที่ว่าง คุณต้องกำหนดทุกอย่างเอง และใช้แรงมากกว่า
- การทำให้เป็นมาตรฐาน: มีพื้นฐานที่สอดคล้องกันและยังคงค่าเริ่มต้นที่มีประโยชน์ไว้ จึงต้องเขียนโค้ดกำหนดเองน้อยกว่า
การรีเซ็ต CSS สมัยใหม่
การรีเซ็ตสมัยใหม่ที่ได้รับความนิยม (โดย Josh Comeau) จะมุ่งจัดการกับค่าเริ่มต้นที่มีผลกระทบมากที่สุด:
<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>
รูปภาพในรูปแบบบล็อก
การกำหนดให้รูปภาพมี display: block จะลบช่องว่างอินไลน์เริ่มต้นที่เกิดจาก line-height บริเวณด้านล่างของรูปภาพภายในคอนเทนเนอร์:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />
รูปแบบการรีเซ็ตรายการ
ลบเครื่องหมายรายการและการเยื้องออกเมื่อจัดรูปแบบรายการนำทางหรือรายการส่วนติดต่อผู้ใช้แบบกำหนดเอง:
<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>
การรีเซ็ตองค์ประกอบแบบฟอร์ม
องค์ประกอบแบบฟอร์ม (input, button, textarea) จะไม่สืบทอดแบบอักษรตามค่าเริ่มต้นในเบราว์เซอร์หลายชนิด วิธีแก้ไขที่ใช้กันทั่วไปคือ:
<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>
Preflight ของ Tailwind
Tailwind CSS มีการรีเซ็ตของตัวเองที่เรียกว่า Preflight ซึ่งสร้างต่อยอดจาก modern-normalize หากคุณใช้ Tailwind ระบบจะใช้การรีเซ็ตให้โดยอัตโนมัติอยู่แล้ว
ตำแหน่งที่ควรวางการรีเซ็ต
วางสไตล์ชีตสำหรับการรีเซ็ตหรือการทำให้เป็นมาตรฐานไว้เป็น< strong>อันดับแรกเสมอ ก่อนสไตล์ของคอมโพเนนต์หรือยูทิลิตีใด ๆ ลำดับการเรียงซ้อนจะทำให้สไตล์ของคุณเขียนทับการรีเซ็ตได้โดยไม่เกิดความขัดแย้งด้านความจำเพาะ
ข้อควรพิจารณาเกี่ยวกับการรีเซ็ตแบบกำหนดเอง
สร้างการรีเซ็ตแบบกำหนดเองขนาดเล็กที่เหมาะกับโครงการของคุณ แทนการนำการรีเซ็ตจากบุคคลที่สามมาใช้ทั้งชุด รวมเฉพาะกฎที่จำเป็นเพื่อให้ขนาดข้อมูล CSS เล็ก
<p>Base font-size and line-height set on the root element affect the whole page.</p>
ตรวจสอบความเข้าใจ
ความแตกต่างสำคัญระหว่างการรีเซ็ต CSS กับการทำให้ CSS เป็นมาตรฐานคืออะไร
สรุป
รูปแบบเริ่มต้นของเบราว์เซอร์ไม่สอดคล้องกัน การรีเซ็ต CSS จะลบค่าเริ่มต้นทั้งหมด ส่วน normalize.css จะทำให้ค่าเหล่านั้นสอดคล้องกัน การรีเซ็ตสมัยใหม่จะมุ่งเน้นกฎที่มีผลกระทบมากที่สุด เช่น box-sizing: border-box รูปภาพที่มีความกว้างสูงสุด และแบบอักษรที่สืบทอดสำหรับองค์ประกอบแบบฟอร์ม ควรโหลดการรีเซ็ตเป็นลำดับแรกเสมอ
คำถามที่พบบ่อย
บทเรียน “การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน”
ลบรูปแบบเริ่มต้นของเบราว์เซอร์ที่ไม่สอดคล้องกันด้วยการรีเซ็ต CSS และสไตล์ชีต normalize คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก
- Visibility เทียบกับ Display None
- Overflow: เลื่อน ตัด และอัตโนมัติ
- การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน