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