กฎและจุดเปลี่ยน @container
เขียนกฎ @container เพื่อใช้รูปแบบเมื่อคอนเทนเนอร์มีขนาดถึงค่าที่กำหนด
กฎและจุดเปลี่ยน @container เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไวยากรณ์กฎ @container
@container คือกฎ at-rule ที่ใช้สไตล์เมื่อคอนเทนเนอร์ตรงตามเงื่อนไขด้านขนาดบางอย่าง ไวยากรณ์ของกฎนี้คล้ายกับมีเดียคิวรี:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
คอนเทนเนอร์คิวรีที่มีชื่อ
กำหนดเป้าหมายเป็นคอนเทนเนอร์ที่มีชื่อเฉพาะ:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
คอนเทนเนอร์คิวรีแบบความกว้างสูงสุด
ใช้ max-width เพื่อกำหนดสไตล์สำหรับคอนเทนเนอร์ที่มีขนาดเล็กลง:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
คิวรีคอนเทนเนอร์แบบช่วง
ไวยากรณ์คิวรีคอนเทนเนอร์สมัยใหม่รองรับช่วง:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
คอมโพเนนต์การ์ดแบบปรับตามขนาด
คอมโพเนนต์การ์ดที่ปรับตามความกว้างของคอนเทนเนอร์:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
คิวรีคอนเทนเนอร์ซ้อนกัน
สามารถซ้อนคิวรีคอนเทนเนอร์ได้ โดยค่าเริ่มต้น คิวรีด้านในจะอ้างอิงคอนเทนเนอร์บรรพบุรุษที่อยู่ใกล้ที่สุด
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
จุดเปลี่ยนของคิวรีคอนเทนเนอร์
ต่างจากจุดเปลี่ยนของวิวพอร์ต จุดเปลี่ยนของคอนเทนเนอร์ควรเลือกจากช่วงที่เค้าโครงของคอมโพเนนต์จำเป็นต้องเปลี่ยน ไม่ใช่จากขนาดอุปกรณ์ที่กำหนดขึ้นโดยพลการ ควรเริ่มจากความกว้างเนื้อหาขั้นต่ำและขั้นสูงสุดของคอมโพเนนต์
การจัดรูปแบบตัวอักษรในคอนเทนเนอร์
ปรับการจัดรูปแบบตัวอักษรสำหรับคอนเทนเนอร์ขนาดเล็ก:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
คิวรีคอนเทนเนอร์สำหรับเค้าโครงตาราง
เปลี่ยนตารางภายในคอมโพเนนต์ที่จุดเปลี่ยนของคอนเทนเนอร์:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
คิวรีสไตล์ (นอกเหนือจากขนาด)
คิวรีคอนเทนเนอร์ยังรองรับ คิวรีสไตล์ ที่ตรวจสอบค่าที่คำนวณแล้วของคุณสมบัติกำหนดเองได้ด้วย วิธีนี้ช่วยให้สร้างรูปแบบต่าง ๆ ของคอมโพเนนต์โดยขับเคลื่อนด้วยตัวแปร CSS โดยไม่ต้องใช้คลาสเพิ่มเติม:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
ตรวจสอบอย่างรวดเร็ว
@container (min-width: 500px) มีผลกับสิ่งใด
สรุป
กฎ @container จะใช้สไตล์กับองค์ประกอบภายในคอนเทนเนอร์เมื่อคอนเทนเนอร์ตรงตามเงื่อนไขด้านขนาด ใช้คอนเทนเนอร์ที่มีชื่อเมื่อต้องการกำหนดเป้าหมายไปยังบรรพบุรุษที่ระบุ จุดเปลี่ยนของคอนเทนเนอร์ควรอิงตามความต้องการของเนื้อหา ไม่ใช่ขนาดอุปกรณ์ ส่วนคิวรีสไตล์ช่วยขยายความสามารถของคิวรีคอนเทนเนอร์ให้ตรวจสอบค่าตัวแปร CSS ได้ จึงทำให้สร้างรูปแบบต่าง ๆ ของคอมโพเนนต์แบบประกาศได้อย่างทรงพลัง
คำถามที่พบบ่อย
บทเรียน “กฎและจุดเปลี่ยน @container” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กฎและจุดเปลี่ยน @container” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กฎและจุดเปลี่ยน @container”
เขียนกฎ @container เพื่อใช้รูปแบบเมื่อคอนเทนเนอร์มีขนาดถึงค่าที่กำหนด คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “กฎและจุดเปลี่ยน @container” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- container-type และ container-name
- กฎและจุดเปลี่ยน @container
- หน่วยคิวรีคอนเทนเนอร์: cqw cqh
- คิวรีคอนเทนเนอร์เทียบกับมีเดียคิวรี