Как использовать HTML5 на своем сайте прямо сейчас

Было много статей о HTML5, таких как «Чего ожидать от HTML5?» и «Как HTML5 изменит Интернет?» и так далее, но веб-разработчикам главное знать: что я могу делать с HTML5 сейчас и как мне начать его использовать? Хорошей новостью является то, что в HTML5 уже доступно множество возможностей.

Однако вначале вы должны понять одну вещь: вам нужно знать свою аудиторию, иначе вам не следует использовать HTML5. Если большинство людей, посещающих ваш сайт, используют IE6, у вас нет абсолютно никаких причин использовать HTML5. С другой стороны, если все посетители вашего сайта используют мобильные браузеры, такие как iPhone и iPad, чего вы ждете? Вы можете начать прямо сейчас! Подождите, вот несколько рекомендаций, еще не поздно начать после их прочтения.

Какие функции HTML5 вы можете использовать сейчас?

Хотя стандарт HTML5 все еще является черновиком и все еще обсуждается в организациях по стандартизации, его важные части уже реализованы во многих современных браузерах. Apple Safari, Google Chrome, Mozilla Firefox, Opera и Microsoft IE9 уже поддерживают некоторые функции HTML5.

Давайте сначала посмотрим, как каждый браузер оценивается на веб-сайте HTML5 TEST:

*Apple Safari 5.0: 208

* Гугл Хром 5.03:197

*Microsoft IE7: 12

*Microsoft IE8: 27

*Mozilla Firefox 3.66: 139

* Опера 10.6:159

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

Возвращаясь к началу, теперь вы можете использовать тип документа HTML5, нет причин не использовать его, вы даже можете запрашивать и заменять по всему веб-сайту:

становится:

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

Давайте поговорим о видео. Во многих публикациях о HTML5 упоминаются текущие конкуренты, всего четыре: Flash, H.264, OGG и WebM. Все они могут стать стандартным форматом в будущем, и ни один из них не будет корректно воспроизводиться во всех браузерах на всех платформах. К сожалению, спонсоры браузеров, похоже, не подготовили общедоступный формат для этой функции.

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

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

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

В HTML5 это можно выразить так:

Семантика стала яснее? Конечно, нам все равно придется использовать CSS [каскадные таблицы стилей] для форматирования этих элементов. Но подождите, ни одна версия IE не поддерживает эти теги! Это огромная проблема для людей! Неужели нам действительно так не повезло? К счастью, у нас есть решение: все, что вам нужно сделать, это вставить следующий код в тег HEAD вашей страницы:

HTML5 Shiv — это проект с открытым исходным кодом, основанный на простом открытии: если вы создаете элемент DOM в IE, вы можете использовать это имя в стилях. Например, если вы используете

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

Smart Forms — еще одна функция, которая делает HTML5 умнее. Если вы устали каждый раз писать один и тот же сценарий для проверки действительности адреса электронной почты или чего-то вроде номера телефона, адреса в Интернете и т. д., вы не одиноки! Есть причина позволить браузеру выполнять всю эту раздражающую работу, не так ли? Совершенно верно.

Вот синтаксис:

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

Если вам интересно, что делают браузеры, поддерживающие эти типы действий, помимо проверки, вы можете попробовать эти формы на своем iPhone. Вы заметите, что тип клавиатуры, связанный с формой, меняется: иногда он цифровой, иногда буквенно-цифровой, но с добавленным символом @, а некоторые даже имеют прямой ключ key.com, и именно в этом эти элементы являются волшебными. Все, что вам нужно сделать, это изменить значение атрибута type.

Это также может быть немного умнее, вот новый атрибут:

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

Какие функции HTML5 вы можете использовать прямо сейчас?

Еще не все элементы HTML5 готовы к использованию по разным причинам (ни одна из которых не сокращена до IE), скоро появится поддержка браузеров, и в не столь отдаленном будущем у вас будут сразу два элемента, готовых к использованию.

Волшебные шрифты, мечта каждого дизайнера, надежда на то, что все посетители сайта установят нужные им для дизайна шрифты. Для этого раньше были самые разные методы, такие как использование картинок, Flash и т. д., но сейчас. , у них есть это право, и вы можете заставить посетителей установить указанные вами шрифты. Вот что поддерживает CSS3: атрибут @font-face. Версии Firefox до 3.5 и мобильные версии Safari (до iOS 4) не поддерживают этот атрибут. Если на вашем сайте много похожих посещений, возможно, вам придется подождать.

В любом случае, нет реальной причины для того, чтобы все браузеры использовали один и тот же шрифт. Если вы хотите предоставить пользовательские шрифты для браузеров, поддерживающих этот атрибут, а затем предоставить альтернативный шрифт для браузеров, которые не поддерживают этот атрибут, на данный момент это также хорошее решение: http://www.fontsquirrel com/. fontface/generator — хорошее место.

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

Какие функции вы могли бы использовать когда-нибудь?

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

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

Скользящий селектор:

Выбор цвета:

Выбор даты:

Поле ввода с регулярной проверкой:

Обязательные поля ввода:

Ни один из этих тегов не имеет кроссбраузерной или кроссплатформенной поддержки, но когда этот день наступит, вы определенно захотите использовать эти теги.

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

Обнаружение геолокации. С развитием геолокационных сервисов, таких как Gowalla и Foursquare, браузерам полезно знать, где находится пользователь. Поэтому неудивительно, что первыми эту функцию реализовали мобильные браузеры на базе мобильных телефонов. Firefxo 3.5 и Safari 5 начали обеспечивать поддержку геолокации. (Аналогичный сервис Chrome реализован через Gears, но постепенно переходит на HTML5).

Работайте в автономном режиме и храните данные локально. Хранение данных в облаке — отличная идея, если вы не осознаете, что у вас нет подключения к Интернету или у вас есть приложение, которое должно обрабатывать большие объемы данных и часто запускаться в сети; Сервер Общение с клиентами проще, чем вы думаете. Например, вы получаете больше; или, возможно, ваши мобильные данные ограничены, и вы хотите хранить больше данных на своем телефоне, чтобы избежать слишком большой потери данных. Ответ на данный момент — использовать локальное хранилище, чтобы приложение работало в автономном режиме. в облако при подключении.

Браузеры, поддерживающие эту функцию: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.

Монтажные области, анимация и эффекты трансформации — одно из обещаний HTML5 — можно реализовать с помощью элемента Canvas и некоторых свойств CSS3 для создания полностью иллюстрированного и полностью анимированного веб-сайта. Это из стандарта от 12 июля 2010 г.

Зеленый = достигнуто, красный = не запланировано

Ярлыки к передовому HTML5

Если вы не можете дождаться, пока IE8 умрет, есть много способов пропустить его и двигаться дальше — опять же, все зависит от ваших посетителей. Просмотрите журналы доступа вашего сайта, чтобы узнать, какие заголовки браузера посещаются чаще всего. Один из способов сделать это — использовать Google Chrome Frame для встраивания экземпляра Chrome в IE. Если вы понимаете, что посетители вашего сайта могли установить GCF [Google Chrome Frame], вы можете добавить его в свой HEAD. Мета-тег в предыдущей строке заставляет IE использовать GCF для отображения вашего веб-сайта:

[Редактор: Но я хотел бы напомнить вам, что это приведет к аннулированию исходного режима совместимости IE7 (IE=7). Пожалуйста, взвесьте это сами, если захотите. ]

В сочетании с коротким сценарием, предоставленным Google, который позволяет пользователям, у которых не установлен GCF, перейти на страницу установки GCF, вы можете обойти ограничения IE. [Редактор: Я сумасшедший, это похоже на бесплатную рекламу GCF, чтобы принести бесплатный трафик...]

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

Сообщая об HTML, многие средства массовой информации акцентируют внимание на его позиции, например, «не раньше 2022 года» и «убийца Flash». Реальность такова, что HTML5 — это долгожданное и совершенно новое обновление давно назревшего HTML4, поэтому вы можете начать использовать его уже сегодня.