18 советов и техник HTML5(Часть2)


18 советов и техник HTML5

К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами.

Все элементы, по умолчанию, имеют значение inlineатрибута display

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

К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы:

Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью.

Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2>соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup, мы можем группировать заголовки вместе без влияния на поток вывода документа.

Формы поддерживают новый атрибут required, который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями:

Либо более структурированным способом:

Любой из представленных методов работает. В браузерах, которые поддерживают этот атрибут, этот код не позволит отправить форму, если обязательное поле не заполнено. Вот небольшой пример: мы также используем атрибут placeholder, потому что нет никаких припятствий, чтобы этого не делать

18 советов и техник HTML5

Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено.

Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus.

Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу "autofocus=autofocus", хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова.

Можно больше не полагаться на сторонние плагины, чтобы воспроизводить аудио. В HTML5 определен элемент <audio>. Ну или по-крайней мере мы можем не беспокоиться об этих плагинах. В настоящее время только самые последние браузеры предлагают поддержку HTML5 аудио. В то же время, по-прежнему считается хорошим тоном обеспечивать обратную совместимость.

Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио.

Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами.

Также как элемент <audio>, мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата.

Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4».

Есть несколько моментов, на которые стоило бы обратить внимание.

  1. Мы не обязаны объявлять атрибут type; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type
  2. Не все браузеры понимают HTML5 видео. Под элементом source, мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело.
  3. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах.

Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload="preload" или просто добавлен атрибут preload. Я предпочитаю последний вариант, так как он менее многословный.

Если ты используешь каждый из этих советов и трюков, ты мог заметить, что приведенный выше код отображает видео как картинку, без каких-либо элементов управления. Для отображения элементов управления, мы должны определить атрибут controls в элементе video.

Options

Только, пожалуйста, помни, что каждый браузер воспроизводит свой плеер по-своему.

Как часто ты пишешь регулярные выражения для проверки определённых текстовых полей? Но благодаря новому атрибуту pattern, мы можем вставить регулярное выражение напрямую в нашу разметку.

Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z]{4,10} принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков.

Обрати внимание, что мы объединили все новые атрибуты!

Если ты не знаком с регулярными выражениями, направляйся сюда.

В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern, мы должны добавить немного Javascript на нашу страницу:

На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input, и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да — браузер поддерживает данную функциональность.

Помни, что все это основывается на JavaScript!

Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу «Открой своё сознание» на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов <mark>.

Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные divы. Сейчас мы можем пользоваться элементами header, arcticle, section и footer…Если ли четко определенные моменты, когда следует использовать div? Конечно!

Divы должны использоваться, когда нет более лучшего элемента для данной задачи.

Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент <div> подойдет для этого лучше всего. Однако, если ты для обворачивания нового поста в блоге, или, может быть, списка ссылок в подвале твоего сайта, решаешь использовать элементы <article> и <nav> — отлично. Они более семантичны в данном случае.

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

Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5.

  1. SVG: Не HTML5. По-крайней мере, 5 лет.
  2. CSS3: Не HTML5. Это CSS.
  3. Геолокация: Не HTML5.
  4. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию.
  5. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию.

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

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

…валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class(возможно для использования в Javascript), то эта новая возможность является большим подспорьем!

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

Ты можешь увидеть демо размещенного выше эффекта на JSBIN.

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

В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submitбудет нажата.

Просмотри результат выполнения

Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15, соответственно, после того, как форма будет отправлена на сервер.

Output element

Элемент output может также содержать атрибут for, который отражает имя элемента, с которым он связан, подобно логике работы атрибута label.

HTML5 предоставляет новый вид элементов inputrange

Особенно примечательно, что он может содержать атрибуты min, max, step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией.

Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации.

В начале создадим разметку.

Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step(шаг) будет использоваться при переходе. Если step равен 1, будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output, с которым мы ознакомились в предыдущем совете.

Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального (min) и максимального (max) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5

В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и maxсоответственно.

Напоследок мы:

  • Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать.
  • Динамично обновляем элемент output, если пользователь двигает слайдер.
  • Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище.
  • Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние.

Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому!

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

Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития!

Источник: code.tutsplus.com

Previous 10 советов и техник HTML5(Часть1)
Next Модуль CSV Price Pro import/export v 4.1.7

Suggested Posts

10 бесплатных шрифтов с поддержкой кириллицы

SEOANALYZER — ПЛАГИН ДЛЯ SEO АНАЛИЗА САЙТОВ

Адаптивный шаблон OpenCart — Calcio

Крутые исходники PSD

YML импорт экспорт Яндекс Маркет для OpenCart 2

Настройка панели администратора WordPress