No need to have the W3C mess with their validator just to work with all the possible browser extensions. This would most likely introduce bugs and cause too much of a headache for them.

Here are 2 things you can do to get by the errors

1. Put all your CSS3 rules in a css3.css file and then when you validate everything in your regular .css files should pass and the css3.css should fail.
2. Or put a /*CSS3*/ comment for each CSS3 rule you have in your style sheet, so when it gives an error you know why. This would work best if you put each css3 rule on a separate line.

The first is from the original design the site had.

In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.


blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/


The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.


blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}


This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.

Here is the function

//CREATE CSS BASED ON DATE
function create_age_css_class($date_sent)
{
/**
$date_sent should be in the following format: YYYYMMDDHHMMSS
Based on doRelativeDate() By Garrett Murray, http://graveyard.maniacalrage.net/etc/relative/
**/
$in_seconds = strtotime(substr($date_sent,0,8).' '.
substr($date_sent,8,2).':'.
substr($date_sent,10,2).':'.
substr($date_sent,12,2));
$diff = time()-$in_seconds;
if ($diff < 86400)
$css_class = 'age_today';
else if ($diff < 604800)
$css_class = 'age_days';
else if ($diff < 1209600)
$css_class = 'age_week';
else if ($diff < 2630880)
$css_class = 'age_weeks';
else
$css_class = 'age_month';
return $css_class;
}


Here is how I call it

$data .= '<li><a href="'. $item->get_permalink();
//SET CLASS BASED ON DATE/AGE
$data .= ' class="' . create_age_css_class($item->get_date('YmdHis')) . '"';
$data .= '>';


You don’t have to use SimplePie for this function, but it’s what inspired me to modify it.

Now for an screenshot

Here is the HTML I used for that

<ul id="type3">
<li class="age_today">Lorem ipsum dolor sit amet</li>
<li class="age_days">Etiam iaculis nulla iaculis mauris</li>
<li class="age_week">Suspendisse at odio</li>
<li class="age_week">Nullam volutpat aliquam lacus</li>
<li class="age_weeks">Nunc dapibus eros vitae mauris rutrum laoreet</li>
<li class="age_weeks">Suspendisse sed nisl</li>
<li class="age_month">Nulla scelerisque gravida neque</li>
<li class="age_month">Leo imperdiet metus, ut adipiscing nisi lacus et pede</li>
</ul>


And here is the CSS used

<style type="text/css">
body {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000; background-color:#fff;}
ul {list-style:none;}
#type3 .age_days {font-size:150%; color:#555;}
#type3 .age_week {font-size:100%; color:#777;}
#type3 .age_weeks {font-size:80%; color:#999;}
#type3 .age_month {font-size:60%; color:#ccc;}
</style>


Added screenshot and sample CSS