/* Variables. ================================================== */ :root { --c-level1: #f00; --c-level2: #f90; } head { display: block; max-height: 200px; overflow: auto; font-size: 0; line-height: 0; } /* leve1: Should to fixed ================================================== */ html:not([lang]), html[lang=""] { display: block; } html:not([lang]):not([data-hvi])::before, html[lang=""]:not([data-hvi])::before { margin: 8px; background-color: var(--c-level1); color: #ffffff; padding: 0.5em; display: block; font-size: 12px; line-height: 16px; content: ' needs [lang="…"]'; position: relative; z-index: 20000; } style:empty, script:not([src]):empty, title:empty { display: block; } style:empty:not([data-hvi])::before, script:not([src]):empty:not([data-hvi])::before, title:empty:not([data-hvi])::before { margin: 8px; background-color: var(--c-level1); color: #ffffff; padding: 0.5em; display: block; font-size: 12px; line-height: 16px; content: 'Those element should not be empty'; position: relative; z-index: 20000; } [style=""]:not([data-hvi]), [title=""]:not([data-hvi]), [id=""]:not([data-hvi]), [src=""]:not([data-hvi]), [href=""]:not([data-hvi]), [name=""]:not([data-hvi]), [for=""]:not([data-hvi]), [type=""]:not([data-hvi]), [width=""]:not([data-hvi]), [height=""]:not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: 'Those props should not empty'; } abbr:not([title]):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: ' needs [title="…"]'; } a[target]:not([rel*="noopener"]):not([data-hvi]), a[target]:not([rel*="noreferrer"]):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: '[target="…"] also needs [rel="noopener"] or [rel="noopener noreferrer"]'; } /* figure */ :not(figure) > figcaption:not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "

must be a child of

"; } figure > figcaption:not(:first-child):not(:last-child):not([data-hvi]), figure > figcaption:not(:first-child):not(:last-child) ~ :last-child:not(figcaption):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "

must be first/last child of

"; } figure > figcaption:not(:first-of-type):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "

should only contain one

"; } /* ul/ol */ :not(ul):not(ol) > li:not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "

is missing a parent

"; } :not(dl):not(div) > dd:not([data-hvi]), :not(dl):not(div) > dt:not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "
or
is missing a parent
or
"; } /* dl */ dl > :not(dt):not(dd):not(div):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "Immediate child of
must be
,
, or
"; } /* form */ fieldset > :not(legend):first-child:not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: "Invalid: first-child of "; } :not(fieldset) > legend:not([data-hvi]), fieldset > legend:not(:first-child):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: " must be: first-child of
"; } input[type="radio"]:not([name]):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: 'Radios without name="…"'; } form button:not([type]):not([data-hvi]) { outline: 2px dashed var(--c-level1) !important; content: '