Ian Kilpatrick - March 2020
display: -webkit-box
was initially created in WebKit as a precursor to display: flex
. It is very similar to flexbox such that it is used as a fallback for browsers which don't support flexbox. E.g.
.parent {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
}
.child {
-webkit-box-ordinal: 2;
order: 2;
-webkit-box-flex: 3;
flex: 3;
}
There exists a relatively simply mapping between -webkit-box
and flex
which most browsers that support flexbox implement.
We'll refer to this as the "flexbox usecase".
However the primary usecase for -webkit-box
on the web today is to perform line-clamping. E.g.
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical; /* required otherwise line-clamping won't occur. */
-webkit-line-clamp: 3;
overflow: hidden; /* -webkit-box doesn't actually remove any lines, we need to hide them */
}
We'll call this the "lineclamp usecase". See: https://css-tricks.com/almanac/properties/l/line-clamp/ for a web developer use for this feature.
These two usecases don't overlap. E.g. it is extremely rare to see:
<div class="line-clamp-3">
<div class="child"></div> <!-- from above rule this will "stretch" -->
</div>
Most of the time using the flexbox properties with the lineclamping behaviour will result in broken, and buggy layouts.
The first change will be to ignore -webkit-box
properties from affecting the "lineclamp usecase". E.g.
.new-line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-box-direction: reverse; /* ignored */
}
.new-child {
-webkit-box-flex: 3; /* ignored */
}
The properties which will be ignored are:
-webkit-box-flex
-webkit-box-ordinal-group
-webkit-box-align
-webkit-box-pack
-webkit-box-direction
These properties will still work for the "flexbox usecase". As mentioned before using these properties with the "lineclamp usecase" typically don't work, or result in a buggy layout.
The second change is for the "lineclamp usecase" to establish a "block" box. E.g.
.new-line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
Any element which has the above properties set in that combination will establish a new "block" formatting context.
Practically speaking this means that line clamping will occur across all children, rather than individually. The former behaviour is typically suprising to web developers, e.g. https://jsbin.com/yerobes/edit?html,css,output
It'll also mean that "block" layout will occur, e.g. margin-collapsing will occur between children, etc.