Linting HTML using CSS
- SAKET KUMAR
When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious.
Using CSS3 for highlighting issues in our HTML
Inline Styles
target any element on the page that has inline styles applied to it
*[style] {
border: 5px solid red; /* Style to make the elements noticeable */
}Faulty or Missing Link Targets
These selectors will highlight any anchor elements that either do not have any href attribute at all, or have a meaningless one.
a:not([href]),
a[href="#"],
a[href=""],
a[href*="javascript:void(0)"] { … } Unaccessible Images
When "alt" attribute is missing, most screenreaders will read out the value of the src attribute instead which, of course, is not useful to the user and can in fact be confusing.
img:not([alt]) { ... } Missing Document Language
"lang" attribute is a signal to screen readers what language the page is in, which can determine how the content of the page is read aloud.
html:not([lang]),
html[lang=""] { ... } Incorrect Character Set
This selector targets any meta character set tag that is not set to UTF-8.
meta[charset]:not([charset="UTF-8"]) { ... } Unaccessible Viewport Attributes
This selector can be used to highlight unaccessible viewport meta attributes.
meta[name="viewport"][content*="user-scalable=no"],
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"] { ... }Unlabelled Form Elements
This selector checks for form elements that do not have an ID, and label elements that are not explicitly linked to a form element using the for attribute.
input:not([id]),
select:not([id]),
textarea:not([id]) { ... }
label:not([for]) { ... } Another type of labelling that is important for form elements is via the name attribute.
input:not([name]),
select:not([name]),
textarea:not([name]) { ... }Empty Interactive Elements
This selector will highlight any links of buttons that have no HTML content inside them.
button:empty,
a:empty { ... } Unnecessary or Deprecated Attributes
We can use CSS selectors to highlight attributes in our HTML that are deprecated or no longer needed.
Further
- We can create a bookmarklet to test our HTML pages
- Create a node package out of it and integrate it in our development process using gulp/grunt.
- We can also create a chrome extension out of this.
Questions
Thank You
Linting HTML using CSS
By Saket Kumar
Linting HTML using CSS
- 388
