Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 8 commits
  • 4 files changed
  • 0 commit comments
  • 2 contributors
View
39 debugCSS.css
@@ -35,7 +35,12 @@ table > tbody + tfoot:after,
table > tr:first-child:last-child:after,
table > tbody > tr:first-child:last-child:after,
table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):after,
+table[align]:after,
+table[bgcolor]:after,
table[border]:after,
+table[cellpadding]:after,
+table[cellspacing]:after,
+table[width]:after,
img:not([alt]):after,
a:not([href]):after,
a[href="#"]:after,
@@ -65,9 +70,11 @@ ul > *:not(li),
dl > *:not(dt):not(dd):after,
form > *:not(fieldset):after,
fieldset *:not(legend):first-child:after,
+iframe:not([title]):after,
center:after,
u:after,
font:after,
+map:after,
b:after,
i:after,
blink:after,
@@ -130,7 +137,12 @@ table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):af
content: 'Only THEAD/TFOOT/TBODY/COLGROUP/CAPTION/TR can be children of a TABLE';
}
-table[border]:after {
+table[align]:after,
+table[bgcolor]:after,
+table[border]:after,
+table[cellpadding]:after,
+table[cellspacing]:after,
+table[width]:after {
background: yellow;
content: 'Element has inline style.';
}
@@ -208,6 +220,11 @@ fieldset *:not(legend):first-child:after {
content: 'Should your FIELDSET be using a LEGEND?';
}
+iframe:not([title]):after {
+ background: green;
+ content: 'IFRAME lacks TITLE attribute.';
+}
+
center:after,
u:after,
font:after {
@@ -216,11 +233,20 @@ font:after {
}
/* These may not be "wrong", but let's bug you anyway. */
+map:after {
+ background: green;
+ content: 'Is MAP appropriate here?';
+}
+
b:after,
-i:after,
+i:after {
+ background: green;
+ content: 'Should you be using STRONG or EM?';
+}
+
blink:after,
marquee:after {
- background: green;
+ background: yellow;
content: 'Should you be using STRONG or EM?';
}
@@ -239,6 +265,7 @@ table thead td,
table > tr:first-child:last-child,
table > tbody > tr:first-child:last-child,
table > tbody:first-child,
+map,
b,
i {
outline: 5px solid green;
@@ -247,7 +274,12 @@ i {
table > tr,
table > tbody + tfoot,
table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption),
+table[align],
+table[bgcolor],
table[border],
+table[cellpadding],
+table[cellspacing],
+table[width],
img:not([alt]),
a:not([href]),
a[href="#"],
@@ -277,6 +309,7 @@ ul > *:not(li),
dl > *:not(dt):not(dd),
form > *:not(fieldset),
fieldset *:not(legend):first-child,
+iframe:not([title]),
center,
u,
font,
View
289 playgrounds/accessibility.html
@@ -0,0 +1,289 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="keywords" content="CSS, CSS Development, Web Development, Cascading Style Sheets, Web Styles" />
+ <meta name="description" content="debugCSS: (X)HTML debugging tool built with CSS" />
+ <title>debugCSS : (X)HTML debugging tool built with CSS</title>
+ <style type="text/css">
+ html,
+ body,
+ div,
+ span,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ pre,
+ a,
+ code,
+ em,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li {
+ border: 0;
+ font-family: inherit;
+ font-size: 100%;
+ font-style: inherit;
+ font-weight: inherit;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+ }
+
+ :focus {
+ outline: #000 dotted thin;
+ }
+
+ a {
+ color: #286EA0;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ a:visited {
+ color: #6B899F;
+ }
+
+ body {
+ background: #FFF;
+ color: #000;
+ font-family: helvetica;
+ line-height: 1.3;
+ }
+
+ ol,
+ ul {
+ list-style: none;
+ }
+
+ p,
+ pre,
+ .mod li {
+ margin: .5em 0;
+ }
+
+ code,
+ pre {
+ font-family: monospace;
+ }
+
+ pre {
+ border: 1px solid #CCC;
+ -moz-border-radius: .5em;
+ -webkit-border-radius: .5em;
+ border-radius: .5em;
+ padding: .5em;
+ }
+
+ pre:hover {
+ background-color: #EAEAEA;
+ -moz-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ -webkit-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ dl {
+ margin-bottom: .5em;
+ }
+
+ dt {
+ font-weight: bold;
+ margin-top: .5em;
+ }
+
+ dd {
+ text-indent: 2em;
+ }
+
+ .wrapper {
+ margin: 1em auto;
+ max-width: 1280px;
+ min-width: 640px;
+ width: 80%;
+ }
+
+ #hd h1 {
+ font-size: 2em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ .mod .hd h3 {
+ border-bottom: 1px solid #CCC;
+ font-size: 1.5em;
+ margin-bottom: .5em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ #hd,
+ .mod {
+ margin-bottom: 3em;
+ }
+
+ cite {
+ font-style: italic;
+ }
+
+ #install .bd a.install {
+ background: #4970A7;
+ background-image: -moz-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ background-image: -webkit-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ border: 1px solid #14468B;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ -webkit-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ color: #FFF;
+ cursor: pointer;
+ display: block;
+ *display: inline;
+ padding: 1em;
+ text-align: center;
+ width: 5em;
+ zoom: 1;
+ }
+
+ .mod ul {
+ list-style: disc outside none;
+ padding-left: 3em;
+ }
+
+ #playground li {
+ clear: left;
+ margin-top: 20px;
+ }
+
+ #playground table,
+ #playground th,
+ #playground td {
+ border: 1px dotted #000;
+ }
+
+ #playground h4 {
+ font-weight: bold;
+ }
+ </style>
+</head>
+<body>
+
+ <a href="https://github.com/yahoo/debugCSS"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0;"></a>
+ <div class="wrapper">
+ <div id="hd">
+ <h1>debugCSS : (X)HTML debugging tool built with CSS</h1>
+ </div>
+ <div id="bd">
+ <div class="mod" id="summary">
+ <div class="hd">
+
+ <h3>Summary</h3>
+ </div>
+ <div class="bd">
+ <p>
+ debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.
+ </p>
+ <p>
+ Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."
+ </p>
+
+ </div>
+ </div>
+ <div class="mod" id="install">
+ <div class="hd">
+ <h3>Install</h3>
+ </div>
+ <div class="bd">
+ <p>
+
+ Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".
+ </p>
+ <a href="javascript:(function(d,i,l){l=d.getElementById(i);if(l){l.parentNode.removeChild(l);return;}l=d.createElement('link');l.id=i;l.rel='stylesheet';l.type='text/css';l.href='http://yahoo.github.com/debugCSS/debugCSS.css';d.getElementsByTagName('head')[0].appendChild(l);}(document,'debugCSS'))" class="install">debugCSS</a>
+ <p>
+ Get the source code on GitHub : <a href="https://github.com/yahoo/debugCSS">yahoo/debugCSS</a>
+ </p>
+ </div>
+ </div>
+
+ <div class="mod" id="playground">
+ <div class="hd">
+ <h3>Accessibility Playground</h3>
+ </div>
+ <div class="bd">
+ <ul>
+ <li>
+ <h4>img:not([alt])</h4>
+ <img src="https://secure.gravatar.com/avatar/cf776780e895d2c099f8fb13cb7c6af2?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" />
+ </li>
+ <li>
+ <h4>a:not([href])</h4>
+ <a>Link with no href</a>
+ </li>
+ <li>
+ <h4>a[href="#"]</h4>
+ <a href="#">Link with # href</a>
+ </li>
+ <li>
+ <h4>a[href*=javascript\:]</h4>
+ <a href="javascript:;">Link with javascript href</a>
+ </li>
+ <li>
+ <h4>a[onclick]</h4>
+ <a href="#blah" onclick="/* */">Link with onclick attribute</a>
+ </li>
+ <li>
+ <h4>a[onmouseover]</h4>
+ <a href="#blah" onmouseover="/* */">Link with onmouseover attribute</a>
+ </li>
+ <li>
+ <h4>a[onmouseout]</h4>
+ <a href="#blah" onmouseout="/* */">Link with onmouseout attribute</a>
+ </li>
+ <li>
+ <h4>label:not([for])</h4>
+ <label>Label without for attribute</label>
+ </li>
+ <li>
+ <h4>nav:not([role])</h4>
+ <nav>Nav without role attribute</nav>
+ </li>
+ <li>
+ <h4>div[role="img"]:not([aria-label])</h4>
+ <div role="img">Div with img role and no aria-label</div>
+ </li>
+ <li>
+ <h4>form > *:not(fieldset)</h4>
+ <form>
+ <span>Form has no fieldset</span>
+ </form>
+ </li>
+ <li>
+ <h4>fieldset *:not(legend):first-child</h4>
+ <form>
+ <fieldset>
+ <h5>First child of a fieldset is not a legend</h5>
+ </fieldset>
+ </form>
+ </li>
+ <li>
+ <h4>iframe:not([title])</h4>
+ <iframe src="#" width="100px" height="20px">iframe without title</iframe>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
304 playgrounds/other.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="keywords" content="CSS, CSS Development, Web Development, Cascading Style Sheets, Web Styles" />
+ <meta name="description" content="debugCSS: (X)HTML debugging tool built with CSS" />
+ <title>debugCSS : (X)HTML debugging tool built with CSS</title>
+ <style type="text/css">
+ html,
+ body,
+ div,
+ span,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ pre,
+ a,
+ code,
+ em,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li {
+ border: 0;
+ font-family: inherit;
+ font-size: 100%;
+ font-style: inherit;
+ font-weight: inherit;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+ }
+
+ :focus {
+ outline: #000 dotted thin;
+ }
+
+ a {
+ color: #286EA0;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ a:visited {
+ color: #6B899F;
+ }
+
+ body {
+ background: #FFF;
+ color: #000;
+ font-family: helvetica;
+ line-height: 1.3;
+ }
+
+ ol,
+ ul {
+ list-style: none;
+ }
+
+ p,
+ pre,
+ .mod li {
+ margin: .5em 0;
+ }
+
+ code,
+ pre {
+ font-family: monospace;
+ }
+
+ pre {
+ border: 1px solid #CCC;
+ -moz-border-radius: .5em;
+ -webkit-border-radius: .5em;
+ border-radius: .5em;
+ padding: .5em;
+ }
+
+ pre:hover {
+ background-color: #EAEAEA;
+ -moz-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ -webkit-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ dl {
+ margin-bottom: .5em;
+ }
+
+ dt {
+ font-weight: bold;
+ margin-top: .5em;
+ }
+
+ dd {
+ text-indent: 2em;
+ }
+
+ .wrapper {
+ margin: 1em auto;
+ max-width: 1280px;
+ min-width: 640px;
+ width: 80%;
+ }
+
+ #hd h1 {
+ font-size: 2em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ .mod .hd h3 {
+ border-bottom: 1px solid #CCC;
+ font-size: 1.5em;
+ margin-bottom: .5em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ #hd,
+ .mod {
+ margin-bottom: 3em;
+ }
+
+ cite {
+ font-style: italic;
+ }
+
+ #install .bd a.install {
+ background: #4970A7;
+ background-image: -moz-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ background-image: -webkit-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ border: 1px solid #14468B;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ -webkit-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ color: #FFF;
+ cursor: pointer;
+ display: block;
+ *display: inline;
+ padding: 1em;
+ text-align: center;
+ width: 5em;
+ zoom: 1;
+ }
+
+ .mod ul {
+ list-style: disc outside none;
+ padding-left: 3em;
+ }
+
+ #playground li {
+ clear: left;
+ margin-top: 20px;
+ }
+
+ #playground table,
+ #playground th,
+ #playground td {
+ border: 1px dotted #000;
+ }
+
+ #playground h4 {
+ font-weight: bold;
+ }
+ </style>
+</head>
+<body>
+ <a href="https://github.com/yahoo/debugCSS"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0;"></a>
+ <div class="wrapper">
+ <div id="hd">
+ <h1>debugCSS : (X)HTML debugging tool built with CSS</h1>
+ </div>
+ <div id="bd">
+ <div class="mod" id="summary">
+ <div class="hd">
+ <h3>Summary</h3>
+ </div>
+ <div class="bd">
+ <p>
+ debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.
+ </p>
+ <p>
+ Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."
+ </p>
+ </div>
+ </div>
+ <div class="mod" id="install">
+ <div class="hd">
+ <h3>Install</h3>
+ </div>
+ <div class="bd">
+ <p>
+ Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".
+ </p>
+ <a href="javascript:(function(d,i,l){l=d.getElementById(i);if(l){l.parentNode.removeChild(l);return;}l=d.createElement('link');l.id=i;l.rel='stylesheet';l.type='text/css';l.href='http://yahoo.github.com/debugCSS/debugCSS.css';d.getElementsByTagName('head')[0].appendChild(l);}(document,'debugCSS'))" class="install">debugCSS</a>
+ <p>
+ Get the source code on GitHub : <a href="https://github.com/yahoo/debugCSS">yahoo/debugCSS</a>
+ </p>
+ </div>
+ </div>
+
+ <div class="mod" id="playground">
+ <div class="hd">
+ <h3>Other Playground</h3>
+ </div>
+ <div class="bd">
+ <ul>
+ <li>
+ <h4>h1 div</h4>
+ <h1><div>Div within header</div</h1>
+ <p>
+ Note: Similarly, h2 - h6 are applicable
+ </p>
+ </li>
+ <li>
+ <h4>a div</h4>
+ <a href="#blah"><div>Block level element within anchor</div></a>
+ </li>
+ <li>
+ <h4>span div</h4>
+ <span><div>Block level element within anchor</div></span>
+ </li>
+ <li>
+ <h4>html[xmlns] a h1</h4>
+ <a href="#blah"><h1>Block level element within anchor</h1></a>
+ <p>
+ Note: Similarly, h2 - h6 are applicable. Not applicable for HTML5, so filtering for XHTML.
+ </p>
+ </li>
+ <li>
+ <h4>ol > *:not(li)</h4>
+ <ol>
+ <h5>Header does not belong here</h5>
+ <li>List</li>
+ <li>Item</li>
+ </ol>
+ </li>
+ <li>
+ <h4>ul > *:not(li)</h4>
+ <ol>
+ <h5>Header does not belong here</h5>
+ <li>List</li>
+ <li>Item</li>
+ </ol>
+ </li>
+ <li>
+ <h4>dl > *:not(dt):not(dd)</h4>
+ <dl>
+ <h5>Header does not belong here</h5>
+ <dt>Term</dt>
+ <dd>Definition</dd>
+ </dl>
+ </li>
+ <li>
+ <h4>center</h4>
+ <center>Deprecated tag</center>
+ </li>
+ <li>
+ <h4>u</h4>
+ <u>Deprecated tag</u>
+ </li>
+ <li>
+ <h4>font</h4>
+ <font>Deprecated tag</font>
+ </li>
+ <li>
+ <h4>map</h4>
+ <map></map>
+ <li>
+ <h4>b</h4>
+ <b>Deprecated tag</b>
+ </li>
+ <li>
+ <h4>i</h4>
+ <i>Deprecated tag</i>
+ </li>
+ <li>
+ <h4>blink</h4>
+ <blink>Deprecated tag</blink>
+ </li>
+ <li>
+ <h4>marquee</h4>
+ <marquee>Deprecated tag</marquee>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
425 playgrounds/tables.html
@@ -0,0 +1,425 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="keywords" content="CSS, CSS Development, Web Development, Cascading Style Sheets, Web Styles" />
+ <meta name="description" content="debugCSS: (X)HTML debugging tool built with CSS" />
+ <title>debugCSS : (X)HTML debugging tool built with CSS</title>
+ <style type="text/css">
+ html,
+ body,
+ div,
+ span,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ pre,
+ a,
+ code,
+ em,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li {
+ border: 0;
+ font-family: inherit;
+ font-size: 100%;
+ font-style: inherit;
+ font-weight: inherit;
+ margin: 0;
+ outline: 0;
+ padding: 0;
+ vertical-align: baseline;
+ }
+
+ :focus {
+ outline: #000 dotted thin;
+ }
+
+ a {
+ color: #286EA0;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ a:visited {
+ color: #6B899F;
+ }
+
+ body {
+ background: #FFF;
+ color: #000;
+ font-family: helvetica;
+ line-height: 1.3;
+ }
+
+ ol,
+ ul {
+ list-style: none;
+ }
+
+ p,
+ pre,
+ .mod li {
+ margin: .5em 0;
+ }
+
+ code,
+ pre {
+ font-family: monospace;
+ }
+
+ pre {
+ border: 1px solid #CCC;
+ -moz-border-radius: .5em;
+ -webkit-border-radius: .5em;
+ border-radius: .5em;
+ padding: .5em;
+ }
+
+ pre:hover {
+ background-color: #EAEAEA;
+ -moz-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ -webkit-box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ box-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ dl {
+ margin-bottom: .5em;
+ }
+
+ dt {
+ font-weight: bold;
+ margin-top: .5em;
+ }
+
+ dd {
+ text-indent: 2em;
+ }
+
+ .wrapper {
+ margin: 1em auto;
+ max-width: 1280px;
+ min-width: 640px;
+ width: 80%;
+ }
+
+ #hd h1 {
+ font-size: 2em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ .mod .hd h3 {
+ border-bottom: 1px solid #CCC;
+ font-size: 1.5em;
+ margin-bottom: .5em;
+ text-shadow: 3px 3px 5px rgba(17,17,17,.1);
+ }
+
+ #hd,
+ .mod {
+ margin-bottom: 3em;
+ }
+
+ cite {
+ font-style: italic;
+ }
+
+ #install .bd a.install {
+ background: #4970A7;
+ background-image: -moz-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ background-image: -webkit-linear-gradient(top, #4B71A9 0%, #2A5797 50%, #235293 54%, #14468B 100%);
+ border: 1px solid #14468B;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ -webkit-box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ box-shadow: 0px 1px 1px rgba(242, 242, 242, 0.7);
+ color: #FFF;
+ cursor: pointer;
+ display: block;
+ *display: inline;
+ padding: 1em;
+ text-align: center;
+ width: 5em;
+ zoom: 1;
+ }
+
+ .mod ul {
+ list-style: disc outside none;
+ padding-left: 3em;
+ }
+
+ #playground li {
+ clear: left;
+ margin-top: 20px;
+ }
+
+ #playground table,
+ #playground th,
+ #playground td {
+ border: 1px dotted #000;
+ }
+
+ #playground h4 {
+ font-weight: bold;
+ }
+ </style>
+</head>
+<body>
+
+ <a href="https://github.com/yahoo/debugCSS"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0;"></a>
+ <div class="wrapper">
+ <div id="hd">
+ <h1>debugCSS : (X)HTML debugging tool built with CSS</h1>
+ </div>
+ <div id="bd">
+ <div class="mod" id="summary">
+ <div class="hd">
+
+ <h3>Summary</h3>
+ </div>
+ <div class="bd">
+ <p>
+ debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.
+ </p>
+ <p>
+ Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."
+ </p>
+
+ </div>
+ </div>
+ <div class="mod" id="install">
+ <div class="hd">
+ <h3>Install</h3>
+ </div>
+ <div class="bd">
+ <p>
+
+ Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".
+ </p>
+ <a href="javascript:(function(d,i,l){l=d.getElementById(i);if(l){l.parentNode.removeChild(l);return;}l=d.createElement('link');l.id=i;l.rel='stylesheet';l.type='text/css';l.href='http://yahoo.github.com/debugCSS/debugCSS.css';d.getElementsByTagName('head')[0].appendChild(l);}(document,'debugCSS'))" class="install">debugCSS</a>
+ <p>
+ Get the source code on GitHub : <a href="https://github.com/yahoo/debugCSS">yahoo/debugCSS</a>
+ </p>
+ </div>
+ </div>
+
+ <div class="mod" id="playground">
+ <div class="hd">
+ <h3>Table Playground</h3>
+ </div>
+ <div class="bd">
+ <ul>
+ <li>
+ <h4>table:not([summary])</h4>
+ <table>
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>no</td><td>table</td><td>summary</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table > tr</h4>
+ <table summary="my table summary">
+ <tr><td>no</td><td>table</td><td>body</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </table>
+ </li>
+ <li>
+ <h4>table th:not([scope])</h4>
+ <table summary="my table summary">
+ <thead>
+ <tr><th>I'm</th><th>a</th><th>table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>no</td><td>tr</td><td>scope</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table thead td</h4>
+ <table summary="my table summary">
+ <thead>
+ <tr><td scope="col">I'm</td><td scope="col">a</td><td scope="col">table</td></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>td</td><td>in</td><td>thead</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table > tbody:first-child</h4>
+ <table summary="my table summary">
+ <tbody>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ <tr><td>no</td><td>thead</td><td>tfoot</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table > tbody + tfoot</h4>
+ <table summary="my table summary">
+ <thead>
+ <tr><td scope="col">I'm</td><td scope="col">a</td><td scope="col">table</td></tr>
+ </thead>
+ <tbody>
+ <tr><td>tfoot</td><td>after</td><td>tbody</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ <tfoot>
+ <tr><td>tfoot</td><td>should come before</td></td><td>
+ </tfoot>
+ </table>
+ </li>
+ <li>
+ <h4>table > tr:first-child:last-child</h4>
+ <table summary="my table summary">
+ <tr><td>Only one</td><td>tr</td><td>in a table</td></tr>
+ </table>
+ </li>
+ <li>
+ <h4>table > tbody > tr:first-child:last-child</h4>
+ <table summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Only one</td><td>tr</td><td>in a tbody</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption)</h4>
+ <p>
+ Note: this test may always pass as most browsers seem to move the non-valid tags outside the table element.
+ </p>
+ <table summary="my table summary">
+ <h5>This header doesn't belong here</h5>
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>non-valid tag</td><td>as child</td><td>of table</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[align]</h4>
+ <table
+ align="left"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[bgcolor]</h4>
+ <table
+ bgcolor="grey"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[border]</h4>
+ <table
+ border="1px"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[cellpadding]</h4>
+ <table
+ cellpadding="5px"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[cellspacing]</h4>
+ <table
+ cellspacing="5px"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ <li>
+ <h4>table[width]</h4>
+ <table
+ width="50%"
+ summary="my table summary">
+ <thead>
+ <tr><th scope="col">I'm</th><th scope="col">a</th><th scope="col">table</th></tr>
+ </thead>
+ <tfoot></tfoot>
+ <tbody>
+ <tr><td>with</td><td>inline</td><td>styles</td></tr>
+ <tr><td>please</td><td>test</td><td>me.</td></tr>
+ </tbody>
+ </table>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.