Латаем старые браузеры и учим их HTML5

в 18:58, , рубрики: html, html5, internet explorer, javascript, Веб-разработка, метки: , ,

Делая ремонт на своем стареньком сайте (т.е. переводя его на 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

Поделиться

* - обязательные к заполнению поля