Is a legend element a grid item if a fieldset's display is grid?

user_217867 0
Viewed 814

What section of the css-grid specification addresses how a legend element should be handled if a fieldset element is set to display:grid?

As you know, a legend element is typically the first child of a fieldset element, yet rarely would anyone want it to be treated as a grid item.

I'm wondering if I need to take explicit styling-precautions to ensure that a legend element will NOT be treated as a grid item, or if the specification already has some rule (I'm overlooking) that means a legend element (by spec) is not a grid item.

css-grid css html
2 Answers

This has changed; fieldset rendering has been siginificantly redefined and rewritten such that they may now be laid out as CSS grids. See Mats Palmgren's answer.

You won't find these details in the CSS spec, but in the HTML spec. And HTML is pretty specific about how the fieldset and legend elements should be rendered, and, for historical reasons, layout implementations for these elements is extremely rigid with very little accommodation for changes to layout modes via the display property.

It is for this reason that display: grid is simply not supported on fieldsets by any browser. In fact, just a few days ago there was a discussion around a proposed addition to the HTML spec to specify how the display property should be treated on fieldset and legend elements, and this is what's slated to be added:

The fieldset element, when it generates a box (i.e., is not 'display: none' or 'display: contents'), is expected to act as follows:

  • ...

  • The 'display' property is expected to act as follows:

    • If the computed value of 'display' is one of 'inline', 'inline-block', 'inline-table', 'ruby', 'ruby-base', 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'inline-flex', or 'inline-grid', then behave as 'inline-block'.

    • If the computed value of 'display' is one of 'block', 'table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-cell', 'table-column-group', 'table-column', 'table-caption', 'list-item', 'flow', 'flow-root', 'run-in', 'flex', or 'grid', then behave as 'block'.

This basically cements the current text which says that the fieldset element is expected to establish a block formatting context, without specifying how it should behave should a UA choose not to follow this definition.

This, coupled with the current interoperable browser behavior, means that the layout of a legend element will not be affected by its parent fieldset having display: grid, since its parent fieldset will be prevented from becoming a grid container in the first place.

user_1062240

All major browsers support grid (and flexbox) layout on <fieldset> these days. Firefox added it back in 2015.

By default, a rendered <legend> is not a child box of the anonymous fieldset content box (which implements the actual grid/flex layout) so it is not treated as a grid item - it behaves the same regardless of the fieldset's display value.

The HTML spec for fieldset/legend rendering now has a fairly detailed description of how the layout works, described in CSS terms.

To override the default behavior and make the <legend> behave as a grid item, style it with display: contents, documented in the CSS Display spec as such:

Per HTML, a <legend> with display: contents is not a rendered legend, so it does not have magical display behavior. (Thus, it reacts to display: contents normally.)

Demo here: https://codepen.io/karlhorky/pen/LYdxQWe

user_30069920
Related