├── README.md ├── error-property-styling.zip └── error_href.png /README.md: -------------------------------------------------------------------------------- 1 | # Error Property Styling For Chome CSS Inspector 2 | 3 | *Huge thank you to [@dansketchpad](https://twitter.com/dansketchpad) who did most of the work on this!* 4 | 5 | To improve the appearance of a fake `ERROR` property to log markup errors to Chrome's CSS inspector, this extension removes the `line-through` style and replaces it with a red background and white text. 6 | 7 | ## Installation 8 | 9 | 1. Enable the devtools experiments via `chrome://flags/#enable-devtools-experiments` 10 | 2. Also enable in `Inspector > Settings > Experiments > Allow custom UI themes` 11 | 3. Go to Extensions, then turn on Developer mode (checkbox on top right) 12 | 4. Download this repository's `error-property-styling` folder and unpack it 13 | 5. Under Extensions, press the **Load unpacked extension...** button to upload the extension folder 14 | 6. Close and reopen any inspector panels and you should see the style for the `ERROR` property (an unrecognized, unparsable CSS property just used for logging errors to the inspector) 15 | 16 | ## Example 17 | 18 | ### Code 19 | 20 | ``` 21 | a:not([href]) { 22 | ERROR: This element is not focusable because it lacks an href attribute; 23 | } 24 | 25 | /* the below block is used to highlight the presence of the error in the interface itself */ 26 | 27 | a:not([href]) { 28 | outline: 0.25em solid red; 29 | } 30 | ``` 31 | 32 | In this case, the 'error' is triggered when an `` element does not have an `href`—which would mean it is inaccessible by keyboard. 33 | 34 | ### Output 35 | 36 | ![The declaration in the CSS inspector, with the standard line-through removed and the red background style in its place](https://raw.githubusercontent.com/Heydon/css-error-property-style/master/error_href.png) 37 | 38 | -------------------------------------------------------------------------------- /error-property-styling.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/css-error-property-style/784c7f6eae170982a9334f84c1309c4f6d0221d9/error-property-styling.zip -------------------------------------------------------------------------------- /error_href.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/css-error-property-style/784c7f6eae170982a9334f84c1309c4f6d0221d9/error_href.png --------------------------------------------------------------------------------