Веб-технологи всего мира ненавидят дизайнеров, которые рисуют вот такие блоки:
С одной стороны — выглядит красиво и привлекательно, а с другой стороны кроссбраузерная верстка блока со скругленными уголками, да еще и с полупрозрачной тенью — далеко не тривиальная задача. Каждый технолог решает такие задачи по-своему, причем зачастую реализация напрямую зависит от внешнего вида декораций: для легкой и небольшой тени — один код, для массивной — другой, для скругленных уголков — третий и так далее.
Предлагаю читателям придумать универсальный способ верстки таких блоков, на который можно будет спокойно ссылаться и дизайнерам, и технологам (и который попадет во все учебники по HTML/CSS :)). В Техногрете уже есть что-то подобное, но лично меня этот способ не устраивает по многим параметрам: это и большое количество декоративных HTML-элементов (9 штук), и запредельное количество хаков для IE, и неспособность работать в IE с включенным доктайпом. Однако оттуда можно почерпнуть некоторые интересные мысли.
Итак, хороший способ должен:
- работать во всех современных браузерах, включая IE6;
- не использовать JavaScript, только HTML и CSS;
- одинаково хорошо работать как для блоков с заданной шириной (пиксели, проценты, em’ы), так и с шириной
auto; - содержать как можно меньше декоративных HTML-элементов (количество элементов в дереве напрямую влияет на производительность сайта);
- использовать как можно меньше отдельных изображений (в идеале должен получиться один спрайт).
А настоящие джедаи должны выполнить следующие условия:
- Способ должен одинаково хорошо работать как для блочных элементов, так и для инлайновых: структура HTML остается одинаковой, правки вносим только в CSS.
- Не использовать expressions в IE. В крайнем случае — одноразовый expression.
- Использовать как можно меньше хаков.
Вот вам заготовки:
На основе этих заготовок нужно сделать решение, выложить его куда-нибудь к себе на хостинг и оставить ссылку в комментариях. Если некуда выложить — присылайте архив мне по почте. Обсуждение результатов будет примерно через неделю.