display: run-in dropped in Chrome?

Question

I have tried to use display: run-in in order to create a semantic and nice-looking metadata name-value list, liks this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
  font-weight: bold;
  display: run-in;
}
dt:after {
  content: ": "
}
</style>
</head>

<body>

  <dl>
    <dt>Subject</dt>
    <dd>A Question</dd>
    <dt>From</dt>
    <dd>Mr Smith</dd>
    <dt>Time</dt>
    <dd>2013-08-05</dd>
  </dl>


</body>
</html>

The expected result is

Subject: A Question
From: Mr Smith
Time: 2013-08-05

You can watch it live. (Actually, the idea to use display: run-in was given to me by Ian Hickson, after I started nagging about the di element from XHTML 2.0. One alternative is to use float, but that comes with a number of difficulties.)

Until recently, this worked wonderfully in every modern browser except Firefox (that is, it worked perfectly in Internet Explorer, Google Chrome, Opera, and Safari (I think)). But very recently I discovered that it doesn't work in Google Chrome anymore.

Question: Has Google Chrome dropped support for display: run-in? Is there an alternative that works the same way?

score 3 · Accepted Answer · answered Feb 28 '14 at 00:50

I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved.

Hixie has been consistently opposed to <di> and I kind of understand why. HTML is a semantic language and the semantics are fully defined by dl/dt/dd. The only practical problems are presentational, and that makes it a CSS problem, not an HTML one.

Unfortunately, then current state of CSS doesn't seem up to the job. For dl/dt/dd, and for many similar problems, we really need a mechanism for wrapping groups of elements in a pseudo element which could then perform the role of the <di>.

Obviously, there is no current setting that does what display:run-in is supposed to do. Having said that, in your specific test case, you could achieve the same effect with this CSS:

dt {
  font-weight: bold;
  display: inline;
}
dt:after {
  content: ": ";
}
dd {
  display: inline;
  margin:0;
}
dd:after {
  content:'\0A';
  white-space:pre;
}

Thank you for your answer. I too agree with Hixie, but still the lack of proper CSS mechanisms makes one somewhat tempted to think about `di`s. In fact, I tried the exact same CSS above a few months ago, but IIRC I found a few subtle issues with this approach (like with the `float` approach), so when I learned about `run-in` I thought that I could start using that in the near future (as soon as FF would implement it). But now I guess that will never happen. So it's either `float` or `\0A`. Currently I use `float`, but I might change to `\0A`. — Andreas Rejbrand, Feb 28 '14 at 10:03
By the way, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display) says that Google Chrome dropped support for `run-in` in version 32. — Andreas Rejbrand, Feb 28 '14 at 10:04

score 0 · Answer 2 · answered Sep 19 '17 at 11:31

I'd like to offer a different, more explicit approach to the solution. One that can be extended to a more general case of missing display:run-in behavior. I.e. I'm using h4->p flow-in transition to compose a nicely formatted list of item properties:

h4 {
    font-weight: bold;
    display: inline;
}
h4::after {
    content: ": ";
}
h4 + p {
    display: inline;
}
h4 + p::after {
    content: '\0A';
    display: block;
}

Here, I'm using "immediate sibling" (+) CSS selector to select p elements immediately preceded by h4 elements. If h4 is followed by any other element, it will be displayed following the normal flow.

An alternate selector ~ will select not one but all elements of the said type, which is not what usually expected from run-in behavior, and will also extend to all tags of the same type in current scope regardless of the other intermixed tags, which could break the layout completely.

display: run-in dropped in Chrome?

2 Answers2

Linked