Медленная смерть Internet Explorer и будущее Прогрессивного улучшения
Как найти компромисс между старыми и новыми браузерами
Существует много причин считать, что веб — самая недружелюбная и прихотливая среда разработки. Попробуйте открыть только что созданный сайт в самой старой версии Safari. Скорее всего, ничего хорошего вы там не увидите. Мы перевели статью о том, какие проблемы стоят на пути разработчиков и как их можно решить.
Проблема «Лучше всего работать с Chrome»
Из-за подобных трудностей возникла целая проблема — в недавней и очень популярной статье The Verge предупреждали о сообщениях «лучше всего использовать Chrome», всплывающих в вебе повсеместно.
Проблема «Лучше всего работать с Chrome»
Из-за подобных трудностей возникла целая проблема — в недавней и очень популярной статье The Verge предупреждали о сообщениях «лучше всего использовать Chrome», всплывающих в вебе повсеместно.
Есть еще много похожих примеров. В корпоративном мессенджере Slack голосовые вызовы работают только в Chrome. Slack объясняют это тем, что поддерживать все браузеры слишком трудозатратно, поэтому они решили сосредоточиться на Chrome. Сам Гугл неоднократно создавал сайты, например, Google Meet, Allo, YouTube TV, Google Earth, которые не поддерживаются другими браузерами. Конечно, это не очень хорошая практика, но она лишний раз доказывает, насколько сложная штука — совместимость браузеров.
Но Chrome — дело десятое, гораздо больше беспокоит пропасть между Internet Explorer (IE) и остальными браузерами. Что лучше: цепляться за прошлое, которое тянет нас назад, или бросить часть пользователей и рваться вперед? И есть ли середина, которая позволит сохранить связь со старыми системами?
Расширяем пропасть
Chrome, Opera и Firefox постоянно выпускают новые функции и фишки. Edge и Safari приходится догонять их. А Microsoft вообще отказываются от IE, выпуская только обновления безопасности, и пытаются подтолкнуть пользователей к Edge. Эта ситуация очень печалит разработчиков, которые хотят запиливать новые функции, но не могут это делать из-за одного браузера.
Но Chrome — дело десятое, гораздо больше беспокоит пропасть между Internet Explorer (IE) и остальными браузерами. Что лучше: цепляться за прошлое, которое тянет нас назад, или бросить часть пользователей и рваться вперед? И есть ли середина, которая позволит сохранить связь со старыми системами?
Расширяем пропасть
Chrome, Opera и Firefox постоянно выпускают новые функции и фишки. Edge и Safari приходится догонять их. А Microsoft вообще отказываются от IE, выпуская только обновления безопасности, и пытаются подтолкнуть пользователей к Edge. Эта ситуация очень печалит разработчиков, которые хотят запиливать новые функции, но не могут это делать из-за одного браузера.
Доля IE на рынке показана темно-синей линией. Сейчас она составляет всего 3%.
Ожидание и реальность от Прогрессивного улучшения
Сайтам, ориентированным на контент, повезло. CSS и HTML были разработаны с точки зрения отказоустойчивости. Поэтому, если какой-то браузер не будет поддерживать shape-outside (обтекание текста по кругу) или font-display (определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят), сайт не сломается.
Сейчас, аккуратно работая с CSS Grid (метод позиционирования элементов), при желании можно вернуться к более старому методу Flexbox, но и он будет работать с кучей багов в IE.
Сайтам, ориентированным на контент, повезло. CSS и HTML были разработаны с точки зрения отказоустойчивости. Поэтому, если какой-то браузер не будет поддерживать shape-outside (обтекание текста по кругу) или font-display (определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят), сайт не сломается.
Сейчас, аккуратно работая с CSS Grid (метод позиционирования элементов), при желании можно вернуться к более старому методу Flexbox, но и он будет работать с кучей багов в IE.
.grid > * {
width: 270px; /* no grid fallback style */
margin-right: 30px; /* no grid fallback style */
}
@supports (display: grid) {
.grid > * {
width: auto;
margin-right: 0;
}
}
width: 270px; /* no grid fallback style */
margin-right: 30px; /* no grid fallback style */
}
@supports (display: grid) {
.grid > * {
width: auto;
margin-right: 0;
}
}
В приведенном выше коде, для всех дочерних элементов сетки установлена заданная ширина и отступы (margin). Для браузеров, которые поддерживают Grid, используется grid-gap вместо margin, и ширина элементов определяется свойством grid-template-columns. Это несложно, но все же добавляет лишней работы. Когда мы создаем все страницы с помощью Grid, поддержка IE становится более трудоемкой. Для сложных задач компоновки элементов на странице, мы можем избежать проблем с помощью @supports (позволяет проверить, поддерживает браузер ту или иную возможность).
Люди с 2013 года с восторгом говорят о кастомных свойствах, но они все еще не так широко используются. И вы можете догадаться, почему: их не поддерживает IE. Или, например, Shadow DOM (Теневая модель документа), о котором говорят уже около пяти лет. Только в этом году они появились в Firefox и Edge и никогда не появятся в IE.
Среди множества браузеров, которые доступны пользователям, IE в одиночку умудряется тянуть всех назад. Отсюда вырисовываются две крайности: разрабатывать только под Chrome либо привязать себя к устаревшему зомби-браузеру.
«Заталкивание»
Сейчас ES6 (стандарт для JavaScript) поддерживается везде, кроме IE. Конечно, можно пользоваться транспайлерами (которые переводят код с одного языка программирования в другой), но тогда пострадает производительность: 5 строчек кода для асинхронной функции превратятся в 25.
Если вы не можете использовать транспайлер, используйте полифилл (библиотеку, которая добавит старым браузерам функциональности). Но для IE придётся использовать целую кучу полифиллов — получится такая нагрузка, с которой справится не каждый компьютер.
Что можно сделать
Приоритет — контенту
Метод соответствия требованиям (Cutting the mustard) — это подход, ставший популярным благодаря фронт-эндерам из ВВС. Он делит рынок браузеров надвое: все браузеры получают основной контент, а JavaScript грузят только более продвинутые браузеры. По крайней мере, так было в 2012:
Люди с 2013 года с восторгом говорят о кастомных свойствах, но они все еще не так широко используются. И вы можете догадаться, почему: их не поддерживает IE. Или, например, Shadow DOM (Теневая модель документа), о котором говорят уже около пяти лет. Только в этом году они появились в Firefox и Edge и никогда не появятся в IE.
Среди множества браузеров, которые доступны пользователям, IE в одиночку умудряется тянуть всех назад. Отсюда вырисовываются две крайности: разрабатывать только под Chrome либо привязать себя к устаревшему зомби-браузеру.
«Заталкивание»
Сейчас ES6 (стандарт для JavaScript) поддерживается везде, кроме IE. Конечно, можно пользоваться транспайлерами (которые переводят код с одного языка программирования в другой), но тогда пострадает производительность: 5 строчек кода для асинхронной функции превратятся в 25.
Если вы не можете использовать транспайлер, используйте полифилл (библиотеку, которая добавит старым браузерам функциональности). Но для IE придётся использовать целую кучу полифиллов — получится такая нагрузка, с которой справится не каждый компьютер.
Что можно сделать
Приоритет — контенту
Метод соответствия требованиям (Cutting the mustard) — это подход, ставший популярным благодаря фронт-эндерам из ВВС. Он делит рынок браузеров надвое: все браузеры получают основной контент, а JavaScript грузят только более продвинутые браузеры. По крайней мере, так было в 2012:
if ('querySelector' in document && 'localStorage' in window &&
'addEventListener' in window) {
// load the javascript
}
'addEventListener' in window) {
// load the javascript
}
Томас Маслен, ведущий разработчик BBC, объяснил логику: «За последние несколько лет я чувствую, что наша индустрия стала ленивой из-за сумасшедших скоростей загрузки, которые нам предоставила широкополосная связь. Все перестали беспокоиться о том, насколько велики их веб-страницы и добавили тонну JS-библиотек, CSS-файлов и массивных изображений в DOM. При этом мы стали забывать о мобильных платформах, которые не всегда могут потянуть такой код».
Газета The Guardian, тем временем, полностью исключает на своем сайте JavaScript и таблицы стилей для IE8 и ниже.
Газета The Guardian, тем временем, полностью исключает на своем сайте JavaScript и таблицы стилей для IE8 и ниже.
Так выглядит навигация The Guardian в IE 8. Просто, но функционально.
Nature.com последовал этому же пути и предоставил очень ограниченную таблицу стилей для всего, что старше IE10.
Так выглядит главная страница Nature.com в IE 9.
Если вы ворветесь в музей, украдете очень древний компьютер и откроете Netscape Navigator, вы все еще сможете насладиться просмотром сайтов. Потому что пользователь приходит на сайт за контентом, а не за красивым градиентом, безумными анимациями и параллакс-эффектом.
Каждый, кто имеет отношение к веб-разработке, сталкивался с ошибкой браузера. Вы проверяете какую-нибудь классную фишку, и она отлично работает везде… кроме одного браузера. Информация с портала caniuse.com и использование Прогрессивного улучшения не гарантирует, что все заработает так, как вы хотели.
Каждый, кто имеет отношение к веб-разработке, сталкивался с ошибкой браузера. Вы проверяете какую-нибудь классную фишку, и она отлично работает везде… кроме одного браузера. Информация с портала caniuse.com и использование Прогрессивного улучшения не гарантирует, что все заработает так, как вы хотели.
Так отображается сайт W3C в последней версии Safari.
Как бы хорошо ни был написан ваш код, есть ошибки, которые происходят не по вашей вине. И ни одна компания не имеет ресурсов для тестирования сайта на каждой старой версии всех браузеров. Поэтому вместо того, чтобы запихивать в код те самые транспайлеры и надеяться на авось, иногда лучшее решение — чистый HTML. Сломанный JavaScript может разрушить интерфейс и сделать сайт непригодным для пользования. Вместо этого можно не выделываться и просто дать пользователю базовые функции.
Начните с чистого листа
Как выглядит Метод соответствия на деле? Использование JavaScript поможет загрузить таблицу стилей, но лучше всего избегать этого. Потому что тогда мы не можем использовать процедуру импорта (@import) внутри блока @supports, поэтому остаются мультимедийные запросы.
Чтобы предотвратить загрузку CSS-файла в любой версии IE и в более старых версиях других браузеров, достаточно прописать следующее:
Начните с чистого листа
Как выглядит Метод соответствия на деле? Использование JavaScript поможет загрузить таблицу стилей, но лучше всего избегать этого. Потому что тогда мы не можем использовать процедуру импорта (@import) внутри блока @supports, поэтому остаются мультимедийные запросы.
Чтобы предотвратить загрузку CSS-файла в любой версии IE и в более старых версиях других браузеров, достаточно прописать следующее:
<link id="mustardcut" rel="stylesheet" href="stylesheet.css" media="
only screen,
only all and (pointer: fine), only all and (pointer: coarse),
only all and (pointer: none),
min--moz-device-pixel-ratio:0) and (display-mode:browser),
(min--moz-device-pixel-ratio:0)
">
only screen,
only all and (pointer: fine), only all and (pointer: coarse),
only all and (pointer: none),
min--moz-device-pixel-ratio:0) and (display-mode:browser),
(min--moz-device-pixel-ratio:0)
">
Можно не вдаваться в подробности, какие именно возможности проверяет этот запрос — это просто способ отделить старые браузеры от современных. Если вы хотите использовать этот метод, но ограничены различными требованиями поддержки, у него есть репозиторий Github с различными вариантами реализации.
То же самое мы можем использовать для JavaScript файлов:
То же самое мы можем использовать для JavaScript файлов:
(function() {
var linkEl = document.getElementById('mustardcut');
if (window.matchMedia && window.matchMedia(linkEl.media).matches)
{
var script = document.createElement('script');
script.src = 'your-script.js' ;
script.async = true;
document.body.appendChild(script);
}
})();
var linkEl = document.getElementById('mustardcut');
if (window.matchMedia && window.matchMedia(linkEl.media).matches)
{
var script = document.createElement('script');
script.src = 'your-script.js' ;
script.async = true;
document.body.appendChild(script);
}
})();
Свойство matchMedia добавляет возможности мультимедийных CSS-запросов к JavaScript. Свойство matches отражает результат запроса: если запрос в теге ссылки = true, то файл JavaScript добавится на страницу.
С первого взгляда может показаться, что это крайнее решение. С маркетинговой точки зрения сайт больше не выглядит «профессиональным» для некоторых пользователей. Тем не менее, так можно можно спасти пользователей, застрявших на старых технологиях, от развалившихся страниц и кучи багов.
Это далеко не новый и уже проверенный подход. Например, в 2001 году A List Apart отрубил визуальный дизайн у Netscape 4, при этом число пользователей возросло.
Разработка — и так дело сложное, а поддержка устаревших браузеров только замедляет и разочаровывает программистов. Тестирование становится изнурительным, а баг-фиксы бесконечными.
Не позволяя прошлому тянуть нас назад, мы можем сосредоточиться на создании крутых современных сайтов с использованием новых стандартов, при этом не оставляя «пользователей из прошлого» с развалившимися сайтами. Если контент полезен — то он выживет и без супер-украшений. А сделав лишь один клик — можно увидеть все возможности.
С первого взгляда может показаться, что это крайнее решение. С маркетинговой точки зрения сайт больше не выглядит «профессиональным» для некоторых пользователей. Тем не менее, так можно можно спасти пользователей, застрявших на старых технологиях, от развалившихся страниц и кучи багов.
Это далеко не новый и уже проверенный подход. Например, в 2001 году A List Apart отрубил визуальный дизайн у Netscape 4, при этом число пользователей возросло.
Разработка — и так дело сложное, а поддержка устаревших браузеров только замедляет и разочаровывает программистов. Тестирование становится изнурительным, а баг-фиксы бесконечными.
Не позволяя прошлому тянуть нас назад, мы можем сосредоточиться на создании крутых современных сайтов с использованием новых стандартов, при этом не оставляя «пользователей из прошлого» с развалившимися сайтами. Если контент полезен — то он выживет и без супер-украшений. А сделав лишь один клик — можно увидеть все возможности.
Разработчики не должны находиться в вакууме и кодить только под Макбук Про и сверхбыстрые сети. Стоит помнить, что главное — донести до пользователя нужную информацию, а классные визуальные штуки использовать там, где это возможно.