Skip to content

Edge cases and known issues

Jump to bottom
Gaël Poupard edited this page May 15, 2019 · 4 revisions

Counters

CSS counters are incremented on each error/advice/warning and results are displayed with body::after. Since it is added through CSS, it is basically fake-content which is good since it is no more than visual indication for the developer to see what’s going on. It will appear on the bottom left side of your page. :)

Void or replaced elements

Self-closing tags (a.k.a. void elements) do not allow generated content through pseudo-elements. Thus, errors or whatever will correctly be displayed, but not the message on hover. That being said, it should be available for consultation with any DOM reader (DevTools, Firebug or whatever). Here are affected self-closing tags:

  • <area />
  • <base />
  • <br />
  • <col />
  • <command />
  • <embed />
  • <hr />
  • <img />
  • <input />
  • <keygen />
  • <link />
  • <meta />
  • <param />
  • <source />
  • <track />
  • <wbr />
  • <textarea>, <select>, <svg>, <audio>, <video> and <iframe> aren't void tags but can't contain pseudo-elements as they are replaced elements. Take a look at What The Heck Is A Replaced Element? by @dudleystorey.

Issue #7 opened by @7studio suggested a decent work-around to display messages for those tags, as long as they are followed by a non-self-closing element. Still better than nothing.

Clone this wiki locally