Учим старые браузеры новым фокусам -

С 2014 года наша студия планирует полностью отказаться от поддержки морально устаревшего браузера IE7. Это, однако, не отменяет того факта, что нам придётся так или иначе сохранять работоспособность фронтэнда наших сайтов в IE7.

Основной недостаток седьмого эксплорера заключается в отсутствии полноценной поддержки html5 и css3. Конечно, можно плодить классы элементов и писать отдельные css-файлы для ослика, но это решение не для 2013 года. Решить проблему совместимости кода можно намного элегантнее, посредством эмуляции поддержки при помощи яваскриптов.

:nth-child(2) и :nth-last-of-type(1) в IE7

Для эмуляции поддержки псевдоселекторов :nth-child(n+x) канонично будет использовать IE9.js. Единственный неприятный баг: IE9.js на текущий момент некорректно обрабатывает конструкции типа :last-child:after. Есть альтернативный вариант, у которого подобного бага нет, в виде selectivizr, но у селективизера проблемы совместимости с Jquery, что для нашей студии критично.

media queries в IE7

Для поддержки media queries можно использовать css3-mediaqueries-js. Скрипт позволяет реализовывать адаптивную вёрстку, которая корректно работает во всех старых браузерах, включая ИЕ.

HTML5 в IE7

Если очень сильно нужно заставить ие7 понимать хтмл5 теги, можно подключить к сайту modernizr. Стопроцентно корректной эмуляции он не даёт, однако добавляет проблемным элементам дополнительные классы, позволяющие писать фиксы под конкретную версию браузера. Имхо, это костылизм, а использование костылей по нашей студийной идеалогии - зло, которого стоит избегать любыми способами. Ну и само собой, могу посоветовать не поддерживать старые браузеры и рекомендовать посетителям со старыми браузерами обновиться, именно так поступаем мы.  

Теги: цсс яваскрипт хаки