Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Хотя HTML5 представляет значительные изменения в способе разметки контента, стоит отметить, что эти изменения не приведут к тому, что старые браузеры задохнутся, не приведут к проблемам с макетом или ошибкам страницы.
Это означает, что вы можете взять любой старый проект, содержащий допустимую разметку HTML4 или XHTML, изменить тип документа на HTML5 (который мы рассмотрим в главе 2), и страница отобразится в браузере так же, как и раньше. Изменения и дополнения в HTML5 были реализованы в языке таким образом, чтобы обеспечить обратную совместимость со старыми браузерами — даже со старыми версиями Internet Explorer! Конечно, это не гарантия того, что новые функции будут работать, это просто означает, что они не будут ломать ваши страницы или вызывать какие-либо видимые проблемы.
Даже в отношении более сложных новых функций (например, API-интерфейсов) разработчики придумали различные решения, обеспечивающие эквивалентный опыт для не поддерживающих браузеров, и в то же время используют захватывающие новые возможности, предлагаемые HTML5 и CSS3. Иногда это так же просто, как предоставление запасного контента, такого как Flash-видео плеер для браузеров без встроенной поддержки видео. В других случаях, однако, было необходимо использовать сценарии для имитации поддержки новых функций.
Эти методы «заполнения пробелов» называются полифиллами . Использование сценариев для эмуляции собственных функций не всегда является лучшим подходом при создании высокопроизводительных веб-приложений, но это необходимая растущая боль, поскольку мы развиваемся, чтобы включать новые улучшения и функции, такие как те, которые мы обсудим в этой книге , К счастью, на момент написания статьи, более старые браузеры, такие как Internet Explorer 6–9, которые не поддерживают многие из новых функций в HTML5 и CSS3, сегодня используются менее чем 10% веб-посетителей. Все больше и больше людей используют так называемые вечнозеленые браузеры; то есть браузеры, которые автоматически обновляются. Это означает, что новые функции будут функционировать для более широкой аудитории и, в конечном итоге, для всех, так как старые браузеры делятся.
В этой книге мы можем иногда рекомендовать альтернативные варианты или полифиллы, чтобы устранить пробелы в несовместимости браузера; мы также постараемся предупредить вас о потенциальных недостатках и недостатках, связанных с использованием этих параметров.
Конечно, стоит отметить, что иногда не требуется никаких запасных вариантов или полифилов; например, при использовании CSS3 для создания закругленных углов на прямоугольниках в вашем дизайне пользователи старых браузеров часто не видят вреда, если вместо этого видят квадратные прямоугольники. Функциональность сайта не имеет деградации, и эти пользователи не поймут, что им не хватает.
По мере прохождения уроков и введения новых предметов, если вы планируете использовать один из них в проекте, мы настоятельно рекомендуем вам обратиться к справке по поддержке браузера, такой как вышеупомянутое. Можно ли использовать… Таким образом, вы будете знать, как и предоставлять ли запасные варианты или полифилы. Там, где это необходимо, мы иногда обсуждаем способы обеспечения того, чтобы не поддерживающие браузеры имели приемлемый опыт, но хорошая новость заключается в том, что с течением времени это становится все менее и менее важной проблемой.
Растущий мобильный рынок
Еще одна веская причина начать изучение и использование HTML5 и CSS3 сегодня — это стремительный рынок мобильной связи. Согласно одному источнику, в 2009 году менее 1% всего использования Интернета приходилось на мобильные устройства и планшеты. К середине 2014 года это число возросло до более чем 35%! Это поразительные темпы роста чуть более пяти лет. Так что же это значит для тех, кто изучает HTML5 и CSS3?
HTML5, CSS3 и связанные с ними передовые технологии очень хорошо поддерживаются во многих мобильных веб-браузерах. Например, мобильное Safari на устройствах iOS, таких как iPhone и iPad, Opera Mobile, Android Browser и UC Browser, обеспечивает высокий уровень поддержки HTML5 и CSS3. Новые функции и технологии, поддерживаемые некоторыми из этих браузеров, включают анимацию CSS3, flexbox CSS, API Canvas, веб-хранилище, SVG, автономные веб-приложения и многое другое.
Фактически, некоторые из новых технологий, которые мы представим в этой книге, были специально разработаны для мобильных устройств. Такие технологии, как автономные веб-приложения и веб-хранилище, были разработаны, в частности, из-за растущего числа людей, получающих доступ к веб-страницам с мобильных устройств. Такие устройства часто могут иметь ограничения при использовании данных в Интернете и, таким образом, значительно выигрывают от возможности доступа к веб-приложениям в автономном режиме.
Мы будем касаться этих тем в главе 11, а также других вопросов в течение всей книги, предоставляя инструменты, необходимые для создания веб-страниц для различных устройств и платформ.
На реальные вещи
Нереально продвигаться вперед в новых технологиях и ожидать создания страниц и приложений только для одного уровня браузера. В реальном мире и в мире, где мы хотим, чтобы HTML5 и CSS3 продолжали развиваться, мы должны быть готовы к разработке страниц, которые работают в различных условиях. Этот ландшафт включает в себя современные браузеры, любые оставшиеся старые версии Internet Explorer и быстро растущий рынок мобильных устройств.
Да, в некотором смысле, предоставление различного набора инструкций для различных пользовательских агентов напоминает первые дни Интернета с его грязным анализом браузера и разветвлением кода. Но на этот раз новый код гораздо более ориентирован на будущее: когда старые браузеры выходят из общего использования, все, что вам нужно сделать, это удалить любые резервные копии и полифилы, оставив только базовую часть кода, предназначенную для современных браузеров.
HTML5 и CSS3 являются ведущими технологиями, открывшими гораздо более захватывающий мир создания веб-страниц. Поскольку все современные браузеры обеспечивают превосходный уровень поддержки ряда функций HTML5 и CSS3, создание мощных и простых в обслуживании веб-страниц, ориентированных на будущее, стало проще, чем когда-либо прежде.
Итак, хватит о «почему», давайте начнем копаться в «как»!