Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #1 from andresn/master

Checks for inline styles applied to table tag as well as test page
  • Loading branch information...
commit 288f85a26aa22efb9fd4fd42b4f12a1bd5407a8b 2 parents 4f8b4ee + 13e9392
@imbrianj authored
Showing with 348 additions and 1 deletion.
  1. +16 −1 debugCSS.css
  2. +332 −0 playgrounds/tables.html
View
17 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,
@@ -130,7 +135,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.';
}
@@ -247,7 +257,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="#"],
View
332 playgrounds/tables.html
@@ -0,0 +1,332 @@
+<!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>
+
+ <script>
+ var fileSource = '../debugCss.css'; //'//imbrianj.github.com/debugCSS/debugCSS.css';
+ </script>
+</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=fileSource;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[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>
+ <caption>My table's caption</caption>
+ </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>
+ <caption>My table's caption</caption>
+ </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>
+ <caption>My table's caption</caption>
+ </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>
+ <caption>My table's caption</caption>
+ </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>
+ <caption>My table's caption</caption>
+ </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>
+ <caption>My table's caption</caption>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.