Skip to content

Instantly share code, notes, and snippets.

@arturparkhisenko

arturparkhisenko/css-linting-html.css

Last active August 23, 2017 19:52
Show Gist options
  • Save arturparkhisenko/f6e31d9a0037c03a030f1169ac9d974a to your computer and use it in GitHub Desktop.
Save arturparkhisenko/f6e31d9a0037c03a030f1169ac9d974a to your computer and use it in GitHub Desktop.
Download ZIP
css linting html
Raw
css-linting-html.css
/* source: https://bitsofco.de/linting-html-using-css/ */
/* colors */
:root {
--color-info: #5bc0de;
--color-warning: #f0ad4e;
--color-danger: #d9534f;
}
/* Inline Styles */
*[style] {
border: 5px solid var(--color-warning);
}
/* For error output
*[style]::after {
content: "Inline Styles";
color: var(--color-info);
} */
/* Faulty or Missing Link Targets */
a:not([href]),
a[href=""],
a[href="#"],
a[href*="javascript:void(0)"] {
border: 5px solid var(--color-danger);
}
/* Unaccessible Images */
img:not([alt]) {
border: 5px solid var(--color-warning);
}
img[alt=""] {
border: 5px solid var(--color-warning);
}
/* Missing Document Language */
html:not([lang]),
html[lang=""] {
border: 5px solid var(--color-warning);
}
/* Missing Document Title */
html:not(title) {
border: 5px solid var(--color-warning);
}
/* Incorrect Character Set */
meta[charset]:not([charset="UTF-8"]),
meta[charset]:not([charset="utf-8"]) {
border: 5px solid var(--color-danger);
}
meta[charset="UTF-8"]:not(:first-child),
meta[charset="utf-8"]:not(:first-child) {
border: 5px solid var(--color-warning);
}
/* Unaccessible Viewport Attributes */
meta[name="viewport"][content*="maximum-scale"],
meta[name="viewport"][content*="minimum-scale"],
meta[name="viewport"][content*="user-scalable=no"] {
border: 5px solid var(--color-danger);
}
/* Unlabelled Form Elements */
input:not([id]),
select:not([id]),
textarea:not([id]) {
border: 5px solid var(--color-warning);
}
label:not([for]) {
border: 5px solid var(--color-warning);
}
input:not([name]),
select:not([name]),
textarea:not([name]) {
border: 5px solid var(--color-warning);
}
form:not([name]):not([id]) {
border: 5px solid var(--color-warning);
}
/* Element input without a type */
input:not([type]) {
border: 5px solid var(--color-warning);
}
/* Empty Interactive Elements */
a:empty,
button:empty {
border: 5px solid var(--color-warning);
}
/* Unnecessary or Deprecated Attributes */
link[rel="stylesheet"][type="text/css"],
script[type="text/javascript"] {
border: 5px solid var(--color-warning);
}
/* https://twitter.com/devoorhoede/status/856474757356806145/photo/1 */
a[href^="http://"]:after {
content: "⚠";
color: red;
}
a[href^="https://"]:after {
content: "🔒";
color: green;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="">
<link rel="stylesheet" href="css-linting-html.css">
<style rel="stylesheet" type="text/css">
body {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<h1 style="color: #000">inline css</h1>
<button></button>
<a></a>
<a>a without href</a>
<a href="">a with empty href</a>
<a href="#">a with # href</a>
<a href="javascript:void(0)">a with "javascript:void(0)" href</a>
<img src="#">
<img src="#" alt="">
<input>
<select></select>
<label></label>
<textarea></textarea>
<script type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment