CSS Opacity ที่ทำงานในทุก Browser (Cross-browser Opacity)

Cross-browser Opacity: รองรับ IE เก่า, Firefox เก่า, Safari เก่า

Property opacity (standard) รองรับ Firefox 0.9+, Safari 2, Opera 9+, IE 9+, Chrome ทุก version สำหรับ browser เก่ากว่า ใช้ vendor prefixes และ filter

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    img { width: 270px; height: 200px; }
    .transparent {
      filter: alpha(opacity=30);      /* IE 5-9 */
      -moz-opacity: 0.3;              /* Firefox < 0.9 */
      -khtml-opacity: 0.3;            /* Safari 1.x */
      opacity: 0.3;                   /* Standard: FF 0.9+, Safari 2+, Opera 9+, IE 9+, Chrome */
    }
  </style>
</head>
<body>
  <h1>Opacity for All Browsers</h1>
  <img src="https://i.picsum.photos/id/305/800/800.jpg" />
  <img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
  <h3>รูปที่สองจะโปร่งใสในทุก Browser</h3>
</body>
</html>

Browser Support Summary

สถานการณ์ปัจจุบัน (2024+)

• ไม่ต้องใช้ prefixes แล้ว – ทุก browser รองรับ opacity มาตรฐาน
• IE 11 ถูก retire (2022) – ไม่ต้อง support
• ใช้แค่ opacity: 0.5; พอ
• สำหรับ background transparency ใช้ rgba() หรือ #rrggbbaa (8-digit hex)

Opacity vs Transparent Color

• opacity – โปร่งใสทั้ง element + children (ลูกโปร่งใสตาม)
• background: rgba(0,0,0,0.5) – โปร่งใสแค่พื้นหลัง ลูกไม่กระทบ