CSS in the browser for HTML element transparency)

Today I saw a front-end developer (Qin Ge & kaven)ArticleThose things about CSS implementing HTML element transparency are about the implementation of transparency in browsers. Abstract:

 

The css3 draft defines{Opacity: | inherit ;}To declare the transparency of elements, which has been supported by most modern browsers, While IE has very early passed through specific private attributes.FilterSo the transparency of HTML elements is everywhere. First, let's take a look at the method supported by browser A to implement element transparency with CSS:

 

Browser	Lowest Version	Solution
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

 

In IE8,-MS-filter is the alias of the filter. The difference between the two is that the relative value of-MS-filter must be enclosed by single quotation marks or double quotation marks, while filter is not required, in versions earlier than IE8, filter attribute values must not be enclosed by single or double quotation marks.

To implement transparency, HTML elements in IE must have layout. Such elements have the readable attribute haslayout and its value is true. The details are as follows:

2. Body,IMG,Table,Tr,Th,TDAnd other elementsHaslayoutAlwaysTrue.
4. TypeIsText,Button,FileOrSelectOfInputOfHaslayoutAlwaysTrue.
6. Set{Position: absolute}ElementHaslayoutIsTrue
8. Set{Float: Left | right}ElementHaslayoutIsTrue
10. Set{Display: inline-block}ElementHaslayoutIsTrue
12. Set{Height: XX}Or{Width: XX}The element must be specific to one of the following two conditions:HaslayoutToTrue:
    1. In IE8 compatibility mode and earlier browsers than IE8DisplayThe value isBlock, Such as demo3.
    2. The element is in compat mode.
14. Set{ZOOM: XX}Element in the IE8 compatibility mode or in the browser before IE8HaslayoutIsTrueBut it is not triggered in standard IE8 mode.Haslayout.
16. Set{Writing-mode: Tb-rl}ElementHaslayoutIsTrue.
18. ElementContenteditableThe property value isTrue.
20. In IE8 standard mode{Display: block}ElementHaslayoutAlwaysTrue, Such as demo8.

For details about haslayout, refer to tracing ing Internet Explorer "haslayout" Overview and on having layout.

It can be seen from the above that IE achieves the transparency of HTML elements so messy, there are multiple ways to make the elements transparent on IE for backward compatibility and their own private attributes, for example, demo1 to demo8 In the CSS opacity instance, although the IE team recommends transparent implementation:

 

{-MS-filter: "progid: DXImageTransform. microsoft. alpha (opacity = 50) "; filter: progid: DXImageTransform. microsoft. alpha (opacity = 50); opacity :. 5 ;}
 

 

At present, the best implementation method is demo4 in CSS opacity:

 

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

In fact, currently the most popular JavaScript Framework's style setting method is applied in this way, and{ZOOM: 1}To make the elementHaslayoutIsTrueBut in IE8 standard modeZoomIt cannot be triggered.Haslayout, So use them to setHaslayoutIsFalseThe transparency of elements fails in standard IE8 mode. This bug exists in the latest versions of Yui, prototype, jquery, and mootools, for details, see demo9 to demo11 in IE8 standard mode. Similarly, due to the wide variety of ways to set transparency in IE8, you need to consider multiple situations to use JavaScript to obtain the transparency value of HTML elements. Yui perfectly solves this problem. prototype is a little more comprehensive than jquery, mootools is a bug. For details, see demo1 to demo8 demos in IE. From this perspective, Yui No. 1, prototype No. 2, jquery No. 3, and mootools are used to rank the four frameworks.

 

I have implemented the function of setting and obtaining opacity to avoid the bug in the above framework. Please refer to demo12 in IE8 standard mode:

// Sets the CSS opacity attribute function to solve the IE8 problem.
VaR setopacity = function (El, I ){
If (window. getcomputedstyle) {// for non-ie
El. style. Opacity = I;
} Else if(document.doc umentelement. currentstyle) {// for IE
If (! El. currentstyle. haslayout ){
El. style. Zoom = 1;
}
If (! El. currentstyle. haslayout) {// zoom does not take effect in IE8, so set inline-block again
El. style. Display = 'inline-Block ';
}
Try {
// Test whether a filter exists.
// 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 + ')';
}
}
}

 

// Gets the CSS opacity attribute value.
// Reference self-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.doc umentelement. currentstyle ){
Values = 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;
}
}

 

 

Before reading this article, I understand that:

Function setopacity (OBJ, opacity ){
Opacity = (opacity = 100 )? 99.999: opacity;
If (OBJ <0) OBJ = 0; else if (OBJ> 100) OBJ = 100;

// IE/win
OBJ. style. Filter = "alpha (opacity:" + opacity + ")";
// Safari <1.2, Konqueror
OBJ. style. khtmlopacity = opacity/100;
// Older Mozilla and Firefox
OBJ. style. Required opacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, css3
OBJ. style. Opacity = opacity/100;
}

The effects of running this function can be imagined .....

 

InIn pro JavaScript techniques:

// set transparency
function setopacity (ELEM, num) {
If (ELEM. filters) {
ELEM. style. filter = "alpha (opacity =" + num + ")";
}else {
ELEM. style. opacity = num/100;
}< BR >}