Простой способ провести CSS-debug

[Bytexpert]

Респект! Воистину, все гениальное — просто!

[SMiX]

А вот ещё один безумно удобный инструмент
Добавляем в закладки то, что скрывается под кнопкой Yaml debug и наслаждаемся результатом перехода по ней на разрабатываемой странице.

[rondew]

о боже, это просто музыка!

[trak]

А можно скриншот приложить?

[piumosso]

К сожалению, border (в отличие от outline) имеет физическую толщину, и его употребление приведет к проблемам вёрстки, то есть попытка найти одни проблемы может привести к возникновению других.
А так — хороший способ для Opera и Webkit

[Tvarb]

Что могу сказать если такая вложенность при верстке, значит что то там уже не так :)
А так способ полезный

[nooze]

Ну до конца может и да, но вложеность 5-6 вполне обычная

[Xaljava]

Вы просто со сложными дизайнами не сталкивались, а так же с оптимизацией верстки. Уровень вложенности 5-6 норма.

[Tvarb]

Как раз наоборот оптимизация верстки и предполагает не большую вложенность

И скриптом по DOM в таком случае легче бегать.
Вложенность 8 это ужас.

[avenu]

Проблема в том, что баги обычно и приходится искать в IE :)

[Kirk]

Попробовал, ничего особенного.

[xalexx]

Много визуального шума. Мне кажется проще добавлять outline только к элементу который нужно проверить, который потенциально вызывает проблемы.

[elisium]

Для элемента который нужно проверить ничего лучше FireBug выдумывать не нужно.

[Xaljava]

Да по ходу и невозможно :))

[xalexx]

Согласен, но если есть firebug тогда и вышеописанный способ не нужен.

[yoyurec]

+ плагин webdeveloper

[SowingSadness]

Свет клином на фаербаге не сошелся…
Dragonfly и WebDeveloperToolbar ни чем не хуже, а иногда и лучше.

[magicstream]

бинарный поиск и тут спасает однако :)

[Zuzle]

Отличный метод, спасибо! =) Нужно будет подумать о яваскрипт альтернативе в IE

[lashtal]

Если додумать концепцию и допилить с пом. js — можно раскрасить своим цветом каждый элемент (div, p, input, и т.д.) и отображать уровень вложенности яркостью цвета линии и/или типом линии (dotted, dashed и т.д.).
Я всегда пользуюсь примитивным * {outline: 1px solid red;} (или бордер для IE).
Кстати хороший способ протестировать качество разметки: оно хорошее, если разметка не разваливается при
* {border: 1px solid red;}

[zzeus]

С этими браузерами и так проблем не особо много. Основная — с IE6.

[Theo_from_Sed]

Для FF есть WebDeveloper, в нём Outline->…
И там на любой вкус. И block level elements, и frames, deprecated, tables etc.

[yoyurec]

+ «Information -> Display topographic information» для вложенности

[jcd]

Если в IETester никак не получается использовать Developer Toolbar, то в Internet Explorer VPC Image уже все включено.

[arestov]

s14.radikal.ru/i187/0907/87/707c8cb95f9f.png

[agl666]

на самом деле :)

[Irokez]

а может лучше?
*:hover { outline: 2px dotted red; }
* *:hover { outline: 2px dotted green; }
* * *:hover { outline: 2px dotted orange; }
* * * *:hover { outline: 2px dotted blue; }
* * * * *:hover { outline: 1px solid red; }
* * * * * *:hover { outline: 1px solid green; }
* * * * * * *:hover { outline: 1px solid orange; }
* * * * * * * *:hover { outline: 1px solid blue; }


[Grundiss]

и чем лучше?
:hover можно прицепить только к ссылкам

[yanajy]

для IE только вроде

[deniamnet]

в браузерах, отличных от IE, hover срабатывает при наведении мыши почти для любого элемента
попробуйте проверить на input, например (бэкграунд или бордер)

[iswitch]

Да ладно!

[fatal]

Проснулись только? :)
Начиная с IE 7 hover работает почти на любом элементе.

[b_r]

почти?

[r3code]

Отличная идея, в Firebug такого режима еще нет.

[persei]

А главное — такие инструменты есть еще как минимум в сафари и ff

[assTeT]

Для ie можно использовать не border, а background, например.

[yanajy]

а если сделать, например, border: 2px; margin: -2px — не пойдёт?

[yanajy]

просто хочется сделать кроссбраузерно

[homm]

А если уже есть border и margin?

[yanajy]

да, тогда плохо.

[adrian_lopez]

кккк

[n0mini]

Отвратительно. Лучше юзать developer bar'ы. А для IE бордер вообще гениально, так как обрамить элемент обводкой, расширяя тем самым элемент и развалить всю верстку — это круто о_О.

frujo, бросьте это решение в унитаз. Мало того, что оно мало чем полезно, не кроссбраузерно и может перекрывать родные аутлайны, так оно еще и в глазах мельтишит.

По поводу developer bar'ов: он есть или можно подключить в ie, opera9+, ff, safari3+. В chrome поведение как в сафари, так что инструменты разработчиков есть во всех популярных браузерах. Итак, зачем нужен этот CSS?

[yanajy]

Может, мне просто нужно что-то исправить с домашнего компа, а не с рабочего. Мне устанавливать плагины на ВСЕ браузеры на компе, который для работы я использую только в КРАЙНИХ случаях (~1раз в месяц)?

(частный случай, но можно ещё десяток привести)

[n0mini]

И иметь обкусанный функционал, который обводит блоки, превращая какую-нибудь промку в кашу. Порассуждайте в сторону portable софта ;)

[serebro]

Я для отладки в IE использую FireBug Lite. Он подключается как внешний JS. Очень удобно.

[Paxa]

В опере есть замечательная фича — «видимый контур элементов» Делает тоже самое, но не нужно лесть в css, и другие классные фичи там есть (это в кнопке «режим автора»)