- From: Karl Dubost <karl@w3.org>
- Date: Mon, 27 Nov 2006 16:03:06 +0900
- To: olivier Thereaux <ot@w3.org>
- Cc: QA Dev <public-qa-dev@w3.org>
Le 24 nov. 2006 à 16:45, olivier Thereaux a écrit :
> * Styling
>
> - need to review styling of results. It's very ugly at the moment.
> http://qa-dev.w3.org:8001/css-validator/validator?uri=http%3A%2F%
> 2Fwww.w3.org%2F
> http://qa-dev.w3.org:8001/css-validator/validator?uri=http%3A%2F%
> 2Fwww.flickr.com
# Markup structure
<div id="warnings">
<div>
<h3></h3>
<ul>
<li><span class='warning'>Line : linenumber (Level : 1)</span>
message </li>
</ul>
</div>
<div>
<h3></h3>
<ul>
<li><span class='warning'>Line : linenumber (Level : 1)</span>
message </li>
</ul>
</div>
</div>
# Suggestions
1. Markup for warning lines
<li class="warning">
<span class="line">linenumber</span>
<span class="message">message<span>
</li>
2. Warning levels
I would suggest to remove the level information for warning which
is not very meaningful in this context and might be confusing with
CSS levels. But we might want to keep this information.
markup:
<li class="warning level1">
<span class="line">linenumber</span>
<span class="message">message<span>
</li>
3. Validated stylesheet
The validated style sheet is a bit tougher. it is inside a
<div id="css">
No trouble so far, but then the properties and their values are
contained in nested lists, which makes it useless for cut and paste.
Some user agents will for example add for each list item a "*" or "#".
What I would suggest here is to use a "pre"
Instead of
<ul class='vAtRule'>
<li><span class='selector'>.navBlock</span> {
<ul class='vRule'>
<li>background : <span class='vPropertyValue'>#eec</span>;</li>
<li>color : <span class='vPropertyValue'>#000</span>;</li>
<li>float : <span class='vPropertyValue'>left</span>;</li>
<li>width : <span class='vPropertyValue'>26%</span>;</li>
<li>border : <span class='vPropertyValue'>none</span>;</li>
</ul>
</li>
…
to this code where we could have a colored validated CSS which we can
cut and paste.
<pre>
<code class="css vAtRule">
<span class='selector'>.navBlock</span> {
<span class="Property">background</span>: <span
class='vPropertyValue'>#eec</span>;
<span class="Property">color</span>: <span
class='vPropertyValue'>#000</span>;
<span class="Property">float</span>: <span
class='vPropertyValue'>left</span>;
<span class="Property">width</span>: <span
class='vPropertyValue'>26%</span>;
<span class="Property">border</span>: <span
class='vPropertyValue'>none</span>;
</code>
</pre>
I stop here before going too far to see if it's not too much
refactoring of the code.
--
Karl Dubost - http://www.w3.org/People/karl/
W3C Conformance Manager, QA Activity Lead
QA Weblog - http://www.w3.org/QA/
*** Be Strict To Be Cool ***
Received on Monday, 27 November 2006 07:03:56 UTC