beijaflor/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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>
	<!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>