[Javascript] Made up CSS tags

[Terry Riegel]

Hello All,

I am working on adding rounded corner functionality to IE, and  
optionally to other browsers. I have the core code working in IE,  
Safari, Mozilla, Chrome, and Opera.

Firefox and Safari already have their own CSS specifiers for rounded  
corners, namely

-webkit-border-radius: 25px;
-moz-border-radius: 25px;

I would like my javascript solution read the css and apply borders  
based on the CSS. I would like to add a contrived CSS tag like

-cc-border-radius: 25px;

Then have the javascript determine if the browser is handling the  
borders or if it should handle them. For example is the author had  
this in his CSS...

-webkit-border-radius: 25px;
-cc-border-radius: 25px;

Then it would let Safari draw its own borders, but would draw them for  
Firefox and IE.


    function styleit()
    {
     if (isIE)
     {
      for(var t = 0; t < document.styleSheets.length; t++)
      {
       for(var i = 0; i < document.styleSheets[t].rules.length; i++)
       {
        var allR =  
document.styleSheets[t].rules[i].style.IEborderRadius    || 0;
        var tR   =  
document.styleSheets[t].rules[i].style.IEborderRadiusTR  || allR;
        var tL   =  
document.styleSheets[t].rules[i].style.IEborderRadiusTL  || allR;
        var bR   =  
document.styleSheets[t].rules[i].style.IEborderRadiusBR  || allR;
        var bL   =  
document.styleSheets[t].rules[i].style.IEborderRadiusBL  || allR;
        if (allR || tR || tR || bR || bL)
        {
         var r=document.styleSheets[t].rules[i].style.IEborderRadius;
         var s=document.styleSheets[t].rules[i].selectorText;
         var settings = {tl: { radius: 45 }, tr: { radius: 45 }, bl:  
{ radius: 45 }, br: { radius: 45 }, antiAlias: true   , autoPad:  
true     , validTags: ["div"]}
         settings.tl.radius=replace(tL,'px','');
         settings.tr.radius=replace(tR,'px','');
         settings.bl.radius=replace(bL,'px','');
         settings.br.radius=replace(bR,'px','');
         var myBoxObject = new curvyCorners(settings,  
replace(s,'.','') );
         myBoxObject.applyCornersToAll();
        }
       }
      }
     } else if(isMoz) .......


Here is my code above. I have two issues I would like help resolving.

1. It seems IE will allow for the made up IEborderRadius, but will not  
allow made up ones with hyphens in them.

2. Safari and Firefox throw away the IEborder Radius once they  
determine it is made up, so it there a way I can "read" the CSS to  
determine if document.stylesheets.rules.style.IEborderRadius exists?

I hope this post isn't overly confusing. Any help will be greatly  
appreciated

Thanks,

Terry Riegel