Blink -webkit-box changes.md

Blink -webkit-box changes

Ian Kilpatrick - March 2020

Introduction

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.

Change, ignoring -webkit-box properties

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.

Change, establishing a "block" box instead of a "-webkit-box" box

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

Old behaviour:

New behaviour:

It'll also mean that "block" layout will occur, e.g. margin-collapsing will occur between children, etc.