debug.css

У хороших парней из Blueprint позаимствовал идею debug.css - CSS, которая подключена в процессе разработки страницы/сайта/web 2.0 приложения, и которая при предварительном просмотре разрабатываемой страницы в браузере визуально выделяет некоторые ошибки HTML-разметки:

• противоречие смысла элемента и CSS-класса (например, элемент заголовка h1 с CSS-классом hide - зачем скрывать заголовок?, или sub.large - кому нужен гигантский подстрочный индекс?)
• одновременно указанные классы, конфликтующие по каким-либо параметрам (margin, line-height, display и т.д.)
• неправильно вложенные элементы (p div, table > input и т.д.)
• атрибуты, не имеющие смысла у данного элемента (br[onclick])
• тег img с отсутствующими атрибутами alt и title
• теги, отсутствующие в HTML5 (applet, center, font и т.д.)
• атрибуты, отсутствующие в HTML5
• пустые теги (span:empty,li:empty,p:empty,td:empty,th:empty)

Чем мне эта идея понравилась:

1. Не надо постоянно вызывать валидатор
2. Включен постоянно, после загрузки содержимого через AJAX результат, что называется, налицо
3. Работает практически одинаково во всех браузерах со всеми разрабатываемыми ресурсами (не везде есть встроенные средства разработки или Web Developer)
4. Легко изменяется и подстраивается под конкретный проект
5. Находит смысловые ошибки - ни один HTML- и CSS-валидатор пока не ищет противоречия в используемых стилях

Недостатки:

1. Ограниченные возможности - не всё можно проверить с помощью чистого CSS
2. Зависит от поддержки используемых селекторов браузерами

А вот сама CSS, как она выглядит на текущий момент:

/* ===========================================================================

  debug.css
  * Helps you finding classes, that are not necessary.
  * Extends with basic html element, attribute & definition help.

  Created by Franz Josef Kaiser 2011 [http://example.com]

  @license: inherited from blueprint source (MIT)
  @version: 0.1 - alpha

  See the Readme file in this folder for additional instructions.
  Note: This plugin will be of no use in in *Internet Explorer*, or any
   browser versions prior to the following, as they doesn't support outline.
   * Firefox 1.0
   * Opera 7.0
   * Konquerer 3.4
   * Safari 1.2

=========================================================================== */

/* ----------------------------------------------------
  Maybe Critical classes
   outlined dashed blue
   Conflict depends on the layout.
   Some definitions maybe altered and lead to unexpected results.
   ex. conflicting margins, paddings, etc.
---------------------------------------------------- */

/*
  Conflict with line-height
    .small -> line-height: 1.875;
    .large -> line-height: 2.5em;

    form.inline -> line-height: 3;
    h1 -> line-height: 1;
    h3 -> line-height: 1;
    h4 -> line-height: 1.25;
    h2, h5, h6 -> line-height: 1.5; (inherited from body)
    sub, sup -> line-height: 0;
  */
form.inline.small,form.inline.large,h1.small,h1.large,h2.small,h2.large,h3.small,h3.large,h4.small,h4.large,h5.small,h5.large,h6.small,h6.large,sub.small,sub.large,sup.small,sup.large
  {
  outline: 1px dashed blue;
}

/* ----------------------------------------------------
  Critical classes
   outlined red
   ex. conflicting margins, paddings, etc.
   Can destroy the layout
---------------------------------------------------- */

/*
  Conflict with display
    .clearfix, .container -> display: block;
    .hide -> display: hide;
  */
article.hide,aside.hide,dialog.hide,figure.hide,footer.hide,header.hide,hgroup.hide,nav.hide,section.hide,.container.hide,.clearfix.hide
  {
  outline: 1px solid red;
}

/* ----------------------------------------------------
  Critical Elements
   outlined cyan
   not valid or empty
---------------------------------------------------- */

/* Invalid nesting of block level elements */
p ul,p ol,p li,p address,p blockquote,p center,p dir,p div,p dl,p fieldset,p form,p h1,p h2,p h3,p h4,p h5,p h6,p isindex,p menu,p noframes,p p,p pre,p table
  {
  outline: 1px solid cyan;
}

table>input {
  outline: 1px solid cyan;
}

/* Invalid usage of universal attributes */
base[class],basefont[class],head[class],html[class],meta[class],param[class],title[class], /* id */
  base[id],head[id],html[id],meta[id],title[id],base[style],basefont[style],head[style],html[style],meta[style],param[style],title[style],
  /* title */ base[title],basefont[title],head[title],html[title],meta[title],param[title],title[title],
  /* Int. handlers */ applet[dir],base[dir],basefont[dir],br[dir],frame[dir],frameset[dir],hr[dir],iframe[dir],param[dir],
  /* lang */ applet[lang],base[lang],basefont[lang],br[lang],frame[lang],frameset[lang],hr[lang],iframe[lang],meta[lang],param[lang],
  /* Event handlers */ applet[onclick],base[onclick],basefont[onclick],bdo[onclick],br[onclick],font[onclick],frame[onclick],frameset[onclick],head[onclick],html[onclick],iframe[onclick],isindex[onclick],param[onclick],title[onlick],
  /* ondblclick */ applet[ondblclick],base[ondblclick],basefont[ondblclick],bdo[ondblclick],br[ondblclick],font[ondblclick],frame[ondblclick],frameset[ondblclick],head[ondblclick],html[ondblclick],iframe[ondblclick],isindex[ondblclick],param[ondblclick],title[ondblclick],
  /* onmousedown */ applet[onmousedown],base[onmousedown],basefont[onmousedown],bdo[onmousedown],br[onmousedown],font[onmousedown],frame[onmousedown],frameset[onmousedown],head[onmousedown],html[onmousedown],iframe[onmousedown],isindex[onmousedown],param[onmousedown],title[onmousedown],
  /* onmouseup */ applet[onmouseup],base[onmouseup],basefont[onmouseup],bdo[onmouseup],br[onmouseup],font[onmouseup],frame[onmouseup],frameset[onmouseup],head[onmouseup],html[onmouseup],iframe[onmouseup],isindex[onmouseup],param[onmouseup],script[onmouseup],style[onmouseup],title[onmouseup],
  /* onmouseover */ applet[onmouseover],base[onmouseover],basefont[onmouseover],bdo[onmouseover],br[onmouseover],font[onmouseover],frame[onmouseover],frameset[onmouseover],head[onmouseover],html[onmouseover],iframe[onmouseover],isindex[onmouseover],param[onmouseover],script[onmouseover],style[onmouseover],title[onmouseover],
  /* onmousemove */ applet[onmousemove],base[onmousemove],basefont[onmousemove],bdo[onmousemove],br[onmousemove],font[onmousemove],frame[onmousemove],frameset[onmousemove],head[onmousemove],html[onmousemove],iframe[onmousemove],isindex[onmousemove],param[onmousemove],script[onmousemove],style[onmousemove],title[onmousemove],
  /* onmouseout */ applet[onmouseout],base[onmouseout],basefont[onmouseout],bdo[onmouseout],br[onmouseout],font[onmouseout],frame[onmouseout],frameset[onmouseout],head[onmouseout],html[onmouseout],iframe[onmouseout],isindex[onmouseout],param[onmouseout],script[onmouseout],style[onmouseout],title[onmouseout],
  /* onkeypress */ applet[onkeypress],base[onkeypress],basefont[onkeypress],bdo[onkeypress],br[onkeypress],font[onkeypress],frame[onkeypress],frameset[onkeypress],head[onkeypress],html[onkeypress],iframe[onkeypress],isindex[onkeypress],param[onkeypress],script[onkeypress],style[onkeypress],title[onkeypress],
  /* onkeydown */ applet[onkeydown],base[onkeydown],basefont[onkeydown],bdo[onkeydown],br[onkeydown],font[onkeydown],frame[onkeydown],frameset[onkeydown],head[onkeydown],html[onkeydown],iframe[onkeydown],isindex[onkeydown],param[onkeydown],script[onkeydown],style[onkeydown],title[onkeydown],
  /* onkeyup */ applet[onkeyup],base[onkeyup],basefont[onkeyup],bdo[onkeyup],br[onkeyup],font[onkeyup],frame[onkeyup],frameset[onkeyup],head[onkeyup],html[onkeyup],iframe[onkeyup],isindex[onkeyup],param[onkeyup],script[onkeyup],style[onkeyup],title[onkeyup]
  {
  outline: 1px solid cyan;
}

/* Missing Attributes */
/* img[alt][title],img[alt],img[title],img[alt=""][title],img[alt][title=""],img[alt=""][title=""] */
img {
  outline: 1px dashed cyan;
}

img[alt],img[title] {
  outline: none;
}

a[title=""],a[href="#"],a[href=""] {
  outline: 1px dashed cyan;
}

/*
  Obsolete elements - see
  http://www.w3.org/TR/html5-diff/#absent-elements
  http://www.w3.org/TR/html5/obsolete.html#non-conforming-features
*/
acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt,u {
  outline: 1px solid cyan;
}

/* Obsolete Attributes */
a[charset],a[coords],a[shape] {
  outline: 1px dashed cyan;
}

option[name],img[name] /*use id*/ ,img[longdesc],img[lowsrc] {
  outline: 1px dashed cyan;
}

object[archive],object[classid],object[codebase],object[codetype],object[declare],object[standby] {
  outline: 1px dashed cyan;
}

th[abbr],th[axis],th[height],th[width],td[abbr],td[axis],td[height],td[scope],td[width] {
  outline: 1px dashed cyan;
}

col[width],colgroup[width],hr[width],pre[width],table[width] {
  outline: 1px dashed cyan;
}

[align],[bgcolor],[border],[cellpadding],[cellspacing],[color],[compact],[hspace],[noshade],[nowrap],[size],[valign],[vspace]
  {
  outline: 1px dashed cyan;
}

/* Empty Elements */
div:empty,span:empty,li:empty,p:empty,td:empty,th:empty {
  outline: 1px dashed cyan;
}

div[id]:empty,div[class]:empty,span[id]:empty {
  outline: none;
}