CSSがHTML要素の透明性を実現すること

CSS 3ドラフトでは、{opacity:<length> | inherit;}を定義して要素の透明度を宣言しているが、これは多くの現代ブラウザでサポートされているが、IEは特定のプライベート属性filterで早く実現されているため、HTML要素の透明性効果はどこにでもある.まず、A級ブラウザがサポートしているCSSで要素の透明性を実現する方案を見てみましょう.
エクスプローラ
最小バージョン
イニシアチブ
Internet Explorer
4.0 filter: alpha(opacity=xx);
5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);
8.0 filter: "alpha(opacity=xx)";
filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)";
-ms-filter: "alpha(opacity=xx)";
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
Firefox (Gecko)
0.9 (1.7) opacity
Opera
9.0 opacity
Safari (WebKit)
1.2 (125) opacity
実際、IE 8では、-ms-filterはfilterの別名であり、両者の違いは-ms-filterの位相値は単一引用符または二重引用符で囲まれなければならないが、filterでは必要ではないが、IE 8以前のバージョンでは、filterの属性値は単一引用符または二重引用符で囲まれていない必要がある.
IEのHTML要素が透明になるにはlayoutを備えなければならない.このような要素には読み取り可能な属性hasLayoutのみがあり、その値はtrueである.具体的な状況は以下の通りです.

body、img、table、tr、th、td、hasLayoutなどの要素のtrueはずっとtypeです.

textがbutton、file、selectまたはinputであるhasLayoutのtrueはずっと{position:absolute}である.

設定hasLayoutの要素のtrueは{float:left|right}

設定hasLayoutの要素のtrueは{display:inline-block}

設定hasLayoutの要素のtrueは{height:xx}

設定{width:xx}またはhasLayoutの要素は、trueになるには、次の2つの条件の1つを特定する必要があります.

IE 8互換モードとIE 8以前のブラウザでは、標準(strict)モードではdisplayの値がblockであり、demo 3のようにはできません.

要素は怪癖モード(compatmode)の下にある.

設定{zoom:xx}の要素は、IE 8の互換モードまたはIE 8以前のブラウザではhasLayoutがtrueであるが、IE 8の標準モードではhasLayoutはトリガーされない.

に{writing-mode:tb-rl}が設定された要素のhasLayoutはtrueである.

要素のcontentEditableの属性値はtrueである.

IE 8標準モードで{display:block}の要素が設定されているhasLayoutはdemo 8のようにtrueのままです.

hasLayoutの詳細についてはExploring Internet Explorer"HasLayout"OverviewとOn having layoutをご覧ください
以上から分かるように、IEがHTML要素の透明性を実現するのはこのように混乱しており、下互換性と自分のプライベート属性のためにIE上で要素の透明性を実現するには、CSS Opacityの例のdemo 1からdemo 8のような多くの方法があるが、IEチームは透明性を実現する方法を推奨している.

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

現在、CSS Opacityのdemo 4のように、簡単で最も使いやすい実現方法は次のとおりです.

{
    filter:alpha(opacity=30);
    opacity:.3;
}

実際に現在最も流行しているJavaScriptフレームワークの設定スタイル方法はすべてこの方式を適用し、IEに対して{zoom:1}を設定して要素のhasLayoutをtrueとするが、IE 8の標準モードではzoomがトリガーされることはないので、それらを利用してhasLayoutがhasLayoutである要素の透明度を設定する場合、IE 8の標準モードでは失敗する.このバグはYUI(私はすでにYUIチームにこのバグを提出しました.彼らは次のバージョンで修復します.最新の2.8.0には依然として存在します.2.9.0を期待してください)、Prototype、jQuery、Mootoolsの最新バージョンにも存在します.具体的にはIE 8標準モードでdemo 9からdemo 11を見てください.同様にIE 8に透明度を設定する方法は多種多様であるため、JavaScriptを利用してHTML要素の透明度値を取得するには多種の状況を考慮する必要があり、YUIはこの問題を完璧に解決し、PrototypeはjQueryより少し周到であるが、Mootoolsは直接バグであり、具体的にはIEの下でdemo 1からdemo 8のプレゼンテーションを見ることができる.この角度から4つのフレームにランキングをつけると、YUI 1位、Prototype 2位、jQuery 3位、Mootoolsが最下位になります.
Opacityの関数の設定と取得を簡単に実現しました.上のフレームワークに存在するバグを避けることができます.IE 8標準モードでdemo 12を見てください.

//  CSS opacity      ，  IE8    var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE     el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE     if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ // IE8 zoom   ，      inline-block       el.style.display = 'inline-block';
    }
    try{
      //      filter //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx       if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}//  CSS opacity        //   http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

言わざるを得ないのは、これらのことはすべてIEが作ったのだ......