<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
</head><body bgcolor="#FFFFFF" text="#000000">Nicely done, William!!!<br>
<br>
Shinra Web Holdings wrote:
<blockquote
cite="mid:CAAN=eAMSjzxCx8-REJ9A2F0185LbFwXPEa_g1WP7Aa5yQNQM3Q@mail.gmail.com"
type="cite">I approve of this message.<br>
<br>
<div class="gmail_quote">On Thu, Jul 19, 2012 at 8:39 AM, William
Ludwig <span dir="ltr"><<a moz-do-not-send="true"
href="mailto:weludwig@gmail.com" target="_blank">weludwig@gmail.com</a>></span>
wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px
#ccc solid;padding-left:1ex"><div>Yesterday in another thread i
mentioned that the sample CSS at <a moz-do-not-send="true"
href="http://codex.wordpress.org/CSS#WordPress_Generated_Classes"
target="_blank">http://codex.wordpress.org/CSS#WordPress_Generated_Classes</a>
was ineffecient and redundant. Emil challenged me to produce something
better so I wanted to run it past this group before I submitted it.
After all you guys are the ones that would be seeing it on submitted
themes.</div>
<div><br></div><div>My goal in writing this CSS was to make it
accessable to newer developers, remove repetitive rules, and reduce
selector complexity. Visually the new CSS appears the same as the old
CSS (one exception-explained below), but it's half the size and should
be easier to manage.</div>
<div><br></div><div>Thanks for reading this, sorry it's so long.</div><div><br></div><div><br></div><div>My
tests are here, CSS is in the header to make it easier to view. HTML
is identical.</div><div><br></div><div>
Original ... <a moz-do-not-send="true"
href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html"
target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/new.html</a></div><div>New
... <a moz-do-not-send="true"
href="http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html"
target="_blank">http://wp-themedev.ludwigdevelopment.com/wp-content/uploads/2012/07/original.html</a></div>
<div><br></div><div><br></div><div>Here is a breakdown what I changed
and why.</div><div><br></div><div>.alignnone - added display:
inline-block so that when .alignnone is applied to either a div or an
image it will display the same. This is kind of a judgement call on my
part but I feel that image layout should be consistant whether or not
there is a caption.</div>
<div><br></div><div>div.aligncenter - removed as unnecessary because the
first selector will already catch any divs with .aligncenter.</div><div><br></div><div>a.img.alignright,
a img.alignnone, a img.alignleft, a img.aligncenter - removed,
duplicates of the base alignment class with more complicated selector.</div>
<div><br></div><div>.wp-caption.alignnone, .wp-caption.alignleft,
.wp-caption.alignright - removed, duplicates of the base alignment class
with more complicated selector.</div><div><br></div><div>.wp-caption
p.wp-caption-text - Changed selector to just .wp-caption-text. No need
to complicate it. It really shouldn't show up outside of a .wp-caption
and if it does someone had to of put it there on purpose and they can
deal with it.</div>
<div><br></div><div><br></div><div>Final CSS</div><div><br></div><div>/*
=WordPress Core</div><div>--------------------------------------------------------------
*/</div><div>.alignnone {</div><div> display: inline-block;</div>
<div> margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.alignright
{</div><div> float:right;</div><div> margin: 5px 0 20px 20px;</div><div>}</div><div><br></div><div>.alignleft
{</div><div> float: left;</div>
<div> margin: 5px 20px 20px 0;</div><div>}</div><div><br></div><div>.aligncenter
{</div><div> display: block;</div><div> margin: 5px auto;</div><div>}</div><div><br></div><div>.wp-caption
{</div><div> background: #fff;</div>
<div> border: 1px solid #f0f0f0;</div><div> max-width: 96%; /*
Image does not overflow the content area */</div><div> padding: 5px
3px 10px;</div><div> text-align: center;</div><div>}</div><div><br></div><div>
.wp-caption img {</div><div> border: 0 none;</div><div> height:
auto;</div><div> margin: 0;</div><div> max-width: 98.5%;</div><div>
padding: 0;</div><div> width: auto;</div><div>}</div><div><br></div><div>
.wp-caption-text {</div><div> font-size: 11px;</div><div>
line-height: 17px;</div><div> margin: 0;</div><div> padding: 0 4px
5px;</div><div>}</div><div><br></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a moz-do-not-send="true"
href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a><br>
<a moz-do-not-send="true"
href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers"
target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div>
<br>
<pre wrap="">_______________________________________________
theme-reviewers mailing list
<a class="moz-txt-link-abbreviated" href="mailto:theme-reviewers@lists.wordpress.org">theme-reviewers@lists.wordpress.org</a>
<a class="moz-txt-link-freetext" href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a>
</pre>
</blockquote>
</body></html>