Как я с RESS воевал

Один из проектов, над которыми я работал вместе с ребятами из nikoland.ru, подразумевал RESS — адаптивный дизайн с серверными компонентами (responsive design with server side components).

Суть такова — у макета есть три разных состояния: для широкоэкранных мониторов, для планшетов и небольших мониторов, для мобильных устройств; но дабы не перегружать, например, мобильный телефон, загружаем и используем в дальнейшем только один определённый стиль и не перестраиваем страницу при изменении размеров окна.

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

Первой мыслью стало — проверять ширину экрана и перебрасывать пользователя со страницы-заглушки на нужную страницу по ширине. Не понравилось, что в адресной строке появляется имя истинной страницы.

Второй мыслью было использовать php и ajax. Опять-таки, как я ни изощрялся, избавиться от следов махинаций в адресной строке не удалось.

Третья мысль (html5 history api) тоже не подошла — с ней пришлось бы либо отказаться от поддержки старых браузеров, либо грузить ещё скрипты. Не хорошо.

Четвёртая мысль — айфрейм. Показалось довольно логичным загружать в айфрейм нужную страницу, это даже работало… до тех пор, пока я не попробовал нажать на ссылку в меню :-)

Отдельной проблемой стали те самые три разных страницы — «надо сделать один шаблон, это удобнее для наполнения контентом», решил я. Значит, загрузкой изображений тоже нужно управлять вручную.

Так может и загрузкой скриптов и стилей тоже следует управлять самому? В голову пришла идея: я не могу убрать что-то из css файла, но могу убрать узлы из DOM, значит пишем media в качестве атрибута для ссылок на файлы, скриптом проверяем ширину и убираем из html ненужные ссылки, параллельно загружаем нужные скрипты, и, если требуется, картинки.

Сработало. Страница перед загрузкой проверяет ширину, загружает подходящие файлы, и не перестраивается при изменении размера экрана. Задача решена.

 

P.S. Есть один недостаток, метод не работает с отключённым джаваскриптом.
P.P.S. С отключённым джаваскриптом там много чего не работает :-)