FOLLOW US

Blog

These articles are in reference to our original plugin, SlideDeck 1 PRO. If you are searching for articles related to our SlideDeck 2 WordPress Plugin, please check the blog category for SlideDeck 2 or search our Knowledge Base.

SlideDeck and IE6, the best way to handle this antiquated browser

By On December 28, 20101 Comment

As you all may know SlideDeck does not support IE6. We’ve gotten the question over and over, Why don’t you support this browser, a lot of people in business still use it because they have to. Believe me, we completely understand this fight plight.

As a company, the creators of SlideDeck, digital-telepathy, don’t support IE6 either, unless the client wants to pay extra for it. Why do they charge more you ask? Well, IE6 has the unfortunate circumstance of an innumerable amount of rendering quirks that no other browser on the market (not even later versions of IE) have. Sometimes these quirks can add an additional 20% to the amount of work required to get whatever it is you are trying to make work, work in IE6. Often many hacks are required to get a website to render properly.

SlideDeck takes advantage of some pretty fancy effects, many of which are only available with CSS3 (which IE6 does not support). Not to mention, to support IE6 would hamstring the development because we’d be too busy trying to dumb down its capabilities to make it work in IE6 and then supporting all the weird rendering quirks that will come from all the existing CSS hacks interfering with SlideDeck’s CSS that are used to get users websites to even render decently in IE6.

Anyways, this is all rehashing of things we’ve already documented and communicated on the website. So, now that you know IE6 isn’t supported, what do you do with your content to handle users that still use it while still presenting the great interaction that SlideDeck offers to the majority of your visitors who aren’t using IE6? The best way of doing so is to present two versions of your content – one for incompatible browsers, the other for compatible browsers.

Below is a nice conditional script to detect the visitor’s browser server-side to prevent displaying the content on the website twice or a flicker of un-styled content before the CSS has finished loading or the JavaScript has finished running. This code snippet is written for PHP, but the concept can easily be adapted to your language of choice.

<?php
/*
We will look at the value of the $valid variable at the end
of this script to see if we should display the SlideDeck
content or not. By default we assume that the browser
viewing this page is a valid one, so we set it to TRUE. If
we find that it is invalid though we will set it to FALSE
and show different content.
*/
$valid = true;

// Check for IE (earlier than 7)
if( preg_match( "/MSIE (5|6)/", $_SERVER['HTTP_USER_AGENT'] ) ) {
    // IE6 detected, invalidate
    $valid = false;
}

// Check for old versions Firefox (earlier than 3.1)
if( preg_match( "/ Firefox\/([0-9a-z\.]+)/", $_SERVER['HTTP_USER_AGENT'], $ff_matches ) ) {
    if( version_compare( $ff_matches[1], 3.1 ) == -1 ) {
        // Firefox detected at less than version 3.1 (when the -moz-transform CSS3 property was added), invalidate
        $valid = false;
    }
}

// Check for Opera (earlier than 10.5)
if( strstr( $_SERVER['HTTP_USER_AGENT'], "Opera" ) ) {
    // Opera detected, check UAString for version numbers (there are many variants)
    if( strstr( $_SERVER['HTTP_USER_AGENT'], "Mozilla" ) ) {
        if( preg_match( "/Opera ([0-9\.]+)/", $_SERVER['HTTP_USER_AGENT'], $o_matches ) ) {
            if( version_compare( $o_matches[1], 10.5 ) == -1 ) {
                // Opera version less than 10.5 found, invalidate
                $valid = false;
            }
        }
    } elseif( preg_match( "/Presto\/([0-9\.]+)/", $_SERVER['HTTP_USER_AGENT'], $o_matches ) ) {
        if( version_compare( $o_matches[1], '2.5.22' ) == -1 ) {
            // Opera version less than 10.5 (with Presto engine less than 2.5.22), invalidate
            $valid = false;
        }
    } elseif( strstr( $_SERVER['HTTP_USER_AGENT'], "Opera/9.80" ) ) {
        if( preg_match( "/Version\/([0-9\.]+)/", $o_matches ) ) {
            if( version_compare( $o_matches[1], '10.50' ) == -1 ) {
                // Opera version less than 10.5 found, invalidate
                $valid = false;
            }
        }
    }
}

if( $valid === true ):
?>

SlideDeck information

<?php else: ?>

IE6 and Non-compatible Firefox/Opera information

<?php endif; ?>

This code snippet looks for old and incompatible versions of IE (5.x and 6.x), incompatible versions of Firefox (< 3.1) and incompatible versions of Opera (< 10.5). If you have another browser you want to show different content for (a mobile device for instance), you can always add more conditionals in to check for that browser’s User Agent String. Check out UserAgentString.com for a list of all the variants out there for each version of each browser.

If you don’t have access to write server-side markup, you can also use some other CSS and JavaScript based solutions as well. Check out the following threads in our support community for more information on your visitors and IE6:

Leave a Reply

Comments (1 Response)

  1.  

    Srihari Sankar Sahu

    How about using Google Chrome Frame and then calling slide deck in?

    Does this break anything in slide deck.

    I am asking this because I developed the complete website and tested using firefox5, IE8, Chrome13 and at the end the user tested using IE6 and reported a display alignment issue.

    Just want to know, whether this can work or not??