Information about how to use -webkit-line-clamp independent of -webkit-box-orient, and its future

tannermann commented 7 months ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

What specific section or headline is this issue about?

-webkit-line-clamp

What information was incorrect, unhelpful, or incomplete?

There is no warning about -webkit-line-clamp being deprecated but in order to use it you must also use -webkit-box-orient, which is described as "Non-standard and deprecated". What is the future of -webkit-line-clamp?

What did you expect to see?

Information about the roadmap of -webkit-line-clamp and how it might be used independently of -webkit-box-orient, which is deprecated.

Do you have any supporting links, references, or citations?

Do you have anything more you want to share?

I looked on caniuse.com and it has box-orient listed as usable only with the -moz- prefix but it also seems to work with the -webkit- prefix in Firefox.

https://caniuse.com/?search=box%20orient

MDN metadata

Page report details

* Folder: `en-us/web/css/-webkit-line-clamp` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/-webkit-line-clamp/index.md * Last commit: https://github.com/mdn/content/commit/44cf523714745d626317192bfbe849b47144f3ab * Document last modified: 2023-11-10T13:26:54.000Z

anushatomar13 commented 6 months ago

Hey @tannermann ! I would love to work on this issue. It would be great if you could assign it to me! Thanks!

tannermann commented 6 months ago

Hi @anushatomar13, thanks for showing interest in this issue. I don't think I have permissions in this repo to assign it but maybe you can get the attention of someone who can or just work on a PR that mentions this topic. Cheers 😃

Josh-Cena commented 1 week ago

Here's my understanding:

-webkit-line-clamp is not going anywhere. It's fully specified and will be kept for compatibility. All browsers support it and will support it when line-clamp becomes real.
box-orient is non-standard because it's not in any specification. The feature it was originally intended for is now fully subsumed by flexbox. However, -webkit-line-clamp requires -webkit-box-orient: vertical; display: -webkit-box to work, and there's no way to get rid of this behavior. You can just think of them as "side-effects" of applying -webkit-line-clamp. In fact, the spec for -webkit-line-clamp does say that these two properties must be set in order for -webkit-line-clamp to take effect.
-webkit-box-orient is supported in Firefox. I think caniuse is wrong or at least misleading here, but our own compatibility table at the page bottom shows the right status.
This is always going to be how legacy behavior works: browsers do whatever they want and now the spec tries to find the greatest common denominator that all implementations agree on.

Given all this, what do you think we can add to these pages?

tannermann commented 1 week ago

Given all this, what do you think we can add to these pages?

There is an info blurb on the docs for -webkit-line-clamp:

Note: This property was originally implemented in WebKit and has some issues. It got standardized in CSS Overflow Module Level 4 for legacy support. The CSS Overflow Module Level 4 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.

Perhaps this blurb is enough, specifically the part about "replace this property and avoid its issues." However maybe this info blurb can be expanded to specify that once a proper line-clamp property is standardized it will not be required to pair with the deprecated -webkit-box-orient property, assuming this is true.

Josh-Cena commented 1 week ago

You are right. line-clamp would definitely not have dependency on -webkit-box-orient. The spec for -webkit-line-clamp is just a documentation for what browsers do, with no intention for browsers to change their current behavior.

I think one or two sentences that say:

(a) -webkit-line-clamp require the other legacy properties to work, so you need to add them despite them being deprecated and non-standard
(b) line-clamp does not require any of these legacy stuff

Should suffice.

mdn / content