5 самых распространенных ошибок HTML5-разработчиков: руководство для начинающих

Прошло более 20 лет с тех пор, как Тим Бернерс-Ли и Роберт Кайо определили HTML, который стал стандартным языком разметки, используемым для создания Интернета. С тех пор сообщество разработчиков HTML умоляло об улучшениях этого языка, но этот крик был в основном услышан разработчиками веб-браузеров, которые пытались облегчить проблемы с HTML для своих коллег. К сожалению, это привело к еще большему количеству проблем, вызывающих множество проблем с кросс-браузерной совместимостью и дублирование разработки. За эти 20 лет HTML обновлялся 4 раза, а большинство браузеров получили двузначное количество крупных обновлений плюс множество мелких исправлений.

HTML5 должен был окончательно решить наши проблемы и стать единым стандартом для всех (браузеров) . Вероятно, это была одна из самых ожидаемых технологий с момента создания Всемирной паутины. Это случилось? Получили ли мы наконец один язык разметки, который будет полностью совместим с разными браузерами и будет работать на всех настольных и мобильных платформах, предоставляя нам все те функции, о которых мы просили? Я не знаю! Всего несколько дней назад (16 сентября 2014 г.) мы получили еще один запрос на проверку от W3C, поэтому спецификация HTML5 все еще не завершена.

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

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

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

Распространенная ошибка №1: доверять локальному хранилищу

Разреши им есть торт! Этот подход веками был бременем для разработчиков. Из-за разумного страха перед нарушениями безопасности и защиты компьютеров, в «темные века», когда многие боялись Интернета, веб-приложениям разрешалось оставлять на компьютерах необоснованно малые объемы данных. Правда, были такие вещи, как пользовательские данные, которые нам дали «великие мастера браузера из Microsoft(r)», или такие вещи, как локальные общие объекты во Flash, но это было далеко не идеально.

Поэтому разумно, что одной из первых основных функций HTML5, принятых разработчиками, было веб-хранилище. Однако имейте в виду, что веб-хранилище небезопасно. Это лучше, чем использование куки, потому что они не будут передаваться по сети, но и не шифруются. Вы определенно никогда не должны хранить токены безопасности там. Ваша политика безопасности никогда не должна полагаться на данные, хранящиеся в веб-хранилище, поскольку злоумышленник может легко изменить свои localStorage и sessionStorage в любое время.

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

Распространенная ошибка № 2: Ожидание совместимости между браузерами

HTML5 — это гораздо больше, чем простой язык разметки. Он достаточно созрел, чтобы сочетать поведение с макетом, и вы должны рассматривать HTML5 как расширенный HTML с расширенным JavaScript поверх него. Если вы посмотрите на все трудности, с которыми мы сталкивались раньше, просто чтобы статическая комбинация HTML+CSS выглядела идентично во всех браузерах, будет справедливо предположить, что большая сложность будет просто означать больше усилий для обеспечения кросс-браузерной совместимости.

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

Например, веб-анимация — отличная функция, поддерживаемая только Chrome и Opera, в то время как функция веб-уведомлений, которая позволяет предупреждать пользователя вне контекста веб-страницы о событии, например о доставке электронной почты, полностью игнорируется Internet Explorer.

Чтобы узнать больше о функциях HTML5 и поддержке различных браузеров, ознакомьтесь с руководством по HTML5 на сайте www.caniuse.com.

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

Распространенная ошибка № 3: Предполагать высокую производительность

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

Однако опять же, есть несколько отличных компаний, которые в значительной степени полагаются на HTML5. Просто взгляните на многочисленные студии разработки онлайн-игр, которые делают удивительные вещи, доводя HTML5 и браузеры до предела своих возможностей. Очевидно, что если вы знаете о проблемах с производительностью и работаете над ними, вы можете быть в отличном состоянии, создавая потрясающие приложения.

Распространенная ошибка № 4: Ограниченная доступность

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

Вы можете проверить это место для получения дополнительной информации о специальных возможностях в HTML5 и текущем состоянии наиболее распространенных функций специальных возможностей.

Распространенная ошибка № 5: не использовать улучшения HTML5

HTML5 значительно расширил стандартный набор тегов HTML/XHTML. Помимо новых тегов, мы получили довольно много новых правил и поведений. Слишком много разработчиков усвоили лишь несколько улучшений и пропустили некоторые очень интересные новые функции HTML5.

Одна из самых крутых вещей в HTML5 — проверка на стороне клиента. Эта функция, вероятно, была одним из самых ранних элементов HTML5, которые подхватили веб-браузеры. Но, к сожалению, вы можете найти немало разработчиков, которые по умолчанию добавляют в свои формы атрибут novalidate . Причины для этого разумны , и я совершенно уверен, что у нас будут дебаты по этому поводу. Из-за обратной совместимости во многих приложениях реализованы собственные валидаторы JavaScript, а встроенная проверка, выполняемая браузерами, вдобавок к этому неудобна. Однако не так уж сложно гарантировать, что два метода проверки не будут конфликтовать, а стандартизация проверки пользователей обеспечит единообразие и поможет решить проблемы доступности, о которых я упоминал ранее.

Еще одна замечательная функция связана с тем, как в HTML5 обрабатывается пользовательский ввод. До появления HTML5 нам приходилось хранить все поля формы внутри <form></form> . Новые атрибуты формы позволяют сделать что-то вроде этого:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

Даже если lname не находится внутри формы, оно будет опубликовано вместе с fname .

Для получения дополнительной информации о новых атрибутах формы и улучшениях вы можете проверить Mozilla Developer Network.

Заворачивать

Я понимаю, что веб-разработчики наносят побочный ущерб в войнах браузеров, поскольку многие из вышеперечисленных ошибок являются прямым следствием проблемной реализации HTML5 в разных браузерах. Тем не менее, по-прежнему крайне важно, чтобы мы избегали распространенных проблем с HTML5 и уделяли некоторое время изучению новых функций HTML5. Как только мы возьмем все это под контроль, в наших приложениях появятся новые замечательные усовершенствования, которые выведут Интернет на новый уровень.