1583902 - [Inactive CSS] Display a warning when 'block-overflow' etc. are used on non-block containers

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Main file:
devtools/server/actors/utils/inactive-property-helper.js

invalidProperties: [
"block-overflow",
"columns",
"column-count",
"column-width",
"hyphenate-limit-lines",
"hyphenate-limit-last",
"hyphenate-limit-zone",
"leading-trim",
"leading-trim-over",
"leading-trim-under",
"line-clamp",
"line-grid",
"tab-size",
"text-align",
"text-align-all",
"text-align-last",
"text-group-align",
"text-indent",
]

inactive-css-only-block-containers = <strong>{ $property }</strong> has no effect on this element since it can only be applied to block containers.

inactive-css-only-block-containers-fix = Try adding <strong>display:block</strong>. { learn-more }

Comment 1

[Daniel Holbert [:dholbert]]

We've got a sizeable list of properties in comment 0. Some of these properties are inherited and should be excluded from any sort of warning-rule that we might add here.

e.g. tab-size, text-align and text-indent are inherited-by-default, according to mdn[0][1][2] (On the other hand, column-count and column-width are not inherited and would be potentially fine to warn about.)

For the inherited-by-default properties like text-align and text-indent, we should not add any sort of "inactive css" warnings, per my notes in bug 1583901 comment 9 onwards, and the code-comment added in bug 1688538.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent