От автора: проблема Internet Explorer постепенно ведет его к смерти. Моя первая работа на полную занятость была в небольшой компании. У нас не было BrowserStack, поэтому мы объединили временную лабораторию устройств. Просматривал сайты я на устаревшем iPad первого поколения с устаревшей версией Safari, поэтому видел я лишь беспорядок. Я вспомнил цитату Дугласа Крокфорда, который когда-то считал, что сеть «самая враждебная среда разработки программного обеспечения».
Проблема «работает лучше всего с Chrome»
Из-за этой трудности возникла проблема. Ранее в этом году широко распространенная статья в Verge предупреждала о сообщении «работает лучше всего с Chrome».
Есть еще несколько примеров этой проблемы. В популярном приложении для обмена сообщениями Slack голосовые вызовы работают только в Chrome. В ответ на просьбы о помощи Slack объясняет свое решение следующим образом: «От нас требуется значительное усилие для решения проблем во всех браузерах, поэтому мы сосредоточены на предоставлении лучшего опыта в Chrome». Сам Google неоднократно создавал сайты, в том числе Google Meet, Allo, YouTube TV, Google Earth и YouTube Studio, которые полностью блокируют альтернативные браузеры. Это, безусловно, плохая практика, но подчеркивает тот факт, что совместимость между браузерами может быть сложной и отнимающей много времени.
Значительный отличительный признак не связан между Chrome и всем остальным. Гораздо большее значение имеет растущая пропасть между Internet Explorer и всеми другими крупными браузерами. Должны ли наши методы развития усложняться прошлым? Или мы должны броситься в будущее, отказываясь от некоторых пользователей на нашем пути? Я за середину. Мы можем сделать жизнь проще для себя, не нарушая обратной совместимости Интернета.
Расширяющаяся пропасть
Chrome, Opera и Firefox постоянно открывают новые функции. Edge и Safari в конечном итоге догоняют. Между тем, Internet Explorer, однако, был полностью отвергнут Microsoft, которая пытается подтолкнуть пользователей Windows к Edge. IE не получает ничего, кроме обновлений безопасности. Это разочарование для разработчиков на стороне клиента. Мы читаем о новых функциях, но часто не можем их использовать — из-за одного браузера с уменьшающейся долей рынка.
Некоторые новые функции совершенно тривиальны (caret-color !); некоторые из них относятся к конкретным случаям использования, которых у вас никогда не может быть (WebGL 2.0, Web MIDI, Web Bluetooth). Другие уже чувствуют себя почти незаменимыми даже для самых простых сайтов (object-fit , Grid).
Обещание и реальность прогрессивного улучшения
Для сайтов, ориентированных на контент, на вопрос о поддержке браузера не следует отвечать простым да или нет. CSS и HTML были разработаны с точки зрения отказоустойчивости. Если конкретный браузер не поддерживает shape-outside или service worker, или font-display, вы все равно можете использовать эти функции. Ваш сайт не будет взрываться. На сайте просто не будет дополнительной стилистической расцветки или оптимизации производительности в не поддерживающих браузерах.
Другие функции, такие как CSS Grid, требуют немного больше работы. Макет страницы меньше, чем необходимость, и Grid наконец-то привнесла реальную систему макета в Интернет. При использовании с осторожностью в простых случаях, Grid может изящно вернуться к более старым методам компоновки. Например, мы могли бы вернуться к flex-wrap. В настоящее время Flexbox является неотъемлемой чертой разработчиков, но даже это пронизано ошибками в IE11.
.grid > * { width: 270px; /* no grid fallback style */ margin-right: 30px; /* no grid fallback style */
} @supports (display: grid) {
.grid > * { width: auto; margin-right: 0;
}
}
В приведенном выше коде я устанавливаю для всех ближайших дочерних элементов сетки заданную ширину и отступ. Для браузеров, которые поддерживают Grid, я буду использовать grid-gap вместо margin и определять ширину элементов с помощью свойства grid-template-columns. Это не сложно, но оно делает код больше и сложнее, если он повторяется на всей кодовой базе для разных макетов. Когда мы начинаем строить все макеты страниц с помощью Grid (и в конечном итоге display: contents), предоставление резервной копии для IE будет становиться все более трудным. Используя @supports для сложных задач компоновки, мы эффективно решаем одну и ту же проблему дважды — используем два разных метода для создания аналогичного результата.
Не каждая функция может использоваться как усовершенствование. Некоторые вещи необходимы. Люди с восторгом относятся к пользовательским свойствам CSS с 2013 года, но они все еще не широко используются, и вы можете догадаться, почему: Internet Explorer их не поддерживает. Или возьмите Shadow DOM. Люди говорят об этом более пяти лет. Наконец, в этом году он появится в Firefox и Edge и попадает в Internet Explorer … в любой момент в будущем. Вы не можете исправлять поддержку с помощью transpilers или polyfills или prefixes.
У пользователей больше браузеров, чем когда-либо, на выбор, но IE удается в одиночку привязать нас к вечнозеленному прошлому Интернета. Если разработка сайтов, основанных только на Chrome, представляет собой одну из крайностей плохой практики развития, привязка себя к рудиментарному, устаревшему, зомби-браузеру, безусловно, представляет другой.
Проблема с shoehorning
Вместо того, чтобы избегать современных функций JavaScript, polyfilling и transpiling стали нормой. ES6 поддерживается везде, кроме IE, но мы отправляем все браузеры, перегруженные версиями нашего кода. Транспортировка не очень хороша для производительности. Например, одна async функция с пятью строками может превратиться в двадцать пять строк кода.
«Я чувствую некоторую вину за текущее состояние дел», — сказал Алекс Рассел о своей предыдущей роли, leading development Traceur, транспилера, который предшествовал Babel. «Я вижу так много следов, когда комбинация переполнения Babel и плохой [webpack] foo полностью тормозят производительность сайта. … Мне грустно, что мы все еще играем в эту игру».
Если не подходит transpilling, часто может подойти polyfill. Polyfill.io стал массово популярен. Chrome отправляется пустой файл. Древние версии IE получают гигантскую гору polyfills. Мы отправляем самую большую полезную нагрузку тем, кто меньше всего способен справиться с этим — люди застряли на медленных старых машинах.
Что надо сделать?
Приоритет контента
Cutting the mustard — это метод, популяризированный командой Front News на BBC News. Этот подход снижает рынок браузеров в два раза: все браузеры получают базовый опыт или основной контент. JavaScript условно загружен только более способными браузерами. Еще в 2012 году их разделительная линия была следующей:
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // load the javascript
}
Томас Маслен, ведущий разработчик BBC, объяснил логику: «За последние несколько лет я чувствую, что наша индустрия стала ленивой из-за сумасшедших скоростей загрузки, которые нам предоставили широкополосная связь. Все перестали беспокоиться о том, насколько велики их веб-страницы и добавили тонну JS-библиотек, CSS-файлов и массивных изображений в DOM. Это продолжалось на мобильных платформах, которые не всегда имеют широкополосные скорости или аппаратные возможности для создания сложного кода».
Тем временем Guardian полностью исключает JavaScript и таблицы стилей из Internet Explorer 8 и далее.
Nature.com использует аналогичный подход, предоставляя только очень ограниченную таблицу стилей для чего-либо старше IE10.
Если бы вы ворвались в музей, украли старый компьютер и открыли Netscape Navigator, вы все равно могли бы с удовольствием рассмотреть эти веб-сайты. Пользователь приходит на ваш сайт для контента. Они не дошли до красивого градиента или красиво округленного пограничного радиуса. Они, конечно, не пришли для потенциально тошнотворной анимации прокрутки параллакса.
Любой, кто разрабатывал для Интернета какое-то время, столкнулся с ошибкой браузера. Вы проверяете свою новую функцию в каждом крупном браузере, и она отлично работает, за исключением одного. Запоминание информации о поддержке с caniuse.com и использование прогрессивного улучшения не гарантирует, что каждая функция вашего сайта будет работать должным образом.
Независимо от того, насколько хорошо сформированный и хорошо написанный ваш код, иногда вещи пробиваются не по своей вине, даже в современных браузерах. Если вы не активно тестируете свой сайт, ошибки чаще всего будут доступны вашим пользователям, без ведома вам. Вместо того, чтобы transpiling и polyfilling и надеяться на лучшее, мы можем доставить то, к чему пришел человек, в самой устойчивой, результативной и надежной форме: unadulterated HTML. Ни одна компания не имеет ресурсов для активного тестирования своего сайта на каждой старой версии каждого браузера. Неисправность JavaScript может испортить веб-интерфейс и сделать непринужденную страницу простой. Вместо того, чтобы оставлять пользователей на массу polyfills и потенциальных ошибок JavaScript, мы даем им базовый, но функциональный опыт.
Сделайте четкое разделение
Как дальше может выглядеть mustard cut поход? Вы можете выполнить запрос функции с использованием JavaScript, чтобы условно загрузить таблицу стилей, но, опираясь на JavaScript, появляется хрупкость, которую лучше всего избегать. Вы не можете использовать @import внутри блока @supports, поэтому у нас остались медиа-запросы.
Следующий запрос предотвратит доставку файла CSS в любую версию Internet Explorer и более старых версий других браузеров:
<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) ">
Нам не очень-то интересно, какие именно функции тестирует этот запрос; это просто хакерский способ разделения между старыми и современными браузерами. Блестящий современный сайт будет доставлен в Edge, Chrome (и Chrome для Android) 39+, Opera 26+, Safari 9+, Safari на iOS 9+ и Firefox 47+. Я основал запрос на работе Энди Кирка. Если вы хотите использовать подход с cutting-the-mustard, но должны отвечать различным требованиям поддержки, он поддерживает репозиторий Github с различными вариантами.
Мы можем использовать один и тот же медиа-запрос для условной загрузки файла 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); }
})();
matchMedia предоставляет возможности медиа-запросов CSS для JavaScript. Свойство matches является логическим, которое отражает результат запроса. Если медиа-запрос, который мы определили в теге link значение true, файл JavaScript будет добавлен на страницу.
Это может показаться крайним решением. С маркетинговой точки зрения сайт больше не выглядит «профессиональным» для небольшого количества посетителей. Тем не менее, нам удалось повысить производительность для тех, кто застрял на старых технологиях, а также открыть возможность использования новейших стандартов в браузерах, которые их поддерживают. Это далеко не новый подход. В 2001 году A List Apart прекратил предоставлять визуальный дизайн Netscape 4. Читатели среди пользователей этого браузера поднялись.
Разработка в конце концов сложна в лучшие времена. Добавление поддержки технологически устаревшего браузера добавляет чрезмерное количество времени и разочарования в процессе разработки. Тестирование становится обременительным. Время на фикс багов увеличивается.
Четко отделив прошлое, мы можем сосредоточиться на создании современных сайтов с использованием современных стандартов, не оставляя пользователей, застрявших в устаревших браузерах с непроверенным и, возможно, сломанным сайтом. Мы сохраняем огромное количество умственных накладных расходов. Если ваш контент имеет реальную ценность, он может выжить без ярких украшений. А для пользователей Internet Explorer в Windows 10 предустановлен Edge. Полный опыт — всего лишь один клик.
Разработчики должны избегать жизни в пузыре MacBook Pro и сверхбыстрых соединениях. Там нет волшебной пули, которая позволяет разработчикам использовать самые сложные функции. Вам все равно может понадобиться Autoprefixer и polyfills. Если вы планируете иметь большую базу пользователей в Азии и Африке, вам нужно будет создать сайт, который отлично смотрится в Opera Mini и UC Browser, которые имеют свои собственные ограничения. На данный момент вы можете выбрать другую точку отсечения, но она будет все больше и больше окупаться с точки зрения как опыта пользователей, так и опыта разработчиков, чтобы использовать то, что предлагает современная сеть.
Автор: Oliver Williams
Источник: http://alistapart.com/
Редакция: Команда webformyself.