Простой способ провести 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; }
    Цвет, тип и размер обводки каждый может выбрать по вкусу.

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


    Firefox Opera Google Chrome Safari

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

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 56

      0
      Респект! Воистину, все гениальное — просто!
        +27
        А вот ещё один безумно удобный инструмент
        Добавляем в закладки то, что скрывается под кнопкой Yaml debug и наслаждаемся результатом перехода по ней на разрабатываемой странице.
          0
          о боже, это просто музыка!
          +5
          А можно скриншот приложить?
            +2
            К сожалению, border (в отличие от outline) имеет физическую толщину, и его употребление приведет к проблемам вёрстки, то есть попытка найти одни проблемы может привести к возникновению других.
            А так — хороший способ для Opera и Webkit
              –9
              Что могу сказать если такая вложенность при верстке, значит что то там уже не так :)
              А так способ полезный
                +3
                Ну до конца может и да, но вложеность 5-6 вполне обычная
                  +2
                  Вы просто со сложными дизайнами не сталкивались, а так же с оптимизацией верстки. Уровень вложенности 5-6 норма.
                    +1
                    Как раз наоборот оптимизация верстки и предполагает не большую вложенность

                    И скриптом по DOM в таком случае легче бегать.
                    Вложенность 8 это ужас.
                  +5
                  Проблема в том, что баги обычно и приходится искать в IE :)
                    +1
                    Попробовал, ничего особенного.
                    • UFO just landed and posted this here
                        0
                        Много визуального шума. Мне кажется проще добавлять outline только к элементу который нужно проверить, который потенциально вызывает проблемы.
                          +13
                          Для элемента который нужно проверить ничего лучше FireBug выдумывать не нужно.
                            –1
                            Да по ходу и невозможно :))
                              0
                              Согласен, но если есть firebug тогда и вышеописанный способ не нужен.
                                +1
                                + плагин webdeveloper
                                  +1
                                  Свет клином на фаербаге не сошелся…
                                  Dragonfly и WebDeveloperToolbar ни чем не хуже, а иногда и лучше.
                                +22
                                Ну если речь об извращениях, то… Старый известный мне метод — если не знаешь в каком правил(е/ах) подвох, то удали половину css и посмотри осталась ли проблема, если осталась, значит проблема в другой половине. Ну и далее делением на 2. А вообще firebug рулит. Да и в других браузерах есть средства отладок.
                                  +4
                                  бинарный поиск и тут спасает однако :)
                                  –1
                                  Отличный метод, спасибо! =) Нужно будет подумать о яваскрипт альтернативе в IE
                                    0
                                    Если додумать концепцию и допилить с пом. js — можно раскрасить своим цветом каждый элемент (div, p, input, и т.д.) и отображать уровень вложенности яркостью цвета линии и/или типом линии (dotted, dashed и т.д.).
                                    Я всегда пользуюсь примитивным * {outline: 1px solid red;} (или бордер для IE).
                                    Кстати хороший способ протестировать качество разметки: оно хорошее, если разметка не разваливается при
                                    * {border: 1px solid red;}
                                      +1
                                      С этими браузерами и так проблем не особо много. Основная — с IE6.
                                        +8
                                        Для FF есть WebDeveloper, в нём Outline->…
                                        И там на любой вкус. И block level elements, и frames, deprecated, tables etc.
                                          0
                                          + «Information -> Display topographic information» для вложенности
                                          0
                                          Если в IETester никак не получается использовать Developer Toolbar, то в Internet Explorer VPC Image уже все включено.
                                              0
                                              на самом деле :)
                                              +20
                                              а может лучше?
                                              *: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
                                                и чем лучше?
                                                :hover можно прицепить только к ссылкам
                                                  0
                                                  для IE только вроде
                                                    +1
                                                    в браузерах, отличных от IE, hover срабатывает при наведении мыши почти для любого элемента
                                                    попробуйте проверить на input, например (бэкграунд или бордер)
                                                    • UFO just landed and posted this here
                                                      +2
                                                      Да ладно!
                                                        +1
                                                        Проснулись только? :)
                                                        Начиная с IE 7 hover работает почти на любом элементе.
                                                          –1
                                                          почти?
                                                        0
                                                        Отличная идея, в Firebug такого режима еще нет.
                                                        –1
                                                        Гениально! Черт :)
                                                          0
                                                          в ИЕ8 есть удобный инструмент в средствах разработчика, выбираем пункт меню «Как векторные» и далее по желанию… Можно выделить любой тип элементов… Можно даже по типу размещения обозначить…
                                                            0
                                                            А главное — такие инструменты есть еще как минимум в сафари и ff
                                                            0
                                                            Для ie можно использовать не border, а background, например.
                                                              0
                                                              а если сделать, например, border: 2px; margin: -2px — не пойдёт?
                                                                0
                                                                Зачем, если можно просто outline:1px?
                                                                  0
                                                                  просто хочется сделать кроссбраузерно
                                                                  0
                                                                  А если уже есть border и margin?
                                                                    0
                                                                    да, тогда плохо.
                                                                –8
                                                                кккк
                                                                  –6
                                                                  Отвратительно. Лучше юзать developer bar'ы. А для IE бордер вообще гениально, так как обрамить элемент обводкой, расширяя тем самым элемент и развалить всю верстку — это круто о_О.

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

                                                                  По поводу developer bar'ов: он есть или можно подключить в ie, opera9+, ff, safari3+. В chrome поведение как в сафари, так что инструменты разработчиков есть во всех популярных браузерах. Итак, зачем нужен этот CSS?
                                                                    0
                                                                    Может, мне просто нужно что-то исправить с домашнего компа, а не с рабочего. Мне устанавливать плагины на ВСЕ браузеры на компе, который для работы я использую только в КРАЙНИХ случаях (~1раз в месяц)?

                                                                    (частный случай, но можно ещё десяток привести)
                                                                      0
                                                                      И иметь обкусанный функционал, который обводит блоки, превращая какую-нибудь промку в кашу. Порассуждайте в сторону portable софта ;)
                                                                  • UFO just landed and posted this here
                                                                    • UFO just landed and posted this here
                                                                      • UFO just landed and posted this here
                                                                        • UFO just landed and posted this here
                                                                        0
                                                                        Я для отладки в IE использую FireBug Lite. Он подключается как внешний JS. Очень удобно.
                                                                          0
                                                                          В опере есть замечательная фича — «видимый контур элементов» Делает тоже самое, но не нужно лесть в css, и другие классные фичи там есть (это в кнопке «режим автора»)

                                                                          Only users with full accounts can post comments. Log in, please.