Built with blockbuilder.org
Last active
March 21, 2017 01:17
-
-
Save beijaflor/cf886d1a5c8f82513ed0069fc7a9cd80 to your computer and use it in GitHub Desktop.
linkingWithCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="uf-8"> | |
| <meta name="viewport" content="user-scalable=no"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0; padding: 40px; font-family: monospace;} | |
| /* inline style */ | |
| *[style] { | |
| border: 2px dotted red; | |
| } | |
| /* blank link target */ | |
| a:not([href]),a[href="#"],a[href=""],a[href*="javascript:void"] { | |
| background: lightGray; | |
| } | |
| /* image with no alt text */ | |
| img:not([alt]), img[alt=""] { | |
| border: 2px dotted red; | |
| opacity: 0.8; | |
| } | |
| /* Missing document language */ | |
| html:not([lang]), html[lang=""] { | |
| border: 10px solid red; | |
| } | |
| /* setting for error field for head */ | |
| head { | |
| font-family: monospace; | |
| display: block; | |
| border: 1px solid lightGray; | |
| padding: 20px 10px 10px; | |
| width: 100%; | |
| position: absolute; | |
| transition: opacity 0.5s; | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| head:hover { | |
| opacity: 0; | |
| } | |
| head:before { | |
| content: "<head>"; | |
| font-size: 10px; | |
| background: gray; | |
| color: white; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| } | |
| /* charset must be set as UTF-8 */ | |
| meta[charset]:not([charset="UTF-8"]) { | |
| display: block; | |
| color: red; | |
| } | |
| meta[charset]:not([charset="UTF-8"]):before { | |
| content: "charset is not set \"UTF-8\" correctly" | |
| } | |
| /* charset must be first-child of head element */ | |
| meta[charset]:not(:first-child) { | |
| display: block; | |
| color: red; | |
| } | |
| meta[charset]:not(:first-child):before { | |
| content: "charset is not placed beginning of <head>" | |
| } | |
| /* charset must be first-child of head element */ | |
| meta[name="viewport"][content*="user-scalable=no"], | |
| meta[name="viewport"][content*="maximum-scale"], | |
| meta[name="viewport"][content*="minimum-scale"] { | |
| display: block; | |
| color: red; | |
| } | |
| meta[name="viewport"][content*="user-scalable=no"]:before, | |
| meta[name="viewport"][content*="maximum-scale"]:before, | |
| meta[name="viewport"][content*="minimum-scale"]:before { | |
| content: "viewport must be scalable" | |
| } | |
| /* form element */ | |
| input:not([name]), | |
| select:not([name]), | |
| textarea:not([name]) { | |
| display: block; | |
| border: 4px solid red; | |
| } | |
| /* form without action */ | |
| form:not([action]), | |
| form[action=""], | |
| form[action="#"] { | |
| display: block; | |
| border: 1px solid red; | |
| } | |
| /* form without method */ | |
| form:not([method]), | |
| form[method]:not([method="get"]):not([method="post"]) { | |
| display: block; | |
| border: 1px solid red; | |
| } | |
| /* empty interactive elements */ | |
| button:empty, | |
| a:empty { | |
| border: 1px solid red; | |
| } | |
| button:empty:before, | |
| a:empty:before { | |
| color: red; | |
| content: "empty"; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a name="anchor"></a> | |
| <p style="color: red;">paragraph <a href="javascript:void(0)">with</a> style attributes</p> | |
| <img src="" width="200" height="300"> | |
| <form action="/" method="POS" id="sampleform"> | |
| <input type="hidden"> | |
| <input type="text"> | |
| <textarea>textarea</textarea> | |
| <select> | |
| <option selected>option-1</option> | |
| <option>option-2</option> | |
| <option>option-3</option> | |
| </select> | |
| <button></button> | |
| </form> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment