The core .css() method does not return values that reflect the underlying css values for the element. The method attempts to convert many properties to raw numbers and loses the units in the process. Sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<script type="text/javascript" src="jquery-1.0a.js"></script>
<script type="text/javascript"> <!--
function test()
{
alert(document.getElementById("qq").style.height); // "200px"
alert(document.getElementById("qq").style.borderBottomWidth); // "2px"
alert(document.getElementById("qq").style.borderBottomColor); // "red"
alert($("#qq").css("borderBottomWidth")); // 2 (number without units)
alert($("#qq").css("borderBottomColor")); // NaN
// IE6 quirks (doctype above removed): 200 (number without units)
// IE6 standards (doctype strict): 230 (number without units)
// Firefox 1.5: 230 (number without units)
alert($("#qq").css("height"));
}
// -->
</script>
</head>
<body onload="test()">
<div id="qq" style="height:200px; border: 2px solid red; padding-top: 2em;">
I can still hear you saying, you would never break the chain.
</div>
</body>
</html>
In a plugin I'm building, I need to obtain the border width/color and padding for each side separately, and I pass them back in later for other elements. Because of that, I really need any value returned by .css() to be usable as an input value later, e.g., $('#div1').css('borderBottomColor', $('#div2').css('borderBottomColor')). With all the conversions going on here that's not possible.
I suggest that .css() only return the actual css attributes (including the height and width cases) and not attempt any heroics. Conversion or canonicalization should happen elsewhere, including conversion from non-pixel units to pixels, or conversion of color spaces (e.g., #ff0, #ffff00, rgb(255,255,0), rgb(100%,100%,0), rgba(255,255,0,0) are all the same thing color-wise but they have to be converted to a common format for operations like blending).
Some of these breaking changes were made recently so I doubt there's much external code that depends on it. The biggest impact I see from this change is with height and width, since several plugins seem to have made use of the fact that .css('height') returns a raw pixel number (one that isn't the css height btw). However, I'm convinced that down this path lies madness; perhaps another way to do this is with .height() and .width() methods that take all the quirks into account?