Колекція багів та рішень для IE
Блог фронтендера
Для тестування проектів у IE7-9 можна використовувати 10-у версію в режимі емуляції - так вдасться виловити більшість помилок. Однак, якщо потрібно тестувати в IE6, доведеться використовувати віртуальну машину з Windows XP, в якій встановлений даний браузер. З безкоштовних варіантів можу порекомендувати віртуалку VirtualBox. В якості альтернативи, але безперечно менш найкращий варіант, можна розглянути IE Tester.
Зміст статті
Тестування верстки
Самі розумієте, що браузер від Microsoft окремий випадок - у ньому доводиться тестувати проекти, починаючи з 7-ї версії по 10-у, і іноді, як я радий вписати це слово, з 6-ої. Для цього зручно використовувати останню версію браузера в режимі емуляції, вибравши потрібну версію. Зайдемо в кошти розробника (прим. - F12) і виберемо режим браузера:
Цього вистачить для виправлення 95% відсотків багів, наприклад, у режимі емуляції ви не побачите помилок у JS-коді, властивих оригінальним браузерам. Для інших 5% випадків або у разі тестування у 6-ій версії доведеться скористатися іншими варіантами:
- використання віртуальної машини з Windows XP та встановленим оригінальним Internet Explorer 6
- використання IETester. Програма дозволяє одночасно перевіряти свій проект у IE6-10. Однак іноді в її роботі можливі помилки – результат у вікні може виглядати криво, а насправді все нормально. Підійде як альтернативний варіант
- portable-версії браузерів, відмінна добірка тут, проте недолік той самий, що і в IETester'і — буває невірним відображення верстки, хоча в оригіналі все може працювати коректно
- існують онлайн-сервіси, які дозволяють перевіритипроект у цілій купі браузерів за допомогою зняття скріншота. Один із таких сервісів browsershots.org
Варто зазначити, що тестувати верстку в оригінальному браузері найкраще. І не забуваємо, що правила для IE підключаємо через окремий файл.
Практично всі розробники включають підтримку HTML5 тегів у цей спосіб, так що є велика ймовірність того, що при відвідуванні вашого ресурсу скрипт вже буде в кеші браузера.
Існують і альтернативні варіанти підключення html5shiv – наприклад, через бібліотеку Modernizr.
Підтримка властивостей CSS3 border-radius, box-shadow та linear-gradient
З архіву з плагіном необхідно витягнути файл PIE.htc, залити його в проект і в стилях для Internet Explorer властивістю behavior вказати шлях до цього файлу.
Однак не все так здорово, як здається - у PIE є два серйозні недоліки: перший - при множині PIE-підключень на сторінці він значно гальмує браузер, другий - при масштабуванні вікна браузера можуть спостерігатися артефакти зображень. Тому кожен повинен вирішити для себе - використовувати його чи ні, і відповідно далі робити заокруглення, градієнти та тіні для IE картинками, або дотримуватися парадигми graceful degradation.
Підтримка media queries
Internet Explorer нижче 9-ої версії не підтримує media queries, щоб виправити це, підключимо скрипт від Google:
Canvas для IE - explorercanvas
Фон на всю ширину вікна браузера
У CSS3 з'явилася чудова властивість background-size для того, щоб можна було розтягнути фон на всю ширину вікна:
Для старих браузерів IE ця властивість не працює, застосуємо інший прийом - вставимо зображення тегом перед закриваючим