Container queries และ CSS nesting

ทำให้ component ของคุณตอบสนองต่อ container ของมันแทนที่จะเป็น viewport และจัดโครงสร้างสไตล์ชีตด้วย nesting แบบเนทีฟ

10 นาที · 3 คำถาม

Media query วัด viewport: card ที่แสดงทั้งใน sidebar แคบ ๆ และในกริดหลัก ไม่สามารถปรับตัวได้อย่างถูกต้องด้วยมัน เพราะความกว้างหน้าจอเดียวกันสอดคล้องกับสองบริบทที่ต่างกัน Container queries แก้การแยกส่วนนี้: component สอบถามขนาดของ container ของมัน ข้อกำหนดเบื้องต้น: กำหนด container อย่างชัดเจนด้วย container-type (inline-size เพื่อวัดเฉพาะแกนแนวนอน ซึ่งเป็นกรณีที่พบบ่อย) โดยอาจตั้งชื่อผ่าน container-name ก็ได้

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
}

หน่วย container เติมเต็มภาพให้สมบูรณ์: 1cqi เท่ากับ 1% ของ inline size ของ container ที่ถูกสอบถาม (cqw, cqh, cqb, cqmin, cqmax ก็มีด้วย) เมื่อรวมกับ clamp() มันสร้าง typography แบบลื่นไหล ต่อ component: card เดียวกันได้หัวเรื่องที่มีสัดส่วนตามคอลัมน์ของมัน ไม่ว่ามันจะถูกวางไว้ที่ใด

.card-slot {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

@container (max-width: 300px) {
  .card .meta {
    display: none;
  }
}

Nesting แบบเนทีฟ ในที่สุดก็นำการซ้อน (nesting) มาให้โดยไม่ต้องมี preprocessor selector & อ้างอิงถึงบริบทของตัวแม่ media query และ @container ซ้อนอยู่ภายในกฎได้โดยตรง ความแตกต่างที่สำคัญจาก Sass: ตัวแม่ที่ถูกซ้อนจะถูกปฏิบัติเสมือนถูกห่อด้วย :is() มีผลตามมาสองอย่าง: specificity ของตัวแม่คือของ selector ที่ แข็งแกร่งที่สุด ในกรณีที่มันเป็นลิสต์ และ & .child ไม่ได้ทำการต่อสตริง รูปแบบ &__element ของ Sass สำหรับสร้างชื่อ BEM จึงไม่มีอยู่แบบเนทีฟ

.menu {
  display: flex;
  gap: 8px;

  & > li {
    list-style: none;

    &:hover {
      background: #f3f4f6;
    }
  }

  @media (min-width: 768px) {
    gap: 16px;
  }
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ทำไม container query จึงดีกว่า media query สำหรับ card ที่นำกลับมาใช้ซ้ำได้?
   • มันเร็วกว่าสำหรับเอนจินการเรนเดอร์ที่จะประเมิน
   • มันตอบสนองต่อขนาดของ container ของ card ซึ่งเหมือนกันบนหน้าจอใดก็ตามที่คอลัมน์แคบ
   • มันทำงานได้โดยไม่ต้องประกาศข้อกำหนดเบื้องต้น CSS ใด ๆ
   • มันสามารถสอบถามความสูงของ viewport เพิ่มเติมจากความกว้างได้
2. 5cqi ตรงกับอะไร?
   • 5% ของความกว้าง viewport
   • 5% ของ inline size ของ container ที่ถูกสอบถาม
   • 5 เท่าของขนาดฟอนต์ของ container
3. Nesting แบบเนทีฟต่างจาก nesting ของ Sass อย่างไร?
   • Nesting แบบเนทีฟห้ามซ้อน media query ภายในกฎ
   • Nesting แบบเนทีฟปฏิบัติต่อตัวแม่เสมือนถูกห่อด้วย :is() และไม่อนุญาตการต่อสตริงแบบ &__element
   • Nesting แบบเนทีฟต้องใช้ preprocessor เพื่อคอมไพล์สัญลักษณ์ &
   • Nesting แบบเนทีฟจำกัดการซ้อนไว้ที่ระดับเดียว