Ie9-11 Detecting Transform-Style: Preserve-3D

CSS effect works in Chrome but not IE 11

Internet Explorer doesn't presently have support for preserve-3d, but the team is working to ship it in an upcoming release. That being said, simple examples like yours don't necessarily require this feature, and could be implemented in a more cross-browser manner.

I played a bit with replicating your effect by transitioning two pseudo elements independently:

<div id="button1">
    <!-- Preserved your markup -->
    <a href="#" data-text="Search Now!"></a>
</div>

a {
    position: relative;
    perspective: 500px;
}

a, a::before, a::after {
    color: #FFF;
    display: inline-block;
    line-height: 44px;
    box-sizing: border-box;
    width: 155px; height: 44px;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
}

a::before, a::after {
    top: 0; left: 0;
    position: absolute;
    content: attr(data-text);
    transition: transform 1s;
}

a::before {
    background: #0965A0;
    transform-origin: 50% 100%;
}

a::after {
    background: #2195DE;
    transform-origin: 50% 0%;
    transform: translateY(100%) rotateX(-90deg);
}

a:hover::before {
    transform: translateY(-100%) rotateX(90deg);
}

a::before, a:hover::after {
    transform: translateY(0) rotateX(0);
}

Fiddle: http://jsfiddle.net/jonathansampson/ybjv8d7x/

Modernizr to check for css3d transforms and flexbox include ie10

With Modernizr you don't bother checking for specific browser versions. Modernizr uses JavaScript to add classes to the html element of the user's page. If the user's browser supports a feature, Modernizr will add a class with the name of that feature. If the user's browser does not support a feature, Modernizr will add a class 'no-' + feature-name. You write your css or JavaScript to check if the html element contains the class of the feature you want to support.

/* For all browsers */
.foo {
  display: inline-block;
}

/* For browsers that support Flexbox */
.flexbox .foo {
  display: flex;
}

/* For browsers that don't support Flexbox. I never use the 'no' classes
as I add features, not remove them. */
.no-flexbox .foo {
  display: inline-block;
}

Ideally it should never be a 'pass' or 'fail' situation. You should try to support older browsers the best you can, adding extra functionality and features for those that use the latest browser versions.

Here is the breakdown of the Modernizr Flexbox options:

1. Flexbox - browsers that support the current syntax (display: flex;)
2. Flexbox (legacy) - browsers that support the old 2009 syntax (display: box;)
3. Flexbox (tweener) - IE 10 (display: flexbox;)

If you are starting from scratch then you don't need 2 & 3. Those would be used to support sites built before the syntax was ironed out.

Deciding which Modernizr features to include depends on the features you plan to use. You should just start off using the full Modernizr library, then when you have completed your site, go back and build a reduced version using only the features you ended up using in your code.

Correct way to use Modernizr to detect IE?

I agree we should test for capabilities, but it's hard to find a simple answer to "what capabilities are supported by 'modern browsers' but not 'old browsers'?"

So I fired up a bunch of browsers and inspected Modernizer directly.
I added a few capabilities I definitely require, and then I added "inputtypes.color" because that seems to cover all the major browsers I care about: Chrome, Firefox, Opera, Edge...and NOT IE11. Now I can gently suggest the user would be better off with Chrome/Opera/Firefox/Edge.

This is what I use - you can edit the list of things to test for your particular case.
Returns false if any of the capabilities are missing.

/**
 * Check browser capabilities.
 */
public CheckBrowser(): boolean
{
    let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"];

    // Lets see what each browser can do and compare...
    //console.log("Modernizr", Modernizr);

    for (let i = 0; i < tests.length; i++)
    {
        // if you don't test for nested properties then you can just use
        // "if (!Modernizr[tests[i]])" instead
        if (!ObjectUtils.GetProperty(Modernizr, tests[i]))
        {
            console.error("Browser Capability missing: " + tests[i]);
            return false;
        }
    }

    return true;
}

And here is that GetProperty method which is needed for "inputtypes.color".

/**
 * Get a property value from the target object specified by name.
 * 
 * The property name may be a nested property, e.g. "Contact.Address.Code".
 * 
 * Returns undefined if a property is undefined (an existing property could be null).
 * If the property exists and has the value undefined then good luck with that.
 */
public static GetProperty(target: any, propertyName: string): any
{
    if (!(target && propertyName))
    {
        return undefined;
    }

    var o = target;

    propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1");
    propertyName = propertyName.replace(/^\./, "");

    var a = propertyName.split(".");

    while (a.length)
    {
        var n = a.shift();

        if (n in o)
        {
            o = o[n];

            if (o == null)
            {
                return undefined;
            }
        }
        else
        {
            return undefined;
        }
    }

    return o;
}

Flip card effect for non-webkit browsers

This seems to fit the bill...

http://lab.smashup.it/flip/

Quote: Flip is compatible with: Firefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)

---

Here is another one...

http://dev.jonraasch.com/quickflip/examples/

http://jonraasch.com/blog/quickflip-2-jquery-plugin

---

There is no "flip" in this one, but perhaps you'll find this helpful in another way...

http://malsup.com/jquery/cycle/browser.html

---

This one seems powerful, but you'll have to program the flip yourself...

https://github.com/heygrady/transform/wiki

---

Related Topics