Home/ Questions/Q 7015295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T22:38:00+00:00

I’m trying to redirect older browsers that don’t support CSS3 or iFrames to a

  • 0

I’m trying to redirect older browsers that don’t support CSS3 or iFrames to a warning page where I explain that they may experience problems with their older browsers if they continue.

The script (or otherwise) should test for css3 comparability and not browser id.

A banner that displays at the top of the page if the user is viewing using a older browser would also be acceptable.

I’m currently using:
<!--[if lt IE 9]><div style=' clear: both; height: 200px; padding:0 0 0 15px; position: relative;'><a href="old"><img src="old-browser.jpg" border="0" height="153" width="659" alt="" /></a></div><![endif]-->

Is their Anyone have any experience with this or a link to an example? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Testing for the browser version is an unreliable method – many users do not provide that information, and others tell you they are using a different browser then they really are. If you need specific features then the only reliable way to determine if they are available is to use javascript to see if they exist.

    Are you determined to redirect, not just change what’s displayed? Because changing the contents of the current page would be much simpler. Just add something like this to your page:

    <div id='warning'>Your browser sucks!</div>

    CSS:

    #warning {
  /* make this DIV very visible - you could even cover the rest
     of the page if your website is useless without javascript. */
}

    Now the page will load with #warning displayed, and you can use javascript to hide it if the required features are present (you don’t want to do the inverse and use javascript to display it because you want it displayed if your script doesn’t run). There are a lot of ways to do that, and the most “standard” way would be to attach an onload event. However, this is one situation where I think a hackish approach is much better. If you do the test on-load, then the warning will be displayed until the javascript executes, which could be anywhere from a fraction of a second to several seconds. What you really want to do is hide the element before it is ever displayed, and you can do that by adding something like this to the <head> section.

    if((function() {
  var t,u,i,j,
    css='textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity'.split(','),
    prefixes=',webkit,moz,o,ms,khtml'.split(','),
    nPrefixes=prefixes.length,
    el=document.createElement('i').style;
  styles:for(i=0;t=css[i];i++) {
    t=t.charAt(0).toUpperCase()+t.substr(1);
    for(j=0;j<nPrefixes;j++) {
      u=prefixes[j]+t;
      if(el[u.charAt(0).toLowerCase()+u.substr(1)]!==undefined)
        continue styles;
    }
    return false;
  }
  return true;
})())
  document.write("<style type='text/css'>#warning {display:none;}</style>");

    As per your example, this assumes that the features you need are textShadow, textStroke, boxShadow, borderRadius, borderImage, and opacity.

    You really shouldn’t put any other javascript in the <head> though, since the page won’t start rendering until the code above it finishes executing.

    • 0