CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Claudio
Claudio

Reputation: 894

Disable CSS3 animations on incompatible browsers?

I have a fade-in animation on the main container on page load.
It works fine with all browsers expect IE(9).

Is there a way to detect if the user is using a browser incompatible with CSS3 animations and so disable them, so they can view the page?

HTML

<body>

    <span id="splash-title">
    <img src="kuntosali/images/fc_yrityskeskus.png" class="pure-img" id="splash-logo" alt="logo" />
    <img src="kuntosali/images/loading.gif" id="loading" alt="loading" />
    </span>

<div class="splash-container">
    <div class="splash">
        <span class="splash-head"></span>
        <p class="splash-subhead">
            <span>FoxCenter</span> on kuntosali ja yrityskeskus.<br>
            Kumpaa etsit?
        </p>
        <p>
            <a href="yrityskeskus/" class="pure-button pure-button-primary">Yrityskeskus</a>
            <a href="kuntosali/" class="pure-button pure-button-primary">Kuntosali
            </a>
        </p>
    </div>
</div>


</body>

CSS

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px; left: 0; bottom: 0; right: 0;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
        -webkit-animation: fade-in 2s forwards 4s;
        -moz-animation: fade-in 2s forwards 4s;
        -o-animation: fade-in 2s forwards 4s;
    animation: fade-in 2s forwards 4s;
}

Upvotes: 0

Views: 592

Answers (4)

Jeremy Blanchard
Jeremy Blanchard

Reputation: 11

Not to be completely antiquated here, but here's how I'd do it if I didn't want to use Modernizr.

There are probably a ton of different ways to do this but...

If I were trying to target a specific version of IE (regardless of CSS3), I would just use IE conditional comments.

For example:

Style the fade-in div with display:none; in the linked conditional commented CSS Stylesheet (ie.css or whatever you wish to name it).

That fade-in div would appear in all browsers except the specific IE browsers that you targeted with the conditional comments just by using a tiny bit of CSS. Simple solution and very lightweight.

See more about conditional comments here: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Also, if you wanted to know more about what CSS3 can be used on specific browsers check out http://caniuse.com/

It clearly defines what you can and cannot use for specific browsers (not just IE).

Upvotes: 0

KyleK
KyleK

Reputation: 5056

If CSS 3 is not supported, animation is ignored and so already disabled.

For a proper detect of animation property in JS, no need:

if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
    // not supported
}

You can maybe load jquery, jquery lite or zepto for old browser and do this:

if(typeof(document.body.style.animation) === 'undefined' && typeof(document.body.style.MozAnimation) === 'undefined' && typeof(document.body.style.WebkitAnimation) === 'undefined' && typeof(document.body.style.OAnimation) === 'undefined') {
    $('.splash').fadeIn();
}

PS: this trick: bottom: 0; right: 0; will probably fail on some browsers.

Upvotes: 0

will
will

Reputation: 4575

You should look into Modernizr which is a feature detection library.

If you go to the download page, choose features you want to detect and then add the script to your site.

This will give you access to the Modernizr object in javascript and also add classes to the HTML tag (if that option is selected).

In CSS:

.cssanimations .splash {
    // Styles for when CSS animations work
}

Or in Javascript:

if( Modernizr.cssanimations ){
    // Javascript if CSS animations work
}

Hope that helps :)

Upvotes: 1

Adriano
Adriano

Reputation: 20041

As pointed by @Karl-AndréGagnon, using modernizr might be the cleanest way to go. It will then add a no-cssanimations class to the <html> tag when a browser cannot use CSS3 animations.

You can then use it to add "non-CSS3-animation support CSS or javascript":

  • in CSS you will do .no-cssanimations .splash { /* ...do something */ }
  • in javascript you can do :

if( Modernizr.cssanimations ){ /* ...do something */ }

if( $(".no-cssanimations").length ){ /* ...do something */ }

Resources

Upvotes: 1

Related Questions