CSS Academy · บทเรียน

container-type และ container-name

กำหนดคอนเทนเนอร์สำหรับคิวรีด้วย container-type และตั้งชื่อให้ด้วย container-name

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

คอนเทนเนอร์คิวรีคืออะไร

คอนเทนเนอร์คิวรีช่วยให้ CSS ใช้สไตล์ตาม ขนาดของคอนเทนเนอร์แม่ แทนที่จะอิงตามวิวพอร์ต ทำให้เกิดการออกแบบแบบตอบสนองที่อิงคอมโพเนนต์อย่างแท้จริง โดยคอมโพเนนต์จะปรับตามตำแหน่งที่นำไปวาง

ปัญหาที่คอนเทนเนอร์คิวรีช่วยแก้

เมื่อใช้มีเดียคิวรี คอมโพเนนต์การ์ดในแถบด้านข้างกว้าง 300px จะไม่รู้ว่าตนเองมีขนาดเล็ก เพราะรู้เพียงว่าวิวพอร์ตกว้าง คอนเทนเนอร์คิวรีช่วยให้คอมโพเนนต์ตอบสนองต่อขนาดของคอนเทนเนอร์ของตนเอง ไม่ใช่วิวพอร์ตส่วนกลาง

container-type

หากต้องการคิวรีคอนเทนเนอร์ ให้ประกาศคอนเทนเนอร์นั้นเป็นคอนเทนเนอร์สำหรับคิวรีก่อนโดยใช้ container-type:

<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>

ค่าของ container-type

ค่าที่ใช้ได้:

inline-size — เปิดใช้คิวรีกับมิติอินไลน์ของคอนเทนเนอร์ (ความกว้างเมื่อเขียนในแนวนอน)
size — เปิดใช้คิวรีกับทั้งมิติอินไลน์และบล็อก (ความกว้างและความสูง)
normal — ค่าเริ่มต้น ไม่มีคิวรีขนาด แต่ยังใช้คิวรีสไตล์ได้

container-name

ตั้งชื่อให้คอนเทนเนอร์เพื่อใช้อ้างอิงในคิวรี ซึ่งจำเป็นเมื่อมีคอนเทนเนอร์ซ้อนกันและคุณต้องการคิวรีบรรพบุรุษที่เฉพาะเจาะจง:

<div class="sidebar">Named container: "sidebar"</div>

รูปแบบย่อ container

รูปแบบย่อ container กำหนดทั้งชื่อและประเภท:

<div class="card-grid">Container named "card-grid", type inline-size.</div>

เหตุผลที่ใช้คอนเทนเนอร์ไม่มีชื่อ

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

ข้อควรพิจารณาด้านประสิทธิภาพ

องค์ประกอบทุกตัวที่มี container-type จะได้รับการแยกโครงร่างของตนเอง ซึ่งหมายความว่าการเปลี่ยนแปลงขนาดภายในคอนเทนเนอร์จะไม่ส่งผลต่อบรรพบุรุษ จึงช่วยเพิ่มประสิทธิภาพ เบราว์เซอร์ไม่จำเป็นต้องคำนวณทั้งหน้าใหม่เมื่อคอนเทนเนอร์เปลี่ยนแปลง

ความสัมพันธ์กับคุณสมบัติ contain

การตั้งค่า container-type: inline-size จะตั้งค่า contain: inline-size layout style ให้กับองค์ประกอบโดยปริยาย ซึ่งป้องกันไม่ให้ขนาดคอนเทนเนอร์ส่งผลต่อโครงร่างของตัวเอง และเป็นข้อกำหนดให้คิวรีขนาดทำงานได้

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

การตั้งค่าคอนเทนเนอร์คิวรีที่ครบถ้วน:

<div class="article-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

คอนเทนเนอร์คิวรีเทียบกับมีเดียคิวรี

ใช้คอนเทนเนอร์สำหรับ: การปรับระดับคอมโพเนนต์ คอมโพเนนต์ที่นำกลับมาใช้ใหม่ในบริบทโครงร่างที่แตกต่างกัน การ์ดหรือวิดเจ็ตในตำแหน่งที่ไม่ทราบล่วงหน้า ใช้มีเดียคิวรีสำหรับ: การเปลี่ยนแปลงโครงร่างทั่วทั้งหน้า การปรับขนาดตัวอักษร การแสดงหรือซ่อนส่วนขนาดใหญ่

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

ค่าของคุณสมบัติใดทำให้องค์ประกอบสามารถคิวรีความกว้างของตนเองโดยใช้กฎ @container ได้

สรุป

container-type: inline-size กำหนดให้องค์ประกอบเป็นคอนเทนเนอร์คิวรีสำหรับความกว้าง ใช้ container-name เพื่อตั้งชื่อคอนเทนเนอร์สำหรับกำหนดเป้าหมายแบบเลือกได้ รูปแบบย่อ container กำหนดทั้งสองค่า คอนเทนเนอร์คิวรีช่วยแก้ปัญหาคอมโพเนนต์ที่อยู่ในบริบทที่ไม่ทราบล่วงหน้า ซึ่งมีเดียคิวรีที่อิงวิวพอร์ตไม่สามารถจัดการได้

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

บทเรียน “container-type และ container-name” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “container-type และ container-name”

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

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

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

บทเรียน “container-type และ container-name” ใช้เวลานานแค่ไหน

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

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

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

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

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