Firefox is releasing support for CSS display: contents

Sam Rueby CSS, Web Development 3 Comments

I’m finding Twitter to be the best aggregate web development news source for me. Sunday I caught wind that Firefox is going to support for  display: contents .

Why? What’s that?

I’ve never heard of  display: contents . Why do we need it? I think MDN is a great, readable resource for CSS documentation, what’s do they have to say about this?

These elements don’t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

Still not sure what that means.

Time to dive into unreadable land. It turns out the CSS3 spec is actually a bit more clear. The current CSS spec says:

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.

Okay, so this reminds of me of the PlaceHolder Control in ASP.NET (a control that does not actually render anything of its own, just outputs the controls it contains).

Have other browsers implemented it?

Help me CanIuse.com!

Chrome window showing caniuse.com with no results for browser support for display: contents.

CanIUse.com has no results on browser support for display: contents

(Yes that’s Windows 10). CanIUse has no results on browser support for  display: contents.

So I made a JsFiddle to try it out.

Which you can try yourself here: http://jsfiddle.net/jyxfo5u2/. When working correctly, you won’t see an orange box. So far, the only browser that seems to support this is Firefox’s Develoment browser. I also tried this in IE11, and Chrome Canary, with no positive results.

Animated screenshot testing the CSS display: contents rule in Firefox's Development browser

Looks like display: contents works in Firefox’s Development browser.

 How this can be useful?

There’s a number of times when I’m creating widgets for sites, I’ll always start with a single <div> to contain all of the elements. By applying   display: contents to the parent, I don’t have to worry about any styles that it is inheriting. This also reduces (not eliminates) the need for a CSS reset file. No border, margin, padding, width or height will apply to this container that I’m using to logically compartmentalize these other components. I can see how this can be useful and reduce some display issues.

  • Pingback: Trainspotting: Firefox 37, Developer Edition and More ✩ Mozilla Hacks – the Web developer blog()

  • b3wii

    Also if you have a custom grid for ex. 2 rows with odd number of colums and you want to display an even grid for mobile then just set the rows to display:contents in media query.

  • Luis Belmonte Díaz

    It is very useful for flexbox. I’m thinking about an angular application where you have a flex container and inside an angular component which root element could have display: contents to overcome the non-inheriting nature of the flex container.