Проблема: CSS для окна веб-приложения

Question

Я застрял в процессе создания платформы для окна, в котором будут храниться мои веб-приложения. С помощью JavaScript окно будет менять свой цвет, размер и положение на странице. Это очень похоже на приложения с графическим интерфейсом в ОС Windows.

Границы должны быть пользовательскими, то есть они изменят свой цвет для цвета окна, но будут немного затенены с непрозрачностью около 50%.

Голова должна иметь тот же цвет, что и окно, но будет иметь изображение с некоторым значением альфа-канала в качестве фона. (Это отполирует верхнюю часть окна.)

Моя проблема состоит в том, что мой CSS для этой задачи довольно сложен в управлении через JS (динамическая часть приложения). Итак, я здесь, чтобы попросить помощи у экспертов CSS. Если вы знаете, как сделать CSS проще простого, ваша помощь будет очень признательна. На данный момент я разочарован тем, что не могу написать чистый и простой код.

P.S. Я также готов поддержать Internet Explorer 6.

Отредактировано: Пожалуйста, взгляните на визуальное представление проблемы: http://savepic.org/261861.jpg Как вам удалось бы кодировать CSS для этого окна, чтобы было достаточно легко изменить размер и цвет окна с помощь JavaScript?

Answer 1

Как вам удастся кодировать CSS для этого окна, чтобы с помощью JavaScript было легко изменить размер и цвет окна?

То, что вы упоминаете о «прозрачных границах», не совсем тривиально, но определенно решаемо. Теперь я все еще не совсем уверен, в каком направлении вы ищете помощь - как структурировать CSS против JavaScript или как решить конкретные проблемы, которые вы упоминаете?

В любом случае, вы уже смотрели на JQuery Dialog ? Это немного для этой единственной проблемы (наличие окна и изменение его размера), но в нем реализована полноценная система API и шаблонов, которая уже решила многие кросс-браузерные проблемы.

Если вы не хотите использовать фреймворк, я бы сказал, что не стоит слишком беспокоиться о доступности JavaScript. По сути, когда вы создаете чистый CSS, вы можете получить к нему хороший доступ из JavaScript. Несколько мыслей о хорошем CSS есть в этом вопросе .