warrenshea.com uses HTML5, which isn’t supported by IE8. Which is unfortunate because IE8 is used pretty frequently.
I didn’t wanna do another stylesheet/javascript and update both…so I used one of my favorite things: my proxy.php file
This is my default.php for warrenshea.com. Unfortunately, I did have to do a big IF statement but that’s okay because this code never changes. So what it does is check it it’s IE8 (ie. doesn’t support HTML5), and then changes some of the tags: <header> to <div id=”header”>. I’ll likely change the IF statement to something better later…but that’s not the point of this post.
$srvr_http_user_agent = $_SERVER[‘HTTP_USER_AGENT’];
if ((stristr($srvr_http_user_agent,”MSIE 6.0″) == true) ||
(stristr($srvr_http_user_agent,”MSIE 7.0″) == true) ||
(stristr($srvr_http_user_agent,”MSIE 8.0″) == true)) {?>
<!doctype html>
<html>
<head>
<link rel=”stylesheet” href=”common/proxy.php?url=stylesheet.css&type=css”>
</head>
<body>
<div id=”header”>
<div id=”nav”>
<ul id=”nav-text”></ul>
<ul id=”nav-background”></ul>
</div>
.
.
<script src=”common/proxy.php?url=scripts.js&type=js”></script>
</body>
</html><?php } else { ?><!doctype html>
<html lang=”en-us”>
<head>
<link rel=”stylesheet” href=”common/stylesheet.css”>
</head>
<body>
<header>
<nav>
<ul id=”nav-text”></ul>
<ul id=”nav-background”></ul>
</nav>
.
.
<script src=”common/scripts.js”></script>
</body>
</html><?php } ?>
Doing this gets rid of some HTML5 tags but the CSS and JavaScript/jQuery still reference the HTML5 tags. So I like to use my proxy.php, which loads a URL, and gives me the option to manipulate it.
FYI – For XML, I use it for my twitter XML (I used to have it done through JavaScript but I found that it hindered load time).
<?php
$page_contents = file_get_contents($_GET[“url”]);
if ($_GET[“type”] == “css”) {
header(“Content-type: text/css”);
$page_contents = str_replace(“header”,”#header”,$page_contents);
$page_contents = str_replace(“##header”,”#header”,$page_contents);
$page_contents = str_replace(“footer”,”#footer”,$page_contents);
$page_contents = str_replace(“##footer”,”#footer”,$page_contents);
$page_contents = str_replace(“content-#footer”,”content-footer”,$page_contents);
$page_contents = str_replace(“nav”,”#nav”,$page_contents);
$page_contents = str_replace(“##nav-text”,”#nav-text”,$page_contents);
$page_contents = str_replace(“##nav-background”,”#nav-background”,$page_contents);
} else if ($_GET[“type”] == “js”) {
header(“Content-type: application/javascript”);
$page_contents = str_replace(‘$(“header”)’,’$(“#header”)’,$page_contents);
$page_contents = str_replace(‘$(“nav”)’,’$(“#nav”)’,$page_contents);
$page_contents = str_replace(‘$(“footer”)’,’$(“#footer”)’,$page_contents);
} else if ($_GET[“type”] = “xml”) {
header(“Content-type: text/xml”);
}
echo $page_contents;
?>
Yes, it’s very hacky and likely not efficient but it does the job.
It changes:
http://warrenshea.com/common/stylesheet.css (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=stylesheet.css&type=css (HTML5 bad)
and
http://warrenshea.com/common/scripts.js (HTML5 good) to
http://warrenshea.com/common/proxy.php?url=scripts.js&type=js (HTML5 bad)
but I only have to edit one file and it’ll make the non-HTML5 version automatically. Sweet.
Anyways, I thought this was worth sharing. Someone might find this technique useful.