Pull to refresh

Кроссбраузерный min- и max-width на чистом HTML+CSS

Reading time 1 min
Views 15K
Давно хотел поделиться одной интересной наработкой — а именно эмуляцией свойств min и max-width без использования expression и подобных вещей. Обвязка может показаться громоздкой, но главный ее плюс — она работает. Плюс подобные вещи можно с легкостью внедрять с помощью шаблонизатора одной строчкой кода.

Суть трюка проста:
‹table›‹tr›‹td width=1100› — максимальная ширина
‹div width=900 /› — распорка, минимальная ширина

Причем именно так, ширина не у таблицы, а у ячейки. Таким образом шире, чем 1100 таблица не будет (в данном случае), но при этом если она уже — скроллер не появляется. При этом если ширина рабочей области менее 900 — скроллер уже отобразится.


Проверено под разными ОС в браузерах:
  • Firefox: 3.5.2, 3.0.13, 2.0.0.16
  • IE: 8, 8 в режиме 7, 6
  • Opera: 10, 9.64, 9.2, 8.0
  • Safari: 4.0, 3.4
  • Chrome: 2.0.172.43

P.S. Семантичность от такого, конечно, хромает, но я подумал, что лучше использовать одну обвязку, пусть и громоздкую, чем плодить реализацию под IE6… Тут все хотя бы однозначно. В крайнем случае можно просто убрать весь код под сonditional comment и оставить снаружи один Div с min- и max-width. UPD: Добавил такую версию в список.
P.P.S. Если это уже где-то было — прошу прощения, но я нигде вроде не видел подобного…
Tags:
Hubs:
+69
Comments 96
Comments Comments 96

Articles