CSS Opacity cross-browser (Firefox, Safari, Chrome, Opera, IE)

Giới thiệu

Thuộc tính opacity được hỗ trợ tốt trên tất cả trình duyệt hiện đại (Chrome, Firefox, Safari, Edge, Opera). Tuy nhiên, các phiên bản cũ (IE8-, Firefox 0.9-, Safari 1-) cần prefix và fallback. Bài này tổng hợp giải pháp cross-browser hoàn chỉnh.

Ví dụ hoàn chỉnh - Opacity Cross-browser

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cross-browser Opacity</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; padding: 40px 20px; background: #f5f5f5; text-align: center; }
    .demo { display: inline-block; margin: 0 20px; text-align: center; }
    .demo img { width: 250px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    .demo p { margin-top: 12px; font-weight: 500; color: #333; }
    /* Cross-browser opacity class */
    .transparent {
      /* IE 5-8 */
      filter: alpha(opacity=30);
      /* Firefox < 0.9 (rất cũ) */
      -moz-opacity: 0.3;
      /* Safari 1.x */
      -khtml-opacity: 0.3;
      /* Standard: Firefox 0.9+, Safari 2+, Opera 9+, IE9+, Chrome all */
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <h1>Cross-browser Opacity Demo</h1>
  <p style="color:#666; margin-bottom:30px">Ảnh trái: bình thường. Ảnh phải: opacity 0.3 (cross-browser)</p>
  <div class="demo">
    <img src="https://picsum.photos/seed/opacity1/500/300" alt="Normal">
    <p>Bình thường (opacity: 1)</p>
  </div>
  <div class="demo">
    <img class="transparent" src="https://picsum.photos/seed/opacity2/500/300" alt="Transparent">
    <p>Opacity 0.3 (cross-browser)</p>
  </div>
</body>
</html>

Bảng hỗ trợ trình duyệt

CSS Fallback đầy đủ (Legacy)

.legacy-transparent {
  /* IE 5-8 */
  filter: alpha(opacity=30);
  /* Firefox 0.8- */
  -moz-opacity: 0.3;
  /* Safari 1.x */
  -khtml-opacity: 0.3;
  /* Standard */
  opacity: 0.3;
}

Lưu ý: IE filter chỉ hoạt động khi element có hasLayout (trigger bằng zoom: 1 hoặc width/height xác định).

Khuyến nghị hiện đại (2024+)

Chỉ dùng opacity: 0.3; - Tất cả trình duyệt còn sống (Chrome, Firefox, Safari, Edge) đều hỗ trợ chuẩn. Các prefix cũ chỉ dành cho archeology.

Opacity vs Visibility vs Display