html5 - How to fix roll link in IE11 -
i utilize 3d roll links on website using html5 , css3.
i'm used create modernizr available ie , older browsers, ie11 detected compatible 3d css animation... , it's not.
on ie 11 : expected : actual result :so question :
how can utilize modernizr on internet explorer 11? goal utilize 3d roll links or fallback on non-animated css.
here's html's <head> :
<!--[if ie]> <script src="js/modernizr.js"></script> <![endif]--> here css utilize :
/* roll links */ .roll { display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .roll:hover {text-decoration: none;} .roll span { display: block; position: relative; padding: 0 2px; -webkit-transition: 400ms ease; -moz-transition: 400ms ease; -ms-transition: 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; } .roll:hover span { background: #b1162c; -webkit-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotatex( 90deg ); } .roll span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #b1162c; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotatex( -90deg ); }
there's css trick have fallback 3d roll links on incompatible browser. add together css :
/* no 3d transform prepare */ .no-csstransforms3d .roll span:after { display:none; } .no-csstransforms3d .roll:hover span { color:#fff; background:#b1162c; } .no-csstransforms3d .roll:hover span { -webkit-transform:none; -moz-transform:none; -o-transform:none; transform: none } /* ie10 prepare */ .no-cssreflections .roll span:after { display:none; } .no-cssreflections .roll:hover span { color:#fff; background:#b1162c; } .no-cssreflections .roll:hover span { -webkit-transform:none; -moz-transform:none; -o-transform:none; transform: none } as can see, you'll need modernizr activate fallback, colored link. , while [if ie] method works net explorer 8, 9, 10... won't work on ie11. because microsoft thought browser handle "modern" coding (and ooooh wrong).
so, trick utilize javascript load modernizr.js if browser ie11. add together html's <head> :
<script type="text/javascript"> if(window.activexobject || "activexobject" in window){ <!-- var n='<script src="js/modernizr.js">'; var d='<\/script>'; document.write(n + d); // --> } </script> this write htlm page differently if ie11 detected, adding <script src="js/modernizr.js"></script> code. it's more hard [if ie].
if combine previous css , html css fallback , javascript ie11 detection, you'll fine.
html5 css3 internet-explorer compatibility
No comments:
Post a Comment