Re: [CSS] Expandable background images, proposal

Andrew Fedoniouk wrote:
> fantasai wrote:
>> Andrew Fedoniouk wrote:
>>> fantasai wrote:
>>>> Andrew Fedoniouk wrote:
>>>>>
>>>>> background-repeat:expand; is defined here:
>>>>>
>>>>> http://www.terrainformatica.com/wiki/doku.php?id=h-smile:expandable-backgrounds 
>>>>
>>>> How is this different from the current 'border-image' proposal?
>>>>   
>>>> http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
>>>
>>> Differences are:
>>>
>>> First of all: my proposal does not require new attributes like 
>>> border-image you have mentioned.
>>
>> But it significantly complicates existing properties, so I think that's a
>> non-issue.
> 
> Beg my pardon but what exactly complicates existing properties?
> In any case I believe that complexity is far less than the-border-image.

It's the same feature. 'border-image' uses a new property, your proposal
adds new keywords. 'border-image' is less prone to unexpected changes through
the cascade, it avoids complicating the background properties (which are
already complicated enough in CSS3), and it has a better fallback story for
browsers that don't support the feature.

> Hmm...
> http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
> tells us that border is drawn over the place defined by 'border-width' 
> attribute. As far as I understand middle section of the source image is 
> always stretched to fill padding box. Am I right? If yes then to be 
> practically useful this border image will have transparent middle 
> section. In most cases.
>
>>> Usually such expandable borders and background is really a single 
>>> entity from graphical design perspective so it is better to define 
>>> them as a single image.
>>
>> Right, and that's how border-image works as well.
> 
> Not exactly. In my case middle section can be tiled or stretched.

The middle section isn't always stretched. It is stretched or tiled
depending on the keywords specified in the 'border-image' property.

> These are two basic usages of such background images.
> Last two cases at: 
> http://www.terrainformatica.com/htmlayout/images/image2.png
> 
> I prefer sole and simple mechanism that allows to cover both cases 
> rather than halved solutions.

'border-image' can do both.

>> How is it limiting? What use cases do you have that does it not address?
> 
> background-repeat:expand does not disable any existing style feature 
> available in CSS - it only extends opportunities.
> 
> I've seen cases when borders (like: 1px solid red) were used 
> additionally to the background image. E.g. different colour schemas that 
> use same background with border shadows.

If you're making the shadows with an image on the same element, you can't
use the CSS border properties because they'll draw the border around the
shadow instead of around the virtual box that's being shadowed.

Also, CSS3 has an expanded set of background properties. You can stretch
the background with 'background-size' and then still use the border
properties for your 1px border.

>>> The same thing with the 'round' modifier. To be used practically such 
>>> roundness shall be implemented as a constraint of dimensions of 
>>> border box of the element. In the way it is defined in the 
>>> border-image it is not useful at all.
>>
>> Why is it not useful at all?
> 
> Because it assumes scaling of bitmap image with scale factors close to 
> 1. The worst case designer can imagine.

I think you need to reread the definition. The author can provide a high-res
image: it will be scaled down to fit the border image before it will be
stretched to match the 'round' requirements. In such a case the scaling
factor could vary between 0.3 and 0.31 rather than between 1 and 1.1.

BTW, Andrew, I have a question about the CSS extensions you are implementing.
Are you using a vendor extension as specified in
   http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
?

~fantasai

Received on Sunday, 25 November 2007 16:36:30 UTC