น้ำตก

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

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

button {
  color: red;
}

button {
  color: blue;
}

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

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

ตำแหน่งและลำดับการปรากฏ

Cascade จะพิจารณาลำดับการแสดงกฎ 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;
}

การระบุสองค่าสำหรับพร็อพเพอร์ตี้เดียวกัน อาจเป็นวิธีง่ายๆ ในการสร้างเบราว์เซอร์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับค่าบางค่า ในตัวอย่างถัดไปนี้ มีการประกาศ 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 จะเป็นสีแดงแม้ว่ากฎทั้งสองจะตรงกัน และกฎสำหรับตัวเลือก 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 เดียวที่ใช้กับหน้าเว็บ Cascade จะพิจารณาต้นทางของ 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

ทดสอบความรู้เกี่ยวกับแหล่งที่มาของแบบ 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 คือเท่าไร

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

ความสำคัญ

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

ลำดับความสำคัญ ตั้งแต่สำคัญน้อยที่สุด และสำคัญที่สุดมีดังนี้

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

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

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

โดยทั่วไปแล้ว DevTools ของเบราว์เซอร์จะแสดง CSS ทั้งหมดที่อาจตรงกับองค์ประกอบหนึ่งๆ กับโฆษณาที่ไม่ใช้ขีดฆ่า

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

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

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

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

Cascade สามารถใช้เพื่อ...

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

แหล่งข้อมูล