พอดแคสต์ CSS - 004: The Cascade
CSS ย่อมาจาก Cascadingสไตล์ชีต Cascade เป็นอัลกอริทึมสำหรับการแก้ไขความขัดแย้งที่กฎ CSS หลายกฎใช้กับองค์ประกอบ HTML เดียว จึงเป็นสาเหตุที่ข้อความของปุ่มที่จัดรูปแบบด้วย CSS ต่อไปนี้จะเป็นสีน้ำเงิน
button {
color: red;
}
button {
color: blue;
}
การทำความเข้าใจอัลกอริทึมแบบ Cascade จะช่วยให้คุณเข้าใจว่าเบราว์เซอร์แก้ไขข้อขัดแย้งเช่นนี้ได้อย่างไร อัลกอริทึมแบบ Cascade แบ่งออกเป็น 4 ขั้นตอน
- ตำแหน่งและลำดับการแสดง: ลำดับการแสดงกฎ CSS
- ความจำเพาะ: อัลกอริทึมซึ่งกำหนดตัวเลือก CSS ที่ตรงกันมากที่สุด
- ต้นทาง: ลำดับที่ CSS ปรากฏขึ้นและที่มา ไม่ว่าจะเป็นรูปแบบเบราว์เซอร์ CSS จากส่วนขยายเบราว์เซอร์ หรือ CSS ที่คุณเขียน
- ความสำคัญ: กฎ CSS บางข้อจะให้น้ำหนักมากกว่ากฎข้ออื่นๆ
โดยเฉพาะเมื่อใช้กฎประเภท
!important
ตำแหน่งและลำดับการปรากฏ
Cascade จะพิจารณาลำดับการแสดงกฎ CSS และลักษณะการแสดงกฎ ขณะคำนวณการแก้ไขข้อขัดแย้ง
การสาธิตในช่วงเริ่มต้นของบทเรียนนี้เป็นตัวอย่างที่ตรงไปตรงมามากที่สุดเกี่ยวกับตำแหน่ง มีกฎ 2 ข้อที่มีตัวเลือกความเฉพาะเจาะจงเหมือนกัน ดังนั้นวิดีโอสุดท้ายที่จะประกาศว่าชนะ
รูปแบบอาจมาจากแหล่งที่มาต่างๆ ในหน้า HTML
เช่น แท็ก <link>
แท็ก <style>
ที่ฝัง
และ CSS ในบรรทัดตามที่กำหนดไว้ในแอตทริบิวต์ style
ขององค์ประกอบ
หากคุณมี <link>
ที่มี CSS ที่ด้านบนของหน้า HTML
ส่วนอีก <link>
ที่มี CSS ที่ด้านล่างของหน้าเว็บ: ด้านล่าง <link>
จะมีความเฉพาะเจาะจงมากที่สุด
สิ่งเดียวกันนี้จะเกิดขึ้นกับองค์ประกอบ <style>
ที่ฝังด้วยเช่นกัน
ซึ่งจะมีความเฉพาะเจาะจงมากขึ้นในด้านล่างของหน้า
การจัดลำดับนี้มีผลกับองค์ประกอบ <style>
ที่ฝังด้วย
หากมีการประกาศก่อน <link>
CSS ของสไตล์ชีตที่ลิงก์จะมีความเฉพาะเจาะจงมากที่สุด
แอตทริบิวต์ 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; }
พื้นหลังของปุ่มเป็นสีอะไร
ลักษณะเฉพาะ
ความจำเพาะคืออัลกอริทึมซึ่งกำหนดตัวเลือก 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 ที่คุณเขียน ลำดับความเจาะจงของต้นทางเหล่านี้ จากเจาะจงน้อยที่สุดไปจนถึงเจาะจงมากที่สุดมีดังนี้
- รูปแบบฐานของ User Agent นี่คือรูปแบบที่เบราว์เซอร์ของคุณใช้กับองค์ประกอบ HTML โดยค่าเริ่มต้น
- สไตล์ผู้ใช้ภายใน ซึ่งอาจมาจากระดับระบบปฏิบัติการ เช่น ขนาดแบบอักษรพื้นฐาน หรือให้เคลื่อนไหวน้อยลง นอกจากนี้ยังมาจากส่วนขยายเบราว์เซอร์ เช่น ส่วนขยายของเบราว์เซอร์ที่ให้ผู้ใช้เขียน CSS ที่กำหนดเองสำหรับหน้าเว็บ
- CSS ผู้เขียน CSS ที่คุณเขียน
- เขียนเมื่อ
!important
!important
ที่คุณเพิ่มลงในประกาศที่เขียน - รูปแบบผู้ใช้ภายใน
!important
!important
ที่มาจากระดับระบบปฏิบัติการ หรือ CSS ระดับส่วนขยายของเบราว์เซอร์ - 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
คือเท่าไร
ความสำคัญ
กฎ CSS แต่ละกฎไม่ได้คำนวณเหมือนกันทั้งหมด หรือมีความเจาะจง เท่ากัน
ลำดับความสำคัญ ตั้งแต่สำคัญน้อยที่สุด และสำคัญที่สุดมีดังนี้
- ประเภทกฎปกติ เช่น
font-size
,background
หรือcolor
- ประเภทกฎ
animation
ประเภท - ประเภทกฎ
!important
ประเภท (เรียงลำดับตามต้นทาง) - ประเภทกฎ
transition
ประเภท
ประเภทภาพเคลื่อนไหวและกฎการเปลี่ยนที่ใช้งานอยู่มีความสำคัญสูงกว่ากฎปกติ
ในกรณีการเปลี่ยนมีความสำคัญสูงกว่ากฎ !important
ประเภท
เพราะเมื่อภาพเคลื่อนไหวหรือการเปลี่ยนภาพเริ่มทำงาน
ลักษณะการทำงานที่คาดไว้ของ Google คือการเปลี่ยนสถานะภาพ
การใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูสาเหตุที่ CSS บางรายจึงไม่นำไปใช้
โดยทั่วไปแล้ว DevTools ของเบราว์เซอร์จะแสดง CSS ทั้งหมดที่อาจตรงกับองค์ประกอบหนึ่งๆ กับโฆษณาที่ไม่ใช้ขีดฆ่า
หาก CSS ที่ต้องการใช้ไม่ปรากฏขึ้นเลย แสดงว่าองค์ประกอบนั้น ไม่ตรงกับองค์ประกอบ ในกรณีนั้น คุณต้องหาจากที่อื่น ซึ่งอาจเป็นเพราะชื่อคลาสหรือชื่อองค์ประกอบ หรือ CSS ไม่ถูกต้อง
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับ Cascade
Cascade สามารถใช้เพื่อ...