Заставьте HTML5 работать сегодня с помощью полифилов

Эта статья впервые появилась в выпуске 238 журнала .net — самого продаваемого в мире журнала для веб-дизайнеров и разработчиков.

Мы все были в такой ситуации: вы кодируете веб-сайт, и что-то в его дизайне или поведении было бы так легко реализовать, если бы вы могли использовать определенную современную стандартную функцию HTML5 или CSS3. Но ваши требования диктуют полную поддержку IE7, поэтому вы застреваете либо (а) разветвлять свой код браузером, либо (б) полностью отказаться от стандарта и использовать какой-то раздутый, хакерский и подверженный ошибкам обходной путь для копирования функциональность.

К счастью, существует золотая середина, которая становится все более популярной: полифилы. Этот термин относится к определенному типу оболочки, которая реализует стандартную веб-функцию или API в браузерах, которые не имеют встроенной поддержки.

Полифиллы ненавязчивы

За исключением кода для включения его на вашу страницу, настоящий полифил не имеет собственного API — он просто использует тот же синтаксис или API, что и реализуемая им стандартная функция. Это отличается от таких библиотек, как jQuery, которые пытаются сгладить различия между браузерами, предоставляя абстрактный API поверх стандартного.

Преимущество полифилла заключается в том, что, поскольку вам не нужно беспокоиться об обучении или отладке дополнительного API, вы можете сосредоточиться на написании только экономичного, основанного на стандартах кода и использовать все сэкономленное время, чтобы сосредоточиться на более важных вещи!

Полифилы являются временными

Конечная цель любого полифила — со временем устареть. Поскольку все больше и больше браузеров начинают реализовывать недостающую функцию, количество браузеров, нуждающихся в для заполнения сжимается до нуля, полифилл постепенно перестанет загружаться или использоваться вообще. Это происходит автоматически, без необходимости в дальнейшем изменять код вашего сайта.

Чтобы это автоматическое устаревание работало, вы должны убедиться, что вы включаете полифилл только в те браузеры, которые в нем нуждаются. Мы вернемся к этому позже, в разделе статьи, посвященном условной загрузке. Естественно думать о полифилах как об инструментах улучшения работы в устаревших браузерах, поскольку именно здесь они выполняют свою работу. Но лучше думать о них как об инструментах для улучшения опыта в современный браузеры, а старые второстепенны.

Почему это? Что ж, поскольку полифилы облегчают написание простого стандартного кода в качестве основы, современные браузеры, поддерживающие он выиграет от значительно меньшего размера файлов, более быстрого рендеринга и хорошо интегрированного встроенного реализации. Старые браузеры будут загружать и запускать дополнительный код оболочки независимо от того, выбрали ли вы другую библиотеку или оболочку, но полифил не позволяет браузерам, способным на это, делать то же самое.

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

Полифилы предназначены не только для старых браузеров

Большинство из нас думают о полифилах как об инструментах для «старого IE» (версий до 9). Это понятно; на протяжении большей части последнего десятилетия основной целью полифилов действительно были старые версии IE из-за серьезного отсутствия поддержки многочисленных современных стандартов.

Но за последние год или два мы стали свидетелями очень интересного развития: полифилы выходят за рамки старых браузеров и ориентируются также на современные движки – даже на последние версии! Это происходит потому, что новые стандарты HTML5 развиваются так быстро, что производители браузеров не могут не отставайте, и дальновидные разработчики, которые хотят их внедрить, создают полифилы, чтобы соединить зазор.

Хорошим примером является CSS.supports полифилл, который реализует CSS.supports API JavaScript из рабочего проекта модуля условных правил CSS3. Хотя ни один браузер, поставляемый в настоящее время, не поддерживает этот API, ожидается, что он будет поддерживаться в будущем, поэтому этот полифил позволяет разработчикам начать использовать API уже сегодня. Теоретически, как только браузеры начнут поставляться с собственной реализацией, это легко вступит в силу, и полифилл перестанет использоваться.

Но будьте осторожны: использование функций, основанных на незаконченной спецификации, по своей сути рискованно! Это так, независимо от того, решите ли вы их полифиллить или нет — если спецификация изменится, ваш код не будет работать, когда появится окончательная нативная реализация. Мы уже видели, как это происходит, например, с модулем CSS3 Flexible Box Layout, который радикально изменился, так что сайты, использующие старый черновой синтаксис вместе с популярным Гибкий полифил не будет работать в браузерах, реализующих окончательный синтаксис без изменений кода. Хорошее практическое правило: если вы не готовы старательно обновлять код вашего сайта вместе с изменениями спецификаций, вам следует избегать использования черновых функций.

Как вы используете полифил?

Существует несколько различных методов применения полифилов. Очевидно, вам следует обратиться к документации по конкретному полифилу, который вы хотите использовать, но большинство из них используют либо включение сценариев, либо поведение HTC.

Скрипт включает в себя

Самый распространенный метод — просто включить в страницу один или несколько файлов JavaScript; затем сценарий выполняет свою работу автоматически без дополнительного кода. Полифиллы, включенные таким образом, часто добавляют глобальные объекты или методы, анализируют и переписывают CSS страницы или ждут загрузки страницы и манипулируют DOM.

Например, популярный полифилл без префиксов Леа Веру обеспечивает поддержку нескольких свойств CSS без префиксов в браузерах, которые поддерживают только версии с префиксами поставщика. Чтобы использовать его, вам необходимо скачайте файл prefixfree.min.js и включите его на свою страницу сразу после таблиц стилей:

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

.myClass { box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }

…и когда пользователь посещает страницу, например, с помощью более старого браузера Firefox, это будет переписано полифиллом как:

.myClass { -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }

Поведение HTC

Несколько полифилов, специально предназначенных для Internet Explorer, используют поведение HTC (HTML-компонент). Это запатентованная технология, доступная только в IE9 и более ранних версиях, которая по сути запускает собственный скрипт для элементов, соответствующих определенному селектору CSS. Глянь сюда если вам интересно, как работает поведение.

Например, полифил CSS3 PIE (отказ от ответственности: я создал его) использует поведение HTC для рендеринга некоторых наиболее распространенных свойств оформления блока CSS3 в IE6–9. Он применяется путем добавления поведение свойство для ваших элементов в стиле CSS3:

.myClass { border-radius: 8px; box-shadow: #666 0px 2px 3px; behavior: url(/path/to/PIE.htc); }

Это указывает IE загрузить файл PIE.htc и выполнить его для каждого элемента, соответствующего .мои занятия селектор. Сценарий внутри PIE.htc затем видит граница-радиус и коробка-тень Свойства CSS3 присутствуют и визуализируют закругленную форму прямоугольника и мягкую тень с помощью VML (векторная разметка). Language, еще одна фирменная технология IE.) Конечный результат вообще неотличим от современного браузеры.

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

Однако есть некоторые ошибки: файл HTC должен находиться в том же домене, что и страница, использующая его, сервер должен отправлять его с использованием правильного HTTP-заголовка Content-Type и поведение Свойство разрешает относительные URL-адреса на основе HTML-страницы, а не местоположения файла CSS. Это может затруднить использование полифилла, так что имейте это в виду.

Условная загрузка полифилов

Чтобы гарантировать, что современные браузеры не загружают ненужные файлы, важно использовать своего рода условную загрузку для ваших полифилов. Большинство из них предоставляют инструкции по этому поводу в своей документации, но вот несколько общих вариантов:

Если полифилл предназначен только для браузеров IE, вы можете включить его скрипт в условные комментарии. Например:

Дополнительный JavaScript

Если вам нужно что-то более интеллектуальное, чем простая проверка версии IE, вы можете написать небольшой фрагмент JavaScript для условного включения файлов. Например, следующий код включает в себя json2.js скрипт polyfill только в том случае, если глобальный объект JSON еще не предоставлен браузером:

Асинхронная загрузка

Если полифил не требуется сразу во время загрузки страницы, вы можете вместо этого рассмотреть возможность загрузки его асинхронно, чтобы улучшить воспринимаемую производительность (глянь сюда):

Modernizr.load

Помимо простого обнаружения объектов, подобных этому, тестирование функций может оказаться очень сложным. Это где Модернизр пригодится благодаря обширной библиотеке функциональных тестов. Он также включает более мощную библиотеку условной загрузки под названием yepnope, которая дает дополнительный контроль над процессом загрузки и может обрабатывать несколько файлов JS или CSS.

Например, если вам необходимо хранить постоянные данные на стороне клиента, логичным выбором будет API localStorage HTML5. К счастью, существует ряд полифилов, которые эмулируют его в старых браузерах. Сначала перейдите на сайт www.modernizr.com/download и выберите тест функции localStorage и Modernizr.load. Сгенерируйте и загрузите результат, поместите его в каталог своего сайта и включите на свою страницу:

Сейчас возьмите полифилл Storage.min.js и загрузите его в каталог вашего сайта.

Наконец, давайте воспользуемся методом Modernizr.load, чтобы проверить наличие собственного localStorage и загрузим полифил хранилища, если он не поддерживается. Мы также воспользуемся «полным» обратным вызовом Modernizr.load, чтобы добавить некоторые данные по умолчанию в localStorage, как только они станут доступны и/или заполнены:

Имейте в виду, что Modernizr.load определенно является мощным инструментом и может не подходить во всех ситуациях. Если вы планируете использовать его, вам следует сопоставить общий размер файла полифилов, которые вы собираетесь использовать, с размером пользовательского файла сборки Modernizr. Последний загружается всеми браузерами, поэтому, если он больше, чем сами полифилы, вы должны на самом деле лучше вообще обойтись без условной загрузки или использовать один из более простых методов описано выше.

Как работают полифилы?

Хотя детали внутренней работы сильно различаются, полифилы обычно незаметно выполняют одну или несколько из следующих вещей:

1. Создайте новые глобальные объекты JavaScript.
Для API, которые представлены в глобальных объектах, например окно. JSON или окно.localStorage.

2. Добавляйте свойства/методы в прототипы объектов.
Для API, которые являются дополнениями к существующим объектам, например Массив.prototype.forEach().

3. Запуск плагинов
Для вещей, которые невозможно эмулировать с помощью других встроенных функций браузера, таких как HTML5.

4. Разобрать и переписать CSS
Для интерпретации селекторов или свойств CSS, которые браузер не распознает сам.

5. Запрос и изменение DOM
Чтобы изменить конечный результат, видимый пользователем.

Кроме того, почти все полифилы полагаются на JavaScript, чтобы творить чудеса, поэтому имейте в виду, что пользователи с отключенным JavaScript не получат от этого никакой пользы.

Тестирование с помощью полифилов

Хотя полифилы пытаются обеспечить идентичную работу во всех браузерах, не думайте, что, используя их, вы сможете избежать тщательного тестирования! Напротив, наличие хороших процессов и инструментов для кроссбраузерного/кроссплатформенного тестирования как никогда важно.

Как всегда, протестируйте страницу, используя ту версию браузера, которую будут использовать ваши посетители. Если можете, получите эту информацию со своего сайта — лучшая статистика локальная!

Я рекомендую использовать несколько виртуальных машин (работающих в VirtualBox, VMware или аналогичных), содержащих разные версии ОС и браузеров. Это особенно важно для тестирования IE, когда вам действительно необходимо иметь одну версию IE для каждой установленной ОС. Избегайте использования таких инструментов, как IETester, которые пытаются одновременно запустить несколько версий IE в одной установке ОС — они не на 100 процентов точны. Кроме того, никогда не полагайтесь на переключение режима браузера в инструментах разработчика IE, поскольку это еще менее точно.

Если вы не можете обслуживать виртуальные машины, вы можете использовать инструмент онлайн-тестирования. Убедитесь, что это интерактивный инструмент, а не тот, который просто делает снимки экрана, потому что они часто не фиксируют события в нужное время и не дают вам никакого ощущения производительности. Я рекомендую Браузерстек: это не бесплатно, но это самый точный инструмент такого рода, который я когда-либо видел.

В заключение

Полифиллы — это мощные инструменты, которые помогают сэкономить время и затраты на разработку, улучшить код вашего сайта и улучшить взаимодействие с пользователем в современных браузерах. Они не являются подходящим инструментом для каждой работы, но их полезно иметь в своем наборе инструментов – и они будут рядом в будущем!