opacity: 0 with visibility: hidden

[mmcgu1966]

To be IE8 compatible, I’ve had to use the visibility: hidden rule in conjunction with opacity: 0. BUT, now i’m working on a site that requires IE10 (current, in other words) compatibility. It’s nice to lose legacy browser limitations, but working on a css fading transition, it occured to me that I probably don’t need to say both visibility:hidden and opacity:0 so… any reason to do so? the elements in question are two up/down icons that are absolutely positioned in the same place. I’m using a css transition for the opacity, instead of javascript show/hide.

[__]

You mean, any reason to use both? I don’t see any, no.

Note that visibility is a completely different concept than opacity, even in legacy IE. If you ever need legacy IE compatibility again, I would suggest using MS’s opacity filter instead:

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

/* IE 5-7 */ 
filter: alpha(opacity=0);

[Author]

Posts