Obtain CSS3 compliance using JQuery? Not anytime soon.

@pukupi and @juho asked me whether it would be possible to style CSS3-compliant border-radius styles using a framework like jquery. I did a bit of digging around and discovered that the answer is unfortunately "no, you can't".



It turns out that both webkit and gecko clobber CSS entries they don't understand. They aren't accessible from javascript. Both browser engines also expand so-called "short-cut" CSS entries to their full forms. i.e.

border:1px solid #000;

becomes

border-left:1px solid #000;border-right:1px solid #000;
border-top:1px solid #000; border-bottom:1px solid #000;

This happens in both browsers so even valid CSS rules that were present in the original CSS file may not appear, verbatim, in the DOM's document.styleSheets object.

Below is the output of a little test I whipped up. The following styles have been extracted via document.styleSheets (direct DOM manipulation) and via jquery's $("div").attr("style") function.

Firefox:
css styles
.corners { border: 2px solid rgb(255, 0, 0); margin: 20px; width: 10px; height: 10px; }
.cornersB { border: 2px solid rgb(255, 0, 0); margin: 20px; width: 10px; height: 10px; }
.mozBorder { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; }
.webkitBorder {}
manual styles
div.testA Styles are: undefined
div.testB Styles are:
div.testC Styles are: undefined
Chrome:
css styles
.corners { width: 10px; height: 10px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 0, 0); border-right-color: rgb(255, 0, 0); border-bottom-color: rgb(255, 0, 0); border-left-color: rgb(255, 0, 0);}
.cornersB { width: 10px; height: 10px; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 0, 0); border-right-color: rgb(255, 0, 0); border-bottom-color: rgb(255, 0, 0); border-left-color: rgb(255, 0, 0); }
.mozBorder {}
.webkitBorder {-webkit-border-top-right-radius: 5px 5px; -webkit-border-top-left-radius: 5px 5px; -webkit-border-bottom-left-radius: 5px 5px; -webkit-border-bottom-right-radius: 5px 5px; }
manual styles
div.testA Styles are: undefined
div.testB Styles are: border-radius:5px;
div.testC Styles are: undefined