├── LICENSE.md ├── README.md └── debug.css /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2013 Seth Warburton 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # debug.css – v1.0 2 | 3 | Debug CSS is a small, standalone, stylesheet to help visually identify invalid and potentially inaccessible markup, *during development*. 4 | 5 | It based entirely upon a portion of the excellent [inuit.css](https://github.com/csswizardry/inuit.css/) (a powerful little framework designed for _serious_ developers) by [Harry Roberts](https://github.com/csswizardry), and all credit should go to him. 6 | 7 | I simply broke out Inuit's _debug.scss and implemented it as a stand-alone stylesheet so that it can be quickly and easily linked to from any project to aid in fast visual debugging. 8 | 9 | ## Usage 10 | 11 | Simply include a link to the stylesheet in the head (i.e. before the ) of your document, like so: 12 | 13 | 14 | 15 | **Heads up: Don't forget to remove the link to debug.css once you've finished debugging.** 16 | 17 | Alternatively, create a bookmark and copy the following code into the URL field to create a bookmarklet for quick debugging: 18 | 19 | javascript:(function(){var e=document.createElement("link");e.setAttribute("href","https://rawgithub.com/nternetinspired/debug-css/master/debug.css");e.setAttribute("rel","stylesheet");e.setAttribute("type","text/css");e.setAttribute("media","all");document.head.appendChild(e)})(); 20 | 21 | If there are potential issues, you'll see some more colour on your site: 22 | 23 | * Red == definite error 24 | * Yellow == double-check 25 | 26 | You can then simply check with your browser tools to see why that colour style is being applied. 27 | 28 | 29 | ## Credits 30 | 31 | Credit should go to [inuit.css](https://github.com/csswizardry/inuit.css/) creator, [Harry Roberts](https://github.com/csswizardry) for the original _debug.scss in that framework. 32 | 33 | Thanks also to [@pjkix](https://github.com/pjkix) for adding the bookmarklet above. 34 | 35 | ## License 36 | 37 | Copyright 2013 Seth Warburton 38 | 39 | Licensed under the Apache License, Version 2.0. 40 | 41 | --- 42 | -------------------------------------------------------------------------------- /debug.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------*\ 2 | $DEBUG 3 | \*------------------------------------*/ 4 | /** 5 | * Enable this stylesheet to visually detect any improperly nested or 6 | * potentially invalid markup, or any potentially inaccessible code. 7 | * 8 | * Red == definite error 9 | * Yellow == double-check 10 | * None == should be fine 11 | * 12 | * Please note that this method of checking markup quality should not be relied 13 | * upon entirely. Validate your markup! 14 | */ 15 | 16 | 17 | /** 18 | * Are there any empty elements in your page? 19 | */ 20 | :empty{ 21 | outline:5px solid yellow; 22 | } 23 | 24 | 25 | /** 26 | * Images require `alt` attributes, empty `alt`s are fine but should be 27 | * double-checked, no `alt` is bad and is flagged red. 28 | */ 29 | img{ 30 | outline:5px solid red; 31 | } 32 | img[alt]{ 33 | outline:none; 34 | } 35 | img[alt=""]{ 36 | outline:5px solid yellow; 37 | } 38 | 39 | 40 | /** 41 | * Links sometimes, though not always, benefit from `title` attributes. Links 42 | * without are never invalid but it’s a good idea to check. 43 | */ 44 | a{ 45 | outline:5px solid yellow; 46 | } 47 | a[title]{ 48 | outline:none; 49 | } 50 | 51 | 52 | /** 53 | * Double-check any links whose `href` is something questionable. 54 | */ 55 | a[href="#"], 56 | a[href*="javascript"]{ 57 | outline:5px solid yellow; 58 | } 59 | 60 | 61 | /** 62 | * The `target` attribute ain’t too nice... 63 | */ 64 | a[target]{ 65 | outline:5px solid yellow; 66 | } 67 | 68 | 69 | /** 70 | * Ensure any lists only contain `li`s as children. 71 | */ 72 | ul > *:not(li), 73 | ol > *:not(li) { 74 | outline: 5px solid red; } 75 | 76 | 77 | /** 78 | * It’s always nice to give `th`s `scope` attributes. 79 | */ 80 | th{ 81 | outline:5px solid yellow; 82 | } 83 | th[scope]{ 84 | outline:none; 85 | } 86 | 87 | 88 | /** 89 | * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? 90 | */ 91 | table > tr{ 92 | outline:5px solid yellow; 93 | } 94 | 95 | 96 | /** 97 | * `tfoot` needs to come *before* `tbody`. 98 | */ 99 | tbody + tfoot{ 100 | outline:5px solid yellow; 101 | } 102 | 103 | 104 | /** 105 | * Forms require `action` attributes 106 | */ 107 | form{ 108 | outline:5px solid red; 109 | } 110 | form[action]{ 111 | outline:none; 112 | } 113 | 114 | 115 | /** 116 | * Various form-field types have required attributes. `input`s need `type` 117 | * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons 118 | * need a `value` attribute. 119 | */ 120 | textarea, 121 | input{ 122 | outline:5px solid red; 123 | } 124 | input[type]{ 125 | outline:none; 126 | } 127 | textarea[rows][cols]{ 128 | outline:none; 129 | } 130 | input[type=submit]{ 131 | outline:5px solid red; 132 | } 133 | input[type=submit][value]{ 134 | outline:none; 135 | } 136 | 137 | 138 | /** 139 | * Avoid inline styles where possible. 140 | */ 141 | [style]{ 142 | outline:5px solid yellow; 143 | } 144 | 145 | 146 | /** 147 | * You should avoid using IDs for CSS, is this doing any styling? 148 | */ 149 | [id]{ 150 | outline:5px solid yellow; 151 | } 152 | 153 | /** 154 | * Definition lists should only contain DT and DD elements 155 | */ 156 | dl > * { 157 | outline:5px solid red; 158 | } 159 | dl > dt, 160 | dl > dd { 161 | outline:none; 162 | } 163 | --------------------------------------------------------------------------------