เข้าใจพื้นฐานการแสดงผลของ CSS ด้วยกฏ 3 ข้อ

หายหน้ากันไปนานกับ Frontend Trick #4 หลายๆคนคงจะเคยมีปัญหาเรื่องการแสดงผลของคำสั่ง CSS เช่น คำสั่งของ class นั้นไปทับ class นี้ ทับกันไปทับกันมา ไม่รู้ต้องแก้ที่ตรงไหน วันนี้จึงจะมาเล่าถึงคอนเซ็ปต์พื้นฐานที่สำคัญมากๆของ CSS ในเรื่องของลำดับในการแสดงผลของ CSS ใน HTML และปัญหาการซ้อนทับกันของคำสั่งว่าคำสั่งไหนควรจะแสดง ถ้าคุณได้เข้าใจคอนเซ็ปต์นี้จะช่วยในการเขียน CSS ให้มีประสิทธิภาพขึ้นอย่างมาก ด้วยกฏ 3 ข้อนี้ The cascade, Specificity, Inheritance

The cascade

cascade แปลตรงตัวแปลว่าน้ำตก ซึ่งหมายความว่า คำสั่งที่อยู่ลำดับล่างของไฟล์ CSS จะแสดงผลแทนที่คำสั่งบน ตัวอย่างเช่น

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
<h1>This is my heading.</h1>

จากตัวอย่างนี้ h1 จะแสดงสีน้ำเงินออกมา เพราะว่าเป็นคำสั่งที่อยู่ด้านล่างกว่าสีแดง จึงเป็นเหตุผลว่าทำไมตอนเขียน Media Query จึงต้องเขียนไว้ด้านล่างของไฟล์ เพราะว่าถ้าเราเขียนโค้ดแบบนี้

@media screen and (min-width:768px) {
  h1 {
    color: purple;
  }
}
h1 {
  color:red;
}
h1 {
  color: blue;
}

ในการแสดงผลที่จอขนาด 768px สีที่แสดงผลจะได้สีน้ำเงินอยู่ดี ⚠️️️⚠️️️⚠️️️

Specificity

กฏนี้จะพูดถึงการที่คำสั่ง CSS ที่มาจาก selector ที่ต่างกัน แต่มาแสดงผลที่ element เดียวกัน ในการทำงานของ browser นั้นจะมีวิธีการคำนวณอยู่ว่าคำสั่งไหนควรที่จะนำมาแสดงผล โดยจะมีวิธีคิดอยู่ว่าคำสั่งที่มีความจำเพาะมากกว่าจะถูกนำมาแสดงผล โดยจะมีวิธีการคำนวณคือ

• คำสั่งที่อยู่ใน style attribute ของ element นั้น (inline styles) จะมีความจำเพาะมากที่สุด จะแสดงผลทับเสมอ <h1 style="red">head</h1>
• ID selector จะมีความจำเพาะรองลงมา <h1 id="head">head</h1>
• class selector, attribute selector จะมีความจำเพาะน้อยกว่า ID selector ทุกอัน <h1 class="head">head</h1>
• element selector จะมีความจำเพาะน้อยที่สุด <h1>head</h1>

ตัวอย่างเช่น

#alert {
  color: red;
  text-decoration: none;
}
.container > .header {
  margin-left: 10px;
}
.header {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
  margin-left: 0;
}
h1 {
  color: purple;
}
<h1>Text</h1>
<h1 class="header">Header</h1>
<h1 class="header" id="alert">Header with alert ID</h1>

จะเห็นว่าถึงแม้คำสั่งของ h1 จะอยู่ล่างสุด แต่ถ้าเราใส่คำสั่ง CSS ให้ class ของ element นั้นคำสั่งก็จะถูกแทนที่ และถ้าเราใส่ให้ ID ก็จะสามารถทับคำสั่งของ element ได้
ส่วนที่หลายคนอาจจะไม่รู้คือ .container > .header จะมีความจำเพาะมากกว่า .header เฉยๆนะ จะทำให้คำสั้งของ .header โดนทับ ⚠️️⚠️️⚠️️

Inheritance

บางคำสั่งของ CSS นั้นถ้าเราใส่ค่าเข้าไปใน parent element จะถูกสืบทอดไปให้ child element ด้วยโดยอัตโนมัติ แต่คำสั่งของ child element จะสามารถทับคำสั่งของ parent ได้ แต่ในบางคำสั่งจะไม่สามารถสืบทอดได้

p {
  color: grey;
  margin-left: 10px;
}
.highlight {
  font-weight: bold;
  color: blue;
}
<p>
  <span className="highlight">Lorem Ipsum </span>
  <span>is simply dummy text </span>
  of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
  dummy text ever since the 1500s
</p>

จะเห็นว่า color: grey ที่เขียนไว้ใน element p นั้นจะส่งผลถึง element span แต่เราสามารถใส่สีน้ำเงินทับไปใน child element ได้ แต่คำสั่ง margin-left นั้นจะไม่ส่งผลไปถึง child element

จะเห็นว่าวิธีการเขียน selector หรือ ลำดับในการเขียนคำสั่งนั้น มีผลต่อการแสดงผลทั้งสิ้น ถ้าเราเรียงลำดับผิด หรือว่าเขียน selector ไม่ดี จะทำให้โค้ด CSS ของเรานั้นมีความซับซ้อนขึ้นโดยไม่จำเป็นเลย และในบางครั้งปัญหาการแสดงผลของ CSS ก็สามารถแก้ไขได้เพียงปรับโค้ดแค่เล็กน้อยเท่านั้น

สามารถอ่านเนื้อหาเพิ่มเติมได้ที่

Cascade and inheritance

CSS Inheritance, Cascade, and Specificity

ถ้าใครชอบก็อย่าลืมกดติดตาม Code’s Dairy เพื่อจะได้ไม่พลาด Content ใหม่ ๆ ของเราด้วยน้า ♡

Code’s Diary

🔅 Frontend Trick #1 Toggle Switch CSS Only
🌠 Frontend Trick #2 Modal Window
💤 Fontend Trick #3 3D Layers with CSS