การสืบทอด

พอดแคสต์ CSS - 005: การรับค่า

สมมติว่าคุณเพิ่งเขียน CSS ไปเพื่อทำให้องค์ประกอบดูเหมือนปุ่ม

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

จากนั้นคุณเพิ่มเอลิเมนต์ของลิงก์ลงในบทความของเนื้อหา ซึ่งมีค่า class เป็น .my-button แต่กลับมีปัญหา ข้อความดังกล่าวไม่ใช่สีที่คุณคาดหวังไว้ เกิดขึ้นได้อย่างไร

พร็อพเพอร์ตี้ CSS บางรายการจะรับค่าหากคุณไม่ระบุค่า ในกรณีของปุ่มนี้ ปุ่มจะรับ color มาจาก CSS นี้

article a {
  color: maroon;
}

ในบทเรียนนี้ คุณจะได้เรียนรู้ว่าทำไมจึงเป็นเช่นนั้นและ การรับช่วงค่าเป็นฟีเจอร์ที่มีประสิทธิภาพซึ่งช่วยให้เขียน CSS น้อยลงได้อย่างไร

โฟลว์การรับค่า

มาดูวิธีการทำงานของการรับช่วง โดยใช้ข้อมูลโค้ด HTML นี้

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

องค์ประกอบรูท (<html>) จะไม่รับค่าสิ่งใดเลยเนื่องจากเป็นองค์ประกอบแรกในเอกสาร เพิ่ม CSS ลงในองค์ประกอบ HTML แล้วระบบจะเริ่มแบ่งเอกสารลง

html {
  color: lightslategray;
}

องค์ประกอบอื่นๆ จะรับค่าพร็อพเพอร์ตี้ color โดยค่าเริ่มต้น องค์ประกอบ html มี color: lightslategray ดังนั้น องค์ประกอบทั้งหมดที่รับค่าสีได้จะมีสี lightslategray

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

เฉพาะ <p> เท่านั้นที่จะมีข้อความตัวเอียงเนื่องจากเป็นองค์ประกอบที่ฝังอยู่ลึกที่สุด การรับค่าจะเลื่อนลงไปด้านล่างเท่านั้น และจะไม่ส่งไปที่องค์ประกอบระดับบนสุด

พร็อพเพอร์ตี้ใดที่จะรับค่ามาโดยค่าเริ่มต้น

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

การสืบทอดค่าทำงานอย่างไร

องค์ประกอบ HTML ทุกรายการจะมีพร็อพเพอร์ตี้ CSS ทุกรายการที่กำหนดไว้โดยค่าเริ่มต้นด้วยค่าเริ่มต้น ค่าเริ่มต้นเป็นพร็อพเพอร์ตี้ที่ไม่รับค่ามาและจะแสดงเป็นค่าเริ่มต้นหากการต่อเรียงคำนวณค่าสำหรับองค์ประกอบนั้นไม่สำเร็จ

พร็อพเพอร์ตี้ที่สามารถรับค่าแบบ Cascade ลงได้ และองค์ประกอบย่อยจะได้รับค่าที่คำนวณแล้วซึ่งแสดงค่าของรายการระดับบน ซึ่งหมายความว่าหากระดับบนสุดที่ตั้งค่า font-weight เป็น bold องค์ประกอบย่อยทั้งหมดจะเป็นตัวหนา เว้นแต่มีการตั้งค่า font-weight เป็นค่าอื่น หรือสไตล์ชีต User Agent มีค่าสำหรับ font-weight สำหรับองค์ประกอบดังกล่าว

วิธีรับค่าและควบคุมการรับช่วงมาอย่างชัดเจน

การรับช่วงค่าอาจมีผลต่อองค์ประกอบในรูปแบบที่ไม่คาดคิด CSS จึงมีเครื่องมือที่ช่วยในเรื่องนี้ได้

คีย์เวิร์ด inherit

คุณสามารถกําหนดให้พร็อพเพอร์ตี้ใดก็ได้รับค่าที่คำนวณมาจากระดับบนสุดของพร็อพเพอร์ตี้นั้นด้วยคีย์เวิร์ด inherit วิธีที่มีประโยชน์ในการใช้คีย์เวิร์ดนี้คือการสร้างข้อยกเว้น

strong {
  font-weight: 900;
}

ข้อมูลโค้ด CSS นี้ตั้งค่าองค์ประกอบ <strong> ทั้งหมดให้มี font-weight เป็น 900 แทนค่า bold เริ่มต้น ซึ่งเทียบเท่ากับ font-weight: 700

.my-component {
  font-weight: 500;
}

ชั้นเรียน .my-component จะตั้งค่า font-weight เป็น 500 แทน หากต้องการทําให้องค์ประกอบ <strong> ภายใน .my-component เพิ่ม font-weight: 500 ด้วย ให้ทําดังนี้

.my-component strong {
  font-weight: inherit;
}

ตอนนี้องค์ประกอบ <strong> ภายใน .my-component จะมี font-weight เป็น 500

คุณตั้งค่านี้ได้อย่างชัดแจ้ง แต่หากคุณใช้ inherit และ CSS ของการเปลี่ยนแปลง .my-component ในอนาคต คุณรับประกันได้ว่า <strong> ของคุณจะได้รับการอัปเดตล่าสุดโดยอัตโนมัติ

คีย์เวิร์ด initial

การรับช่วงค่าอาจทำให้เกิดปัญหากับองค์ประกอบของคุณ และ initial มีตัวเลือกการรีเซ็ตที่มีประสิทธิภาพให้กับคุณ

คุณได้เรียนรู้ไว้ก่อนหน้านี้ว่าพร็อพเพอร์ตี้ทุกรายการมีค่าเริ่มต้นใน CSS คีย์เวิร์ด initial จะตั้งค่าพร็อพเพอร์ตี้กลับไปเป็นค่าเริ่มต้นดังกล่าว

aside strong {
  font-weight: initial;
}

ข้อมูลโค้ดนี้จะนําน้ำหนักตัวหนาออกจากองค์ประกอบ <strong> ทั้งหมดภายในองค์ประกอบ <aside> และทําให้มีน้ำหนักปกติ ซึ่งเป็นค่าเริ่มต้นแทน

คีย์เวิร์ด unset

พร็อพเพอร์ตี้ unset จะทํางานต่างออกไปหากมีการรับช่วงพร็อพเพอร์ตี้โดยค่าเริ่มต้นหรือไม่ หากมีการรับค่าพร็อพเพอร์ตี้โดยค่าเริ่มต้น คีย์เวิร์ด unset จะเหมือนกับ inherit หากพร็อพเพอร์ตี้ไม่ได้รับค่ามาโดยค่าเริ่มต้น คีย์เวิร์ด unset จะเท่ากับ initial

การจำว่าพร็อพเพอร์ตี้ CSS ใดที่รับช่วงมาโดยค่าเริ่มต้นอาจเป็นเรื่องยาก unset จะมีประโยชน์ในบริบทดังกล่าว ตัวอย่างเช่น color รับค่าเดิมมาโดยค่าเริ่มต้น แต่ margin ไม่ใช่ค่า ดังนั้นคุณสามารถเขียนดังนี้

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

ตอนนี้ระบบได้นำ margin ออกแล้วและ color จะเปลี่ยนกลับไปเป็นค่าที่คำนวณมาซึ่งรับค่ามา

คุณสามารถใช้ค่า unset กับพร็อพเพอร์ตี้ all ได้เช่นกัน กลับไปที่ตัวอย่างด้านบน จะเกิดอะไรขึ้นหากสไตล์ p ส่วนกลางได้รับพร็อพเพอร์ตี้เพิ่มเติมเล็กน้อย เฉพาะกฎที่ตั้งค่าไว้สำหรับ margin และ color เท่านั้นที่จะมีผล

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

ถ้าคุณเปลี่ยนกฎ aside p เป็น all: unset แทน ไม่ว่าระบบจะใช้รูปแบบส่วนกลางใดกับ p ในอนาคต ระบบก็จะยกเลิกการตั้งค่าเสมอ

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการสืบทอดพันธุกรรม

พร็อพเพอร์ตี้ใดต่อไปนี้ที่รับช่วงมาได้

animation
ภาพเคลื่อนไหวจะไม่ถูกถ่ายทอดให้เด็ก
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

ค่าใดมีลักษณะการทำงานเหมือน inherit เว้นแต่จะไม่มีสิ่งใดให้สืบทอด จากนั้นจะทำงานเหมือนกับ initial

reset
ไม่ใช่ค่าที่ถูกต้อง โปรดลองอีกครั้ง
unset
🎉
superset
ไม่ใช่ค่าที่ถูกต้อง โปรดลองอีกครั้ง

แหล่งข้อมูล