Lint HTML Code With CSS

Category: CSS & CSS3 , Recommended | July 9, 2020
Author: orenzodelijser
Views Total: 24 views
Official Page: Go to website
Last Update: July 9, 2020
License: MIT

Preview:

Lint HTML Code With CSS

Description:

A CSS-driven HTML linter & validator to debug your HTML code and highlight HTML elements that made common mistakes.

Available linters:

  • Inputs and labels without id or for attribute
  • Links that have No href, an empty href and a ‘#’ href
  • Images without alt attribute
  • Forbidden nesting
  • Lists that have something other than an <li> inside
  • Prevent page load jank and CLS by finding <img>‘s missing height and width attributes
  • Elements with a tabindex other than 0 or -1.
  • Buttons without type attribute
  • Input fields without any label
  • Buttons without any label
  • Tables without caption
  • Headers out of order (i.e. h2 before h1, etc.)
  • <picture> elements that don’t contain a webp <source>
  • <img> and <iframe>‘s without native lazy loading
  • Prevents the absence of lang attribute
  • SVG without focusable=false when decorative or hidden
  • Mismatched [dir] && [lang]
  • SVG without title or aria-label and not considered as decorative
  • Unsecure [target=blank]
  • Summary must be the first child
  • Fieldset where legend isn’t the first child
  • No divs inside inline elements
  • No headings inside inline <a> tag
  • <img> without height and width that will cause cumulative layout shift
  • <embeds> or <iframes> without height and width that will cause cumulative layout shift
  • Not utilizing srcset for responsive images
  • Empty buttons or links without any kind of labeling

How to use it:

Just insert the linthtmlwithcss.min.css into your document and done.

<link rel="stylesheet" href="linthtmlwithcss.min.css" />

You Might Be Interested In:


Leave a Reply