javascript - Warn Users Of Older Browsers That Don't Support New CSS3 Standards

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 parability 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: 

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

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 parability 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.

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

Share Improve this question edited Jan 4, 2012 at 1:52 asked Jan 3, 2012 at 9:58 daba 1573 silver badges15 bronze badges

all latest browser support css3 and html5, anyways you can do it by knowing the user's browser and version . google it – xkeshav Commented Jan 3, 2012 at 10:05
I have googled it and have only found half-plete solutions from 2003-2006! The problem's not the latest browser's, it's the monkeys running around with IE6,7 Firefox 1,2 Safari 1,2,3 ect – daba Commented Jan 3, 2012 at 10:09
@diEcho css3 and html5 aren't fully defined yet - it's impossible for any browser to fully support them. I would assume that when daba says "support css3" he means to test for specific features. – user1000131 Commented Jan 3, 2012 at 23:37
Yeah, that ment was better off deleted ;) – user1000131 Commented Jan 3, 2012 at 23:47

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

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.

Grab Modernizr and make a version with all the features you need. Open the modernizr file and add something like this

if(Modernizr.borderradius && Modernizr.cssgradients && Modernizr.textshadow) { var valid = true; var
expires = new Date(); expires.setDate(expires.getDate() + 31); document.cookie = 'browser=modern;
expires='+expires.toUTCString()+'; path=/'; } else { var valid = false; }

Replace the features to test for (i.e. Modernizr.borderradius) I state in the example with your own using modernizr's documentation. I am adding a cookie to the user if their browsers are pliant so I can filter out showing them the code with php.

Next, add this div and javascript at the top, right under your body tag. The javascipt uses jquery to hide the element, but you can use the other examples shown here to do it just with javascript.

<div id="warning_block">
Warning! You are viewing this page in a non patible browser.
</div>
<script type="text/javascript">
if (valid == false) { $("#warning_block").show(); }
</script>

You can include CSS to style it too, so it looks like a warning

#warning_block {
display: none;
width: 80%;
border: 1px solid #000;
background: #F00;
color: #FFF;
font-family: arial;
text-align: center;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}

step 1 - detect your browser version by javascript or by parsing the request header on the server side code.

step 2 - if the version is not supported then redirect to warning page.

(but CSS3 and HTML 5 is not supported widely).

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Warn Users Of Older Browsers That Don't Support New CSS3 Standards - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)