การแนะนำและวิธีการประมวลผลที่ดีที่สุดของสไตล์เริ่มต้นของเบราว์เซอร์

เมื่อเร็ว ๆ นี้ฉันได้ปรับรูปแบบของหน้าเว็บเพื่อค้นหาว่ามีพื้นที่ประมาณ 10 พิกเซลที่ด้านล่างของหน้าเว็บเสมอ

พบว่ามีมาร์จิ้น-บอท: 1em;

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

เบราว์เซอร์ที่แตกต่างกันไม่สอดคล้องกับรูปแบบเริ่มต้นขององค์ประกอบเดียวกันซึ่งเป็นเหตุผลที่เราต้องเขียนในตอนต้นของ CSS* {padding: 0;

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

ดังนั้นเมื่อเราสร้างกฎสไตล์ CSS ขั้นตอนที่ต้องทำคือการออกแบบรูปแบบเริ่มต้นของเบราว์เซอร์นั่นคือรูปแบบเริ่มต้นของเบราว์เซอร์ แตกต่างจากการใช้* {padding: 0; มาร์จิ้น: 0} ไม่ว่าจะเป็นองค์ประกอบทั้งหมดในช่องว่างภายในและระยะขอบ

ตัวอย่างเช่นย่อหน้าต่อไปนี้:

ฟอนต์ที่ใช้ในรหัสนี้ใน Internet Explorer เป็นครั้งที่ใหม่ของ Roman และ Font เริ่มต้นของระบบจะใช้ใน Firefox และ Opera ดังนั้นเราต้องตั้งค่าสไตล์แบบครบวงจรสำหรับ <H1> ใน CSS

อย่างไรก็ตามถ้าเราใช้สไตล์ที่ดีที่สุดหากเราใช้* {padding: 0; ฯลฯ เบราว์เซอร์บางตัวจะเพิกเฉยต่อการออกแบบใหม่ของพวกเขาและที่สำคัญกว่านั้นคือสิ่งนี้จะสร้างความเสียหายอย่างรุนแรงต่อการปรากฏตัวขององค์ประกอบเหล่านี้ดังนั้นคุณต้องกำหนดค่าการขยายและค่ามาร์จิ้นด้วยตนเอง ดังนั้นเราควรยอมแพ้เพียงแค่ใช้*แต่เล่นซ้ำองค์ประกอบแรกที่มีความไม่สอดคล้องกันในการดำรงอยู่เช่นร่างกาย, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h5, h6 ก่อน ฯลฯ

ในเวลาเดียวกันรูปแบบเริ่มต้นขององค์ประกอบอาจทำลายลักษณะที่ปรากฏของหน้า ตัวอย่างเช่น <b> องค์ประกอบจะทำให้ข้อความข้น <blockquote> จะเยื้องในส่วนใหญ่ <em> จะเอียงข้อความ ฯลฯ หากคุณต้องการขอการปรากฏตัวของข้อความหน้าใหม่ ในเวลาเดียวกันบางครั้งเราต้องการการปรากฏตัวขององค์ประกอบเหล่านี้เป็นองค์ประกอบหลักและเราสามารถใช้การสืบทอดโดยตรงเพื่อสืบทอดจากองค์ประกอบหลัก

สำหรับองค์ประกอบใดที่ควรตั้งค่าใหม่? Yahoo! ได้สรุปสำหรับเรา ตามคำแนะนำของ Yahoo คุณต้องใส่กฎเหล่านี้ในไฟล์ที่เรียกว่า Reset.css เพียงอย่างเดียว (แนะนำวิธีนี้):

 html {color: #000; , TD {margin: 0; การขยาย: 0;} ตาราง {สีชายแดน: การเว้นระยะสี: 0;} fieldset, img {border: 0;} ที่อยู่, คำบรรยายใต้ภาพ, คำอธิบาย , var {รูปแบบฟอนต์: ปกติ; ขนาด Font: 100%;

สิ่งที่คุณต้องทำคือการบันทึกกฎเหล่านี้ลงในรีเซ็ต. css และใช้ในหน้า เมื่อคุณต้องการเพิ่มรูปแบบใหม่ให้กับองค์ประกอบเหล่านี้มันไม่แตกต่างจากการตั้งค่าองค์ประกอบอื่น ๆ

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้