Display an Unsupported Browser Warning with CSS

Using CSS3 can be lots of fun. But, making your websites compatible with older browsers that don't support it can be a pain. You can easily spend as much time trying to make your site compatible with older browsers as you did designing it in the first place. No thanks. There are a few services out there—browser-update.org, for example— that allow you to display a nice subtle message to users on older browsers. That's one option, but I wanted something that really got the point across…

The project I'm working on relies on so much modern CSS that it would appear completely broken on older browsers, so I decided to block out the screen for people using older browsers. After browsing around a bit, I found a few posted JavaScript solutions to this problem, but I didn't want to have to use JavaScript. So, I figured out a way to do it just using CSS.

First, add a div on the page, just after the <body> tag, with your warning inside. For styling purposes, I nested another div inside of it:

1.   echo '<div id="browser_warning">';
2.   	echo '<div id="browser_warning_inner">This website includes CSS elements that your browser does not support. Please upgrade your browser to a current version, then come back and try again.</div>';
3.   echo '</div>';

After you have your div on the page, you'll want to style it, then hide it. Add this to your stylesheet:

1.   #browser_warning {
2.   	position:absolute;
3.   	top:0;
4.   	left:0;
5.   	width:100%;
6.   	height:100%;
7.   	z-index:5;
8.   	background-color:black;
9.   	color:white;
10.  	font-size:20px;
11.  	font-weight:bold;
12.  }
13.  #browser_warning_inner {
14.  	padding:60px;
15.  	max-width:600px;
16.  }
17.  @media only all {
18.  	#browser_warning { display:none; }
19.  }

Everything before @media there is setting up the div to fill the entire screen and have very prominent text centered on it. The part after the media query hides it all. This works because all browsers understand and can process the first parts, but only browsers that are CSS3 compliant will process the last part (the part that hides the warning).

There are other ways of going about this, I'm sure, but I like this one because the browsers that support CSS3 media queries happen to be the same browsers that can handle all of the CSS3 elements my project included.

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on February 20th, 2015 by Robert James Reese in the following categories: CSS and HTML. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.