[css-backgrounds] Let border-style apply to border-image

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

[css-backgrounds] Let border-style apply to border-image

Sebastian Zartner-3
Currently the spec. says for border images:

"Authors can specify an image to be used in place of the border
styles. ... The border-image properties do not affect layout: layout
of the box, its content, and surrounding content is based on the
‘border-width’ and ‘border-style’ properties only."

And for border-image-source:

"If the value is ‘none’ or if the image cannot be displayed (or the
property doesn't apply), the border styles will be used; otherwise the
element's ‘border-style’ borders are not drawn and the border image is
drawn as described in the sections below."

This makes the border image be displayed dependent on whether
'border-style' is different to 'none' or 'hidden' and lets it
overwrite the actual style set for 'border-style'.
Though I assume authors would rather expect 'border-style' to affect
the layout of 'border-image' like a mask similar to 'mask-border'
(with the difference that 'border-style' only affects the border image
area.

Example:
.rainbow {
  border-image: linear-gradient(to right, red, yellow, lime, blue, purple) 1;
  border-style: double;
}

This should result in two rainbow-colored parallel solid lines with
some space between them.

The current behavior would be achieved by setting 'border-style' to 'solid'.

I am aware that this change may break the websites, though I'm not
sure how many would be affected. If the breakage is neglectable, could
the behavior of 'border-image' be changed accordingly?

Sebastian

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] Let border-style apply to border-image

L. David Baron
On Wednesday 2016-03-09 08:56 +0100, Sebastian Zartner wrote:
> The current behavior would be achieved by setting 'border-style' to 'solid'.

How would this interact with 'border-image-width',
'border-image-outset', or with 'fill'?

It doesn't seem to me that your statement that the current behavior
(for non-default values of any of the above features) would be
achieved with 'border-style: solid' would be true unless
'border-style: solid' were treated as a magic value that said "do
border images the way they're done today".

It also seems like this proposal adds extra work to what
implementations have to do (in a performance-sensitive area) for
relatively little value to developers.  I think border images were
intended to provide developers with an alternative to the usual
border drawing path; imposing much of that path on them thus also
seems somewhat counter to the design of the feature.

-David

--
𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                          https://www.mozilla.org/   𝄂
             Before I built a wall I'd ask to know
             What I was walling in or walling out,
             And to whom I was like to give offense.
               - Robert Frost, Mending Wall (1914)

signature.asc (836 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] Let border-style apply to border-image

Sebastian Zartner-3
On 9 March 2016 at 09:20, L. David Baron <[hidden email]> wrote:

> On Wednesday 2016-03-09 08:56 +0100, Sebastian Zartner wrote:
>> The current behavior would be achieved by setting 'border-style' to 'solid'.
>
> How would this interact with 'border-image-width',
> 'border-image-outset', or with 'fill'?
>
> It doesn't seem to me that your statement that the current behavior
> (for non-default values of any of the above features) would be
> achieved with 'border-style: solid' would be true unless
> 'border-style: solid' were treated as a magic value that said "do
> border images the way they're done today".

You're right, that's a problem. Didn't think that far.
Treating 'solid' special sounds like a bad idea. Would it be possible
to introduce a new 'border-style' value for this like 'image' and let
it automatically compute to that value when 'border-image-source' is
set to something else than 'none'? This would make it at least a bit
more logical.

> It also seems like this proposal adds extra work to what
> implementations have to do (in a performance-sensitive area) for
> relatively little value to developers.  I think border images were
> intended to provide developers with an alternative to the usual
> border drawing path; imposing much of that path on them thus also
> seems somewhat counter to the design of the feature.

I guess, the main question is, why was border styling designed
differently than background in that way? This inconsistency causes
logical hurdles and constraints.

I mean, the border properties are generally somewhat inconsistent to
the background properties and also in themselves.
E.g. why is it not allowed to set multiple border images? Why is it
not allowed to set a border color and a border image at the same time?
Besides that, why is there an outset property only for border images
but not for all kinds of borders? Why are border images special
treated in regard of other border types?

(Sorry, I know those questions are beyond the scope of this thread,
but I think those are valid questions.)

Sebastian

Reply | Threaded
Open this post in threaded view
|

Re: [css-backgrounds] Let border-style apply to border-image

Amelia Bellamy-Royds

I guess, the main question is, why was border styling designed
differently than background in that way? This inconsistency causes
logical hurdles and constraints.

The main purpose of the border-image properties was not to paint the existing border, but to allow completely different border designs, in any possible shape.  Clipping the image to the border shape would prevent many border-image effects from working.

Border images override the basic border so that you can safely set both, with the regular border as a fallback.  It also means that you can set the border-width that is used for layout separately from the width used to scale the image.


It sounds like what you're really hoping for is to have SVG stroke-style paint options for regularly-shaped borders.

This could be perhaps achieved with a separate property, distinct from border-image, which only overrides border-color and not the other border styles.  However, the border properties are already so complicated, with so many intersecting longhand properties (eg border, border-left, and border-style all set border-left-style), that the syntax would need to be considered very carefully.


Another option is to add a new sub-property to the border-image shorthand, border-image-clip, which could have an option for clipping to the default border outline, or to the border box, or margin-box or padding-box.  (Note that this would be quite different from mask-border, which uses a border-image layout algorithm to create a mask that then masks the entire element, not just the border-image.)  The various border-image properties could also be made into lists, to create stacked border images.


I do agree that it would be nice to be able to intersect CSS-only gradient images with dashed, dotted, and double borders, without having to generate an SVG data URI as the border-image.

~ABR