.: Wall Pearl :

Hiển Thị Ảnh PNG Trong Suốt Trên IE 5.5+

Saturday, 17. May 2008, 12:00:51

Việc áp dụng các ảnh định dạng PNG trong suốt giúp cho giao diện trang web thêm phần hấp dẫn và hoành tráng hơn. Tuy nhiên định dạng ảnh PNG trong suốt lại không được hỗ trợ trên IE 6- Vốn là các phiên bản trình duyệt hiện vẫn còn rất phổ biến

. Trong khi đó 1 định dạng trong suốt khác là GIF lại chỉ hỗ trợ 256 màu không thể nào thỏa mãn được nhu cầu thẩm mỹ cho một trang web chuyên nghiệp

. Rất may mắn là có một bộ lọc CSS giúp bắt IE 5.5 trở lên có thể hiển thị được ảnh PNG trong suốt. Trong bài viết này Pearl sẽ giới thiệu với các bạn về bộ lọc này và cách áp dụng nó để hiển thị ảnh PNG trong suốt cho trang web

Nói suông không bằng thực hành. Bây h, Pearl muốn chèn cái logo của mình vào trang web. Logo của Pearl ở dạng PNG trong suốt nên khi xem trên IE 6- nó bị trắng phần alpha trong suốt. Cách Pearl áp dụng đó là dùng bộ lọc CSS như sau

#logo{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=Logo.png, sizingMethod=crop) !important;width:235px;height:235px}

Tuy nhiên, nếu làm vậy thì cái logo của Pearl vẫn không thể trong suốt vì cơ bản đã có sẵn phần CSS chèn logo từ đầu rồi. Vậy thì phải làm sao đây?

Bỏ phần CSS chèn logo lúc đầu đi

. Cũng được nhưng rất tiếc là chỉ có IE mới hiểu bộ lọc CSS này nên các trình duyệt không phải IE sẽ không hiển thị logo. Đây là 1 vấn đề chọn 1 trong 2? Không nhất thiết

. Vậy làm cách gì để các trình duyệt có thể hiểu phần CSS nào dành cho chúng? Có

. Rất may mắn là Microsoft hỗ trợ 1 thứ gọi là conditional comment . Conditional comment này là 1 câu thần chú mà chỉ có IE hiểu. Ví dụ Pearl ghi điều kiện là [if IE] thì chỉ có các trình duyệt từ IE 5 hiểu và thực thi các lệnh ở sau đó. Vậy thì Pearl sẽ ghi thêm vào như thế này :

<!--[if IE]>
<style type="text/css">
#logo{background:none !important;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=Logo.png, sizingMethod=crop) !important}
</style>
<![endif]-->

click here for ex

Sẽ có 1 số tham số điều kiện như : [if IE] cho các trình duyệt IE 5+ | [if IE 5], [if IE 5.5000], [if IE 6], [if IE 7] cho riêng IE5, IE5.5, IE6, IE7 | [if lt IE7] trình duyệt phiên bản nhỏ hơn IE7 | [if gte IE 5.5000] trình duyệt IE5.5+

Như Pearl đã nói ở trên, cách đó cần dùng các conditional comment – 1 loại điều kiện trong (X)HTML cho nên chắc chắc bạn phải thêm conditional comment này trực tiếp vào mã nguồn HTML của trang web. Vậy đối với trường hợp không thể chỉnh sửa trực tiếp mã HTML của trang web như khi thiết kế giao diện cho blog bằng CSS chẳng hạn? Có 1 giải pháp khá đơn giản đó là trình duyệt IE đặc biệt ngố ộp đối với các công nghệ CSS mới

nên bạn chỉ việc dùng các selector mới một tí là chỉ các trình duyệt khác hiểu còn IE thì cứ dùng selector truyền thống.

Ví dụ IE6- không hỗ trợ child selector kiểu như html>body hay tag[property=value] hay body div:first-child img vậy. Vụ này có lẽ Pearl sẽ viết trong 1 bài CSS hack sau. Còn bây h, Pearl sẽ giới thiệu ngay với các bạn dùng child selector để giải quyết nhanh vụ này.

#logo{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=Logo.png, sizingMethod=crop);width:235px;height:235px}
a>#logo{background:transparent url(Logo.png) no-repeat}

click here for ex

Đấy IE6- không thể hiểu a>#logo là gì nên không hiển thị ảnh nền và các trình duyệt khác không hiểu filter nên cũng không áp dụng được. Cách này cũng như 1 người có 2 cái tên vậy

Thế đấy, hóa ra việc sử dụng ảnh PNG trong suốt trên IE cũng không phải là vô kế khả thi phải không nào. Tuy nhiên, như các bạn đã thấy đó bộ lọc thì chỉ biết lọc ảnh đơn chứ không biết repeat ảnh. Cho nên nếu bạn muốn repeat ảnh trong suốt thì nên dùng CSS hack để áp dụng ảnh JPG thay thế cho IE, đó có lẽ sẽ là 1 giải pháp tốt nhất vào lúc này.