Удобный отладочный CSS сниппет

Я использую следующий кусок CSS-кода, чтобы визуализировать структуру XHTML (или HTML) документа, отображая цветной контур вокруг границы каждого элемента.

Для всех уровней в иерархии измените цвета на удобные именно вам, чтобы видеть глубину вложенности элементов.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

По умолчанию данные правила находятся вверху файла стилей и скрыты при помощи многострочного комментария. При отладке просто раскомменитруйте данный участок кода.

В Internet Explorer < 9 свойство outline не поддерживается. Для них можно попробовать использовать border, хотя эффект будет не тот.

Постовой: таблички из пластика

Ссылки

• A handy CSS debugging snippet

Похожие публикации:

1. Диагностический CSS
   Eric Meyer предложил использовать CSS-правила для выявления ошибок на странице при верстке страницы. Код показывает ошибки на странице, если у...
2. Диагностический CSS
   При вёрстке очень важно следовать стандартам, чтобы ваши макеты в будущем выглядели сносно, поэтому необходимо избавлятся от старых и ненужных...
3. Треугольные булеты в меню
   Чтобы в вашем списке ссылок (меню) использовать треугольные булеты (маркеры), для этого необязательно рисовать картинку, можно немного поиграться с бордерами,...
4. Поддержка RGBA в Internet Explorer
   Как известно Internet Explorer не поддерживает указание цвета в RGBA, но большая часть фильтров понимает цвет в формате ARGB (alfa,...
5. Равномерный фон под текстом
   Одно из модных направлений веб-дизайна последних лет — оформление заголовков контрастным фоном. Выглядит симпатично, но реализовывается средствами CSS не так...

Теги: CSS, Internet Explorer

Поделиться: