Digging Into The Show Property: Box Generation

About The Author

Rachel Andrew is not only editor-in-chief of Smashing Publication, however also a web designer, author and speaker. She is the author of a variety of books, consisting of …
More about Rachel

Continuing a series on the screen residential or commercial property in CSS, this time Rachel Andrew has a look at the values which control box generation, for those times when you don’t wish to create a box at all.


This is the second in a brief series of short articles about the screen residential or commercial property in CSS. You can read the preliminary article in the series at “ The Two Worths Of Show“. The display requirements is a very beneficial specification to comprehend as it underpins all of the different layout methods we have.

While much of the worths of display screen have their own spec, many terms and ideas are detailed in display This indicates that comprehending this requirements assists you to understand the specs which essentially information the worths of display screen In this article, I am going to take a look at package generation worths of screen none and contents

Everything Is A Box

In CSS whatever generates boxes. A website is essentially a set of block and inline boxes, something you get to comprehend extremely well if you open up DevTools in your preferred web browser and start choosing aspects on the page. You can see the boxes that make up the layout, and how their margins, padding and borders are used.

An image of a simple layout with an unordered list highlighted in browser DevTools
I have actually highlighted the ul aspect utilizing Firefox DevTools so I can examine the different parts of package. ( Big preview)

Controlling Box Generation

The none and contents values of screen handle whether boxes must appear at all. If you have components in your markup and don’t want them to generate a box in CSS then you require to somehow reduce generation of the box. There are 2 possible things you might want to do. Which are:

  • Avoid generation of a box and all of its children.
  • Prevent generation of a box however still show the children.

We can have a look at each of these scenarios in turn.

display: none

The none value of display screen is how we avoid the generation of a box and all the children of that box. It acts as if the aspect was not there at all. For that reason, it is useful in situations where you intend to totally hide that content, perhaps since it will be exposed later after activating a link.

If I have an example with a paragraph, an unordered list, and another paragraph you can see that the products are displaying in normal circulation. The ul has a background and border used, plus some cushioning.

See the Pen < a href ="[https://codepen.io/rachelandrew/pen/XQGagV/](https://codepen.io/rachelandrew/pen/XQGagV)" > Box Generation example by Rachel Andrew

See on Codepen

If I add display: none to the ul it vanishes from the visual display, taking with it the children of the ul plus the background and border.

See the Pen< a href="[https://codepen.io/rachelandrew/pen/VNRzzg/](https://codepen.io/rachelandrew/pen/VNRzzg)" > Box Generation example display screen: none by Rachel Andrew

See on Codepen

If you use display: none it conceals the content from all users of the website. This includes screen reader users. For that reason, you must just utilize this if your intent is that the box and everything inside it is completely hidden to everybody.

There are scenarios where you might wish to add additional info for users of assistive technology like screen readers however hide it for other users; in such cases, you need to utilize a different method. Some outstanding recommendations are made by Scott O ‘Hara in his short article “ Inclusively Covert“.

Utilizing display screen: none is for that reason quite simple. Use it in a circumstance where you want a box and contents to vanish from the display screen, from the box tree, and from the ease of access tree (as if it were never there in the first location).

display: contents

For the second scenario, we need to take a look at a much newer value of display screen. The worth screen: contents will remove the box it is applied to from the box tree in the very same way that display: none does, however leave the kids in location. This causes some helpful behavior in terms of things we can then carry out in our designs. Let’s take a look at an easy example and then check out further.

I am utilizing the very same example as previously, but this time I have actually utilized display: contents on the ul The list items are now noticeable, nevertheless, they have no background and borders and are acting as if you have included li components to the page with no confining ul

See the Pen < a href ="[https://codepen.io/rachelandrew/pen/JVzyra/](https://codepen.io/rachelandrew/pen/JVzyra)" > Box Generation example display: contents by Rachel Andrew

See on Codepen

The reason that removing a box and keeping the children is beneficial is because of the manner in which other values of display behave. When we alter the value of display we do so on a box and the direct children of that box, as I described in the last post. If I include display: flexto the CSS guidelines for an aspect, that aspect ends up being a block-level box, and the direct children become flex items. The kids of those flex items return to typical circulation (they are not part of the flex design).

You can see this habits in the next example. Here I have a consisting of aspect set to display flex, it has four direct kids, three div components and a ul The ul has 2 list items. The direct kids all participate in the flex design and lay out as flex items. The list products are not direct kids therefore display as list items inside package of the ul

See the Pen < a href ="[https://codepen.io/rachelandrew/pen/yrwovX/]( https://codepen.io/rachelandrew/pen/yrwovX) "> Box Generation flexbox and display: contents 1 by Rachel Andrew

See on Codepen

If we take this example and add display: contentsto the ul, the box is eliminated from the visual screen and now the kids participate in the flex design. You can see that they do not end up being direct kids. They are not picked by the direct child universal selector(. wrapper > *) in the manner in which the div and ul elements are, and they maintain the background provided to them. All that has actually occurred is that package of the consisting of ul has actually been eliminated, everything else continues as typical.

See the Pen < a href ="[https://codepen.io/rachelandrew/pen/JVzypm/]( https://codepen.io/rachelandrew/pen/JVzypm) "> Box Generation flexbox and display: contents 2 by Rachel Andrew

See on Codepen

This has possibly really useful implications if we consider components in HTML which are very important for accessibility and semantic information, however which create an additional box that might prevent us from laying the content out with flex or grid layout.

This Is Not A CSS “Reset”

You might have discovered how one side effect of using display screen: contents is that the margin and padding on the component are removed. This is since they relate to the box, part of the CSS Box Model. This may cause you believe that display screen: contents is an excellent way to rapidly rid yourself of the cushioning and margin on an element.

This is an use that Adrian Roselli has actually found in the wild; he was concerned enough to write an in-depth post discussing the issues of doing so– “ screen: contents is not a CSS reset” A few of the issues he raises are due to an unfortunate accessibility issue in internet browsers presently with screen: contents which we will talk about listed below. Nevertheless, even once those problems are dealt with, getting rid of a component from the box tree merely to rid yourself of the margin and cushioning is rather severe.

If nothing else, it would be troublesome for the future upkeep of the website, a future developer may wonder why they didn’t seem to be able to use anything to this mystical box– missing the truth it had been eliminated! If you need margin and cushioning to be 0, do your future self a favor and set them to 0 in a time-honored way. Reserve usage of screen: contents for those diplomatic immunities where you truly do desire to eliminate the box.

It is also worth noting the difference between display: contents and CSS Grid Design subgrid. Where screen: contents entirely removes package, background, and border from the screen, making a grid item a subgrid would maintain any box styling on that item, and simply go through the track sizing so that embedded items could use the very same grid. Learn more in my article, “ CSS Grid Level 2: Here Comes Subgrid

Accessibility Problems And display screen: contents

A severe concern currently makes display: contents not useful for the very thing it would be most beneficial for. The apparent cases for display: contents are those cases where extra boxes are required to include markup that makes your material more easily comprehended by those utilizing screen readers or other assistive gadgets.

The ul component of our list in the first screen: contents CodePen is an ideal example. You might get the very same visual result by flattening out the markup and not utilizing a list at all. Nevertheless, if the material was semantically a list, would be best comprehended and read out by a screen reader as a list, it should be marked up as one.

If you then desire the kid components to be part of a flex or grid layout, just as if the box of the ul was not there, you must be able to utilize display screen: contents to magic away package and make it so– yet leave the semantics in place. The spec says that this ought to be the case,

” The screen property has no result on a component’s semantics: these are specified by the document language and are not impacted by CSS. Aside from the none value, which likewise impacts the aural/speech output and interactivity of an element and its descendants, the screen residential or commercial property only impacts visual layout: its purpose is to enable designers flexibility to change the design behavior of an aspect without impacting the underlying file semantics.”

As we have currently discussed, the none worth does hide the element from screen readers, however, other values of display are simply there to permit us to change how things show visually They should not touch the semantics of the document.

For this reason, it took a number of us by surprise to recognize that screen: contents was, in reality, eliminating the element from the ease of access tree in the 2 internet browsers (Chrome and Firefox) that had actually implemented it. For that reason changing the file semantics, making it so that a screen reader did not know that a list was a list once the ul had actually been removed utilizing display screen: contents This is a web browser bug– and a severe one at that.

Last year, Hidde de Vries wrote this problem in his post “ More Accessible Markup with display screen: contents” and helpfully raised concerns against the various web browsers in order to raise awareness and get them to deal with a repair. Firefox have actually partly fixed the problem, although concerns still exist with certain elements such as button The problem is being actively worked on in Chrome There is likewise a concern for WebKit I ‘d motivate you to star these bugs if you have use cases for screen: contents that would be impacted by the problems.

Up until these concerns are fixed, and the web browser versions which showed the issue fall out of use, you require to be really cautious when utilizing display: contents on anything which conveys semantic info and needs to be exposed to assistive innovation. As Adrian Roselli states,

” In the meantime, please only utilize display screen: contents if you are going to test with assistive technology and can confirm the outcomes work for users.”

There are places where you can safely use display screen: contents without this concern. One would be if you require to add additional markup to develop alternatives for your grid of flex layouts in older internet browsers. Internet browsers which support screen: contents likewise support grid and flexbox, for that reason you could screen: contents away the redundant div components added. In the example below, I have created a float based grid, total with row wrappers.

I then use display screen: contents to eliminate the row wrappers to enable all of the products to end up being grid products and therefore have the ability to belong to the grid design. This could give you an additional tool when creating fallbacks for innovative layouts in that if you do require to add additional markup, you can remove it with display: contents when doing your grid or flex layout. I don’t believe this usage ought to cause any concerns– although if anybody has better ease of access information than me and can point out a problem, please do that in the remarks.

See the Pen < a href ="[https://codepen.io/rachelandrew/pen/PgLJPb/]( https://codepen.io/rachelandrew/pen/PgLJPb)" > Removing row wrappers with display screen: contents by Rachel Andrew

See on Codepen

Finishing Up

This article has actually taken an appearance into the box generation worths of the screen property. I hope you now comprehend the various habits of display: none— which gets rid of a box and all kids completely, and display: contents which removes simply package itself. You likewise should comprehend the prospective problems of utilizing these techniques where ease of access is worried.

Smashing Editorial
( il)

Find Out More

Leave a Reply

Your email address will not be published.