Skip to content

Commit

Permalink
Added checks for when inline styles are applied to a table tag. Furth…
Browse files Browse the repository at this point in the history 
…er, added an example / test / playground page.
  • Loading branch information
Andres Narvaez committed Oct 5, 2011
1 parent 4f8b4ee commit 13e9392
Show file tree
Hide file tree
Showing 2 changed files with 348 additions and 1 deletion.
17 changes: 16 additions & 1 deletion debugCSS.css
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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.';
}
Expand Down Expand Up @@ -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="#"],
Expand Down
332 changes: 332 additions & 0 deletions playgrounds/tables.html
View file
@@ -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>

0 comments on commit 13e9392

Please sign in to comment.