การแก้ไขปัญหา YUI Reset CSS: วิธีการรักษา <em> ให้เอียงและ <strong> ให้หนา

เมื่อทำงานกับการพัฒนาเว็บ คุณอาจพบว่าตนเองกำลังใช้ YUI’s Reset CSS เพื่อจุดเริ่มต้นที่สอดคล้องกันในทุกเว็บเบราว์เซอร์ แม้ว่าสิ่งนี้จะเป็นประโยชน์ แต่ก็อาจนำไปสู่พฤติกรรมที่ไม่คาดคิดในรูปแบบข้อความของคุณ ปัญหาที่พบบ่อยคือการที่ Reset CSS เปลี่ยนแปลงแท็ก <em> และ <strong> ทำให้ไม่แสดงผลตามที่ตั้งใจ

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

การทำความเข้าใจปัญหา

YUI’s Reset CSS จะเปลี่ยนการจัดรูปแบบเริ่มต้นของเบราว์เซอร์ ซึ่งบางครั้งอาจนำไปสู่ความยุ่งยาก:

เกิดอะไรขึ้น?

บรรทัดเฉพาะใน YUI Reset CSS ที่ทำให้เกิดปัญหาคือ:

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

ในที่สุด ทั้งแท็ก <em> และ <strong> จะสูญเสียการจัดรูปแบบเริ่มต้น:

• แท็ก <em> ซึ่งควรจะแสดงเป็นเอียง กลับปรากฏเป็นข้อความธรรมดา
• แท็ก <strong> ซึ่งควรจะแสดงเป็นหนา ก็แสดงในน้ำหนักฟอนต์มาตรฐานเช่นเดียวกัน

ข้อขัดแย้ง

แม้ว่าคุณอาจสามารถคืนการจัดรูปแบบสำหรับแท็กเหล่านี้ใน stylesheet ของคุณเองโดยใช้:

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

ปัญหารุนแรงขึ้นเมื่อคุณใช้แท็กทั้งสองร่วมกัน ตัวอย่างเช่น:

<strong>This is bold, <em>and this is italic, but not bold</em></strong>

ในที่นี้ แม้ว่ากฎสไตล์ของคุณสำหรับ <strong> จะทำงาน แต่กฎ Universal Reset CSS จะคืนค่าของ <em> และยกเลิกเอฟเฟกต์การเอียง

วิธีแก้ไข

เพื่อให้แน่ใจว่าสไตล์ที่คุณกำหนดไว้จะมีความสำคัญมากกว่าค่าเริ่มต้นของ YUI Reset CSS คุณจะต้องปรับเปลี่ยนกฎ CSS ของคุณ นี่คือวิธีการทำ:

ขั้นตอนที่ 1: เปลี่ยนแปลงด้วยความเฉพาะเจาะจง

คุณสามารถเพิ่มความเฉพาะเจาะจงให้กับกฎการจัดรูปแบบของคุณได้ดังนี้:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

การเปลี่ยนแปลงนี้จะทำให้ไม่เพียงแต่แท็ก <strong> และ <b> ถูกจัดรูปแบบอย่างเหมาะสม แต่เอลิเมนต์ที่ซ้อนอยู่ภายในพวกมันก็จะถือรูปแบบเดียวกันด้วยเช่นกัน

ขั้นตอนที่ 2: บังคับสไตล์ด้วย !important

หากคุณยังสนับสนุนเบราว์เซอร์รุ่นเก่าเช่น IE7 คุณอาจจำเป็นต้องบังคับให้สไตล์ของคุณใช้ !important ไลบรารีของคุณแบบนี้:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

ขั้นตอนที่ 3: ทดสอบสไตล์ของคุณ

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

นี่คือตัวอย่างที่รวดเร็วให้คุณลอง:

ตัวอย่าง CSS

/* YUI styles */
address,caption,cite,code,dfn,em,strong,th,var {
  font-style: normal;
  font-weight: normal;
}

/* Your styles */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

ตัวอย่าง HTML

<strong>Bold</strong> - <em>Italic</em> - <strong>Bold and <em>Italic</em></strong>

สรุป

โดยการติดตามขั้นตอนที่ระบุในบล็อกนี้ คุณสามารถที่จะแก้ไขพฤติกรรมเริ่มต้นที่ถูกแนะนำโดย YUI’s Reset CSS ได้สำเร็จ รักษาแท็ก <em> และ <strong> ของคุณให้มีการจัดรูปแบบอย่างถูกต้อง

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

ขอให้สนุกกับการเขียนโค้ด!