Comments on: border-image: No more cutting up hell

By: Anne van Kesteren

Anne van Kesteren — Mon, 18 Aug 2008 10:59:03 +0000

border-width does not take integer values, fwiw. (With a no-quirks parser that rule would be ignored.)

By: icoloma

icoloma — Thu, 14 Aug 2008 07:55:03 +0000

As a matter of fact, webkit and firefox implementations of border-radius are different. There are some (obscure) combinations of parameters that are interpreted differently.

By: eyelidlessness

eyelidlessness — Wed, 13 Aug 2008 18:58:40 +0000

The reason for the -vendor- prefix, as Hans Schmucker sort of explained, is that it is a vendor-specific implementation even if it conforms to the draft, until the spec is out of draft. If FF 3.1 implements this as it is described in the draft, and the draft is edited and made official tomorrow, then 3.1 has a non-standard implementation until it is updated to the new spec and takes 3.1′s market share.

By: Hans Schmucker

Hans Schmucker — Wed, 13 Aug 2008 18:03:21 +0000

There’s a reason for it. -vendor- are necessary because the draft versions might not behave like the final version and specifically might not even behave the same in different browsers. And we all want to avoid something like we have in HTML were we have totally different properties (i.e. -msie-width vs width) that have the same name.

By: tj111

tj111 — Wed, 13 Aug 2008 17:59:51 +0000

Why can’t both just support something like -css3-border-image instead of making us type out the individual rendering engine? I understand theres some places where there might be overlap, but the webkit and mozilla teams should collaberate to eliminate those.

By: pmontrasio

pmontrasio — Wed, 13 Aug 2008 17:51:52 +0000

Very nice but this highlights a problem with the naming of non standard properties.

Firefox should simply recognize the -webkit-border-image one instead of forcing us to add another line to our css files for -moz-border-image.

In other words: the first browser to implement a property should get credit and give it the name it wishes. The other browser should use it and eventually drop the browser specific name when the property gets approved.

What I don’t want to see is css files like this

-webkit-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-moz-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-opera-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;
-ie-border-image: url(toolButton.png) 0 5 0 5 stretch stretch;

It’s verbose, it’s redundant, it’s error prone: it’s a bad practice.

By: ialexi

ialexi — Wed, 13 Aug 2008 17:45:18 +0000

Nice thing about targeting iPhone (as it appears the example does) is that it is a single platform. No worry about different browsers (though, you do have to worry about the difference between 1.0 and 2.0 software (though x2, 2.0 software, and future software updates, may become ubiquitous rather quickly due to Apple’s method of propagation)).

By: creppie

creppie — Wed, 13 Aug 2008 17:40:35 +0000

Hmm.. Seems to also stretch the colors lighter. Likely by a function of the stretch width, this will make all buttons with the same img but diff widths look inconsistent. Let’s hope I’m missing something or that they get that fixed.

By: zzen

zzen — Wed, 13 Aug 2008 17:02:58 +0000

@commadelimited: It's part of the current CSS3 Background and Borders working draft. When the draft reaches status of Recommendation, the browser-specific prefixes can be dropped.

By: commadelimited

commadelimited — Wed, 13 Aug 2008 16:38:13 +0000

Errr “moz”

By: commadelimited

commadelimited — Wed, 13 Aug 2008 16:37:53 +0000

How is this “CSS3″ when the properties are mox and webkit specific?