น้ำตก

พอดแคสต์ CSS - 004: The Cascade

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

button {
  color: red;
}

button {
  color: blue;
}

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

  1. ตำแหน่งและลำดับลักษณะที่ปรากฏ: ลำดับการแสดงกฎ CSS
  2. ความจำเพาะ: อัลกอริทึมที่กำหนดว่าตัวเลือก CSS ใดตรงที่สุด
  3. ต้นทาง: ลำดับของ CSS ที่ปรากฏและแหล่งที่มา ไม่ว่าเป็นสไตล์เบราว์เซอร์ CSS จากส่วนขยายเบราว์เซอร์ หรือ CSS ที่คุณเขียน
  4. ความสำคัญ: กฎ CSS บางข้อจะให้น้ำหนักมากกว่ากฎอื่นๆ โดยเฉพาะกฎประเภท !important

ตำแหน่งและลำดับของการแสดง

ลำดับการแสดงกฎ CSS และรูปแบบการแสดงจะนำมาพิจารณาด้วยการเรียงซ้อนขณะคำนวณการแก้ไขข้อขัดแย้ง

การสาธิตในตอนต้นของบทเรียนนี้คือตัวอย่างการวางตำแหน่งที่ตรงที่สุด มีกฎ 2 ข้อที่มีตัวเลือกความเฉพาะเจาะจงเหมือนกัน ดังนั้น กฎสุดท้ายที่จะประกาศว่าชนะ

สไตล์อาจมาจากแหล่งที่มาต่างๆ ในหน้า HTML เช่น แท็ก <link>, แท็ก <style> ที่ฝัง และ CSS ในหน้าตามที่กำหนดไว้ในแอตทริบิวต์ style ขององค์ประกอบ

หากคุณมี <link> ที่มี CSS ที่ด้านบนของหน้า HTML แล้ว <link> อีกรายการที่มี CSS ที่ด้านล่างของหน้า ได้แก่ <link> ด้านล่างจะมีความเฉพาะเจาะจงมากที่สุด เหตุการณ์เดียวกันนี้จะเกิดขึ้นกับองค์ประกอบ <style> ที่ฝังด้วยเช่นกัน ข้อความจะเฉพาะเจาะจงมากขึ้น ยิ่งอ่านลึกลงไปในด้านล่างของหน้า

ปุ่มมีพื้นหลังสีน้ำเงินตามที่กำหนดโดย CSS ซึ่งองค์ประกอบ <link /> รวมอยู่ กฎ CSS ที่ตั้งค่าเป็นโหมดมืดจะอยู่ในสไตล์ชีตที่ลิงก์ที่ 2 และมีการใช้เนื่องจากตำแหน่งถัดไป

การเรียงลำดับนี้มีผลกับองค์ประกอบ <style> ที่ฝังไว้ด้วย หากประกาศก่อน <link> CSS ของสไตล์ชีตที่ลิงก์จะมีความเฉพาะเจาะจงมากที่สุด

ระบบจะประกาศองค์ประกอบ <style> ใน <head> ส่วนองค์ประกอบ <link /> จะได้รับการประกาศใน<body> ซึ่งหมายความว่ามีความเฉพาะเจาะจงมากกว่าองค์ประกอบ <style>

แอตทริบิวต์ style ในบรรทัดที่มีการประกาศ CSS จะลบล้าง CSS อื่นๆ ทั้งหมดไม่ว่าจะอยู่ในตำแหน่งใด เว้นแต่การประกาศจะมีการกำหนด !important ไว้

ตำแหน่งยังใช้ตามลำดับของกฎ CSS ด้วย ในตัวอย่างนี้ องค์ประกอบจะมีพื้นหลังสีม่วง เนื่องจาก background: purple ประกาศเป็นอันดับสุดท้าย เนื่องจากพื้นหลังสีเขียวถูกประกาศก่อนพื้นหลังสีม่วง เบราว์เซอร์จึงไม่สนใจพื้นหลังสีเขียวนี้

.my-element {
  background: green;
  background: purple;
}

การระบุค่า 2 ค่าสำหรับพร็อพเพอร์ตี้เดียวกันอาจเป็นวิธีง่ายๆ ในการสร้างโฆษณาสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับค่าใดค่าหนึ่ง ในตัวอย่างถัดไปนี้จะมีการประกาศ font-size 2 ครั้ง หากเบราว์เซอร์รองรับ clamp() ระบบจะทิ้งการประกาศ font-size ก่อนหน้านี้ หากเบราว์เซอร์ไม่รองรับ clamp() ระบบจะใช้การประกาศครั้งแรก และขนาดตัวอักษรจะเป็น 1.5rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

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

ทดสอบความรู้ของคุณเกี่ยวกับ Cascade

หากคุณมี HTML ต่อไปนี้บนหน้าเว็บ

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

ภายใน styles.css คือกฎ CSS ต่อไปนี้

button {
  background: yellow;
}

พื้นหลังของปุ่มสีอะไร

ชมพู
ต้นทาง <style> ที่ฝังอยู่ด้านล่างของหน้าแท็ก <link> ดังนั้น แม้ว่าความเฉพาะเจาะจงของ button จะเหมือนกัน แต่ ตำแหน่งของกฎสไตล์จะทำให้คุณชนะ
เหลือง
สำหรับเอกสาร HTML อาจมีการอ่านพื้นหลังของปุ่มสีเหลืองก่อน แต่ต่อมาเราพบกฎใหม่ที่มีความจำเพาะเจาะจงเดียวกันในภายหลัง ซึ่งทำให้กฎนี้ไม่มีผลกับปุ่มดังกล่าว

ลักษณะเฉพาะ

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

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

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

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

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

ความจำเพาะเจาะจงเป็นการสะสม

ดังที่คุณจะได้เรียนรู้ในบทเรียนถัดไป ตัวเลือกแต่ละประเภทคือคะแนนที่ได้ ซึ่งบอกถึงความเฉพาะเจาะจงของตัวเลือก คะแนนสำหรับตัวเลือกทั้งหมดที่คุณใช้ในการกำหนดเป้าหมายองค์ประกอบหนึ่งจะถูกรวมเข้าด้วยกัน ซึ่งหมายความว่าหากกำหนดเป้าหมายองค์ประกอบด้วยรายการตัวเลือก เช่น a.my-class.another-class[href]:hover คุณจะมีโอกาสเขียนทับด้วย CSS อื่นๆ ที่ค่อนข้างยาก ด้วยเหตุนี้ คุณจึงควรทำให้ตัวเลือกเรียบง่ายที่สุด เพื่อทำให้ CSS ใช้งานซ้ำได้ง่ายขึ้น ใช้ความจำเพาะเป็นเครื่องมือสำหรับเข้าถึงองค์ประกอบต่างๆ เมื่อคุณต้องการ แต่ให้ลองพิจารณาการเปลี่ยนโครงสร้างรายการตัวเลือกที่เฉพาะเจาะจงและยาวเสมอ หากทำได้

Origin

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

  1. รูปแบบฐาน User Agent นี่คือสไตล์ที่เบราว์เซอร์ของคุณจะนำไปใช้กับองค์ประกอบ HTML โดยค่าเริ่มต้น
  2. รูปแบบผู้ใช้ภายใน ซึ่งอาจมาจากระดับระบบปฏิบัติการ เช่น ขนาดแบบอักษรพื้นฐาน หรือการเคลื่อนไหวที่ลดลง นอกจากนี้ ยังมาจากส่วนขยายเบราว์เซอร์ เช่น ส่วนขยายเบราว์เซอร์ที่ให้ผู้ใช้เขียน CSS ที่กำหนดเองสำหรับหน้าเว็บ
  3. CSS ที่เขียน CSS ที่คุณเขียน
  4. เขียนเมื่อ !important !important ใดๆ ที่คุณเพิ่มในการประกาศที่คุณเขียนไว้
  5. รูปแบบผู้ใช้ภายใน !important !important ที่มาจากระดับระบบปฏิบัติการ หรือ CSS ระดับส่วนขยายเบราว์เซอร์
  6. User Agent !important !important ที่เบราว์เซอร์กำหนดไว้ใน CSS เริ่มต้น
ภาพสาธิตลำดับของต้นทางตามที่อธิบายในรายการ

หากคุณมีประเภทกฎ !important ใน CSS ที่คุณเขียน และผู้ใช้มีประเภทกฎ !important ใน CSS ที่กำหนดเองของตน ใครจะเป็นผู้ชนะใน CSS

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

ทดสอบความรู้ของคุณเกี่ยวกับต้นกำเนิดแบบ Cascade

ทดสอบความรู้เกี่ยวกับที่มาของการเรียงซ้อน โดยพิจารณากฎของรูปแบบจากต้นทางต่างๆ ต่อไปนี้

รูปแบบ User-agent

h1 { margin-block-start: 0.83em; }

รองเท้าบูท

h1 { margin-block-start: 20px; }

รูปแบบผู้เขียนหน้าเว็บ

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

รูปแบบที่ผู้ใช้กำหนดเอง

h1 { margin-block-start: 2rem !important; }

จากนั้นให้กำหนด HTML ต่อไปนี้

<h1>Lorem ipsum</h1>

margin-block-start สุดท้ายของ h1 คืออะไร

20px
Bootstrap เป็นส่วนหนึ่งของต้นทางที่เขียนขึ้น ซึ่งสูญเสียไปเป็นสไตล์ผู้ใช้ท้องถิ่นที่สำคัญ
0.83em
ต้นทางของรูปแบบ User Agent จะหายไปเป็นสไตล์ผู้ใช้ภายในที่สำคัญ
2เรม
สไตล์ที่กำหนดเองของผู้ใช้ !important นี้มีต้นทางที่เจาะจงที่สุด
2 ช่อง
สไตล์ผู้เขียนนี้เป็นส่วนหนึ่งของต้นทางที่เขียนขึ้น ซึ่งสูญเสียไปเป็นสไตล์ผู้ใช้ที่สำคัญในพื้นที่
1 ช่อง
สไตล์ผู้เขียนนี้เป็นส่วนหนึ่งของต้นทางที่เขียนขึ้น ซึ่งสูญเสียไปเป็นสไตล์ผู้ใช้ที่สำคัญในพื้นที่

ความสำคัญ

กฎ CSS แต่ละกฎจะคำนวณไม่เท่ากัน หรือมีความเฉพาะเจาะจงเท่ากัน

ลำดับความสำคัญจากสำคัญน้อยที่สุดไปสำคัญที่สุดมีดังนี้

  1. ประเภทกฎปกติ เช่น font-size, background หรือ color
  2. กฎ animation ประเภท
  3. กฎ !important ประเภท (มีลำดับเดียวกันกับต้นทาง)
  4. กฎ transition ประเภท

ประเภทของกฎการเปลี่ยนและภาพเคลื่อนไหวที่ใช้งานอยู่มีความสำคัญสูงกว่ากฎปกติ ในกรณีที่มีการเปลี่ยนแปลงมีความสำคัญมากกว่ากฎ !important ประเภท เพราะเมื่อภาพเคลื่อนไหวหรือการเปลี่ยนเริ่มทำงาน ลักษณะการทำงานที่คาดไว้ของภาพเคลื่อนไหวคือการเปลี่ยนสถานะของภาพ

ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อหาสาเหตุที่ไม่มีการใช้ CSS บางรายการ

โดยทั่วไปเครื่องมือสำหรับนักพัฒนาเว็บจะแสดง CSS ทั้งหมดที่อาจตรงกับองค์ประกอบหนึ่งๆ ได้และไม่ได้มีการขีดฆ่า

รูปภาพเครื่องมือสำหรับนักพัฒนาเว็บในเบราว์เซอร์ที่มี CSS ที่ถูกเขียนทับถูกขีดฆ่า

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

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

ทดสอบความรู้ของคุณเกี่ยวกับ Cascade

การเรียงซ้อนสามารถใช้กับ...

การแก้ไขความขัดแย้งเมื่อนำสไตล์หลายๆ แบบไปใช้กับองค์ประกอบ
ซึ่งเป็นหนึ่งในเป้าหมายหลักของบริษัท ซึ่งก็คือการแก้ปัญหาข้อขัดแย้ง
ตรวจสอบว่ามีค่ารูปแบบเพียงค่าเดียวสำหรับแต่ละพร็อพเพอร์ตี้ในเวลาที่มีการวาด
ข้อความจะมีได้เพียงสีเดียว และ Cascade ก็เป็นวิธีการกำหนดว่าจะใช้สีใด
กฎรูปแบบการให้คะแนนและการถ่วงน้ำหนัก
การให้คะแนนและการถ่วงน้ำหนักเป็นส่วนหนึ่งของขั้นตอนการจัดเรียงของ Cascade
การจัดเรียงและการกรองแอตทริบิวต์รูปแบบ
การจัดเรียงและการกรองเป็นขั้นตอนของ Cascade เพื่อช่วยให้เข้าใจแง่มุมของการแก้ไขข้อขัดแย้ง

แหล่งข้อมูล