เริ่มต้นใช้งานการค้นหาสไตล์

Una Kravets

ความสามารถในการค้นหาขนาดในบรรทัดของระดับบนสุดและค่าหน่วยการค้นหาของคอนเทนเนอร์เพิ่งมีการสนับสนุนที่เสถียรในเครื่องมือเบราว์เซอร์ที่ทันสมัยทั้งหมด

อย่างไรก็ตาม ข้อกำหนดเฉพาะด้านการแสดงผลมีมากกว่าข้อความค้นหาขนาด และยังเปิดใช้การค้นหาค่ารูปแบบระดับบนสุดด้วย จาก Chromium 111 คุณจะใช้การเก็บรูปแบบสําหรับค่าพร็อพเพอร์ตี้ที่กําหนดเอง และค้นหาองค์ประกอบระดับบนสําหรับค่าของพร็อพเพอร์ตี้ที่กําหนดเองได้

ซึ่งหมายความว่าเราจะควบคุมสไตล์ใน CSS ได้อย่างมีตรรกะมากยิ่งขึ้น และช่วยให้เราแยกตรรกะของแอปพลิเคชันและชั้นข้อมูลออกจากรูปแบบได้ดียิ่งขึ้น

ข้อมูลจำเพาะของโมดูลคอนเทนเนอร์ CSS ระดับ 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>

เมื่อมีข้อมูลที่มีโครงสร้างนี้ คุณจะสามารถส่งผ่านค่าไปยัง --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);
})

ฟีเจอร์ที่อธิบายในบทความนี้เป็นเพียงจุดเริ่มต้น คุณจะได้รับสิ่งต่างๆ เพิ่มเติมจากการค้นหาคอนเทนเนอร์เพื่อช่วยในการสร้างอินเทอร์เฟซแบบไดนามิกที่ปรับเปลี่ยนตามอุปกรณ์ โดยเฉพาะการค้นหาเกี่ยวกับสไตล์ ยังคงมีปัญหาที่ยังไม่ได้แก้ไขอยู่บ้าง ประการแรกคือการใช้การค้นหารูปแบบสำหรับสไตล์ CSS นอกเหนือจากคุณสมบัติที่กำหนดเอง ข้อมูลนี้เป็นส่วนหนึ่งของระดับข้อมูลจำเพาะปัจจุบันแล้ว แต่ยังไม่ได้นำมาใช้งานในเบราว์เซอร์ใดๆ เราคาดว่าจะมีการเพิ่มการประเมินบริบทแบบบูลีนลงในระดับข้อกำหนดปัจจุบันเมื่อปัญหาที่ค้างอยู่ได้รับการแก้ไขแล้ว ส่วนการค้นหาช่วงจะมีการวางแผนสำหรับข้อกำหนดในระดับถัดไป