การประกาศ Fallback Color ใน CSS

Fallback Color: สีสำรองสำหรับ Browser ที่ไม่รองรับ RGBA/HSLA

Browser เก่า (IE 8-, Opera 9-) ไม่รองรับ rgba() / hsla() วิธีแก้: ประกาศสีทึบ (hex, rgb, named color) ก่อน แล้วค่อย rgba – Browser ที่ไม่รองรับจะใช้ค่าแรก Browser ใหม่จะใช้ค่าทับซ้อน (cascade)

โค้ดตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    div {
      padding:20px; font-size: 24px;
      background-color: purple; /* fallback color */
      background-color: rgba(128, 0, 128, 0.527);
      color:white;
    }
  </style>
</head>
<body>
  <h1>Fallback Color Example</h1>
  <div>Some random text inside this div</div>
</body>
</html>

หลักการ Cascade

.box {
  background: #800080;           /* 1. ทุก browser อ่านได้ */
  background: rgba(128,0,128,0.5); /* 2. Browser ใหม่ทับค่าเดิม */
}

สถานการณ์ที่ต้องใช้ Fallback

• rgba(), hsla() – IE 8-
• hsl() – IE 8-
• #rrggbbaa (8-digit hex) – Safari < 12, Firefox < 49
• lab(), lch(), color() – รองรับใหม่ (2023+)
• var(--custom-prop) – ต้องมี fallback ใน var(): var(--color, blue)

Modern Approach: @supports

.box { background: purple; }
@supports (background: rgba(0,0,0,0.5)) {
  .box { background: rgba(128, 0, 128, 0.5); }
}

@supports (Feature Queries) ชัดเจนกว่า และจัดการหลาย property ได้พร้อมกัน