w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 672 forks source link

[css-backgrounds-4][css-borders-4] Should initial value of border-color be sensitive to border-area? #10907

Open fantasai opened 2 months ago

fantasai commented 2 months ago

The initial value of border-color is currentColor, which matches the text.

We recently added a border-area value to background-clip which allows authors to create interesting image borders. They almost always need to set border-color: transparent together with this value.

Should we make the initial value of border-color automatically compute to transparent when border-area is present in background-clip?

Loirooriol commented 2 months ago

I think having to specify transparent is fine. I wouldn't expect a background to affect a border.

jsnkuhn commented 2 months ago

I kind of like this idea to make background-clip: border-area; easier to work with but since text doesn't similarly automatically change the color to transparent when used there would be an inconsistency.

jsnkuhn commented 2 months ago

also occurs to me that if you are wanting to put a translucent color overly on just the border-area like folks currently do with background images, using the border-color: rgb(0 0 0 / .2); for this would be easier than adding an extra background-image with border-area

jsnkuhn commented 2 months ago

another possibility for wanting to use border-color with border-area is a having a default solid border color and then a change to transparent on hover to show a border-area gradient/image beneath it. This would again be less of a hassle than using 2 border-area layers for the 2 "borders".

jsnkuhn commented 2 months ago

FYI, the other property reset i've used every time with border-area is background-origin: border-box;. Considering resetting border-box as an initial background-origin value might be of use as well since im my experience most devs are not familiar with that property.

https://codepen.io/jsnkuhn/pen/eYwoGgr?editors=1100 https://codepen.io/jsnkuhn/pen/LYKXGPo https://codepen.io/jsnkuhn/pen/WNqaeOV https://codepen.io/jsnkuhn/pen/OJeoapM

fantasai commented 2 weeks ago

@jsnkuhn Thanks for the input! I pulled your last comment into a separate issue: https://github.com/w3c/csswg-drafts/issues/11167

Just to be clear, the idea in this issue is just to change the initial value -- if you set a color explicitly, we'd of course honor it.

jensimmons commented 2 weeks ago

This is a good idea.

tabatkins commented 2 weeks ago

I'm weakly against this; I agree with @Loirooriol that I wouldn't expect 'background' to effect 'border', and with @jsnkuhn that we don't do a similar thing with 'text' and 'color' either, so it would be odd to do it just for this case. It also would feel weird that border styles which do show the background underneath them, like dashed or dotted, would also become invisible unless you remembered to manually set the color.

The saved effort also seems absolutely minimal. In order to set up a border area, you already have to set both the border width and the border style (since the initial value of 'border-style' is 'none', which suppresses the border entirely), so you're probably using the 'border' shorthand anyway. Setting the color to transparent at the same time is no effort, just border: 5px solid transparent; vs border: 5px solid;.

jsnkuhn commented 2 weeks ago

Changing to initial color: transparent; makes more sense with the background-clip: border-area text; value as you'd have to reset both the font color and the border color anyway. But for text we don't have a way to just reset "font-color" alone so there would be the unintended consequence of affecting the default border color if it were even possible to go back and change this at this point.