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

CSS Layout API และขอบเขต

สร้างอัลกอริทึมการจัดวางแบบกำหนดเองด้วย CSS Layout API และทำความเข้าใจขอบเขตกับข้อจำกัดของ Houdini

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

ภาพรวม CSS Houdini

CSS Houdini คือชุด API ระดับต่ำที่เปิดเผยบางส่วนของเครื่องมือแสดงผล CSS ให้ JavaScript ใช้งานได้ ซึ่งประกอบด้วย OM แบบมีชนิดข้อมูล, API คุณสมบัติและค่า, API การวาด, API การจัดวาง และเวิร์กเล็ตภาพเคลื่อนไหว ทั้งหมดนี้ช่วยให้สร้างส่วนขยาย CSS แบบกำหนดเองได้

CSS Layout API คืออะไร

CSS Layout API ช่วยให้นักพัฒนากำหนด อัลกอริทึมการจัดวางแบบกำหนดเองด้วย JavaScript แล้วนำไปใช้เป็นค่าของคุณสมบัติ CSS display ได้ คุณสามารถสร้างการจัดวางที่ทรงพลังพอ ๆ กับ Grid หรือ Flexbox

โครงสร้างเวิร์กเล็ตการจัดวาง

เวิร์กเล็ตการจัดวางใช้เมธอด intrinsicSizes() และ layout() และลงทะเบียนด้วย registerLayout():

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

การใช้การจัดวางแบบกำหนดเอง

อ้างอิงการจัดวางที่ลงทะเบียนไว้ใน CSS:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

สถานะของ Layout API

CSS Layout API รองรับในเบราว์เซอร์อย่างจำกัดและยังอยู่ในขั้นทดลองเป็นส่วนใหญ่ (ต้องเปิดแฟล็กใน Chrome) ปัจจุบัน API นี้เหมาะกับการวิจัยหรือการพัฒนาในอนาคตมากกว่าเครื่องมือสำหรับใช้งานจริง โดยเฉพาะการจัดวางแบบ Masonry ซึ่งอาจมีการนำมาใช้งานในเบราว์เซอร์โดยตรงแทน

กฎ @scope

@scope เป็นฟีเจอร์ CSS รุ่นใหม่ (เป็นส่วนหนึ่งของข้อกำหนด CSS Scoping) ที่จำกัดขอบเขตของกฎ CSS ให้ครอบคลุมเฉพาะโครงสร้างย่อยของ DOM ที่ระบุ โดยไม่ต้องเพิ่มคลาสไว้ทุกแห่ง

ไวยากรณ์ของ @scope

กำหนดรากของขอบเขต และกำหนดขีดจำกัดของขอบเขตเพิ่มเติมได้หากต้องการ:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Body text inside the card.</p>
</div>

@scope พร้อมขีดจำกัด

ขีดจำกัดของขอบเขตจะป้องกันไม่ให้กฎจับคู่กับเนื้อหาภายในคอมโพเนนต์ที่ซ้อนกัน:

<div class="article">
  <p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
  <div class="advertisement">
    <p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
  </div>
</div>

คลาสเทียม :scope

ภายใน @scope :scope จะอ้างถึงองค์ประกอบรากของขอบเขต:

<div class="card is-hovered">
  <p>Hover state applied statically for preview</p>
</div>

การรองรับ @scope ของเบราว์เซอร์

รองรับ @scope ใน Chrome 118 ขึ้นไปและ Safari 17.4 ขึ้นไป ส่วน Firefox กำลังจะรองรับ ควรใช้ร่วมกับ @supports เพื่อการนำไปใช้งานอย่างปลอดภัย

วิสัยทัศน์ที่กว้างขึ้นของ Houdini

เป้าหมายของ CSS Houdini คือการทำให้แพลตฟอร์มเว็บสามารถขยายได้ — เปิดให้นักพัฒนาเพิ่มฟีเจอร์ลงใน CSS เอง แทนที่จะต้องรอให้ผู้พัฒนาเบราว์เซอร์เป็นผู้สร้าง ปัจจุบัน API ที่พร้อมใช้งานจริงที่สุดของวิสัยทัศน์นี้คือ OM แบบมีชนิดข้อมูล, @property และ Paint

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

@scope (.card) ทำอะไรใน CSS

สรุปทบทวน

CSS Houdini คือชุด API ที่เปิดเผยเครื่องมือแสดงผล การจัดวางด้วย Layout API ช่วยให้ใช้อัลกอริทึมการแสดงผลแบบกำหนดเองได้ แต่ยังอยู่ในขั้นทดลองเป็นส่วนใหญ่ @scope จำกัดขอบเขตของกฎ CSS ให้ครอบคลุมเฉพาะโครงสร้างย่อยของ DOM ที่ระบุ จึงป้องกันสไตล์รั่วไหลได้โดยไม่ต้องตั้งชื่อแบบ BEM อย่างเคร่งครัด ฟีเจอร์ของ Houdini ที่พร้อมใช้งานจริงที่สุดคือ OM แบบมีชนิดข้อมูล, @property และ Paint API

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

บทเรียน “CSS Layout API และขอบเขต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “CSS Layout API และขอบเขต”

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

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

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

บทเรียน “CSS Layout API และขอบเขต” ใช้เวลานานแค่ไหน

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

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

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

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

  1. CSS Typed Object Model (OM)
  2. API คุณสมบัติและค่าของ CSS (@property)
  3. CSS Paint API: เวิร์กเล็ต
  4. CSS Layout API และขอบเขต
← กลับไปที่ CSS Academy