How can we improve the Microsoft Edge developer experience?

Implement the box generation keywords from CSS Display Level 3

When using layout modes like flexbox and grid, there is a conflict between the desire to keep the DOM tree relatively flat, to avoid complex, unperformant, highly-nested layouts, and grouping elements in a way that makes sense semantically and allows easy manipulation via data-binding frameworks like Angular.

This conflict can be solved by supporting the "display: contents" box-generation mode from CSS Display Module Level 3. This allows elements to be configured to generate no box of their own, only those of their children. In this way, complex, nested DOM structures can generate much simpler box trees.

259 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Jon RimmerJon Rimmer shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    3 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Ilya StreltsynIlya Streltsyn commented  ·   ·  Flag as inappropriate

        display:contents has been supported unprefixed in Firefox and is currently in development in Chrome (https://bugs.chromium.org/p/chromium/issues/detail?id=657748). It is also very useful in implementing slots feature from Shadow DOM v.1 spec. And it's very useful for placing elements from different containers into the common grid using CSS Grid Layout (it's already possible in Firefox Nightly/Alpha and likely will soon be possible in Chrome). Is implementing it so hard?

      • Anonymous commented  ·   ·  Flag as inappropriate

        I deeply agree that display:content will be extremely useful, especially in conjunction with modern layout schemes like Flexbox or Grid layout that make the placement of the element virtually independent from source order but work only with direct children of the container. With display:contents, we would be able to use these layout models for nearly any markup, without having to trade its semantic for purely presentational needs. Moreover, it has been supported by Firefox for about a year or more, so it shouldn't be too difficuilt to implement it. And when there are two shipped implementations, the W3C could finalize the spec and other vendors will eventually have to implement it.

      Feedback and Knowledge Base