Skip to main content

display-notation

Specify short or full notation for the display property.

a { display: block; }
/**          ↑
 *           This notation */

Modern display property values allow you to define both the outer and inner display type separately (e.g. inline flex). While CSS 2 used a single-keyword, precomposed syntax for the display property (e.g. inline-flex).

In the Display Module Level 3 specification the following precomposed values are defined:

  • inline-block
  • inline-flex
  • inline-grid
  • inline-table

More recent and future inner display types (e.g. grid-lanes) can only be combined with the modern, multi-keyword syntax.

The full notation explicitly describes the inner and outer display types of elements. This notation makes it easier to understand how an element will behave and to learn about the various display types.

The short notation omits defaults or switches to precomposed values, and doesn't follow the modern principle of value composition.

This rule ignores $sass, @less, and var(--custom-property) variable syntaxes.

The fix option can automatically fix all of the problems reported by this rule.

Options​

"full"​

Applicable display values must always use the full notation.

{
  "display-notation": "full"
}

The following patterns are considered problems:

a { display: block; }
a { display: grid; }
a { display: list-item; }

The following patterns are not considered problems:

a { display: block flow; }
a { display: block grid; }
a { display: block flow list-item; }

"short"​

Applicable display values must always use the short notation.

{
  "display-notation": "short"
}

The following patterns are considered problems:

a { display: block flow; }
a { display: block grid; }
a { display: block flow list-item; }

The following patterns are not considered problems:

a { display: block; }
a { display: grid; }
a { display: list-item; }