<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PIE</title>
<!--[if lt IE 10]><script type="text/javascript" src="PIE.js"></script><![endif]-->
<style>
#div1{border-radius: 50%; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;}
#div2{box-shadow: #000 10px 10px 10px; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px; background: #fff;}
#div3{-pie-background: linear-gradient(#000, #fff); width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;}
</style>
</head>
<body>
<div style="border-radius: 50%; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;">ok</div>
<br>
<div style="box-shadow: #000 10px 10px 10px; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px; background: #fff;">ok</div>
<br>
<div style="-pie-background: linear-gradient(#000, #fff); width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;">ok</div>
<br>
<div id="div1">ok</div>
<br>
<div id="div2">ok</div>
<br>
<div id="div3">ok</div>
<script>
// CSS property tester
function getCSS(e, p)
{
var prop = "";
if(e.currentStyle)
{
prop = e.currentStyle[p];
}
else if(window.getComputedStyle)
{
prop = document.defaultView.getComputedStyle(e,null).getPropertyValue(p);
}
return prop;
}
// Attach PIE to all elements having a CSS3 property
window.onload = function()
{
if(window.PIE)
{
for (i = document.all.length; i--; )
{
e = document.all[i];
if ((getCSS(e, 'border-radius') != undefined && getCSS(e, 'border-radius') != "0px" ) // For IE < 9, border-radius, if not set, is undefined, for IE >= 9 it's "0px"
|| ( getCSS(e, 'box-shadow') != undefined && getCSS(e, 'box-shadow') != "none" ) // For IE < 9, box-shadow, if not set, is undefined, for IE >= 9 it's "none"
|| getCSS(e, '-pie-background') != undefined ) // For all IE, -pie-background, if not set, is undefined (except IE6, still to fix)
{
// alert("ok"); // Uncomment this line to be sure we do only 6 PIE.attach
PIE.attach(e);
}
}
}
}
</script>
</body>
</html>
Forums
