Re: [Backgrounds/Borders] What to do when a border-image fails to load

Brad Kemper wrote:
> On Mar 28, 2009, at 7:54 AM, David Hyatt wrote:
> 
>> On Mar 28, 2009, at 8:17 AM, Anne van Kesteren wrote:
>>
>>> On Fri, 27 Mar 2009 17:58:52 +0100, David Hyatt <hyatt@apple.com 
>>> <mailto:hyatt@apple.com>> wrote:
>>>> Yeah, I guess I'm saying "let's just drop the ability to set border 
>>>> widths from border-image."
>>>
>>> Then you always have to set two properties. Is it worth considering 
>>> making border-image a special form of border-style? That does not 
>>> work for the border-*-style properties, but the same applies to 
>>> resetting border-image by setting border. As a bonus it would make it 
>>> easier to allow specifying some kind of fallback in case the image 
>>> fails to load, cannot be decoded, is not supported, etc.
>>>
>>
>> I don't really care how this is solved.  I just don't like what's in 
>> the spec now, since snapping to different border widths just because 
>> an image failed to load does not seem like what any author or user 
>> would want.
>>
>> dave
> 
> I written up a proposal that I think solves this problem, plus a couple 
> others that I think are even bigger for authors. I'd appreciate it if 
> everyone could take a look and let me know what you think. In the 
> following link, I describe three problems (including this one), and a 
> nice solution that I would love to see implemented:
> 
> http://www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html
> 
> 

As more I am looking on this as more I think that complex borders
are just such a backgrounds. It just foreground-image is what missed
in CSS.

Even in you nice design you clearly have a layer behind the text and
layer (lamp and smoke from it) in front of it.

Consider this mockup:

http://terrainformatica.com/w3/lamp.png

It is conceptually close to yours but as you see border and
background are really non-separable. If to adopt expandable
background images [1] then such borders with background are
not a problem. Lamp in front has alpha and is drawn as foreground
image.

My design uses single DOM element with the following style:

#lorem-ipsum
{
   background-image: url(back.png);
   background-repeat: expand;
   background-position: 20 2 26 2;
   foreground-image: url(lamp.png);
   foreground-repeat: no-repeat;
   foreground-position: bottom right;
   padding: 48px 50px 80px 14px;
}

All this is really very simple and does not require to change any
layout mechanisms that we have in CSS so far.

This border-images really look good only on paper but when
you will start using them you will immediately bump into limitations.
CSS is simply not that tool that is capable to define all possible
interactions of backgrounds and borders.

I agree that something has to be done here. But border-image appears
as too complex (in terms of interaction with box model) and not
a perfect solution anyway.

[1]http://www.terrainformatica.com/wiki/h-smile/expandable-backgrounds

-- 
Andrew Fedoniouk.

http://terrainformatica.com


> 
> 
> 
> Sincerely,
> Brad Kemper
> home e-mail: mailto:brad.kemper@gmail.com
>

Received on Monday, 30 March 2009 01:14:53 UTC