Re: [csswg-drafts] [css-overflow-4] How do `-webkit-line-clamp` and `line-clamp` interact when both are specified? (#10439)

> Since `line-clamp` and `-webkit-line-clamp` are shorthands for the same set of properties, `-webkit-line-clamp` will win. This means that `max-lines` will have a specified value of `4`, but also that `continue` will have a specified value of `-webkit-discard` – which will cause the `continue` property (and by extension, `max-lines`) to not take effect, because `display` is not set to `-webkit-box`.

That doesn't bother me: there really isn't a point in going around setting `-webkit-line-clamp` on elements which do not have the `-webkit-box` and `-webkit-box-orient` preconditions. And since https://github.com/w3c/csswg-drafts/issues/10324#issuecomment-2163099053, the unprefixed `line-clamp` also blockifies `-webkit-box` when `-webkit-box-orient` is there too, so there's no need to do it manually. In other words, for a new site that's not trying to activate legacy browsers, there's no reason to have `-webkit-line-clamp` at all, and for a site that wants to target old and new browsers, there should be `-webkit-line-clamp` as well as `-webkit-box` and `-webkit-box-orient`.

> My current implementation of `continue: collapse` in Blink (see #7708) implements both `line-clamp` and `-webkit-line-clamp` as longhands which don't alias. If both are present (and not specified to `none`) on some box, `line-clamp` wins. 

I think it's more typical for CSS to have the cascade order determine the winner.

> If we want to keep the shorthands, while making the code above actually work, my understanding is that `-webkit-line-clamp` would have to be specified such that it sets the longhands if `display: -webkit-box` and `-webkit-box-orient: vertical` are set, and to not be a shorthand for anything otherwise.

You could do that, but conditional shorthands seem unusual. Might be tricky to implement.

I think the following alternative would work, without the full set of longhands:

You could have some simplified version of the longhands, not exposed to web authors. One would have to be `continue: auto | discard | -webkit-discard`, but the other could be a simplified combination of `max-lines` and `block-ellipsis`, which basically means having the same value space as `line-clamp`.

cc: @fantasai 

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10439#issuecomment-2320722402 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 30 August 2024 10:01:02 UTC