Автор оригинала: FreeCodeCamp Community Member.
Zell Liew
Поддерживая более старые браузеры
Вам не нужно много беспокоиться о поддержке более старых браузеров сегодня. Они были приличными, поскольку Internet Explorer 8 умер.
Но вопрос остается: как вы должны пойти в поддержку Internet Explorer 9 и других браузеров? Во-первых, если вы даже думаете о поддержке Internet Explorer 9?
Мы посмотрим на несколько вещей, которые вы хотели бы рассмотреть.
Думать особенности, а не браузеры
Скажем, мир содержит только две функции и два браузера.
- Браузер A Поддержка функция A но не является функцией B.
- Браузер B поддерживает функцию B, но не функция A.
Можно обнаружить, какие браузеры поддерживают какие особенности и действуют оттуда.
// This is JavaScript
if (Browser A) { // Code for A}if (Browser B) { // code for B}Но что, если есть больше браузеров? Что если мир содержит браузеры C, D и E? Трудно поддерживать необходимые функции, если вы думаете о браузерах.
Есть лучший способ: вы можете проверить, существует ли функция. Если он существует, используйте его. Если нет, обеспечьте ответный код.
Следующий блок кода работает из браузера A – браузер Z.
// This is JavaScript
if (feature A) { // Code if browser contains feature A} else { // Code if browser doesn't contain feature A}И теперь вам не нужно беспокоиться о браузерах.
Решив ли использовать функцию
Многие люди решают, использовать ли функцию в зависимости от количества браузеров, которые его поддерживают. Но, как я уже спорил выше, браузеры не имеют значения.
Что имеет значение: Можете ли вы кодировать неудачу для функции легко? Если вы можете легко кодировать отступление, продолжайте и используйте функцию. Если вы не можете легко кодировать отбления, не используйте функцию.
Решать, какие браузеры поддерживают
Вам все еще нужен отсечка.
Какие браузеры вы собираетесь поддержать?
Какие браузеры вы не собираетесь поддерживать? Если вы не хотите поддерживать браузер, то вам не имеет смысла писать неудачный код для него.
Мой лучший ответ: смотреть, кто использует ваш сайт. Какие браузеры они используют? Следуйте соответственно.
Да, могут быть выбросы, которые пытаются посетить свой веб-сайт в Интернете Explorer 6. Но есть время и энергию, чтобы написать дополнительный код для браузера, который почти никто не использует?
Будет ли ваша энергия лучше потратить в другое место?
Уровень поддержки
Я бы поспорил, что есть четыре уровня поддержки:
- все должно выглядеть и работать так же во всех браузерах
- Сайт должен выглядеть так же, но функциональные возможности могут быть разными в браузерах
- Функциональные возможности должны быть одинаковыми, но выглядит можно разные в браузерах
- внешность и функциональность могут отличаться в браузерах
Какую поддержку вы предоставляете старым браузерам? Почему?
Обертывание
Подумай об этом:
- Почему вы пытаетесь поддержать старый браузер, который вы пытаетесь поддержать?
- Какой уровень поддержки вы даете?
- Стоит ли ресурсы, которые вы выделили?
Поддержка старых браузеров – CSS
Есть два способа предоставить отблески для функций CSS:
- Недвижимость отблессы
- Функциональные запросы
Недвижимость отблессы
Если браузер не распознает свойство или соответствующее значение, браузер вообще будет игнорировать свойство.
Когда это произойдет, браузер использует – или падает назад – к предыдущему значению он находит.
Это самый простой способ обеспечить отступление.
Вот пример:
.layout { display: block; display: grid; }В этом примере браузеры, которые поддерживают GRID CSS, будут использовать Дисплей: сетка Отказ Браузер, который не поддерживает CSS Grid, отступит к Дисплей: Блок Отказ
Опустите значения по умолчанию
Если элемент, который вы используете по умолчанию для Дисплей: Блок Вы можете опустить Дисплей: Блок Декларация. Это означает, что вы можете поддерживать GRID CSS с помощью одной строки кода:
.layout { display: grid; }Браузеры, которые поддерживают GRID CSS, смогут прочитать другие свойства CSS, как Сетка-шаблоны-столбцы Отказ Браузеры, которые не поддерживают CSS Grid не могут.
Это означает, что вы можете написать дополнительные свойства GRID CSS, не беспокоясь о затрагивающих значениях.
.layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; }Функции запросов или @supports Расскажите вам, поддерживается ли свойство CSS или соответствующее значение, поддерживается браузером.
Вы можете подумать о функциях CSS, такие как Если/else заявления в JavaScript. Они выглядят так:
@supports (property: value) { /* Code when property or value is supported*/}@supports not (property: value) { /* Code when property or value is not supported */}@supports Полезно, если вы хотите браузеры читать CSS Только Если они поддерживают конкретное свойство.
Для пример сетки CSS мы были выше, вы можете сделать это:
@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}В этом примере прокладки левый и Пальки - правый Будут прочитать только браузерами, которые поддерживают оба @supports и CSS Grid.
Джен Симмонс имеет лучший пример @supports на работе. Она использует дополнительные запросы для обнаружения, поддерживают ли браузеры, например -webkit-начальная буква Отказ
@supports (initial-letter: 4) or (-webkit-initial-letter: 4) { p::first-letter { -webkit-initial-letter: 4; initial-letter: 4; color: #FE742F; font-weight: bold; margin-right: 0.5em; }}Пример Джена приводит нас к вопросу: должны ли сайты выглядеть одинаковыми в браузерах? Мы посмотрим на это позже. Но сначала больше о функциях запросов.
Поддержка дополнительных запросов
Особенности запросов приобрели Отличная поддержка Отказ Все текущие основные браузеры поддерживают функции запросов.
Что если функция поддерживается, но запросы функций нет?
Раньше это было сложной частью. Джен Симмонс и другие эксперты предупредили нас от этой возможности. Вы можете прочитать, как справиться с этим В этой статье Отказ
Вот мой взять: я не поддерживаю IE 11, поэтому я использую функции запросов в том, как я упоминал выше.
Использование отблесел недвижимости и запросов функций одновременно
Посмотрите на следующий код. Какие значения прокладок применяются браузеры?
@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}.layout { padding-left: 2em; padding-right: 2em; }Ответ: все браузеры будут применяться 2em левой и правой прокладки.
Почему?
Это происходит потому, что Пальки слева: 2em и Пальки - право: 2em были объявлены позже в файле CSS. Свойства, которые были объявлены позже переопределенные свойства, которые были объявлены ранее.
Если вы хотите Пальки слева: 2em и Пальки - право: 2em к Применить только браузерам, что Не Поддержка CSS Grid, вы можете поменять порядок свойств.
.layout { padding-left: 2em; padding-right: 2em; }@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}Примечание : Это всегда хорошая практика, чтобы сначала объявить ответный код в CSS из-за его каскадного природы.
Это также означает, что если вы используете оба @supports и @supports не , вы должны объявить @supports не первый. Это делает ваш код последовательным.
/* Always write "@supports not" first if you use it */@supports not (display: grid) { .layout { padding-left: 2em; padding-right: 2em; }}@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}Теперь давайте поговорим о том, должны ли сайты выглядеть одинаково через браузеры.
Должны ли сайты выглядеть одинаковыми в браузерах?
Некоторые люди считают, что сайты должны выглядеть одинаково через браузеры. Они думают, что брендинг важен, и подчеркивает, что участки должны выглядеть согласованными для сохранения бренда.
Другие люди говорят нет. Они верят, что они должны охватывать дух прогрессивного улучшения. Они могут дать пользователям лучшие браузеры больше любви.
Оба взгляда правы, но они приходят из разных углов.
Наиболее важной точкой зрения происходит от пользователей. Ваш сайт может предоставить пользователям то, для чего они пришли?
Если да, вы не должны быть слишком строгими к консистенции. Дайте пользователям лучшие браузеры еще лучшего опыта!
Обертывание
Чтобы обеспечить поддержку функций CSS, вы можете использовать:
- Недвижимость отблессы
- Функциональные запросы
Когда вы пишете CSS, убедитесь, что вы сначала объявляете Foxback Code перед другой набором кода для браузеров с помощью лучшей поддержки.
Поддержка старых браузеров – JavaScript
Легко предоставить поддержку JavaScript для более старых браузеров. Большую часть времени вам просто нужно использовать полифик.
Но есть больше вещей, которые вы можете сделать.
Что такое полифилл?
Полифилл – это кусок кода, который сообщает браузерам, как реализовать функцию JavaScript. Как только вы добавите полифилл, вам больше не нужно беспокоиться о поддержке. Это будет работать.
Вот как работает полифилл:
- Он проверяет, поддерживается ли функция
- Если нет, он добавляет код для поддержки функции
Вот пример полифиллирования на работе. Он проверяет, поддерживает ли браузер Array.prototype.find Отказ Если браузер не поддерживает Array.prototype.find Он говорит браузеру, как его поддерживать.
Вы можете найти этот код на MDN Отказ
if (!Array.prototype.find) { Object.defineProperty(Array.prototype, 'find', { value: function(predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); }var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); }// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1];
// 5. Let k be 0. var k = 0;
// 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; }// 7. Return undefined. return undefined; }, configurable: true, writable: true });}
Примечание : Полифилл – это подмножество прокладки. Шим – это библиотека, которая приносит новую API для более старой среды.
Использование полифилл
Есть два способа использования полифилл:
- Polyfill вручную, как в примере выше
- Добавление многих многоуровневых сразу через библиотеку
Polyfilling вручную
Во-первых, вам нужно Поиск полифилл тебе нужно. Вы должны быть в состоянии найти один, если вы гуглее. Умные разработчики создали многобилы для почти всего, что вам когда-либо понадобится.
Как только вы нашли многообразие, Используйте вышеуказанный процесс Создание Обеспечить поддержку старыми браузерами.
Добавление многих многолифилликов одновременно
Некоторые библиотеки содержат много полифимков. ES6-Shim является одним из примеров такой библиотеки. Он обеспечивает поддержку всех функций ES6 на более старых браузерах.
Использование отрезных функций JavaScript
Если вы хотите использовать отрезные функции JavaScript, рассмотрите возможность добавления Бабел в ваш процесс сборки.
Babel – это инструмент, который компилирует JavaScript. Во время этого процесса компиляции он может:
- Добавить любой прокладки/полифилл, который вам нужен
- Компиляция препроцессоров в JavaScript
Больше на втором точке:
Вавилон работает в автономном режиме в вашем процессе сборки. Он может читать файлы, которые вы передаете в него, а затем преобразуете эти файлы в JavaScript, который может прочитать браузер.
Это означает, что вы можете использовать передовые функции, такие как поток, TymNScript, и другие прохладные технологии, о которых вы слышали. Все они будут работать в браузерах, при условии, что вы передаете их через Babel сначала!
Что если многобилики недостаточно?
Если Polyfills недостаточно для поддержки функции, вы можете пересмотреть объем поддержки, который вы предоставляете для рассматриваемого браузера.
Вам нужно обеспечить ту же функциональность в разных браузерах? Может быть, вы должны рассмотреть прогрессивное улучшение вместо этого.
Может быть, вы можете кодировать таким образом, который не использует функцию?
Много Maybes, но вы получаете дрейф.
Как сказать, поддерживает ли браузер функцию?
Сначала я проверяю Caniuse.com Отказ Напишите имя функции JavaScript, и вы сможете увидеть уровни поддержки браузера.
Вот пример с Abort Controller
Если Caniuse.com Не дает мне никакой информации, я проверяю MDN. Вы найдете поддержку браузера внизу большинства статей.
Вот пример с Abort Controller очередной раз:
Остерегайтесь стоимости JavaScript
При использовании многолифиллирования вы добавляете больше JavaScript Code.
Проблема с добавлением дополнительного JavaScript, ну есть больше JavaScript. И с большим количеством JavaScript приходит больше проблем:
- Старые браузеры обычно живут у старых компьютеров. Они могут не иметь достаточно мощности обработки.
- Службы JavaScript могут задержать нагрузку на сайт. Подробнее об этом в « стоимость JavaScript » Addy Osmani
Обертывание
Легко добавить поддержку функций JavaScript. В большинстве случаев вы добавляете полифилл и вызовите его в день. Но будьте в курсе стоимости JavaScript, когда вы делаете это!
Иногда это может быть приятно, чтобы полностью бросить функцию.
Зачем поддерживать более старые браузеры?
Почему вы должны заботиться о старых браузерах?
Кто использует старые браузеры? Возможно, пользователи со старыми компьютерами?
Если они используют старые компьютеры, возможно, у них нет денег, чтобы купить новый.
Если у них нет денег, чтобы купить новый компьютер, они, вероятно, не купит ничего от вас.
Если они ничего не будут покупать у вас, почему вы должны заботиться о поддержке своих браузеров?
Деловому человеку, это совершенно разумный поезд мышления. Но почему мы разработчики все еще настаиваем на поддержке старших браузеров?
Давайте сломаемся
На оригинальном мыслительном процессе существует так много слоев предположений.
Хотя люди, которые люди используют старые браузеры, потому что они используют старые компьютеры, мы не можем предположить, что люди не могут позволить себе покупать новые.
- Возможно, их компания не хочет покупать их.
- Может быть, они довольны своим компьютером, и они не хотят обновлять.
- Может быть, у них нет знаний для обновления своих компьютеров.
- Может быть, у них нет доступа к новым компьютерам.
- Может быть, они связаны с мобильными телефонами, которые не имеют хороших браузеров.
Не думайте.
Мы должны уменьшить масштаб в других областях, чтобы поговорить об этом.
Доступность инвалидной коляски
Если вы были в Singapore, вы заметите, что есть рампа или лифт рядом с каждой лестницей.
Но почему? Почему правительство и частные корпорации тратят деньги на лифты и пандусы? Зачем строить их, когда лестницы достаточно, чтобы привлечь людей с более низкого возвышения до более высокого?
Оказывается, некоторые люди не могут использовать лестницу. Они не могут ходить ногами. Они должны сидеть в инвалидных колясках, и они не могут колесить себя по лестнице. Лифты и пандусы служат этим людям.
И получается, что больше людей извлекают выгоду из лифтов и пандусов.
- Люди, которые имеют более слабые колени.
- Люди, у которых есть велосипед или скутер с ними.
- Родители, которые толкают детскую тележку.
Если вы узнаете что-нибудь на колесах, вы будете использовать рампу или лифт, не думая дважды. Вы тоже выигрываете.
Но проблема в том, что никто не зарабатывает ни одного цента от работы пандусов или лифтов? Так зачем построить их?
Потому что это того стоит.
И стоит не всегда означает деньги.
Рассмотреть глобальное потепление
Вы живете на земле. Что вы относитесь к глобальному потеплению?
Некоторые люди все равно. Это нормально, если леса сожжены. Это нормально, если компании загрязняют реки и выделяют тонны диоксида углерода в воздух. Это не влияет на них.
Но есть группа людей, которые заботятся. Они любят планету, на которой мы живем. Они хотят дать своим детям лучше, чтобы жить. Есть много причин, по которым они заботятся. И они, вероятно, хотят сэкономить как можно больше ресурсов.
Где вы стоите?
Вы бы дали деньги компании, которая разрушает землю, пока она работает?
Может быть, вы будете. Может быть, вы не будете. Может быть, вам все равно. Все три варианта действительны.
И еще раз, вы видите, это не всегда в деньгах.
Сеть для всех
Мы предпринимаем разработчики, – это хранитель в Интернете. Как получается сеть, зависит от нас. Мы не можем заставить всех построить пандусы и лифты, но мы можем убедиться, что мы построим их самим собой.
Выбор зависит от вас, правда.
Вам не нужно заботиться, если вы не хотите.
Большинство хороших разработчиков Frontend я знаю? Они заботятся. Они решили быть включено. Это то, что делает нас разработчиками Frontend.
Мы заботимся.
Но иногда у нас также есть ограничения и ограничения. И мы работаем с этими пределами.
Эта статья была первоначально опубликована в мой блог. Подпишитесь на мой рассылка Если вы хотите больше статей, чтобы помочь вам стать лучшим интерфейсом разработчика.