Re: border-image and border-widths

On Feb 12, 2009, at 11:22 PM, fantasai wrote:

>
> David Hyatt wrote:
>> On Feb 12, 2009, at 7:22 PM, fantasai wrote:
>>> BTW, Hyatt, on a tangential note.. does Webkit implement this part
>>> # If the slash is present in the property value, the one to four
>>> # values after it are used for the width of the border instead of
>>> # the ‘border-width’ properties (but only if the specified image
>>> # can be displayed).
>>> and is its effect on layout desired or should it merely be a  
>>> graphical
>>> thing?
>> I assume you're asking if WebKit handles  "(but only if the  
>> specified image can be displayed)."  No, we don't.  I don't like  
>> that part of the spec.
>> We just always set the border widths, and don't check to see if the  
>> image has loaded first.  I don't see any situation where the author  
>> would actually want the border box to change size if the image  
>> fails to load.
>> Right now our behavior while a border image is loading is to just  
>> not draw any border.  That way the image just pops in like any  
>> other image on a page.  If the image fails to load, then we'll go  
>> ahead and display the fallback border.  I don't like the idea of  
>> selectively honoring the widths specified by border-image, since  
>> prior to the image loading, you'd want to honor the image's widths  
>> anyway. Otherwise you could do a size jump on a successful load,  
>> and that would be lame.
>> The widths specified by border-image should just always be honored  
>> so as not to create a trap for authors to fall into.
>
> Ok, so if that's what you're doing then wouldn't it make more sense to
> have the border-image widths /not/ influence layout and make the  
> author
> add space into the padding as necessary? Because this way a browser  
> that
> supports border-image but doesn't load the image and a browser that
> doesn't support border-image will give different fallback behaviors.
>
> ~fantasai
>

I like that idea. It would also allow you to have image-based shadows  
without getting into negative margins. You could even say that the  
excess width did not capture clicks.

I've uploaded a new sample of a plain border with a box-shadow (the  
preferred fallback version), and the same box with a image-border (but  
no box-shadow, because it messes it up currently).

I would want the fallback version to work whether the shadow in the  
second one was created the way I did, or generated by the UA. I like  
the one I created better than what a UA could do though. I have some  
shadows at different distances than others (which an automatic UA  
algorithm wouldn't be able to do), and some objects casting shadows on  
other objects within the same image (which would be pretty tough to  
match up right to a UA-generated border around the whole image.

You can take a look here:

http://www.bradclicks.com/cssplay/bones_border/bones.html

PS. There is some negative margin trickery on an inner element to get  
the text to appear to have padding that is less than the width of the  
image borders, so that I could chunk the image with bigger corner  
pieces than I wanted for padding. I actually used border instead of  
padding to accomplish that, since the border width would be changed  
anyway. I don't know another way to accomplish the same thing.

The border-width is about half of the image-border's "border width".  
If the excess did not effect layout (as fantasai's suggestion, above),  
then the layout around the fallback version would be unaffected.

Received on Friday, 13 February 2009 08:22:43 UTC