├── LICENSE ├── README.md ├── bookmarklet.js ├── index.html └── lint.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Chris Coyier 4 | (Code is from Ire Aderinokun's https://bitsofco.de/linting-html-using-css/) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | - Ire Aderinokun's concept: https://bitsofco.de/linting-html-using-css/ 2 | - Demo page: https://chriscoyier.github.io/linting-html-with-css/ 3 | 4 | ### Bookmarklet 5 | 6 | ```js 7 | javascript:(function() { 8 | var link = document.createElement("link"); 9 | link.rel = "stylesheet"; 10 | link.href = "https://cdn.jsdelivr.net/gh/chriscoyier/linting-html-with-css/lint.css"; 11 | document.getElementsByTagName("head")[0].appendChild(link); 12 | })(); 13 | ``` 14 | 15 | ### Ideas: 16 | 17 | - ✅ Bookmarklet to inject CSS (done by Paul Esch-Laurent!) 18 | - ✅ Browser extension to inject the CSS (Done by Ire herself! https://github.com/ireade/alix) 19 | -------------------------------------------------------------------------------- /bookmarklet.js: -------------------------------------------------------------------------------- 1 | javascript:(function() { 2 | var link = document.createElement("link"); 3 | link.rel = "stylesheet"; 4 | link.href = "https://cdn.jsdelivr.net/gh/chriscoyier/linting-html-with-css/lint.css"; 5 | document.getElementsByTagName("head")[0].appendChild(link); 6 | })(); 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 |

Linting HTML with CSS

19 | 20 |

From Ire Aderinokun's article.

21 | 22 |

23 | I'm a div with inline styles. 24 |

25 | 26 | 34 | 35 |

36 |

37 | 38 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /lint.css: -------------------------------------------------------------------------------- 1 | *[style] { 2 | border: 5px solid red; 3 | } 4 | 5 | a:not([href]), 6 | a[href="#"], 7 | a[href=""], 8 | a[href*="javascript:void(0)"], 9 | a:empty, 10 | button:empty { 11 | border: 5px solid red; 12 | } 13 | 14 | img:not([alt]), 15 | img[alt=""] { 16 | border: 5px solid red; 17 | } 18 | 19 | html:not([lang]), 20 | html[lang=""] { 21 | border: 5px solid red; 22 | } 23 | 24 | head, 25 | head *:not(title) { 26 | display: block; 27 | } 28 | 29 | meta[charset]:not([charset="UTF-8"])::before { 30 | content: " • Bad charset: " attr(charset) " "; 31 | display: block; 32 | color: red; 33 | } 34 | meta[charset]:not(:first-child)::after { 35 | content: " • Bad charset: not first child"; 36 | color: red; 37 | } 38 | 39 | meta[name="viewport"][content*="user-scalable=no"]::after, 40 | meta[name="viewport"][content*="maximum-scale"]::after, 41 | meta[name="viewport"][content*="minimum-scale"]::after { 42 | content: " • Bad viewport: " attr(content); 43 | color: red; 44 | } 45 | script[type="text/javascript"]::before { 46 | content: " • Unnecessary type attribute on script: " attr(type); 47 | color: red; 48 | } 49 | link[rel="stylesheet"][type="text/css"]::before { 50 | content: " • Unnecessary type attribute on link: " attr(type); 51 | color: red; 52 | } 53 | 54 | 55 | input:not([id]), 56 | select:not([id]), 57 | textarea:not([id]), 58 | input:not([name]), 59 | select:not([name]), 60 | textarea:not([name]) { 61 | border: 5px solid red; 62 | } 63 | 64 | label:not([for]) { 65 | border: 5px solid red; 66 | } 67 | 68 | form:not([name]):not([id]) { 69 | border: 5px solid red; 70 | } --------------------------------------------------------------------------------