Diagnostic Styling

13.10.07 веб-стандарты, верстка, css

Eric Meyer представил ряд правил CSS, применяя которые можно визуально отслеживать ошибки в разметке при создании сайта.

Выглядят они примерно следующим образом:

a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

Данные правила показывают пустые ссылки.

Для изображений:

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;}

Смысл данных правил заключается в следующем:

1. Задаем всем изображениям красный контур
2. Если изображение имеет атрибуты alt и title одновременно, задаем ширину контура 0.
3. Если изображение имеет только alt атрибут, то меням цвет контура на fuchsia. Это означает, что любое изображение, не имеющее alt атрибута будет обведено красным цветом.
4. Если изображение имеет либо alt либо title задается двойной стиль контура.
5. Если alt пустой и имеется title с любым значением или наоборот, ширина контура устанавливается в 3px.
6. Если оба атрибута и alt, и title пустые, то задается точечный стиль контура.

При использовании данных стилей придется проставлять обязательно !important.

Просмотреть все это в действии можно на the diagnostic demonstration page.

Прочитать подробнее можно здесь Diagnostic Styling

Комментарии

← предыдущая следующая →

В архив