Email or username:

Password:

Forgot your password?
Andreu Botella :verified_enby:'s posts Post Back to profile
Andreu Botella :verified_enby:

Hey! CSS developers! I want to hear from you.

I'm improving the way line clamping works in Chrome and in the specs. The existing -webkit-line-clamp property is a mess, because it will only do something if you have other properties (which are legacy versions of flexbox properties), and we can't fix that because of web compat. But we can add a new line-clamp property without those issues!

But right now I'm dealing with what should happen if you have both properties set on the same element:

display: block;
line-clamp: 3;
-webkit-line-clamp: 4;

(Note that if we remove line-clamp: 3, this wouldn't clamp, because display: block prevents -webkit-line-clamp from working.)

So what do you think should happen?

#css #CSSWG

Anonymous poll

Poll

Clamps to 3 lines
35
85.4%
Clamps to 4 lines
4
9.8%
Doesn't clamp
2
4.9%
41 people voted.
Voting ended 30 October at 8:09.
23 October at 8:08 | Open on mastodon.andreubotella.com
10 comments
Mayank

@andreu seems to me like the old one should be completely ignored if the new one is present (regardless of order of appearance)

i believe that's how it works for standard scrollbar styling vs the older -webkit prefixed selectors; i use this example because it's closer to line-clamp than other prefixed properties in terms of behavioral difference

23 October at 8:14 | Open on front-end.social
Andreu Botella :verified_enby:

@mayank Huh, that is an interesting precedent that I didn't know about! But it's also a very different thing, because legacy selectors work very differently from the standard version.

23 October at 8:19 | Open on mastodon.andreubotella.com
Mayank

@andreu yeah, maybe not the best example. i don't think it's useful to compare with simpler prefixed properties though; i assume the new line-clamp will be significantly different from the old one.

another point of comparison could be logical properties, which cascade separately from physical properties, and the final resolution depends on a (re)cascade between the two. but this one is also maybe not a fair comparison, because logical:physical is almost 1:1. i guess line-clamp is kind of unique

23 October at 8:24 | Open on front-end.social
Andreu Botella :verified_enby:

With other -webkit prefixes, if you have something like

transform: scale(2);
-webkit-transform: scale(0.5);

the one that is higher in the cascade order (which for properties in the same declaration is the one that appears later) wins.

But as far as I can tell, none of those other prefixes properties have a behavior difference like with line-clamp, where the prefixed version has a dependence on other properties that isn't there in the unprefixed version.

23 October at 8:15 | Open on mastodon.andreubotella.com
O Óscar

@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.

```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here

```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.

```
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 3;
```
Clamps to 3 lines because the unprefixed version wins.

@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.

```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here

```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.

23 October at 9:18 | Open on mastodon.gal
Vadim Makeev

@andreu I know most people vote for the “clamp 3 lines” option, but it’s the basic principle of CSS cascade we’re about to break here. I’d rather rename the property than introduce this special case. Have you considered renaming it to something else since it’s more of a new property than the unprefixed version of an old one?

23 October at 16:26 | Open on mastodon.social
Alfonso Martínez de Lizarrondo

@pepelsbey
I don't think the name is the isssue, because if it's called "pretty-please" then question would be about what to do with

display: block;
pretty-please: 3;
-webkit-line-clamp: 4;

@andreu

23 October at 17:31 | Open on mastodon.social
Fogrew :verified: 🖖🏽

@andreu I voted for 3 because you just explained that the prefixed version will work only with the old flexbox properties. This voting looks more like a test for IQ than a test of our CSS knowledge unfortunately. And of course we all are smart, ya 😂

29 October at 5:30 | Open on c.im
Andreu Botella :verified_enby:

@fogrew Hah, if only that was true. line-clamp and -webkit-line-clamp are proposed to be defined as shorthands, which means their interaction when both are present is complicated. See github.com/w3c/csswg-drafts/is

29 October at 6:16 | Open on mastodon.andreubotella.com
Fogrew :verified: 🖖🏽

@andreu I meant that voting results probably will not answer your question if it was like "what people will intuitively choose?"

29 October at 6:23 | Open on c.im
Go Up