Статьи

CSS трюки в обоих измерениях

Кэмерон Адамс и Дэйв Шеа недавно пришли с некоторыми умными новыми методами CSS.

Уловка Кэмерона, озаглавленная « Компоновка , зависящая от разрешения» , обеспечивает долгожданный новый взгляд на длительные дебаты по поводу конструкций с жидкостями и фиксированной шириной. Стандартная дилемма заключается в том, что при фиксированной ширине дизайн браузер тратится впустую, но жидкие проекты могут привести к нечитаемо длинным строкам текста. Спецификация CSS предоставляет решение в виде свойства max-width, но оно не поддерживается Internet Explorer (за исключением хитрых, но недопустимых взломов выражений ) и все еще может привести к тому, что жидкие проекты выглядят неоптимально в необычно широких или узких окнах браузера.

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

Использование JavaScript для изменения страницы, основанной на ее ширине, не является новой идеей: я уже видел, как раньше он обслуживал большие рекламные объявления в сточной канаве, но плавное изменение фактического макета страницы, безусловно, представляет собой интересный поворот. Лучше всего то, что JavaScript Кэмерона является чистым и ненавязчивым и должен легко адаптироваться для других целей с минимальными усилиями.

Дейв Ши, с другой стороны, работал вертикально: на минимальной высоте: фиксированный; он берет на себя трудную проблему элементов дизайна, которые должны поддерживать определенную высоту, но расширяться, когда их содержание перерастает их. Возможное решение Дейва — это настоящая попытка взломать браузер CSS с обходными путями для IE на Windows и Mac, Opera 7 и Safari! Компромиссы, связанные с использованием такого количества хаков, разумно обсуждаются в комментариях Дейва . Как всегда, я хотел бы предостеречь дизайнеров, чтобы они полностью знали об используемых хаках и о том, что они делают, прежде чем применять эту технику к живому проекту.