От автора: Edge – новый браузер от Microsoft, использующий новый движок для рендеринга страниц EdgeHTML и загружающийся вместе с системой Windows 10. Из-за бесплатного перехода с Windows 7, 8 и 8.1 даже для тех, кто использует пиратскую копию операционной системы, в ближайшие месяцы можно ожидать наплыва пользователей на сайты через этот браузер.
Edge – абсолютно новый браузер, не обновление или доработка старого IE, и я уверен, многие и в первую очередь веб-разработчики воспримут эту новость положительно. И учитывая все вышесказанное, я хочу поделиться с вами пятью способами подготовить ваш сайт к работе с современными браузерами. И параллельно этому вы можете протестировать свой сайт на совместимость с Microsoft Edge.
1. Обновите библиотеки JavaScript
Наиболее распространенные библиотеки, как JQuery, постоянно обновляются при выявлении багов в новых версиях браузеров. Просто обновление поможет избежать проблем с JS фреймворками в Edge.
По результатам наших внутренних исследований 57% сайтов из топ 20, 000 используют устаревшие библиотеки с багами, которые были устранены в самых последних версиях фреймворков. Для выявления устаревших JS фреймворков на вашем сайте можете воспользоваться инструментом site scanner.
2. Избегайте вендорных префиксов CSS
Префиксы в CSS применяются создателями браузеров для того, чтобы новые, еще не прошедшие документацию W3C свойства, работали в браузерах. Вендорные префиксы выглядят, как на примере ниже (IE префикс для свойства «hyphens»): -ms-hyphens: auto;
Отсутствие нужного вендорного префикса или наоборот присутствие там, где он не требуется, распространенная ошибка для сайтов. Все это может негативно повлиять на отрисовку страницы в Microsoft Edge и других современных браузерах.
Разработчики браузеров стали меньше использовать вендорные префиксы. Это связано с проблемой обслуживания данных префиксов. Некоторые браузеры, Microsoft Edge в их числе, вообще почти не использует их.
Избегайте префиксов везде, где это возможно. Но, если вам все же они необходимы, воспользуйтесь Grunt PostCSS для автоматизации управления вендорными префиксами.
3. Избегайте методов определения браузера
Некоторые веб-страницы используют специальные техники определения браузера для того, чтобы знать, как страница отображается в тех или иных обозревателях. Мы же советуем использовать методики определения поддержки свойств. Данные методы сначала определяют поддержку браузером или устройством заданных свойств, а затем на основе полученной информации наилучшим путем отображают страницу.
Методы определения поддержки свойств отличная замена техникам определения браузера. Данные подходы используются как просто в коде страниц, так и популярным JS библиотеками, такими как Modernizr. Методика определения поддержки свойств также применяется совместно с полифиллами для того, чтобы свойства поддерживались в устаревших браузерах.
Подробнее прочесть о том, как пользоваться библиотекой Modernizr, полифиллами и другими техниками совместимости, можно в статье Martin Kearn Настройка, модернизация и оптимизация вашего веб-сайта.
4. Освободитесь от плагинов
Так как Edge не поддерживает плагины, настало время решить, как избавиться от лицензированных плагинов, таких как Flash и Silverlight. Edge, конечно, поддерживает Flash плагин, но в отличие от старой архитектуры плагинов, Flash поставляется в комплекте с обозревателем. Обновления и патчи выпускаются командой самого Edge совместно с Adobe.
Некоторые сайты могут легко отказаться от плагинов, в то время как для основной доли веб-сайтов эта задача достаточно сложна, особенно для сайтов, поставляющих медиа контент. В Edge Blog команда разработчиков браузера представило руководство, как перейти от HTML к премиум-контенту.
5. Проверьте правильность рендеринга в Edge
Браузер Edge может неправильно отобразить страницу, если будет пропущена директива . Сканнер выполняет простые проверки на правильность настройки браузера. Вбейте адрес вашего сайта, и быстро узнаете, прошел ли он тестирование. Если вы хотите понять, как работают эти тесты, взгляните на код сканнера на GitHub.
Автор: Martin Beeby
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
