เงื่อนไข CSS ที่มีฟังก์ชัน if() ใหม่

Una Kravets

เผยแพร่: 1 กรกฎาคม 2025

ตั้งแต่ Chrome 137 เป็นต้นไป คุณสามารถลองใช้เงื่อนไขแบบอินไลน์ของ CSS ด้วยฟังก์ชัน if() ได้ if() ช่วยให้มีอินเทอร์เฟซนักพัฒนาแอปที่สะอาดขึ้นสำหรับสไตล์แบบไดนามิก เช่น การค้นหาสไตล์และ Media Query โดยมีความแตกต่างที่สำคัญบางอย่าง ซึ่งคุณสามารถดูได้ในโพสต์นี้

ฟังก์ชัน if() ของ CSS ทำงานโดยใช้ชุดคู่ค่าที่มีเงื่อนไข ซึ่งมีโครงสร้างดังนี้

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

คุณสามารถระบุข้อความ else ซึ่งจะใช้ในกรณีที่ไม่มีเงื่อนไขอื่นๆ ตรงตามเกณฑ์

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

ปัจจุบัน if() ทำงานร่วมกับคำค้นหา 3 ประเภท ได้แก่

  • style(): คำค้นหาสไตล์
  • media(): Media Queries
  • supports(): รองรับคำค้นหา

มาดูตัวอย่างเพื่อทำความเข้าใจบริบทนี้กัน

การสาธิต: การค้นหาสื่อในบรรทัด

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

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

โค้ดก่อนหน้าให้ผลลัพธ์เหมือนกับ Media Query ต่อไปนี้

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

การใช้รูปแบบ if() ช่วยให้คุณมีตรรกะแบบอินไลน์ได้โดยไม่ต้องมีตรรกะการจัดรูปแบบใน 2 ที่ที่แตกต่างกัน

การสาธิตที่การใช้ if() จะเพิ่มขนาดแบบอักษรของปุ่มในอุปกรณ์ที่มีเคอร์เซอร์ของหลักสูตร

การสาธิต: คำขอรับการสนับสนุนในบรรทัด

อีกวิธีในการใช้ if() คือการสร้างคำค้นหาการสนับสนุนในบรรทัด เช่น หากต้องการตรวจสอบการรองรับสีแบบ Wide Gamut เช่น OKLCH คุณสามารถใช้

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

เมื่อใช้โค้ดนี้ หากเบราว์เซอร์รองรับขอบเขตสี oklch ผู้ใช้จะเห็นสีที่สดใสยิ่งขึ้น และจะได้รับข้อความ "เบราว์เซอร์ของคุณรองรับ OKLCH" ในเนื้อหาเสมือน ::after ด้วย

คำค้นหาการสนับสนุนโดยใช้ฟังก์ชัน if()

ดูข้อมูลเพิ่มเติมและดูความแตกต่างระหว่าง RGB กับขอบเขตสีขั้นสูงอื่นๆ ได้ที่ตัวเลือกสีและแหล่งข้อมูลที่ oklch.com

การสาธิต: การแสดงภาพสถานะ UI

นอกจากนี้ คุณยังใช้ if() สำหรับการจัดรูปแบบตามสถานะได้ด้วย เช่น การจัดรูปแบบการ์ดความคืบหน้าตามสถานะ UI (รอดำเนินการหรือเสร็จสมบูรณ์) จัดเก็บสถานะในแอตทริบิวต์ข้อมูลหรือคุณสมบัติที่กำหนดเองโดยตรง แล้วใช้รูปแบบในพร็อพเพอร์ตี้โดยใช้ if()

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}
จัดรูปแบบป้ายกำกับแบบมีสถานะในพร็อพเพอร์ตี้โดยใช้ฟังก์ชัน if()

เมื่อใช้ style() ภายในฟังก์ชัน if() คุณจะจัดรูปแบบองค์ประกอบที่กำหนดเป้าหมายได้โดยตรง โดยไม่ต้องใช้องค์ประกอบหลักเหมือนที่การค้นหาสไตล์ CSS กำหนด

การสาธิตนี้แสดงกรณีพื้นฐานของวิธีใช้ if() เพื่อรองรับแนวทางสถาปัตยกรรมใหม่สำหรับ CSS ข้อดีอย่างหนึ่งของการใช้คุณสมบัติที่กำหนดเองของ CSS แทนคลาสคือการอัปเดตใน CSS ได้ง่าย เช่น อาจอัปเดตโดยใช้การค้นหาสื่อหรือสถานะจำลอง เช่น :hover

ขั้นตอนถัดไป

การเพิ่ม if() เป็นโอกาสใหม่ด้านสถาปัตยกรรมสำหรับนักพัฒนา CSS เมื่อเทคโนโลยีอย่างการค้นหาสไตล์พัฒนาขึ้น การค้นหาช่วงน่าจะทำได้ภายในif()ฟังก์ชัน และยังจะมีประโยชน์เมื่อใช้ร่วมกับข้อเสนอฟังก์ชันที่กำหนดเองที่กำลังจะมาถึง (CSS @function)

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้ได้ที่