Pull to refresh

Comments 17

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

«Есть какие-то идеи как можно улучшить» — можно для начала исправить орфографию: «padding […] Внутренний отступы».
Идея как минимум не нова:
http://layerstyles.org/builder.html
http://border-radius.com/
http://selfcss.org/
http://enjoycss.com/
http://www.colorzilla.com/gradient-editor/

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

 height:100%;

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

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

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

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

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

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

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

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

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

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

Articles