0Pricing
CSS Academy · บทเรียน

คุณสมบัติ isolation

ควบคุมขอบเขตการผสมและป้องกันเอฟเฟกต์การผสมที่ไม่ต้องการด้วยคุณสมบัติ isolation

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

การแยกออกคืออะไร

คุณสมบัติ isolation ควบคุมว่าองค์ประกอบจะสร้างบริบทการซ้อนใหม่ที่แยกเนื้อหาขององค์ประกอบออกจากเอฟเฟกต์การผสมขององค์ประกอบภายนอกกลุ่มที่แยกไว้นั้นหรือไม่

isolation: isolate

isolation: isolate จะสร้างบริบทการซ้อนใหม่โดยไม่มีเอฟเฟกต์ทางภาพ จุดประสงค์เดียวคือป้องกันไม่ให้โหมดการผสมภายในองค์ประกอบส่งผลต่อองค์ประกอบภายนอก

<div class="page-bg">
  <div class="card">Card content <span class="accent">accent</span></div>
</div>

ปัญหาที่คุณสมบัตินี้แก้ไข

หากไม่มีการแยกออก mix-blend-mode จะผสมกับองค์ประกอบ ALL ที่อยู่ด้านล่างในบริบทการซ้อนเดียวกัน ซึ่งรวมถึงพื้นหลังของหน้าและส่วนประกอบอื่น ๆ ด้วย ส่งผลให้เกิดการผสมที่ไม่ต้องการข้ามขอบเขตของส่วนประกอบ

ตัวอย่างการใช้งานจริง

การ์ดที่มีโหมดการผสมซึ่งไม่ควรส่งผลต่อพื้นหลังส่วนกลาง:

<div class="page">
  <div class="card">Card <span class="accent">Accent</span></div>
</div>

วิธีอื่นในการสร้างบริบทการซ้อน

คุณสมบัติอื่นที่สร้างบริบทการซ้อนโดยปริยาย ซึ่งจะแยกโหมดการผสมออกจากกัน ได้แก่:

  • opacity น้อยกว่า 1
  • transform ที่ไม่ใช่ none
  • filter ที่ไม่ใช่ none
  • will-change ที่ใช้กับคุณสมบัติบางรายการ

isolation: isolate เป็นตัวเลือกที่ตั้งใจใช้และไม่มีผลข้างเคียง

isolation: auto (ค่าเริ่มต้น)

isolation: auto (ค่าเริ่มต้น) จะไม่สร้างบริบทการซ้อนใหม่ โหมดการผสมจึงส่งผลออกไปยังภายนอก เว้นแต่จะมีคุณสมบัติอื่นสร้างบริบทการซ้อนขึ้นมาโดยบังเอิญ

isolation เทียบกับ z-index

z-index เพียงอย่างเดียวจะไม่สร้างบริบทการซ้อน เว้นแต่จะใช้ร่วมกับตำแหน่งที่ไม่ใช่แบบ static isolation: isolate เป็นวิธีที่ชัดเจนและไม่มีผลข้างเคียงในการสร้างบริบทการซ้อน

isolation สำหรับ SVG

ใน SVG การแยกออกจะควบคุมว่าจะใช้โหมดการผสมภายในช่องมอง SVG หรือจะส่งผลต่อเนื้อหา HTML ที่อยู่ด้านล่างต่อไป การตั้งค่าดังกล่าวบนองค์ประกอบ SVG จะทำให้การผสมภายใน SVG อยู่ในขอบเขตของตัวเอง

รูปแบบขอบเขตของส่วนประกอบ

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

<div class="card">Card</div>
<div class="modal">Modal</div>
<div class="sidebar">Sidebar</div>
<div class="tooltip">Tooltip</div>

การแก้ไขปัญหาโหมดการผสม

หากโหมดการผสมส่งผลต่อองค์ประกอบที่ไม่คาดคิด สาเหตุมักเกิดจากไม่มีการแยกออก ให้เพิ่ม isolation: isolate ไปยังบรรพบุรุษร่วมที่ใกล้ที่สุดของส่วนประกอบที่มีการผสม เพื่อควบคุมเอฟเฟกต์ไว้ภายในขอบเขต

ผลกระทบต่อประสิทธิภาพ

isolation: isolate จะสร้างบริบทการซ้อนใหม่และสร้างเลเยอร์ตัวประกอบภาพใหม่ด้วย โดยทั่วไปมีค่าใช้จ่ายต่ำกว่ามาก เมื่อเทียบกับการเลื่อนระดับเลเยอร์ด้วย will-change: transform

ตรวจสอบความเข้าใจอย่างรวดเร็ว

จะเกิดอะไรขึ้นเมื่อใช้ mix-blend-mode: multiply กับองค์ประกอบภายในคอนเทนเนอร์ที่มี isolation: isolate?

สรุปทบทวน

isolation: isolate จะสร้างบริบทการซ้อนใหม่โดยไม่มีผลข้างเคียงทางภาพ จุดประสงค์เดียวคือจำกัดเอฟเฟกต์ของ mix-blend-mode ให้อยู่ภายในขอบเขตของส่วนประกอบ ควรใช้กับคอนเทนเนอร์ของส่วนประกอบส่วนติดต่อผู้ใช้หลักทั้งหมด เพื่อป้องกันไม่ให้โหมดการผสมส่งผลโดยไม่ตั้งใจต่อพื้นหลังส่วนกลางหรือส่วนประกอบที่อยู่ข้างเคียง นี่เป็นทางเลือกที่ตั้งใจใช้และสะอาดกว่าการใช้ opacity หรือ transform เป็นกลไกแยกออกโดยไม่ตั้งใจ

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

บทเรียน “คุณสมบัติ isolation” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติ isolation”

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

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

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

บทเรียน “คุณสมบัติ isolation” ใช้เวลานานแค่ไหน

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

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

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

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

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter สำหรับกระจกฝ้า
  3. mix-blend-mode สำหรับการผสมเลเยอร์
  4. คุณสมบัติ isolation
← กลับไปที่ CSS Academy