Re: [csswg-drafts] [css-backgrounds-4] Borders with cut corners (#3457)

The CSS Working Group just discussed `corner-shape use cases`, and agreed to the following:

* `RESOLVED: Add Florian as editor of css-text-4`
* `RESOLVED: drop the less useful values, and rename as proposed in the issue`

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> Topic: corner-shape use cases<br>
&lt;argyle> 🎉<br>
&lt;astearns> github: https://github.com/w3c/csswg-drafts/issues/3457<br>
&lt;fantasai> https://drafts.csswg.org/css-backgrounds-4/#corner-shaping<br>
&lt;fantasai> &lt;br type=5min><br>
&lt;fantasai> RESOLVED: Add Florian as editor of css-text-4<br>
&lt;fremy> ScribeNick: fremy<br>
&lt;fremy> una: corner-shape is something that google uses in the material design system<br>
&lt;fremy> una: it works on ios and android<br>
&lt;fremy> una: but not on the web<br>
&lt;fremy> una: I tried to write this in houdini<br>
&lt;fremy> una: but it's not super straightforward because you need a background, a mask, etc...<br>
&lt;fremy> una: but since this feature is very common, I don't think the custom approach is very practical<br>
&lt;myles_> q+<br>
&lt;fremy> una: so I'd like to revisit the spec to reintroduce the corner-shape<br>
&lt;fremy> una: for instance, angled and rounds border are very important<br>
&lt;fremy> jensimmons: can somebody summarize what we have done in the past?<br>
&lt;fremy> leaverou: sure<br>
&lt;leaverou> https://drafts.csswg.org/css-backgrounds-4/#corner-shaping<br>
&lt;fremy> leaverou: what we have right now (pasted linke)<br>
&lt;fremy> leaverou: one of the reason this hasn't moved much is that it's trying to do too much and is scaring away implementers<br>
&lt;fremy> leaverou: and it turns out everytime people ask me about this, people want angled corners<br>
&lt;fremy> leaverou: so I think we could remove a lot of the complexity and keep most of the use cases<br>
&lt;una> https://material.io/design/shape/about-shape.html#shape-customization-tool<br>
&lt;fremy> una: (showing a couple of buttons, and some options like angle, distance, rounding...)<br>
&lt;bkardell_> q+<br>
&lt;fremy> una: now we have to implement with custom shapes, but that would be better as part of css,  because we could reuse colors and not have to define the masking<br>
&lt;fremy> rachelandrew____: I concur a lot of people want this<br>
&lt;fremy> rachelandrew____: and asked me for it<br>
&lt;fremy> (we are talking about angled borders)<br>
&lt;fremy> AmeliaBR: the border should follow the shape<br>
&lt;jensimmons> q?<br>
&lt;fremy> myles_: what is the specific proposal?<br>
&lt;AmeliaBR> `corner-shape: round | angle`<br>
&lt;fremy> una: what is in the draft minus scoop and notch, and rename angle and bevel<br>
&lt;astearns> ack myles_<br>
&lt;fremy> myles_: so the proposal is to drop values?<br>
&lt;fremy> una: and rename one<br>
&lt;fremy> dbaron: two comments<br>
&lt;fremy> dbaron: one is that one of the difficult thing about adding things to the webplatform is that we have to articulate how these new things have to work with all the other things in this area of the platform<br>
&lt;fremy> dbaron: and it so happens that borders are one of the areas where we already have a lot of undefined corner cases<br>
&lt;fremy> dbaron: maybe the spec is better now, but we are not very interoperable now<br>
&lt;fremy> leaverou: didn't fantasai do a lot of work on this already?<br>
&lt;fremy> fantasai: yes, the cases we would introduce here are similar to the things we had to define for rounded corners<br>
&lt;fremy> fantasai: so globally I don't think this would be too undefined<br>
&lt;leaverou> q?<br>
&lt;leaverou> q+<br>
&lt;AmeliaBR> For rendering, this affects: drawing borders (dot/dash spacing, color or width changes at corners), clipping backgrounds, replaced content like images, and child content (if overflow is hidden), box shadow shape, hit testing.<br>
&lt;fremy> dbaron: but even then, there are so many weird things about borders, and each of these weird features have their own code paths<br>
&lt;fremy> dbaron: and even special codepaths for specific combinations<br>
&lt;fremy> dbaron: and I'm concerned about it<br>
&lt;astearns> ack dbaron<br>
&lt;fremy> astearns: for instance shape-outside, etc<br>
&lt;fremy> dbaron: and clip for instance<br>
&lt;fremy> fantasai: I think this would be manageable<br>
&lt;fremy> dbaron: an example I would want to mention is one time where we spent 30% of the time in rendering gmail in drawing border<br>
&lt;fremy> dbaron: and that is because border has a lot of cases, and all of them have to be fast<br>
&lt;fremy> myles: sure, but we are trying to drop values, so this is better now, right?<br>
&lt;astearns> ack bkardell_<br>
&lt;fremy> dbaron: well there was also encouragement to implement, right?<br>
&lt;fremy> myles: sure, encouragement received, but we could discuss the proposal<br>
&lt;fremy> bkardell_: you mentioned that houdini was difficult to use?<br>
&lt;fremy> bkardell_: could we have done anything better to make this easier, or is the problem just hard in general?<br>
&lt;dbaron> Example 1 in https://drafts.csswg.org/css-backgrounds-4/#the-border-color looks hard to do in reality...<br>
&lt;fremy> bkardell_: (asking because this has been around for a very long time, and didn't get traction, so it might never happen)<br>
&lt;fremy> una: I think the main reason I want to standardize is that this is very common<br>
&lt;fantasai> dbaron, that's not even what we're discussing, though<br>
&lt;fantasai> una: Houdini is for unique cases<br>
&lt;AmeliaBR> That's a separate issue, dbaron!<br>
&lt;fremy> una: houdini is great for custom things, but it's complex here, and this problem is common, so I think this should be a default provided feature<br>
&lt;fantasai> una: to get this right I have to mask the corners<br>
&lt;fremy> una: having to define both a background, a border, a mask, so in the end it's very heavy on the usage side<br>
&lt;fremy> una: in the end it works, but it's not great<br>
&lt;dbaron> I think it's not a separate issue, because we're talking about dropping two of the four values from a feature that was optimistically put in the spec without clear implementor interest<br>
&lt;fremy> iank_: also, you can't easily incorporate the clipping effect of the border-radius in various other properties, painting is just part of the story<br>
&lt;fantasai> iank: also need to handle hit-testing<br>
&lt;fremy> florian: note that the outline should follow corner-shape but no browser does<br>
&lt;astearns> ack leaverou<br>
&lt;fantasai> s/does/does, except sometimes for auto/<br>
&lt;fremy> bkardell_: but border does, so people sometimes use borders for outlines because they are so powerful<br>
&lt;fremy> leaverou: an interesting thing I was wondering is that maybe we could use border-radius to define the radius to have a nice fallback?<br>
&lt;AmeliaBR> s/note that/the spec notes that/<br>
&lt;fremy> fantasai: yes, but it's a worse name, and we can already use @supports<br>
&lt;fremy> leaverou: ah, true, then I guess we prefer to stick with the best name<br>
&lt;fremy> astearns: anything else on this topic?<br>
&lt;fremy> fantasai: we need a resolution to drop the two values<br>
&lt;fremy> astearns: yes, and I think it's a good idea<br>
&lt;AmeliaBR> s/we could use/we could use a new better name for/<br>
&lt;AmeliaBR> s/a nice fallback/fallback to sharp corners instead of to rounded corners/<br>
&lt;fremy> astearns: I however I want to point out that the border-radius took so long to implement that by the time it shipped people moved to other designs<br>
&lt;tantek> una: border radius is everywhere today<br>
&lt;fremy> astearns: so do we know that material design is not going to switch to another type of border by the time we ship?<br>
&lt;fremy> una: people still use border-radius a lot though<br>
&lt;fremy> fantasai: also, there are a lot of other cases where we need special shapes and polygons<br>
&lt;fremy> AmeliaBR: for instance parallelograms are useful, and difficult to make in css<br>
&lt;tantek> clip-path solves the BSG use-case: https://css-tricks.com/notched-boxes/<br>
&lt;fremy> astearns: ok, let's move to the resolution, does anyone object to that?<br>
&lt;fremy> RESOLVED: drop the less useful values, and rename as proposed in the issue<br>
&lt;fremy> astearns: anything else on this topic?<br>
&lt;fremy> una: no, thanks<br>
&lt;fremy> (discussion about implementer interest)<br>
&lt;fremy> iank_: that's a lot of work, and we didn't see enough use cases yet to change our prioritization, but we would be happy to adjust based on more data<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3457#issuecomment-499217243 using your GitHub account

Received on Wednesday, 5 June 2019 19:13:43 UTC