← Back to release summary

-webkit-box quirks from -webkit-line-clamp

Category
CSS
Type
New or changed feature
Status
Deprecated (Chrome 85)
Intent stage
Removed

Summary

The following display properties will no longer work when -webkit-box and -webkit-box-clamp are combined: -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-align, -webkit-box-pack, -webkit-box-direction.

Motivation

Internally this is implemented a LayoutDeprecatedFlexibleBox. In M80 we transparently mapped the "flex usecase" of -webkit-box over to LayoutFlexibleBox. E.g. anything except for: .line-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } Is mapped over to flexbox implementation. We left the "line-clamp usecase" in LayoutDeprecatedFlexibleBox. This has suprising behaviour for web developers. 1) Other -webkit-box properties are supported, e.g: -webkit-box-flex -webkit-box-ordinal-group -webkit-box-align: -webkit-box-pack: -webkit-box-direction: We would stop these properties from having any affect in the "line-clamp usecase". NOTE these would still work for the "flex fallback" usecase. All these properties are below 0.0001% for M81 Beta. We would ship this removal first, as we believe that all these are extremely low (Google employees I can share internal UMA data) that these are all safe for removal. I've checked sites where they are using these properties with the "line-clamp usecase" and most have no effect. 2) As the "line-clamp usecase" was handled by a "flex" container, line-clamp was applied separately to all children, e.g. https://twitter.com/jaffathecake/status/1235869840226881536 https://jsbin.com/yerobes/edit?html,output In the above case web-developers expect that the line-clamp applies to the formatting context: https://twitter.com/bfgeek/status/1235982961331191813

Standards & signals

Docs: N/A

Explainers: N/A

View on chromestatus.com