Come posso gestire le transizioni CSS in IE8?

  • CSS
  • Gabriele Romanato

Se siete ancora costretti per motivi di lavoro a supportare IE8, dovete utilizzare jQuery per gestire le transizioni CSS.

Per prima cosa impostate correttamente le classi sulla pagina:


<!DOCTYPE html>
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--><html class="modern-browsers"><!--<![endif]-->
<head>

Nel CSS avrete:


.fade-out {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.fade-in {
	opacity: 1;
}

IE8 ignorerà tutte le proprietà contenute nei due blocchi. Quindi con jQuery:


var isIE8 = function() {
	return ( $( "html" ).hasClass( "ie8" ) );	
};

$(function() {
	var $faded = $( ".fade-out" );
	if( !isIE8() ) {
		$faded.addClass( "fade-in" );
	} else {
		$faded.animate({
			opacity: 1
		}, 1000);
	}
});
Torna su