Khai báo Fallback Color (Màu dự phòng) trong CSS

Fallback color là màu dự phòng khi trình duyệt không hỗ trợ màu hiện đại (RGBA, HSLA, màu mới). Đặt màu solid trước màu trong suốt.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
  .with-fallback {
    padding: 20px;
    font-size: 24px;
    background-color: purple;           /* Fallback: màu solid cho trình duyệt cũ */
    background-color: rgba(128, 0, 128, 0.527); /* Màu trong suốt cho trình duyệt mới */
    color: white;
  }
  .no-fallback {
    padding: 20px;
    font-size: 24px;
    background-color: rgba(128, 0, 128, 0.527); /* Chỉ có RGBA */
    color: white;
    margin-top: 20px;
  }
</style>
</head>
<body>
<h1>Fallback Color Example</h1>
<div class="with-fallback">Có fallback color (màu tím solid) - hiển thị trên mọi trình duyệt</div>
<div class="no-fallback">Không fallback - có thể trong suốt hoàn toàn trên trình duyệt cực cũ</div>
</body>
</html>

Nguyên tắc Fallback

.element {
  /* 1. Fallback đầu tiên - an toàn nhất */
  background-color: #800080;           /* Hex */
  background-color: rgb(128, 0, 128);  /* RGB */
  
  /* 2. Fallback thứ 2 - transparent keyword */
  background-color: transparent;       /* Hỗ trợ rất sớm */
  
  /* 3. Màu hiện đại - trình duyệt hỗ trợ sẽ ghi đè */
  background-color: rgba(128, 0, 128, 0.5);
  background-color: hsla(270, 100%, 25%, 0.5);
  background-color: #80008080;         /* Hex 8 digits */
}

Trình duyệt KHÔNG hỗ trợ RGBA/HSLA

• IE 8 và cũ hơn
• Opera 9 và cũ hơn (engine Presto)
• Safari 3 và cũ hơn
• Firefox 2 và cũ hơn

Lưu ý: Các trình duyệt này hiện đã lỗi thời, ít khi cần fallback. Nhưng thói quen tốt để đảm bảo robust.

Fallback cho các tính năng CSS khác

Modern Approach: @supports (Feature Queries)

/* Thay vì fallback chồng chéo, dùng @supports */
.element {
  background-color: purple; /* Fallback */
}
@supports (background-color: rgba(0,0,0,0.5)) {
  .element {
    background-color: rgba(128, 0, 128, 0.5);
  }
}

@supports rõ ràng, maintainable hơn, và cho phép fallback phức tạp (layout, không chỉ color).