Eric Meyer предложил использовать опредленные CSS правила для выявления ошибок на странице в ходе проектирования. Цель правил визуально показывать ошибки на странице. Например если у ссылки не проставлен адрес она выделяется определенным цветом и сразу обращает на себя внимание.
Вот примеры правил для изображений:
img {outline: 5px solid red;} img[alt][title] {outline-width: 0;} img[alt] {outline-color: fuchsia;} img[alt], img[title] {outline-style: double;} img[alt=""][title], img[alt][title=""] {outline-width: 3px;} img[alt=""][title=""] {outline-style: dotted}
Выглядит это следующим образом:
- Устанавливает всем изображениям красный контур шириной
5px. - Если у изображения есть атрибуты
altиtitle, то ширина контура приравнивается к нулю. - Если изображениее имеет атрибут
alt, контура приобретает цветfuchsia. - Если присутствует атрибут
altилиtitleконтур увеличивается вдвое. - Если у изображения пустой
altи заполненныйtitle, или наоборот, ширина контура становится равной3px. - Если имеются пустой атрибут
altи пустойtitle, контур становится пунктирным.
Посмотреть стили в действии можно на демонстрационной странице.
А вот собственно и полная текущая версия:
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {padding: 0.5em; background: yellow;} ! important *[style], img, a[href], font, center {outline: 5px solid red;} ! important table, th {border: 5px solid red;} ! important img[alt][title] {outline-width: 0;} ! important img[alt] {outline-color: fuchsia;} ! important img[alt], img[title] {outline-style: double;} ! important img[alt=""][title], img[alt][title=""] {outline-width: 3px;} ! important img[alt=""][title=""] {outline-style: dotted;} ! important table[summary], th[scope="col"], th[scope="row"] {border: 1px solid #AAA;} ! important a[title] {outline-width: 0;} ! important a[title=""] {outline-width: 3px;} ! important a[href="#"] {background: lime;} ! important a[href=""] {background: fuchsia;} ! important
Конечно эти стили не заменят различные утилиты типа Web Developer Toolbar. Но они могут пригодится как еще один полезный инструмент в наборе веб-разработчика.
Оказывается CSS может и так ) интересно.
К сожалению, в IE 7 эти тесты у меня не стали работать, равно как и в превью Dreamveawer, но в Мозилле всё хорошо отображается. Действительно удобно смотреть.
Может это у меня что-то с настройками IE ?