Простой способ провести CSS-debug / Каскадные Таблицы Стилей / Хабрахабр

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

Болтаясь сегодня по интернету в поисках чего-нибудь интересненького, наткнулся на вот такой простой (и столь же замечательный в своей простоте) способ отыскать «неполадку» в верстке.

CSS

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

Цвет, тип и размер обводки каждый может выбрать по вкусу.

Поддержка браузерами:

К сожалению, в браузерах от Microsoft версий 6 и 7 (в 8-й — все окей) свойство outline не поддерживается. Для них, пожалуй, придется использовать border.

+89

21 июля 2009, 14:25

170

frujo

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

комментарии (56)

Bytexpert 21 июля 2009, 14:29 #

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

+27

SMiX 21 июля 2009, 14:40 #

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

rondew 30 марта 2011, 13:53 # ↑

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

trak 21 июля 2009, 15:04 #

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

piumosso 21 июля 2009, 15:04 #

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

–9

Tvarb 21 июля 2009, 15:06 #

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

nooze 21 июля 2009, 15:19 # ↑

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

Xaljava 21 июля 2009, 18:23 # ↑

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

Tvarb 21 июля 2009, 18:39 # ↑

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

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

avenu 21 июля 2009, 15:06 #

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

Kirk 21 июля 2009, 15:08 #

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

DileSoft 21 июля 2009, 15:18 #

View at EasyCaptures.com

xalexx 21 июля 2009, 15:25 #

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

+13

elisium 21 июля 2009, 17:01 # ↑

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

–1

Xaljava 21 июля 2009, 18:24 # ↑

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

xalexx 21 июля 2009, 18:39 # ↑

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

yoyurec 21 июля 2009, 19:02 # ↑

+ плагин webdeveloper

SowingSadness 21 июля 2009, 22:31 # ↑

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

+22

zorro1211 21 июля 2009, 15:25 #

Ну если речь об извращениях, то… Старый известный мне метод — если не знаешь в каком правил(е/ах) подвох, то удали половину css и посмотри осталась ли проблема, если осталась, значит проблема в другой половине. Ну и далее делением на 2. А вообще firebug рулит. Да и в других браузерах есть средства отладок.

magicstream 21 июля 2009, 16:02 # ↑

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

Zuzle 21 июля 2009, 15:26 #

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

lashtal 21 июля 2009, 15:27 #

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

zzeus 21 июля 2009, 15:27 #

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

Theo_from_Sed 21 июля 2009, 15:30 #

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

yoyurec 21 июля 2009, 19:04 # ↑

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

jcd 21 июля 2009, 15:39 #

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

НЛО прилетело и опубликовало эту надпись здесь

agl666 21 июля 2009, 15:58 # ↑

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

+20

Irokez 21 июля 2009, 16:06 #

а может лучше?

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

–15

Grundiss 21 июля 2009, 18:33 # ↑

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

yanajy 21 июля 2009, 18:39 # ↑

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

deniamnet 21 июля 2009, 18:51 # ↑

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

switchON 21 июля 2009, 22:39 # ↑

Да ладно!

fatal 22 июля 2009, 02:12 # ↑

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

b_r 22 июля 2009, 15:06 # ↑

почти?

r3code 16 ноября 2010, 19:42 # ↑

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

Alinaki 21 июля 2009, 16:11 #

Гениально! Черт :)

Doomsday_nxt 21 июля 2009, 16:18 #

в ИЕ8 есть удобный инструмент в средствах разработчика, выбираем пункт меню «Как векторные» и далее по желанию… Можно выделить любой тип элементов… Можно даже по типу размещения обозначить…

persei 21 июля 2009, 18:42 # ↑

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

assTeT 21 июля 2009, 16:20 #

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

yanajy 21 июля 2009, 18:38 # ↑

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

Slasyz 21 июля 2009, 19:48 # ↑

Зачем, если можно просто outline:1px?

yanajy 21 июля 2009, 22:33 # ↑

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

homm 21 июля 2009, 20:23 # ↑

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

yanajy 21 июля 2009, 22:31 # ↑

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

–8

adrian_lopez 21 июля 2009, 16:27 #

кккк

–6

n0mini 21 июля 2009, 19:52 #

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

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

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

yanajy 21 июля 2009, 22:37 # ↑

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

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

n0mini 25 июля 2009, 13:40 # ↑

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

anmiles 21 июля 2009, 21:59 #

3.5 Firefox с таким «хаком» окрасился сверху донизу, включая его собственные кнопки, панели, главное меню и прочие контролы.
Отвратное зрелище с практической точки зрения. Хотя цветовая мешанина кому-то может и понравится :). Тем не менее, Web Developer имеет намного более практичный функционал всевозможного аутлайна.

–5

DileSoft 21 июля 2009, 22:52 #

Bookmarklet:

javascript:document.getElementsByName('Head')[0].innerHTML=document.getElementsByName('Head')[0].innerHTML+'<style>\n* { outline: 2px dotted red; }\n* * { outline: 2px dotted green; }\n* * * { outline: 2px dotted orange; }\n* * * * { outline: 2px dotted blue; }\n* * * * * { outline: 1px solid red; }\n* * * * * * { outline: 1px solid green; }\n* * * * * * * { outline: 1px solid orange; }\n* * * * * * * * { outline: 1px solid blue; }\n</style>';

–4

DileSoft 21 июля 2009, 22:57 # ↑

Виноват, вот так:

javascript:document.body.innerHTML=document.body.innerHTML+'<style>\n* { outline: 2px dotted red; }\n* * { outline: 2px dotted green; }\n* * * { outline: 2px dotted orange; }\n* * * * { outline: 2px dotted blue; }\n* * * * * { outline: 1px solid red; }\n* * * * * * { outline: 1px solid green; }\n* * * * * * * { outline: 1px solid orange; }\n* * * * * * * * { outline: 1px solid blue; }\n</style>';

Впрочем, тоже не так. ну вы поняли :)

serebro 22 июля 2009, 01:54 #

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

Paxa 22 июля 2009, 12:31 #

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

Каскадные Таблицы Стилей