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

[GeMir]

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

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

[justboris]

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

[dorsett]

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

но с другой стороны, пока не видел ни одного бесплатного онлайн css редактора,
который бы сочетал в себе достоинства всех вышеперечисленных,
либо UI хромает, либо функций не очень много :)

[alid]

Спасибо!

[M_Yushchenko]

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

 height:100%;

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

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

И все станет отлично.

[SelenIT3]

хотя должны

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

[lastmac]

Привет!

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

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

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

Вот если бы конструктор «для посмотреть результат» и с прямыми ссылками на спецификации то было бы интересно + возможность указать каждое свойство вручную. Ну и не все на странице, а что-то вроде: жмёшь плюсик внизу и появляется список со свойствами которые можно применить и изменить их значения.

[Stalker_RED]

Правда из этих 200 больше половины повторения, типа border-left-color/border-right-color или border-left-width/border-right-width, так что в итоге, отдельных свойств около 60-70 штук, ага?

[lastmac]

Не совсем понял, повторения в каком смысле? У приведенных вами свойств разные назначения. Если вы имеете ввиду, что есть же просто «border-color» где можно указать сразу всё, то у них разный синтаксис, border-color это:

‘Border-color’ is a shorthand for the four ‘border-*-color’ properties.

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

Или вы имеете ввиду, что в конструкторе можно дать пользователю менять только border-left-width и этого будет достаточно для понимая?

[Stalker_RED]

Мы сейчас вроде справочник обсуждаем, а не конструктор.
Я о том, что список из 200+ свойств сильно раздут за счет всяких border-left-width практически не отличающихся от border-right-width. И ничего особо ужасного не произойдет если они все будут более компактно «упакованы».

[lumen446]

начинает подтормаживать при большом количестве свойств

[thepresence]

Как раз являюсь новичком. Было бы хорошо иметь возможность проверять «position» с несколькими элементами.

[lexasss]

Экспортировать можно?

[Mirkom63]

Пока что нет, но хорошая идея)

[xel]

Нужно было делать на фреймах — как все песочницы.
Тогда бы корректно работало width: 100vw;

И transform-ы было бы классно, если дополняли друг друга, а не перекрывали.

[miaovarb]

Ещё неплохо было бы добавить метод box-sizing для объяснения различной работы отступов