Перевод статьи в The Guardian Mobile-first Responsive Web Design and IE8 о разработке адаптивной версии онлайн-издания, точнее о способе реализации поддержки IE 8. Также советую посмотреть интересный Case Study процесса, это очень познавательно.
Буквально на днях вышла новая, 11-ая версия браузера Internet Explorer в составе Windows 8.1, но 4,5% читателей сайта The Guardian до сих пор используют IE 8. И разработчики новой адаптивной версии сайта не могли пренебрегать предпочтениями этих пользователей.
Основной проблемой была плохая поддержка старыми браузерами необходимых для адаптивного дизайна функций. Необходимо было реализовать поддержку IE 8 без ущерба работе в других, более современных браузерах.
Узкое место IE 8
Вот перечень технологий, которые нельзя было использовать:
- rem
- media queries
- rgba(), hsla()
- :last-child, :nth-child(), :first-of-type, …
- :empty
- :not()
- calc()
- .ttf, .otf, .woff fonts
- multiple backgrounds
- background-size
- vw, vh, vmin, vmax
- :checked, :valid, :invalid, :required
- box-shadow
- transforms (rotate, translate, skew, scale, matrix)
- border-radius
- opacity
- getElementsByClassName
- getComputedStyle
- addEventListener
- geolocation
- canvas
- HTML5 video
- HTML5 audio
Это было большой проблемой, потому что планировалось использовать самые современные технологии и разработать легкий и удобный сайт. Для поддержки IE 8 необходимо дополнительно прописывать некоторый функционал, что приведет к ухудшению общей производительности сайта.
Было решено начать с реализации поддержки Media Queries в Internet Explorer 8, что является очень важной частью для крупных новостных и информационных сайтов.
global.css
Файл стилей для всех браузеров, кроме IE 8 и ниже. Мы используем mq() (SASS) вместо обычных Media Queries:
// global.scss
@import "mq";
.element {
// Мобильные устройства
@include mq($from: mobile) {
color: green;
}
// Планшеты
@include mq($from: tablet) {
color: blue;
}
// Десктопы
@include mq($to: desktop) {
color: red;
}
}
Это переходит в следующий код:
// global.css
@media all and (min-width: 18.75em) {
.element {
color: green;
}
}
@media all and (min-width: 37.5em) {
.element {
color: blue;
}
}
@media all and (max-width: 56.1875em) {
.element {
color: red;
}
}
old-ie.css
Для поддержки старых user agent устанавливаем $mq-responsive на false:
// old-ie.scss
$mq-responsive: false;
@import "mq";
.element {
@include mq($from: mobile) {
color: green;
}
@include mq($from: tablet) {
color: blue;
}
@include mq($to: desktop) {
color: red;
}
}
Получается:
// old-ie.css - для версий IE <= 8
.element {
color: green;
color: blue;
}
В результате media query был "растрирован", осуществлена поддержка IE 8. Более ранние версии смогут поддерживать только значение min-width.
Осталось только разделить old-ie.css и global.css по user-agent'ам:
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link href="global.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link href="old-ie.css" rel="stylesheet" />
<![endif]-->
В результате описанный способ обладает несколькими преимуществами:
- Пользователи мобильных устройств не скачивают лишний код, предназначенный для старых браузеров.
- Internet Explorer скачивает не намного больше кода, чем в обычных условиях.
- Когда придет время отменить поддержку IE 8, это можно будет легко реализовать.
Можно вживую пощупать Sass MQ с помощью Sass MQ online.
Автор: grokru
