[Inactive CSS] Display a warning when 'hanging-punctuation' etc. is used on non-inline boxes
Categories
(DevTools :: Inspector: Rules, enhancement, P2)
Tracking
(Not tracked)
People
(Reporter: miker, Unassigned)
References
(Blocks 1 open bug)
Details
(Whiteboard: [importance-12%])
Main file:
devtools/server/actors/utils/inactive-property-helper.js
invalidProperties: [
"hanging-punctuation",
"hyphens",
"inline-sizing",
"line-break",
"line-sizing",
"overflow-wrap",
"text-justify",
"word-break",
"word-wrap",
"wrap-inside",
]
inactive-css-only-inline-boxes = <strong>{ $property }</strong> has no effect on this element since it can only be applied to inline boxes.
inactive-css-only-inline-boxes-fix = Try adding <strong>display:inline</strong>. { learn-more }
|
||
Comment 1•4 years ago
|
||
These properties are all inherited by default, I think (in particular, I checked hanging-punctuation, hyphens, line-break, overflow-wrap, text-justify; the others don't seem to have MDN pages and may not be standard or implemented everywhere, but are probably also intended to be inherited-by-default).
Per my notes in bug 1583901 comment 9 onwards, and the code-comment added in bug 1688538, we probably shouldn't actually add any warnings about these properties being set on particular sorts of elements For example, it wouldn't be helpful of us to warn that e.g. overflow-wrap is "inactive" in this scenario where it's applied to a block-level element:
data:text/html,<body style="width:50px;overflow-wrap:anywhere">aaaaaaaaaaaaaaaa
...because in fact, it is very active, by virtue of the fact that its value is inherited (by default) down to the line box that wraps the "aaaa..." text.
Description
•