ความสามารถในการค้นหาขนาดในหน้าระดับบนสุดและค่าของหน่วยการค้นหาคอนเทนเนอร์เพิ่งได้รับการสนับสนุนที่เสถียรในเครื่องมือเบราว์เซอร์ที่ทันสมัยทั้งหมดเมื่อเร็วๆ นี้
อย่างไรก็ตาม ข้อมูลจำเพาะของ Containment ไม่ได้รวมแค่คำค้นหาเกี่ยวกับขนาด และยังเปิดใช้การค้นหาค่ารูปแบบของระดับบนด้วย จาก Chromium 111 คุณสามารถใช้การควบคุมสไตล์สำหรับค่าพร็อพเพอร์ตี้ที่กำหนดเอง และค้นหาค่าของพร็อพเพอร์ตี้ที่กำหนดเองในองค์ประกอบระดับบนสุดได้
ซึ่งหมายความว่าเราจะควบคุมรูปแบบใน CSS อย่างมีตรรกะมากยิ่งขึ้นและช่วยให้แยกตรรกะและชั้นข้อมูลของแอปพลิเคชันออกจากรูปแบบได้ดีขึ้น
ข้อกำหนดของโมดูล CSS Containment ระดับ 3 ซึ่งครอบคลุมการค้นหาขนาดและรูปแบบ ช่วยให้ผู้เผยแพร่โฆษณาระดับบนสุดสามารถค้นหาสไตล์ต่างๆ ได้ รวมถึงคู่พร็อพเพอร์ตี้และค่า เช่น font-weight: 800 อย่างไรก็ตาม ในช่วงเปิดตัวฟีเจอร์นี้ ปัจจุบันการค้นหารูปแบบจะทำงานกับค่าคุณสมบัติที่กำหนดเองของ CSS เท่านั้น ซึ่งยังคงมีประโยชน์มากสำหรับการรวมรูปแบบและการแยกข้อมูลออกจากการออกแบบ มาดูวิธีที่คุณใช้การค้นหารูปแบบกับพร็อพเพอร์ตี้ที่กำหนดเองของ CSS กัน
การเริ่มต้นใช้งานการค้นหารูปแบบ
สมมติว่าเรามี HTML ต่อไปนี้
<ul class="card-list">
<li class="card-container">
<div class="card">
...
</div>
</li>
</ul>
หากต้องการใช้การค้นหารูปแบบ คุณต้องตั้งค่าองค์ประกอบคอนเทนเนอร์ก่อน ซึ่งใช้วิธีการที่แตกต่างกันเล็กน้อย ซึ่งขึ้นอยู่กับว่าคุณค้นหาผู้เผยแพร่โฆษณาหลักโดยตรงหรือโดยอ้อม
การค้นหาผู้ปกครองโดยตรง
ซึ่งต่างจากการค้นหารูปแบบตรงที่ไม่จำเป็นต้องใช้การยับยั้งโดยใช้พร็อพเพอร์ตี้ container-type หรือ container กับ .card-container เพื่อให้ .card สามารถค้นหารูปแบบของรายการระดับบนโดยตรงได้ อย่างไรก็ตาม เราต้องใช้รูปแบบ (ค่าพร็อพเพอร์ตี้ที่กำหนดเองในกรณีนี้) กับคอนเทนเนอร์ (ในกรณีนี้คือ .card-container) หรือองค์ประกอบใดก็ตามที่มีองค์ประกอบที่เรากำลังจัดรูปแบบใน DOM เราไม่สามารถใช้รูปแบบที่ค้นหาในองค์ประกอบโดยตรงที่เราจัดรูปแบบโดยใช้คำค้นหานั้น เนื่องจากอาจทำให้เกิดการวนซ้ำที่ไม่สิ้นสุด
หากต้องการค้นหาผู้ปกครองโดยตรง คุณสามารถเขียนได้ดังนี้
/* styling .card based on the value of --theme on .card-container */
@container style(--theme: warm) {
.card {
background-color: wheat;
border-color: brown;
...
}
}
คุณอาจสังเกตเห็นว่าการค้นหารูปแบบรวมการค้นหาด้วย style() คือช่วยให้แยกแยะค่าขนาดจากรูปแบบได้ชัดเจน ตัวอย่างเช่น คุณสามารถเขียนคำค้นหาความกว้างของคอนเทนเนอร์เป็น @container (min-width: 200px) { … } ระบบจะใช้รูปแบบหากคอนเทนเนอร์ระดับบนสุดกว้างอย่างน้อย 200 พิกเซล อย่างไรก็ตาม min-width อาจเป็นพร็อพเพอร์ตี้ CSS ด้วย และคุณค้นหาค่า CSS min-width ได้โดยใช้การค้นหารูปแบบ จึงใช้ Wrapper style() เพื่อแสดงถึงความแตกต่างอย่างชัดเจน: @container style(min-width: 200px) { … }
การจัดรูปแบบพ่อแม่ที่ไม่ใช่โดยตรง
หากต้องการค้นหารูปแบบสําหรับองค์ประกอบที่ไม่ใช่ระดับบนสุดโดยตรง คุณต้องใส่ container-name ให้องค์ประกอบนั้น ตัวอย่างเช่น เราสามารถใช้รูปแบบกับ .card โดยอิงตามสไตล์ของ .card-list โดยการระบุ container-name เป็น .card-list และอ้างอิงการค้นหาสไตล์ในการค้นหารูปแบบ
/* styling .card based on the value of --moreGlobalVar on .card-list */
@container cards style(--moreGlobalVar: value) {
.card {
...
}
}
แนวทางปฏิบัติแนะนำโดยทั่วไปคือการตั้งชื่อคอนเทนเนอร์เพื่อความชัดเจนในสิ่งที่คุณค้นหา และปลดล็อกความสามารถในการเข้าถึงคอนเทนเนอร์เหล่านั้นได้ง่ายขึ้น ตัวอย่างหนึ่งของกรณีที่การสมัครใช้บริการนี้เป็นประโยชน์คือหากคุณต้องการจัดรูปแบบองค์ประกอบภายใน .card โดยตรง หากไม่มีคอนเทนเนอร์ที่มีชื่อใน .card-container ก็จะไม่สามารถค้นหาโดยตรงได้
แต่ทั้งหมดนี้จะเหมาะสมกว่ามากในทางปฏิบัติ มาดูตัวอย่างกัน
การทํางานของการค้นหารูปแบบ
การค้นหารูปแบบจะมีประโยชน์อย่างยิ่งเมื่อคุณมีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ซึ่งมีหลายรูปแบบ หรือเมื่อคุณไม่สามารถควบคุมสไตล์ได้ทั้งหมดแต่จำเป็นต้องใช้การเปลี่ยนแปลงในบางกรณี ตัวอย่างนี้แสดงชุดการ์ดผลิตภัณฑ์ที่ใช้องค์ประกอบการ์ดเดียวกัน การ์ดผลิตภัณฑ์บางรายการมีรายละเอียด/หมายเหตุเพิ่มเติม เช่น "ใหม่" หรือ "สต็อกน้อย" ซึ่งเกิดจากพร็อพเพอร์ตี้ที่กำหนดเองชื่อ --detail นอกจากนี้ หากผลิตภัณฑ์อยู่ในสถานะ "สินค้าเหลือน้อย" ผลิตภัณฑ์จะมีพื้นหลังเป็นขอบสีแดงเข้ม ข้อมูลประเภทนี้มีแนวโน้มที่จะแสดงโดยเซิร์ฟเวอร์ และใช้กับการ์ดผ่านรูปแบบแทรกในบรรทัดได้ เช่น
<div class="product-list">
<div class="product-card-container" style="--detail: new">
<div class="product-card">
<div class="media">
<img .../>
<div class="comment-block"></div>
</div>
</div>
<div class="meta">
...
</div>
</div>
<div class="product-card-container" style="--detail: low-stock">
...
</div>
<div class="product-card-container">
...
</div>
...
</div>
ด้วย Structured Data นี้ คุณจะส่งค่าไปยัง --detail และใช้คุณสมบัติที่กำหนดเองของ CSS นี้เพื่อนำรูปแบบไปใช้ได้ ดังนี้
@container style(--detail: new) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'New';
border: 1px solid currentColor;
background: white;
...
}
}
@container style(--detail: low-stock) {
.comment-block {
display: block;
}
.comment-block::after {
content: 'Low Stock';
border: 1px solid currentColor;
background: white;
...
}
.media-img {
border: 2px solid brickred;
}
}
โค้ดด้านบนช่วยให้เราใช้ชิปสำหรับ --detail: low-stock และ --detail: new ได้ แต่คุณอาจสังเกตเห็นว่ามีส่วนซ้ำซ้อนในโค้ดบล็อก ขณะนี้ยังไม่มีวิธีใดที่จะค้นหาแค่การแสดงของ --detail ที่มี @container style(--detail) ซึ่งจะช่วยให้แชร์สไตล์ได้ดีขึ้นและลดการใช้รูปแบบซ้ำ ซึ่งขณะนี้ความสามารถนี้อยู่ระหว่างการหารือในกลุ่มทำงาน
การ์ดสภาพอากาศ
ตัวอย่างก่อนหน้านี้ใช้คุณสมบัติที่กำหนดเองรายการเดียวพร้อมค่าที่เป็นไปได้หลายค่าเพื่อใช้สไตล์ แต่คุณสามารถผสมผสานกันโดยใช้และการค้นหาสำหรับพร็อพเพอร์ตี้ที่กำหนดเองหลายรายการได้ด้วย ลองดูตัวอย่างการ์ดสภาพอากาศนี้
หากต้องการจัดรูปแบบการไล่ระดับสีและไอคอนของพื้นหลังสำหรับการ์ดเหล่านี้ ให้มองหาลักษณะสภาพอากาศ เช่น "เมฆมาก" "ฝนตก" หรือ "แดดจัด"
@container style(--sunny: true) {
.weather-card {
background: linear-gradient(-30deg, yellow, orange);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: gold;
}
}
ซึ่งจะช่วยให้คุณจัดรูปแบบการ์ดแต่ละใบตามลักษณะเฉพาะของการ์ดได้ แต่คุณยังสามารถจัดรูปแบบสำหรับชุดค่าผสมที่มีลักษณะเฉพาะ (พร็อพเพอร์ตี้ที่กำหนดเอง) โดยใช้ชุดค่าผสม and ในลักษณะเดียวกันกับคำค้นหาสื่อ เช่น วันที่มีเมฆมากและมีแดดจัดอาจมีลักษณะดังนี้
@container style(--sunny: true) and style(--cloudy: true) {
.weather-card {
background: linear-gradient(24deg, pink, violet);
}
.weather-card:after {
content: url(<data-uri-for-demo-brevity>);
background: violet;
}
}
การแยกข้อมูลออกจากการออกแบบ
ในการสาธิตทั้ง 2 ครั้งนี้ การแยกชั้นข้อมูล (DOM ที่จะแสดงในหน้า) ออกจากรูปแบบที่ใช้จะมีประโยชน์ในเชิงโครงสร้าง ระบบจะเขียนรูปแบบให้อยู่ในรูปแบบที่เป็นไปได้ซึ่งอยู่ภายในรูปแบบคอมโพเนนต์ ขณะที่ปลายทางอาจส่งข้อมูลที่จะใช้เพื่อจัดรูปแบบคอมโพเนนต์ คุณสามารถใช้ค่าเดียว เช่น ในกรณีแรก ให้อัปเดตค่า --detail หรือตัวแปรหลายรายการ อย่างเช่นในกรณีที่ 2 (ตั้งค่า --rainy หรือ --cloudy หรือ --sunny และที่ที่ดีที่สุดคือคุณสามารถรวมค่าเหล่านี้เข้าด้วยกันได้เช่นกัน การตรวจหาทั้ง --sunny และ --cloudy อาจแสดงรูปแบบมีเมฆเป็นบางส่วน
การอัปเดตค่าพร็อพเพอร์ตี้ที่กำหนดเองผ่าน JavaScript จะเป็นไปอย่างราบรื่นในระหว่างการตั้งค่ารูปแบบ DOM (เช่น ขณะสร้างคอมโพเนนต์ในเฟรมเวิร์ก) หรืออัปเดตค่าได้ทุกเมื่อโดยใช้ <parentElem>.style.setProperty('--myProperty’, <value>) I
ต่อไปนี้คือการสาธิตที่จะมีการอัปเดต --theme ของปุ่มในโค้ดไม่กี่บรรทัด และนำสไตล์ไปใช้โดยใช้การค้นหารูปแบบและคุณสมบัติที่กำหนดเองดังกล่าว (--theme)
จัดรูปแบบการ์ดโดยใช้ข้อความค้นหารูปแบบ JavaScript ที่ใช้อัปเดตค่าพร็อพเพอร์ตี้ที่กำหนดเองคือ
const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');
themePicker.addEventListener('input', (e) => {
btnParent.style.setProperty('--theme', e.target.value);
})
ฟีเจอร์ที่ให้รายละเอียดในบทความนี้เป็นเพียงจุดเริ่มต้นเท่านั้น คุณสามารถคาดหวังสิ่งต่างๆ เพิ่มเติมจากการค้นหาคอนเทนเนอร์เพื่อช่วยคุณสร้างอินเทอร์เฟซแบบไดนามิกที่ตอบสนองตามอุปกรณ์ ในส่วนของการค้นหารูปแบบโดยเฉพาะ ปัญหาที่ยังไม่ได้รับการแก้ไขยังมีอยู่ 2-3 อย่าง ประการแรกคือการใช้การค้นหารูปแบบสำหรับรูปแบบ CSS นอกเหนือจากคุณสมบัติที่กำหนดเอง ค่านี้เป็นส่วนหนึ่งของระดับข้อกำหนดปัจจุบันอยู่แล้ว แต่ยังไม่ได้นำไปใช้ในเบราว์เซอร์ใดๆ ควรมีการเพิ่มการประเมินบริบทแบบบูลีนไปยังระดับข้อมูลจำเพาะปัจจุบันเมื่อปัญหาที่ค้างอยู่ได้รับการแก้ไข ส่วนการค้นหาตามช่วงจะมีการวางแผนไว้สำหรับระดับถัดไปของข้อกำหนดดังกล่าว