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

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 ได้โดยใช้การค้นหาสไตล์ คุณจึงควรใช้style() Wrapper เพื่อให้เห็นความแตกต่างอย่างชัดเจน@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);
})

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