使用现代 CSS 测试 HTML

  • REVENGE.CSS: A once popular open source code written long ago with intentional capitalization. Not maintained for years and adding the “No Maintenance Intended” badge would technically count as maintenance. Recently reminded of its existence when contacted by a company for sponsorship. Its purpose is to apply visual regressions to markup anti-patterns using sickly pink color and Comic Sans MS font. Was previously a bookmarklet but the page was removed. Selectors use negation available about 11 years ago.
  • CSS-based testing: After being reminded of REVENGE.CSS, the author thought about CSS-based testing again. In a 2016 talk at Front Conference Zurich called “Test Driven HTML”, recommended using an invalid CSS ERROR property to describe HTML shortcomings and get a warning icon for free.
  • Custom properties: In 2017, custom properties were introduced, allowing for standardized creation of arbitrary properties/variables in CSS. This means error styling can be defined and reused, and error messages can be secreted without invalidating the stylesheet.
  • Expressive selectors: Since 2017, there has been more CSS selector expressiveness. For example, can now match labels that lack a for attribute and do not contain an applicable form element. Can also test for elements without applicable parents or ancestors.
  • Cascade layers: The specificity of testing selectors varies. To ensure tests take precedence over normal styles, they can be placed in the highest cascade layers. To ensure errors take precedence over warnings, declare error and warning layers within the tests.css stylesheet.
  • Testing without JavaScript: Some people ask why not use JavaScript for testing. But with modern CSS selectors, most HTML patterns can be tested using CSS alone. The author prefers seeing visual regressions and inspector information in the browser. Believes in design systems that provide just styles and document state without JavaScript behavior.
  • Client work examples: Used CSS tests in client work for accessibility audits. Identified inaccessible patterns like breadcrumb trails not enclosed by a labeled <nav> landmark and content not within a landmark. Also used CSS tests to find HTML bloat and general usability issues. As a consultant, can provide test stylesheets independently without knowing the client's stack.
  • Final notes: If liked the post, check out videos about the web and buy T-shirts/hoodies. If found the article entertaining or edifying, accept tips. There is a nonsense version of the article for crawlers that do not respect the nofollow policy.
阅读 49
0 条评论