> Each time this has come up, some have wondered if jQuery couldn't/shouldn't
> normalize this (since browsers seem to handle it differently), but no one
> has volunteered.
Perhaps someone will come up with a great strategy to normalize these
properties, but the ones I could think of would add complexity to
jQuery and not simplify code for jQuery users.
For example, border-color. Each side can have a different color, so
the only consistent way to express is the same way that it's used when
assigned: four color values separated by a space. If border-width==0
or border-style=='none' on some sides, there's still a color but it
just isn't visible. So you need to know border-style and border-width
for each side as well before you know whether that border shows on the
screen.
I've wished I could look *only* at, say, border-color values to
determine whether there was a visible border on a side. But you'd need
to return something other than the actual color value that could be
interpreted as "no visible border". Then that jQuery border-color
string could not be assigned to another element because it's not the
real border-color property of that element.
In almost every case where the user cares about potential differences
between different border edges, they would need to parse the strings
returned by border-color, border-style, and border-width into their
four individual values. That is basically reversing the process that
jQuery used to build the string in the first place.
If a user knows there is a visible border on an element, and that all
four sides are the same color, then all the proposed behind-the-scenes
jQuery code is overkill. They don't need a loop to get all sides or a
string split to parse the data. All they really need to do is get the
border-left-color (or any other side); I think that's what wellmoon
ended up with here.
For the cases where you care about individual border differences, it
might be handy to have a borderCss() plugin that grabbed all all
border information for an element and returned something like this:
{
type: "varied", // or "uniform" or "none"
top: { width: "1px", color: "#ffe", style: "solid", visible:
true },
left: { width: "1px", color: "#ffe", style: "none", visible:
false },
right: { width: "0px", color: "#f0e", style: "inset", visible:
false },
bottom: { width: "4px", color: "#ffe", style: "solid", visible:
true }
}
