CSS Academy · บทเรียน

@scope สำหรับรูปแบบตามขอบเขต

จำกัดขอบเขตของกฎ CSS ให้ครอบคลุมเฉพาะโครงสร้างย่อยที่กำหนดด้วยกฎ @scope

@scope สำหรับรูปแบบตามขอบเขต เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

@scope คืออะไร

กฎแบบ @scope (Chrome 118+, Safari 17.4+) จำกัดกฎ CSS ให้อยู่ภายในต้นไม้ย่อยของ DOM ที่กำหนด กฎภายใน @scope จะมีผลเฉพาะกับองค์ประกอบภายในจุดเริ่มต้นของขอบเขตที่ประกาศไว้ จึงป้องกันไม่ให้สไตล์รั่วไหลข้ามคอมโพเนนต์

ไวยากรณ์พื้นฐาน

ประกาศขอบเขตด้วยตัวเลือกจุดเริ่มต้นของขอบเขต กฎทั้งหมดภายในจะมีผลเฉพาะกับองค์ประกอบลูกหลานของจุดเริ่มต้นของขอบเขตที่ตรงกัน ไม่ใช่ทั้งเอกสาร

<div class="card">
  <div class="title">Scoped Title</div>
  <div class="body">Scoped body text &mdash; styles only apply inside .card.</div>
</div>

จุดเริ่มต้นของขอบเขต

จุดเริ่มต้นของขอบเขต (@scope (.card)) กำหนดจุดเริ่มต้น องค์ประกอบภายในขอบเขตที่ตรงกับ .title จะได้รับการจัดสไตล์ ส่วนองค์ประกอบนอก .card ที่มีคลาส .title จะไม่ได้รับผลกระทบ ทำให้ห่อหุ้มสไตล์ได้อย่างแท้จริงโดยไม่ต้องใช้ DOM แบบเงา

ขอบเขตจำกัดของขอบเขต

คุณสามารถกำหนดขอบเขตสิ้นสุดเพิ่มเติมด้วย to: @scope (.card) to (.nested-card) กฎจะมีผลภายใน .card แต่จะหยุดที่องค์ประกอบลูกหลาน .nested-card ซึ่งเป็นการจำกัดสไตล์ไว้ที่การซ้อนคอมโพเนนต์หนึ่งระดับ และไม่รวมอินสแตนซ์ที่อยู่ลึกลงไป

คลาสเทียม :scope ภายใน @scope

ภายในบล็อก @scope :scope หมายถึงองค์ประกอบจุดเริ่มต้นของขอบเขตเอง @scope (.card) { :scope { border-radius: 8px; } } จะจัดสไตล์ให้กับองค์ประกอบ .card โดยตรง ไม่ใช่องค์ประกอบลูกหลาน

ความจำเพาะตามความใกล้

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

@scope เทียบกับมอดูล CSS

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

@scope เทียบกับ DOM แบบเงา

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

การจัดชั้นด้วย @scope

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

กรณีใช้งานจริง

คอมโพเนนต์ของระบบการออกแบบ: จำกัดขอบเขตของสไตล์ปุ่มทั้งหมดไว้ที่ @scope (.button-group) เพื่อไม่ให้สไตล์ปุ่มด้านในรั่วไหลออกมา การแยกวิดเจ็ต: จำกัดขอบเขตสไตล์ของวิดเจ็ตจากบุคคลที่สามไว้ที่คอนเทนเนอร์ของวิดเจ็ต เพื่อป้องกันความขัดแย้งกับสไตล์ส่วนกลางของหน้า

การรองรับของเบราว์เซอร์และทางเลือกสำรอง

@scope รองรับใน Chrome 118 ขึ้นไป, Safari 17.4 ขึ้นไป และ Firefox 128 ขึ้นไป สำหรับเบราว์เซอร์ที่ไม่รองรับ สไตล์ภายใน @scope จะถูกละเว้น การเรียงซ้อนจะกลับไปใช้สไตล์ส่วนกลาง ใช้ @scope เป็นการเพิ่มความสามารถแบบค่อยเป็นค่อยไป เมื่อการกำหนดขอบเขตของคอมโพเนนต์มีประโยชน์แต่ไม่ใช่สิ่งจำเป็น

ตรวจสอบความรู้

ปัญหาใดที่ @scope แก้ได้ แต่ยากต่อการจัดการด้วยตัวเลือก CSS แบบดั้งเดิมเพียงอย่างเดียว

สรุป

@scope จำกัดการนำกฎ CSS ไปใช้กับโครงสร้างย่อยของ DOM ที่ประกาศไว้ ทำให้สามารถห่อหุ้มสไตล์แบบเนทีฟได้โดยไม่ต้องใช้ DOM แบบเงาหรือการแฮชชื่อคลาสด้วยเครื่องมือสร้าง ขีดจำกัดของขอบเขต ความจำเพาะตามระยะใกล้ และการทำงานร่วมกับ @layer ทำให้ @scope เป็นองค์ประกอบพื้นฐานที่ทรงพลังสำหรับระบบการออกแบบที่จำกัดขอบเขตของคอมโพเนนต์ด้วย CSS ล้วน

คำถามที่พบบ่อย

บทเรียน “@scope สำหรับรูปแบบตามขอบเขต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “@scope สำหรับรูปแบบตามขอบเขต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “@scope สำหรับรูปแบบตามขอบเขต”

จำกัดขอบเขตของกฎ CSS ให้ครอบคลุมเฉพาะโครงสร้างย่อยที่กำหนดด้วยกฎ @scope คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “@scope สำหรับรูปแบบตามขอบเขต” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy