Удобный отладочный 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, хотя эффект будет не тот.

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Айрат

    соответственно css коды можно взять от туда

  • Айрат

    ничем не удивили

    данные вещи в браузере opera(кнопка режим автора)
    давно и очень давно присутствуют

    • Я (да и многие другие) не пользуются Оперой, а как же кроссбраузерность?