Сделайте свой веб-сайт готовым для Microsoft Edge - BrowseEmAll Web Dev Blog

1. Тестовая среда
2. Первый тест
3. X-UA-Compatible
4. Строка нового агента пользователя
5. attachEvent / removeEvent
6. currentStyle
7. Условные комментарии
8. Резюме

В конце июля Microsoft официально выпустит свою новую операционную систему Windows 10, которая включает в себя новый веб-браузер Microsoft Edge. Потому что многие пользователи Windows могут получить обновление бесплатно весьма вероятно, что вскоре мы увидим, как многие пользователи посещают наши веб-сайты с помощью Microsoft Edge. Большой вопрос сейчас, ваш сайт работает безупречно с этим новым браузером ? В этом посте я расскажу вам, как проверить ваш веб-сайт на наличие Microsoft Edge.

Тестовая среда

Чтобы веб-сайт работал и отображался так, как ожидалось, нам потребуется соответствующая среда тестирования. Несмотря на то, что сегодня вы можете установить технический предварительный просмотр Windows 10 на своем устройстве, я бы предложил попробовать Windows 10 на виртуальной машине, используя VMWare Player или же Виртуальная коробка , Вы можете получить последнюю версию Windows 10, присоединившись к Программа Windows Insider и загрузите изображение на выбранный вами язык Вот ,

Просто создайте новую виртуальную машину с не менее 40 ГБ свободного места и установите Windows 10 Preview. Этот процесс прост и описан Вот в деталях.

Первый тест

Теперь вы можете запустить виртуальную машину и открыть Microsoft Edge, чтобы взять свой веб-сайт на тест-драйв. Потратьте время на подробное тестирование любой функциональности, чтобы убедиться, что она работает должным образом. В последней сборке (на момент написания 10130) браузер все еще называется «Project Spartan».

Вполне возможно, что ваша страница работает из коробки без необходимости что-либо делать, как это было в нашем случае. Но не всем повезет, особенно если ваша страница сложнее или несколько старше. Итак, давайте разберемся с наиболее распространенными и легко решаемыми проблемами и их решениями.

X-UA-Compatible

Страницы, которые используют X-UA-Compatible Метатег, заставляющий Internet Explorer переходить в режим старых документов, может некорректно отображаться в Microsoft Edge, если для правильной работы страницы используется поведение старых версий Internet Explorer. Конечно, эти страницы, скорее всего, не будут работать в других браузерах правильно. В этом случае вам может потребоваться проделать определенную работу, чтобы он снова заработал в Microsoft Edge, поскольку Edge больше не поддерживает режимы, совместимые с X-UA. Если вы можете навязать своим пользователям определенный браузер, возможно, вы захотите заглянуть в Internet Explorer 11 Режим предприятия вместо поддержки Microsoft Edge. Это не будет приемлемым вариантом для публичных веб-сайтов.

Строка нового агента пользователя

Несмотря на то, что больше не требуется обнаружение браузеров вместо функций, в некотором коде это делается. Это означает, что полностью переработанная строка User Agent Microsoft Edge будет проходить через некоторые сценарии в цикле, чтобы правильно ее обнаружить. Пользовательский агент IE 11 все еще отличался от других браузеров:

Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0), как Gecko

Microsoft Edge теперь использует строку User Agent String, очень похожую на Google Chrome и Opera, что затрудняет правильное определение Edge. Преимущество этого заключается в том, что старый скрипт обнаруживает его как Chrome или Safari, а не просто выдает ошибки для неизвестного браузера.

Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.9600

Поэтому, если ваш код по-прежнему зависит от обнаружения в браузере с помощью User Agent String, вам может потребоваться соответствующим образом обновить код.

attachEvent / removeEvent

Вплоть до Internet Explorer 10 вы могли прикреплять и удалять события из определенных элементов HTML, используя attachEvent или метод addEventListener :

// старый API button.attachEvent ("onmouseup", OnButtonUp); // новый API button.addEventListener ("mouseup", OnButtonUp, false);

API attachEvent и removeEvent были удалены в Microsoft Edge и больше не будут работать. Если вы все еще используете этот старый API, обязательно обновите и используйте addEventListener для Microsoft Edge и других современных браузеров. Поскольку IE 8 не поддерживает addEventListener, вам может понадобиться использовать оба.

currentStyle

Вплоть до IE 11 вы могли использовать currentStyle API для доступа к рассчитанной информации стиля для любого элемента HTML. Поскольку это нестандартный API, он был удален в Microsoft Edge. Вы можете использовать обычно поддерживаемый метод getComputedStyle ().

var elem1 = document.getElementById ("elemId"); // старый var currentStyle = elem1.currentStyle; // новый var style = window.getComputedStyle (elem1, null);

Вам больше не нужно использовать currentStyle, если только вам не нужна поддержка Internet Explorer 8.

Условные комментарии

Иногда необходимо делать особые вещи, чтобы вы могли продолжать поддерживать старую версию IE. Например, вы можете добавить специальный JavaScript на свою страницу, если пользователь использует Internet Explorer, чтобы вы могли смоделировать некоторые функции, которые этот браузер не поддерживает. Скорее всего, вы сможете просто оставить эти условные комментарии в одиночку, поскольку, хотя Microsoft Edge не поддерживает их, они не должны быть необходимы для правильного отображения вашей страницы.

Тем не менее, вы можете захотеть заглянуть в места, где вы используете эти комментарии, просто чтобы быть в безопасности. Мы используем условные комментарии примерно так:

<! - [if lt IE 9]> <script src = "/ Content / plugins / html5shiv.js"> </ script> <script src = "/ Content / plugins / jRespond / js / response.min.js" > </ script> <! [endif] ->

Резюме

Это наиболее распространенные проблемы, которые могут возникнуть, если ваш сайт отображается в Microsoft Edge. Как я уже говорил ранее, большинство веб-сайтов должны продолжать работать только в Edge, но, конечно, вы никогда не можете быть уверены, что тестирование - это ключ. В общем, я бы сказал, что Microsoft Edge - это большой шаг вперед для браузера, сделанного Microsoft. Теперь, если бы мы могли оставить IE уже позади, это было бы здорово.

В качестве примечания: во время тестирования с Microsoft Edge мне не удалось заставить инструменты разработчика работать вообще. Надеюсь, это будет исправлено в будущих версиях, чтобы облегчить жизнь разработчикам.

Похожие

Комментарии