Engel Side

Я тут подумала, что скучно просто писать «портфолио обновилось», так что я буду понемногу рассказывать вам о вёрстке новых проектов, а может, расскажу и о старых.

Проект Typochat — это чат, который ориентирован на этакие одноразовые деловые конференции. Вы создаёте «комнату» и приглашаете туда своих коллег на поговорить. Сейчас проект в стадии альфа-тестирования. В планах запуск версии под iPhone, и вот там-то вёрстка самая интересная, но об этом я поговорю на РИТ-2009.

Верстка же самого чата интересна тем, что макет полностью резиновый во все стороны. Тянется шапка, тянется окно чата в ширину и в высоту — и при этом поле отправки сообщения и сайдбар остаются на месте. Такой лэйаут делается при помощи абсолютного позиционирования и полного растягивания блока заданием ему одновременно и right, и left, и top, и bottom. К сожалению, IE наш родной не понимает такого финта, у него может быть только два значения позиционирования. Поэтому для него приходится высчитывать высоту резиновых блоков js-ом. То же касается и минимальных и максимальных ширин. (За помощь в создании лэйаута спасибо Вадиму Макееву).

Как вы можете заметить, страница всегда занимает высоту окна браузера, и не имеет прокрутки. Ну, думаю, всем известно, что это делается при помощи height:100%; overflow:hidden; на HTML и BODY. Сайдбар в данном случае статичен, и некрасиво обрезается, если его высота больше высоты страницы. Чтобы этого не было, js-ом высчитывается, влезают ли все блоки, и если не влезают, нижний блок скрывается целиком.

В этом проекте довольно много блоков со скругленными углами, причем радиус скругления — 1px. Для таких блоков я уже довольно давно использую технику «абсолютных уголков». Создаются элементы для уголков, им задается либо фоновое изображение, либо цвет бэкграунда; родительскому элементу задается position:relative;, уголки абсолютно позиционируются и закрывают блок в нужных местах. У этого метода есть один недостаток: если блок имеет нечетную ширину или высоту, IE неправильно обрабатывает позиционирование, располагая уголок выше или левее, чем нужно. Проблема решается экспрешеном для IE: bottom:expression(parentNode.offsetHeight%2?-1:0); В этом проекте я использовала для уголков элементы I, как наиболее короткие и незначимые (уголков в чате очень много, они в каждой строке), чем вызвала скандал между мной и Вадимом Макеевым, который утверждает, что использование элемента I страшно противоречит семантике документа. Я же все-таки упираю на то, что у элемента I нет семантики кроме одного очень частного случая, и вообще экстра-разметка в семантику документа не входит. Что думаете вы?

В проекте использованы спрайты для иконок, уголков, бэкграундов и кнопок. Конечно, абсолютно все в один файл упихать не удается, но в целом техника работает хорошо.