วันแรกของการสืบค้นรูปแบบคอนเทนเนอร์

เรายังอยู่ในช่วงเริ่มต้นของการค้นหาคอนเทนเนอร์ เร็วเกินไปสำหรับการสนับสนุนเบราว์เซอร์ในวงกว้าง แต่ Chromium รองรับอยู่แล้ว Safari เริ่มรองรับในเวอร์ชั่น 16และ Firefox น่าจะเป็น ไม่ไกลหลัง.

การสนทนาในวันแรกๆ ส่วนใหญ่ที่เกี่ยวกับคิวรีคอนเทนเนอร์มักจะเปรียบเทียบไวยากรณ์กับคิวรีสื่อ

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

ทั้งสองกำลังตั้งคำถามสำหรับ min-width: 600. ความแตกต่างคือ คิวรีสื่อกำลังดูที่ความกว้างของวิวพอร์ตเพื่อทริกเกอร์การเปลี่ยนแปลงสไตล์เหล่านั้น ในขณะที่คิวรีของคอนเทนเนอร์กำลังมองหาความกว้างที่คำนวณของ .posts ธาตุ. หวาน!

แต่พอได้ฟัง CSS Podcast ตอนที่ 59, Una และ Adam แหย่อนาคตของการสืบค้นคอนเทนเนอร์: แบบสอบถามสไตล์! ร่างการทำงานปัจจุบันของข้อมูลจำเพาะ CSS Containment Module Level 3 กำหนดคิวรีรูปแบบคอนเทนเนอร์:

A แบบสอบถามสไตล์คอนเทนเนอร์ อนุญาตให้สอบถาม ค่าที่คำนวณได้ ของ คอนเทนเนอร์แบบสอบถาม. เป็นการรวมบูลีนของแต่ละบุคคล คุณสมบัติสไตล์ () ที่แต่ละเคียวรีคุณสมบัติเฉพาะเดียวของคอนเทนเนอร์คิวรี

แต่ยังไม่มีตัวอย่างเกี่ยวกับไวยากรณ์ — มีเพียงคำอธิบายสั้นๆ เท่านั้น:

ไวยากรณ์ของ a  เหมือนกับ a การประกาศและข้อความค้นหาของมันจะเป็นจริงหากค่าที่คำนวณได้ของคุณสมบัติที่กำหนดในคอนเทนเนอร์การค้นหาตรงกับค่าที่กำหนด (ซึ่งคำนวณด้วยเกี่ยวกับคอนเทนเนอร์การค้นหาด้วย) ไม่ทราบว่าคุณสมบัติหรือค่าของคุณสมบัตินั้นไม่ถูกต้องหรือไม่ได้รับการสนับสนุน และเป็นเท็จ . ไวยากรณ์บูลีนและการรวมตรรกะ คุณสมบัติสไตล์ ลง แบบสอบถามสไตล์ เหมือนกับสำหรับ แบบสอบถามคุณลักษณะ CSS. (ดู @สนับสนุน.)

ใช่แล้ว เมื่อถึงเวลาเราควรคาดหวังที่จะดึงสิ่งนี้ออกมา:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

นั่นเป็นตัวอย่างที่โง่มาก สิ่งหนึ่งที่ควรทราบก็คือ container-type ไม่ได้ขึ้นอยู่กับคอนเทนเนอร์ของ .อีกต่อไป inline-size แต่โดย style. เราสามารถ delcare เช่นนั้น:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…แต่ คิวรีคอนเทนเนอร์ทั้งหมดคือ style แบบสอบถามโดยค่าเริ่มต้น. ดี. อย่างน้อยก็อย่างที่เป็นอยู่ทุกวันนี้ Miriam Suzanne มีความน่ารัก โครงร่างของปัญหาที่อาจปรากฏขึ้น ด้วยสิ่งนั้น

การสอบถามรูปแบบของคอนเทนเนอร์มีประโยชน์อย่างไร ฉันยังไม่รู้! แต่ใจของฉันไปไม่กี่แห่ง:

• ค่าคุณสมบัติที่กำหนดเอง: เราได้เห็นคุณสมบัติที่กำหนดเองที่ใช้เช่นตัวบ่งชี้สถานะเช่น วิธีการเปลี่ยนแบบแห้ง Ana ครอบคลุมในขณะที่กลับ. ค่าเปลี่ยนแปลง และสไตล์ก็เช่นกัน
• วิธีสลับโหมดมืด: แทนที่จะใช้ทั้งหมดบนการเปลี่ยนแปลงคลาสร่างกายที่กำหนดค่าคุณสมบัติที่กำหนดเองใหม่ บางทีเราอาจเปลี่ยนจานสีทั้งหมดได้ ถ้าพูด พื้นหลังเนื้อหาเปลี่ยนสี
• เงื่อนไขการสืบค้นที่ซับซ้อนยิ่งขึ้น: เช่น เราต้องการใช้สไตล์เมื่อ size และ style ตรงตามเงื่อนไขสำหรับคอนเทนเนอร์

Una ยังกล่าวถึงใน CSS Podcast ว่าการสืบค้นรูปแบบคอนเทนเนอร์สามารถช่วยป้องกันสถานการณ์การจัดรูปแบบที่น่าอึดอัดใจเช่นถ้าเรามีข้อความตัวเอียงในตัวเอียงอยู่แล้ว blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}