เผยแพร่: 1 กรกฎาคม 2025
ตั้งแต่ Chrome 137 เป็นต้นไป คุณสามารถลองใช้เงื่อนไขในบรรทัดของ CSS กับฟังก์ชัน if() if() ช่วยให้อินเทอร์เฟซของนักพัฒนาซอฟต์แวร์สำหรับสไตล์แบบไดนามิก เช่น การค้นหาสไตล์และการค้นหาสื่อ สะอาดตายิ่งขึ้น โดยมีความแตกต่างที่สำคัญบางอย่างซึ่งคุณสามารถดูได้ในโพสต์นี้
ฟังก์ชัน 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(): การค้นหาสื่อsupports(): รองรับการค้นหา
เรามาลองดูตัวอย่างกัน
สาธิต: การค้นหาสื่อในบรรทัด
การใช้ if() เป็นวิธีที่ยอดเยี่ยมในการรวมการค้นหาสื่อในบรรทัดในสไตล์ เช่น คุณอาจตรวจสอบค่ากําหนดธีมของผู้ใช้ (สว่างหรือมืด) หรือทำการค้นหาสื่อในบรรทัดสําหรับความกว้างของวิวพอร์ต ตัวอย่างต่อไปนี้แสดงข้อความค้นหาสื่อสําหรับอุปกรณ์เคอร์เซอร์ ขนาดเริ่มต้นของปุ่มจะเป็น 30 พิกเซลในอุปกรณ์ที่มีเคอร์เซอร์แบบละเอียด เช่น เมาส์ แต่สำหรับอุปกรณ์หน้าจอสัมผัส เช่น อุปกรณ์ที่มีเคอร์เซอร์แบบหยาบ ขนาดของปุ่มจะเป็น 44 พิกเซลเป็นอย่างน้อยตามที่แนะนำเพื่อให้มีระยะห่างการแตะที่เหมาะสมสำหรับการเข้าถึงได้ง่ายขึ้น
button {
aspect-ratio: 1;
width: if(media(any-pointer: fine): 30px; else: 44px);
}
โค้ดก่อนหน้าให้ผลลัพธ์เดียวกับคําค้นหาสื่อต่อไปนี้
button {
aspect-ratio: 1;
width: 44px;
}
@media (any-pointer: fine) {
button {
width: 30px;
}
}
การใช้รูปแบบ if() ช่วยให้คุณใส่ตรรกะในบรรทัดเดียวกันได้โดยไม่ต้องใส่ตรรกะการจัดรูปแบบใน 2 ที่
if() เพื่อเพิ่มขนาดแบบอักษรของปุ่มในอุปกรณ์ที่มีเคอร์เซอร์ของหลักสูตรสาธิต: การค้นหาการสนับสนุนในบทสนทนา
อีกวิธีในการใช้ if() คือการสร้างคําค้นหาการสนับสนุนในบทสนทนา เช่น หากต้องการตรวจสอบการรองรับสีแบบช่วงกว้าง เช่น 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=>"c<ompl>ete"
...
/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 Style Queries กำหนด
การสาธิตนี้แสดงกรณีพื้นฐานของการใช้ if() เพื่อรองรับแนวทางสถาปัตยกรรมใหม่ของ CSS ประโยชน์อย่างหนึ่งของการใช้พร็อพเพอร์ตี้ที่กำหนดเองของ CSS แทนคลาสคือความสะดวกในการอัปเดตใน CSS เช่น อัปเดตโดยใช้ Media Query หรือสถานะจำลอง เช่น :hover
ขั้นตอนถัดไป
การเพิ่ม if() จะเป็นโอกาสใหม่ในสถาปัตยกรรมสำหรับนักพัฒนา CSS เมื่อเทคโนโลยีต่างๆ เช่น การค้นหาสไตล์พัฒนาขึ้น การค้นหาช่วงก็อาจทำได้ภายในฟังก์ชัน if() และมีประโยชน์เมื่อใช้ร่วมกับข้อเสนอฟังก์ชันที่กำหนดเองที่กําลังจะมีขึ้น (CSS @function)
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้ได้ที่แหล่งข้อมูลต่อไปนี้