scriptex / css-diagnostics

Highlight potentially invalid or erroneous HTML markup

CSS Diagnostics

Highlight potentially invalid or erroneous HTML markup.

An extension for Google's Chrome browser which highlights potentially invalid and erroneous HTML markup.

This extension uses a fork of the Holmes stylesheet.

Visitor stats

Code stats

Installing from the Web Store

On Google Chrome

Visit Google Chrome's webstore

Click the Add to Chrome button.

On Mozilla Firefox

Visit Firefox add-ons website

Click on the + Add to Firefox button.

Installing from source

1. Clone the repository: git clone https://github.com/scriptex/css-diagnostics
2. Navigate to chrome://extensions and enable Developer Mode.
3. Choose "Load unpacked extension"
4. In the dialog, open the directory you just cloned.

Usage

Just click on the extension icon to turn on/off the diagnostics stylesheet.

You will see warnings in yellow rectangles and errors in red rectangles.

An explanation of the warning/error is given when you mouseover it.

Don't hesitate to file an issue if you find something wrong or would like help.

Contributing

Pull requests are welcome as long as they don't break the original idea of the extension.

LICENSE

MIT

---

Connect with me:

                     

---

Support and sponsor my work:

css-diagnostics's Issues

REVENGE.CSS

See if anything listed here is not yet a part of the current implementation. If not, add it.

Create an extension for Edge

Check if easy and worth it

Create an extension for Firefox

Create an extension for Safari

Check if easy and worth it

Create an extension for Opera

Add this snippet (and adjust it)

html:not([lang]),
html[lang=""] {
  border: 5px solid red;
}

head,
head *:not(title) {
  display: block;
}

meta[charset]:not([charset="UTF-8"])::before {
  content: "CSS Diagnostics: Bad charset: " attr(charset) " ";
  display: block;
  color: red;
}

meta[charset]:not(:first-child)::after {
  content: "CSS Diagnostics: Bad charset: not first child";
  display: block;
  color: red;
}

meta[name="viewport"][content*="user-scalable=no"]::after,
meta[name="viewport"][content*="maximum-scale"]::after,
meta[name="viewport"][content*="minimum-scale"]::after {
  content: " • Bad viewport: " attr(content);
  display: block;
  color: red;
}

script[type="text/javascript"]::before {
  content: " • Unnecessary type attribute on script: " attr(type);
  display: block;
  color: red;
}

link[rel="stylesheet"][type="text/css"]::before {
  content: " • Unnecessary type attribute on link: " attr(type);
  display: block;
  color: red;
}