Делая ремонт на своем стареньком сайте (т.е. переводя его на HTML5), я обнаружил в стенах и деревянных поверхностях дыры и трещины, которые необходимо было залатать. Для этого я использовал шпатлевку, обеспечивающую гладкую и ровную поверхность. Затем необходимо подкрасить и, конечно же немного магии.
А вот и методы решения проблемы:
- создаем код страницы по правилам стандартных API и тестируем в браузерах, поддерживающих необходимые нам возможности;
- с помощью JavaScript выполняем обнаружение возможностей, которые должны работать на сайте;
- если определенная возможность в браузере не доступна, спокойно загрузите сценарий заполнитель, имитирующий поддержку данной возможности;
- похлопайте себя по плечу, налейте чашку чая и возьмите с полки пирожок.
Однако существует опасность, что некоторым браузерам придется загружать слишком много скриптов, что отразится на загрузке web-ресурса. Вследствие этого пострадает производительность. Также это означает, что нужно уделять много времени тестированию сайта.
Распознавание возможностей
Это является первым шагом к принятию решения о том, требуется ли в вашем приложении заполнение. Обратим вниманиие, что речь идет именно о распознавании поддержки. Второй вариант таков: если в браузере отсутствует возможность, следовательно будем выполнять гениальный трюк.
Однако стоит помнить, что невозможно распознать все.
В большинстве случаев, распознавание возможностей заключается в проверке, существует ли функция или свойство в текущей версии браузера.
Распознавание свойств
Например, помимо ссылочного свойства document.body в HTML5 также появилось свойство document.head. Поскольку эт всего лишь свойство, очень просто проверить его существование и задать значение, если оно доступно:
if (document.getElementsByTagName('head')[0] !== document.head) {
document.head = document.getElementsByTagName('head')[0];
}
По-моему этот код должен быть понятен всем.
Еще один распространённый метод распознавания — проверка существования определённого свойства HTML. К примеру, для того, чтобы узнать, есть ли в браузере встроенная поддержка элемента details, мы создаем такой элемент, а затем проверяем существует ли свойство open (это свойство входит в стандартную реализацию details). Таким образом, мы на лету создаем элемент и тестируем указанное свойство:
if (!'open' in document.createElement('details')) {
//встроенная поддержка отсутствует, нужен заполнитель...
}
В коде мы спрашиваем, существует ли свойство open у элемента details.
Распознавание любых объектов без помощи JavaScript
Даже если JavaScript не входит в Ваш арсенал, не теряйте надежды. Существует проект Modernizr (http://modernizr.com) — это небольшая библиотека JavaScript, дающая полное представление о том, что конкретный браузер поддерживает и что он не поддерживает. Не пугайтесь от названия, эта утилита не будет совершенствовать ваш браузер. Modernizr даст базу для распознавания многих аспектов HTML5 и CSS3.
Выводы
Мы узнали, что заставить приложения HTML5 работать в старых браузерах не только можно — как вы видите сделать это достаточно легко. Для этого нужно выполнить распознавание возможностей, то есть понять, какую необходимую вам функциональность браузер поддерживает, а какую нет. По моему мнению, самым лучшим решением проблемы является JavaScript. Я считаю заполнителями не следует пользоваться вообще, ввиду того, что упадет производительность сайта (например, IE6 работает медленнее современных браузеров, из-за непроизводительных механизмов JavaScript).
Автор: olzagafer
