Бравый справочник css-свойств для новичка

    Как новички изучают css-свойства? Они читают про все свойства, которые только есть, что-то запоминают, в основном только width, height и background, а потом постоянно рыщут по своим конспектам и гуглу, пытаются вспомнить какое свойство за что отвечает, как оно пишется и какие у него есть значения.

    И тут мне пришла в голову идея. А что если сделать такую штуку, которая наглядно показывает как пишутся и работают все css-свойства? Причем, все это на одной странице.

    Таким образом, за два вечера создался вот такой css-помощник: lesson-web.ru/modules/css_helper

    image
    В левой части мы видим результат работы css-свойств, а справа, собственно, список css-свойств, которые мы можем увидеть в действии.

    В окне результата у нас есть один, как будто бы, div с классом .box. Если установить свойство float, то в окне появится три одинаковых блока.

    Также можно задать текстовое содержимое этого блока. Есть пять вариантов:


    В блоке с css-свойствами мы можем:

    • активировать или деактивировать свойство, кликнув по checkbox;
    • задать значение свойства;
    • понять свойство на простом русском языке
    • если на сайте есть описание по данному свойству, то можно перейти по ссылке и более подробно изучить его.


    Значение можно задать тремя способами:

    1. Просто ввести значение в input
    2. Если это цвет, то указать его на палитре
    3. Если у свойства если стандартный набор значений, то можно выбрать его из списка

    Собственно, вот такая приятная мелочь получилась) Если у вас есть какие-то идеи как можно улучшить этот помощник, то с радостью почитаю их в комментариях!

    Similar posts

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

    More

    Comments 17

      +1
      Я так понимаю, это «русифицированная» версия небольшой части w3schools.com? Или же «бравость» в чём-то другом?

      «Есть какие-то идеи как можно улучшить» — можно для начала исправить орфографию: «padding […] Внутренний отступы».
        +2

        Отличная идея! Похоже на dev-tools в Safari, но намного полезнее, потому что доступно не только для Mac.


          +2
          Идея как минимум не нова:
          http://layerstyles.org/builder.html
          http://border-radius.com/
          http://selfcss.org/
          http://enjoycss.com/
          http://www.colorzilla.com/gradient-editor/

          но с другой стороны, пока не видел ни одного бесплатного онлайн css редактора,
          который бы сочетал в себе достоинства всех вышеперечисленных,
          либо UI хромает, либо функций не очень много :)
            0
            Спасибо!
              –1
              Круто, полезный инструмент для новичков.
              Но, есть небольшой косяк, который бросился в глаза.
              При добавлении более 1-го абзаца и выставлении свойства

               height:100%;

              абзацы не растягивают контейнер box_css_helper, хотя должны. У новичка может возникнуть с этим проблемы.
              Решить можно просто, родительскому контейнеру block_browser_css_helper изменить свойство height: 330px на:

              min-height:330px;
              max-height: 50%;
              

              И все станет отлично.
                +1
                хотя должны
                Кому должны, пардон? По-моему, демка как раз показывает правильное поведение 100-процентной высоты — 100% от заданной высоты предка, а не «от теоретически возможного». И как раз это новичкам полезно сразу почувствовать, во избежание ошибочных ожиданий.
                0
                Привет!

                … как пишутся и работают все css-свойства?

                Там их (цсс свойств) штук 30 у вас, на все не тянет. Для создания хтмл рендера пришлось вручную собирать свойства и ссылки на последнии спецификации по ним (драфты, но с указанием на боевые). Вот список, ~200 свойств и он не полный.

                Невозможность посмотреть что-либо без регистрация крайне разочаровывает. Как минимум, color в цсс имеет более богатый синтаксис чем hex.

                Вот если бы конструктор «для посмотреть результат» и с прямыми ссылками на спецификации то было бы интересно + возможность указать каждое свойство вручную. Ну и не все на странице, а что-то вроде: жмёшь плюсик внизу и появляется список со свойствами которые можно применить и изменить их значения.
                  0
                  Правда из этих 200 больше половины повторения, типа border-left-color/border-right-color или border-left-width/border-right-width, так что в итоге, отдельных свойств около 60-70 штук, ага?
                    0
                    Не совсем понял, повторения в каком смысле? У приведенных вами свойств разные назначения. Если вы имеете ввиду, что есть же просто «border-color» где можно указать сразу всё, то у них разный синтаксис, border-color это:
                    ‘Border-color’ is a shorthand for the four ‘border-*-color’ properties.

                    Да и сокращений для свойств не так много, порядки в цифрах там куда меньше чем вы привели (если штук 30 сокращений найдется то уже хорошо). Посмотрите внимательно на все свойства и на спецификации, в последних всё хорошо описывают.

                    Или вы имеете ввиду, что в конструкторе можно дать пользователю менять только border-left-width и этого будет достаточно для понимая?
                      0
                      Мы сейчас вроде справочник обсуждаем, а не конструктор.
                      Я о том, что список из 200+ свойств сильно раздут за счет всяких border-left-width практически не отличающихся от border-right-width. И ничего особо ужасного не произойдет если они все будут более компактно «упакованы».
                  0
                  начинает подтормаживать при большом количестве свойств
                  • UFO just landed and posted this here
                    0
                    Как раз являюсь новичком. Было бы хорошо иметь возможность проверять «position» с несколькими элементами.
                      0
                      Экспортировать можно?
                        0
                        Пока что нет, но хорошая идея)
                        +1
                        Нужно было делать на фреймах — как все песочницы.
                        Тогда бы корректно работало width: 100vw;

                        И transform-ы было бы классно, если дополняли друг друга, а не перекрывали.
                          +1
                          Ещё неплохо было бы добавить метод box-sizing для объяснения различной работы отступов

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