ฉันเขียนขึ้นบางส่วน ความคิดเบื้องต้นเกี่ยวกับข้อความค้นหาสไตล์คอนเทนเนอร์ สักครู่กลับ ยังคงเป็นวันแรก ถูกกำหนดไว้แล้วใน ข้อกำหนด CSS Containment Module ระดับ 1 (ขณะนี้อยู่ในสถานะร่างบรรณาธิการ) แต่ยังคงมีการอภิปรายที่ค้างคาอยู่สองสามเรื่อง
แนวคิดพื้นฐานคือเราสามารถกำหนดคอนเทนเนอร์ แล้วนำสไตล์แบบมีเงื่อนไขไปใช้กับรุ่นรองลงมาตามสไตล์ที่คำนวณได้
@container ? {
/* conditional styles */
}
ตัวอย่างที่ดีที่สุดที่ฉันเคยเห็นมาคือการลบตัวเอียงออกจากสิ่งที่ต้องการ ,
และ
เมื่อใช้ในบริบทที่เนื้อหาเป็นตัวเอียงแล้ว:
em, i, q {
font-style: italic; /* default UA behavior */
}
/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
em, i, q {
font-style: normal;
}
}
นั่นคือแนวคิดทั่วไป แต่ถ้าคุณยังไม่รู้ Miriam Suzanne ซึ่งเป็นบรรณาธิการของสเป็ค บันทึกส่วนตัวเกี่ยวกับแบบสอบถามสไตล์คอนเทนเนอร์ ที่เปิดเผยต่อสาธารณะ มีการอัปเดตเมื่อวันก่อน และฉันใช้เวลาอยู่ที่นั่นเพื่อพยายามสรุปแง่มุมต่างๆ ที่เหมาะสมยิ่งขึ้นของข้อความค้นหาสไตล์ เป็นเรื่องที่ไม่เป็นทางการ แต่ฉันคิดว่าฉันจะจดบางอย่างที่โดดเด่นสำหรับฉัน ใครจะรู้? บางทีมันอาจเป็นสิ่งที่เราสามารถคาดหวังได้ในที่สุด!
ทุกองค์ประกอบคือคอนเทนเนอร์สไตล์
เราไม่จำเป็นต้องกำหนด a อย่างชัดเจนด้วยซ้ำ container-name
or container-type
เพื่อกำหนดสไตล์คอนเทนเนอร์เพราะทุกอย่างเป็นคอนเทนเนอร์สไตล์ตามค่าเริ่มต้น
คุณเห็นตัวอย่างข้างต้นที่ลบตัวเอียงหรือไม่ สังเกตว่าไม่ได้ระบุคอนเทนเนอร์ มันข้ามไปยังแบบสอบถามโดยใช้ style()
การทำงาน. คอนเทนเนอร์ใดที่ถูกสอบถาม มันจะเป็น ผู้ปกครองโดยตรงขององค์ประกอบ ได้รับรูปแบบที่นำไปใช้ และถ้าไม่เป็นเช่นนั้นก็คือ คอนเทนเนอร์สัมพัทธ์ที่ใกล้ที่สุดถัดไป ที่ให้ความสำคัญ
ฉันชอบมัน. เป็น CSS-y มากสำหรับข้อความค้นหาเพื่อค้นหาข้อมูลที่ตรงกัน จากนั้นขยายต่อไปจนกว่าจะพบเงื่อนไขที่ตรงกัน
มันยากสำหรับสมองอันน้อยนิดของฉันที่จะเข้าใจว่าทำไมเราถึงสามารถหลีกหนีจากคอนเทนเนอร์โดยนัยตามสไตล์ แต่ไม่มากนักเมื่อเราจัดการกับข้อความค้นหาเชิงมิติ เช่น size
และ inline-size
. มิเรียมอธิบายไว้อย่างดี:
แบบสอบถามมิติต้องการ css บรรจุ เกี่ยวกับขนาด รูปแบบ และรูปแบบของคอนเทนเนอร์ เพื่อป้องกันการวนซ้ำของรูปแบบ การกักกันเป็นสิ่งที่รุกรานที่จะนำไปใช้ในวงกว้าง ดังนั้นจึงเป็นเรื่องสำคัญที่ผู้เขียนจะต้องควบคุมอย่างระมัดระวังว่าองค์ประกอบใดบ้างที่เป็น (หรือไม่) ขนาดคอนเทนเนอร์
ข้อความค้นหาตามสไตล์ไม่มีข้อจำกัดเช่นเดียวกัน ไม่มีทางใน CSS อยู่แล้วที่รูปแบบที่สืบทอดมาจะมีผลกระทบต่อรูปแบบที่คำนวณของบรรพบุรุษ ดังนั้นจึงไม่จำเป็นต้องมีการกักกัน และไม่มีผลข้างเคียงที่รุกรานหรือคาดไม่ถึงในการสร้างองค์ประกอบเป็น คอนเทนเนอร์แบบสอบถามสไตล์.
(เน้นของฉัน)
ทั้งหมดนี้เป็นผลที่ตามมา ซึ่งไม่มีอะไรมากเท่ากับทุกอย่างที่เป็นคอนเทนเนอร์คิวรีสไตล์ทันทีที่แกะกล่อง
- หากพบคอนเทนเนอร์: เงื่อนไขจะแก้ไขกับคอนเทนเนอร์นั้น
- หากคอนเทนเนอร์หลายรายการตรงกัน: คอนเทนเนอร์สัมพัทธ์ที่ใกล้ที่สุดจะมีความสำคัญเหนือกว่า
- หากไม่พบรายการที่ตรงกัน:
unknown
กลับ
นั่นเหมือนกัน วิญญาณ "ให้อภัย" เป็นส่วนที่เหลือของ CSS.
คอนเทนเนอร์สามารถรองรับทั้งเคียวรีมิติและสไตล์
สมมติว่าเราต้องการกำหนดสไตล์คิวรีโดยไม่ต้องระบุอย่างชัดเจน container-name
:
@container style(font-style: italic) {
em {
font-style: normal;
}
}
มันได้ผลเพราะ องค์ประกอบทั้งหมดเป็นคอนเทนเนอร์สไตล์ไม่ว่า container-type
. นั่นคือสิ่งที่ทำให้เราสามารถค้นหาสไตล์โดยปริยายและใช้การจับคู่ที่ใกล้เคียงที่สุด และนี่เป็นเรื่องปกติเนื่องจากไม่มีผลข้างเคียงที่ไม่พึงประสงค์เมื่อสร้างคอนเทนเนอร์สไตล์
เราต้องใช้ความชัดเจน container-type
สำหรับการสืบค้นแบบมิติ แต่ไม่มากสำหรับการสืบค้นแบบเนื่องจากทุกองค์ประกอบเป็นแบบสอบถามแบบ นั่นก็หมายความว่าคอนเทนเนอร์นี้เป็นทั้งสไตล์ และ แบบสอบถามมิติ:
.card-container {
container: card / inline-size; /* implictly a style query container as well */
}
ไม่รวมคอนเทนเนอร์จากการสอบถาม
บางทีเราไม่ต้องการให้คอนเทนเนอร์เข้าร่วมในกระบวนการจับคู่ ที่นั่นสามารถตั้งค่าได้ container-type: none
บนองค์ประกอบ
.some-element {
container-type: none;
}
คอนเทนเนอร์การสืบค้นข้อมูลแบบชัดเจนให้การควบคุมสิ่งที่ได้รับการสืบค้นมากขึ้น
ถ้าสมมติว่าเราต้องเขียนแบบสอบถามสไตล์สำหรับ padding
ไม่มีวิธีที่เชื่อถือได้ในการระบุคอนเทนเนอร์ที่ตรงกันที่สุด โดยไม่คำนึงว่าเรากำลังทำงานกับคอนเทนเนอร์ที่มีชื่ออย่างชัดเจนหรือพาเรนต์โดยตรงที่ใกล้ที่สุด นั่นเป็นเพราะ padding
ไม่ใช่ทรัพย์สินตกทอด
ดังนั้น ในกรณีเหล่านั้น เราควรใช้ container-name
เพื่อแจ้งให้เบราว์เซอร์ทราบอย่างชัดเจนว่าสามารถดึงคอนเทนเนอร์ใดได้บ้าง เรายังสามารถตั้งชื่อที่ชัดเจนหลายชื่อให้กับคอนเทนเนอร์เพื่อให้ตรงกับเงื่อนไขมากขึ้น:
.card {
container-name: card layout theme;
}
Oh, และ container-name
ยอมรับจำนวนตัวเลือกและ นำมาใช้ใหม่ ชื่อคอนเทนเนอร์! นั่นยิ่งมีความยืดหยุ่นมากขึ้นในการช่วยให้เบราว์เซอร์เลือกเมื่อค้นหาคู่ที่ตรงกัน
.theme {
container-name: theme;
}
.grid {
container-name: layout;
}
.card {
container-name: card layout theme;
}
ฉันสงสัยว่านั่นอาจถือเป็น "ทางเลือกสำรอง" หรือไม่ในกรณีที่มีการส่งต่อคอนเทนเนอร์หนึ่งรายการ
แบบสอบถามสไตล์สามารถรวมกันได้
พื้นที่ or
และ and
ตัวดำเนินการช่วยให้เรารวม wueries เพื่อให้สิ่งต่าง ๆ แห้ง:
@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
.bubble::after {
border-block-end-color: inherit;
inset-block-end: 100%;
}
}
/* is the same as... */
@container bubble style(--arrow-position: start start) {
/* etc. */
}
@container bubble style(--arrow-position: end start) {
/* etc. */
}
รูปแบบการสลับ
มีการทับซ้อนกันเล็กน้อยระหว่างข้อความค้นหาสไตล์คอนเทนเนอร์และ งานที่ทำเพื่อกำหนด a toggle()
ฟังก์ชัน. ตัวอย่างเช่น เราสามารถหมุนเวียนสองรอบ font-style
ค่าพูด italic
และ normal
:
em, i, q {
font-style: italic;
}
@container style(font-style: italic) {
em, i, q {
font-style: normal;
}
}
เย็น. แต่ข้อเสนอสำหรับ CSS Toggles ชี้ให้เห็นว่า toggle()
ฟังก์ชันจะเป็นแนวทางที่ง่ายกว่า:
em, i, q {
font-style: toggle(italic, normal);
}
แต่สิ่งที่นอกเหนือจากกรณีการใช้งานแบบไบนารีประเภทนี้คือที่ไหน toggle()
มีความเหมาะสมน้อยกว่า แบบสอบถามสไตล์เป็นสิ่งที่ดีที่จะไป Miriam ระบุสามกรณีที่ข้อความค้นหาสไตล์เหมาะสมกว่า a toggle()
:
/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) {
em, i, q {
background: lightpink;
}
}
/* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) {
em, i, q {
background: lightpink;
}
}
/* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) {
em, i, q {
/* clipped gradient text */
background: var(--feature-gradient);
background-clip: text;
box-decoration-break: clone;
color: transparent;
text-shadow: none;
}
}
แบบสอบถามสไตล์ช่วยแก้ปัญหา "แฮ็กสลับคุณสมบัติที่กำหนดเอง"
โปรดสังเกตว่าการสอบถามสไตล์เป็นวิธีแก้ปัญหาที่เป็นทางการสำหรับ “เคล็ดลับการสลับคุณสมบัติที่กำหนดเองของ CSS”. ในนั้น เราตั้งค่าคุณสมบัติแบบกำหนดเองที่ว่างเปล่า (--foo: ;
) และใช้วิธีการสำรองที่คั่นด้วยเครื่องหมายจุลภาคเพื่อเปิดและปิดคุณสมบัติ "สลับ" เมื่อคุณสมบัติแบบกำหนดเองถูกตั้งค่าเป็นค่าจริง
button {
--is-raised: ; /* off by default */
border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
box-shadow: var(
--is-raised,
0 1px hsl(0 0% 100% / 0.8) inset,
0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
);
text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}
button:active {
box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}
#foo {
--is-raised: initial; /* turned on, all fallbacks take effect. */
}
มันเจ๋งมาก และยังมีงานอีกมากมายที่การสืบค้นสไตล์คอนเทนเนอร์ทำให้เป็นเรื่องเล็กน้อย
ข้อความค้นหาสไตล์และเนื้อหาที่สร้างโดย CSS
สำหรับเนื้อหาที่สร้างโดย content
คุณสมบัติของ ::before
และ ::after
องค์ประกอบหลอก คอนเทนเนอร์ที่ตรงกันคือองค์ประกอบที่สร้างเนื้อหา
.bubble {
--arrow-position: end end;
container: bubble;
border: medium solid green;
position: relative;
}
.bubble::after {
content: "";
border: 1em solid transparent;
position: absolute;
}
@container bubble style(--arrow-position: end end) {
.bubble::after {
border-block-start-color: inherit;
inset-block-start: 100%;
inset-inline-end: 1em;
}
}
แบบสอบถามสไตล์และส่วนประกอบของเว็บ
เราสามารถกำหนดองค์ประกอบเว็บเป็นคอนเทนเนอร์และสอบถามตามสไตล์ ประการแรกเรามี ของส่วนประกอบ:
…
…
…
จากนั้นเราก็ใช้ :host
หลอกองค์ประกอบเป็นภาชนะที่จะตั้ง container-name
ที่ container-type
และแอตทริบิวต์ระดับสูงบางอย่างในนั้น:
:host {
container: media-host / inline-size;
--media-location: before;
--media-style: square;
--theme: light;
}
องค์ประกอบภายใน สามารถสอบถามพารามิเตอร์ของ
ธาตุ:
@container media-host style(--media-style: round) {
[part='img'] {
border-radius: 100%;
}
}
ทำอะไรต่อไป
ขอย้ำอีกครั้งว่าทุกสิ่งที่ฉันจดไว้ที่นี่อ้างอิงจากบันทึกของมิเรียม และบันทึกเหล่านั้นไม่สามารถใช้แทนข้อมูลจำเพาะที่เป็นทางการได้ แต่เป็นตัวบ่งชี้ถึงสิ่งที่กำลังพูดถึงและสิ่งที่จะเกิดขึ้นในอนาคต ฉันขอขอบคุณมิเรียมที่เชื่อมโยงการอภิปรายที่โดดเด่นจำนวนหนึ่งซึ่งยังคงเกิดขึ้นซึ่งเราสามารถติดตามเพื่อติดตามสิ่งต่างๆ ได้: