От автора: начинающие разработчики часто жалуются на отсутствие полной поддержки в новейших браузерах, таких как Chrome, всех самых последних тегов HTML, свойств CSS или JavaScript. Вместо этого все браузеры стремятся выпустить локальные патчи: Firefox поддерживает какие-то из свойств, которые не поддерживает Chrome, в Safari нет тех свойств, что есть в Chrome и т.д. Все это объясняется тремя основными причинами.
HTML это живой, постоянно развивающийся язык разметки. В то время как W3C все еще доделывает и стандартизирует HTML5, разработчикам интересны совершенно другие, новые, незаконченные, находящиеся в бета-тестировании, свойства (как, к примеру, Web Animation API). По самой своей природе данные свойства могут быть только частично выполнены в последних версиях браузеров.
Большие объемы работы. Существует несколько способов разработки нового браузера, но все они сталкиваются с одной и той же неразрешимой проблемой: для полной поддержки HTML5 слишком много чего нужно сделать, а значит, нужно очень много людей со свободным временем и возможностями.
Потребители не будут ждать релиза с полноценной поддержкой спецификации. Два десятилетия назад обновления браузера могли быть раз в 12 или 18 месяцев; IE6 продержался 5 лет без обновлений. Но такой подход неприменим в настоящих условиях рынка. Пользователям нужны (и они их заслуживают) постоянные обновления браузера. Чисто теоретически возможно не выпускать обновление браузера, пока не будет полностью поддерживаться HTML5 спецификация, однако рынок неоднократно показал, что потребителю важнее получить кратковременное обновление, в котором поддерживаются парочка новых свойств.
Все это ставит разработчиков в затруднительное положение: старые спецификации HTML, CSS и JavaScript отлично поддерживаются браузерами (хотя и не без погрешностей), в то время как новейшие свойства во всех этих языках могут поддерживаться только в одном или двух браузерах и полностью не работать в остальных. Но к счастью, есть выход:
ШИМы – любые куски кода, перехватывающие вызов API (на языке разработчиков запрос свойств из HTML5, CSS или JavaScript) и позволяющие изменить код. Полифилл (термин придуман разработчиком Remy Sharp) это упрощенный ШИМ, в том смысле, что он встраивается в код страницы и помогает поддерживать свойства в браузерах, которые этой поддержки еще не имеют.
Обычно это JavaScript код (но не всегда), часто в сочетании с CSS и частично с HTML разметкой. Есть множество хорошо зарекомендовавших себя полифиллов, которые решают проблему поддержки HTML5 и новых свойств в CSS и JavaScript несколькими способами.
Тем не менее, с полифиллами нужно быть поосторожнее, ниже несколько причин:
Полифиллы сами по себе поддерживаются не всеми браузерами. С одной стороны они написаны, чтобы обеспечить поддержку старых браузеров, но с другой у полифиллов все равно есть свои ограничения: когда дело касается IE, к примеру, работают уже только некоторые из полифиллов, и только с версии IE8 и выше. Чтобы подобрать нужные вам полифиллы, следует протестировать свой сайт в разных браузерах и их версиях с помощью Google Analytics.
Зависимость от других библиотек. Для обеспечения расширенной поддержки браузеров полифиллы часто прибегают к фреймворку JQuery. Для их работы необходимо сначала подключить данную библиотеку.
Используйте условную загрузку везде, где это возможно. Вам точно не хочется загружать нерелевантный JavaScript код для браузеров, которые из без этого кода уже поддерживают новые свойства. Условная загрузка срабатывает самой первой, так что можно подгружать только те полифиллы, которые требуются для конкретной страницы в данном браузере. С этим вам может помочь библиотека Modernizr; в самых последних версиях браузеров также может пригодиться @supports.
Важно отметить, что полифиллы это все же временное решение проблем поддержки браузеров: в конечном счете число посещений вашего сайта со старых браузеров, в которых не поддерживаются определенные свойства, упадет до той цифры, после которой просто можно удалить полифилл вовсе.
В терминах HTML5 ШИВ более специфичен: HTML5hiv это маленький кусок JavaScript кода, написанного Sjoerd Visscher, который позволяет применять новые теги HTML5 и свойства CSS в IE8. Если вы используете всего несколько HTML5 тегов на странице, к примеру, <main>, то вы можете самостоятельно прописать поддержку ваших тегов для IE; в остальных случаях HTML5Shiv более чем подходит.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
