Современные веб-страницы, совместимые с IE11

браузер

Интерфейс: Невозможно быть совместимым с IE, и невозможно быть совместимым с IE в этой жизни
БОСС: Дайте вам 50% прибавку к зарплате
Интерфейс: IE — лучший браузер, который я когда-либо использовал (искреннее лицо)

Когда ваша веб-страница использует новейшие популярные технологии (такие как React, CSS3, ES6/7 и т. д.), но должна быть совместима с браузером IE, ваше сердце на самом деле сжимается, но, в конце концов, IE существует так долго, и следует ожидать всего сразу Исчезнуть нереально, так что в качестве фронтенда с (мэй) погоней (бан) ищущим (фа) давайте посмотрим, как быть совместимым с IE (здесь рассматривается только IE11, от других антикварных версий IE рекомендуется отказаться).

React в настоящее время является самой популярной и наиболее используемой библиотекой внешнего интерфейса для написания внешних страниц (никто), поэтому мы в основном рассказываем, как обеспечить совместимость с IE11 в среде React.

Используйте самую высокую версию IE

React может работать в браузерах, поддерживающих синтаксис ES5, для чего требуется, чтобы версия IE была не ниже IE9. В некоторых системах Windows с более низкими версиями для отображения страницы по умолчанию используется механизм IE с более низкими версиями.Если страницу необходимо запустить с помощью ядра IE с более высокими версиями, на HTML-страницу необходимо добавить следующий код.

1
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Таким образом, страница будет использовать самую последнюю версию движка IE в системе для загрузки страницы.здесь.

ES 6/7

Все больше и больше веб-страниц теперь используют синтаксис ES6.По сравнению с ES5, ES6 добавляет много новых функций и синтаксического сахара, что уменьшает некоторую путаницу синтаксиса оригинального JS, делает код более кратким и делает JS-разработчиков более эффективными.

React будет работать в браузерах с поддержкой ES5, включая IE9 и IE10, но если вы используете синтаксис ES6/7, вам потребуется проделать дополнительную работу, чтобы быть совместимым с IE11.

React Polyfill

Большинство разработчиков React проходятCreate React AppДля создания проекта используется инструмент создания шаблонов React, предоставленный Facebook, который удобен для новичков в React для быстрого создания проектов React.

В репозитории кода этого скаффолда есть несколько полифилов (которые можно понимать как своего рода патч, патч, который позволяет нормально работать устройствам или средам, не поддерживающим эту функцию), которые могут заставить проект React отлично работать в браузер ИЕ.

Функции

  • служба поддержкиPromise,async/await
  • служба поддержкиwindow.fetch
  • служба поддержкиObject.assign
  • служба поддержкиSymbol
  • служба поддержкиArray.from

Шаги для использования

  • пройти черезnpm install react-app-polyfillУстановить полифиллы
  • в файле ввода (обычноsrc/index.js) на первой строке импорта библиотеки
1
2
// 在文件的第一行导入,兼容 IE11
import 'react-app-polyfill/ie11';

Подробнеездесь.

core-js

даже использоватьReact PolyfillВаш проект также может не работать в IE11, потому чтоReact PolyfillНе поддерживает весь синтаксис ES6, в настоящее время мы можем выбрать другую стороннюю библиотеку.core-js, эта библиотека поддерживает в дополнение кReact PolyfillПомимо функциональных характеристик (window.fetch не поддерживает),Он также поддерживает некоторые часто используемые API ES6/7/8, такие как array.includes, string.includes, string.startsWith и т. д., который отлично работает в браузерах, не поддерживающих эти функции.

Шаги для использования

  • пройти черезnpm install core-jsкоманда для установки
  • в файле ввода (обычноsrc/index.js) на первой строке импорта библиотеки
1
2
// 在文件的第一行导入
import 'core-js';

core-jsсодержитReact PolyfillБольшая часть функционала (кроме window.fetch), поэтому обычно нет необходимости использовать обе библиотеки вместе, достаточно использоватьcore-jsДостаточно.

CSS-переменные

Функции переменных уже включены во многие препроцессоры CSS, такие как Less, Sass и т. д., но переменные уже поддерживаются в последнем синтаксисе CSS.

1
2
3
4
5
6
7
:root {
  --main-bg-color: brown;
}

.app {
  background-color: var(--main-bg-color);
}

Хотя Microsoft уже поддерживает переменные CSS в браузере Edge, к сожалению, они по-прежнему не поддерживаются в IE 11. Если вы хотите запускать код с переменными CSS в IE 11, нам нужно ввестиcss-vars-ponyfillэта библиотека.

инструкции

  • Сначала установите эту библиотеку командойnpm install css-vars-ponyfill.
  • Затем вы можете импортировать эту библиотеку в файл записи.
1
2
3
4
5
6
7
8
9
import cssVars from 'css-vars-ponyfill';

// 默认配置
cssVars();

// 还可以带配置参数
cssVars({
  // 配置参数
});

css-vars-ponyfillПеременные CSS в проекте будут преобразованы, а в IE11 они будут напрямую преобразованы в соответствующие значения переменных, чтобы проекты с переменными CSS могли выполняться в IE11.

Flexbox

Компоновка эластичных блоков Flexbox уже давно отсутствует и широко нравится разработчикам переднего плана.Теперь другие платформы используют этот метод компоновки, например React Native и т. д.

Flexbox поддерживается всеми браузерами... За исключением IE, IE поддерживается лишь частично из-за некоторых ошибок, которые невозможно исправить. Конкретные причины см.Can I Use.

Итак, как правильно запустить Flexbox в IE11? На этом этапе мы можем использовать некоторые приемы, чтобы наши специальные стили CSS работали только в IE.

На самом деле, для каждого браузера есть соответствующий селектор CSS, чтобы CSS запускался только в соответствующем браузере.Например, специальный селектор IE11 выглядит так:

1
2
3
4
// IE11
_:-ms-fullscreen, :root .selector {
  property: value;
}

Код CSS в этом селекторе действует только в браузере IE11 и не действует в других браузерах.

Существуют также специальные селекторы для IE10, перечисленные ниже:

1
2
3
4
// IE10
_:-ms-input-placeholder, :root .selector {
  property: value;
}

Таким образом, мы можем точно настроить наш макет flexbox с некоторым кодом CSS, который будет выполняться только IE, чтобы достичь цели эффекта макета flexbox.

Более подробную информацию можно найти здесь:

Суммировать

В этой статье рассказывается, как быть совместимым с браузерами IE11 с точки зрения HTML, JS и CSS, но это лишь некоторые из проблем, с которыми часто сталкивается автор. Конкретные проблемы будут подробно проанализированы, и я надеюсь, что студенты с соответствующим опытом оставит сообщение для обсуждения, спасибо.