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


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

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

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

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

header, footer, article, section, nav, menu, hgroup { 
 display: block;
}

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

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

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

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

<header>
    <hgroup>
<h1> Страница отзывов фанатов </h1>
<h2> Только для людей, которые хотят сохранить воспоминания на всю жизнь. </h2>
    </hgroup>
</header>

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

<input type="text" name="someInput" required>

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

<input type="text" name="someInput" required="required">

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

<form method="post" action="">
    <label for="someInput"> Ваше имя: </label>
    <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
    <button type="submit">Вперед</button>
</form>
18 советов и техник HTML5

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

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

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

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

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

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" /> 
    <a href="file.mp3">Загрузи этот файл</a>
</audio>

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 видео, ты должен учитывать оба формата.

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Загрузи это видео</a> </p>
</video>

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

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

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

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

<video preload>

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

<video preload controls>
Options

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

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

<form action="" method="post">
    <label for="username">Придумайте имя пользователя: </label>
    <input type="text"
  name="username"
  id="username"
  placeholder="4 <> 10"
  pattern="[A-Za-z]{4,10}"
  autofocus
  required>
    <button type="submit">Отправить </button>
</form>

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

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

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

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

alert( 'pattern' in document.createElement('input') ) // boolean;

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

<script>
if (!'pattern' in document.createElement('input') ) {
    // реализация клиент/серверной проверки
}
</script>

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

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

<h3> Результаты поиска </h3>
<p> Они прервались только после того, как Квато сказал <mark>
"Открой свое сознание"</mark>. </p>

Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные 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 элементов. В то время как, ранее мы могли иметь дело с таким конструкциями:

<h1 id=someId customAttribute=value> Спасибо, Тони! </h1>

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

<div id="myDiv" data-custom-attr="Значение"> Бла бла бла </div>

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

<!DOCTYPE html>
 
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Вид хромового изменения текста с помощью CSS</title>
<style>
 
h1 { position: relative; }
h1:hover { color: transparent; }
 
h1:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}
</style>
</head>
<body>
 
<h1 data-hover-response="Я сказал не трогай меня!"> Не трогай меня  </h1>
 
</body>
</html>

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

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

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

<form action="" method="get">
    <p> 
10 + 5 = <output name="sum"></output> 
    </p>
    <button type="submit"> Рассчитать </button>
</form>
 
<script>
(function() {
    var f = document.forms[0];
     
    if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
    f['sum'].value = 15;
    e.preventDefault();
}, false);
    }
    else { alert('Твой браузер ещё не готов.'); }
})();
</script>

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

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

Output element

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

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

<input type="range">

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

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

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

<form method="post">
    <h1> Total Recall Awesomness Gauge </h1>
    <input type="range" name="range" min="0" max="10" step="1" value="">
    <output name="result">  </output>
</form>

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

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

body {
    font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
    text-align: center;
}
input { font-size: 14px; font-weight: bold;  }
 
input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}
 
output { 
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

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

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

  • Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать.
  • Динамично обновляем элемент output, если пользователь двигает слайдер.
  • Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище.
  • Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние.
(function() {
    var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 
     
    // Определяем является ли текущий браузер одним из клевых ребят, который поддерживает создание ползунков
    var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
 
    // Устанавливаем начальные значения ползунка и поля вывода значениями из локального хранилища, или значением 5
    range.value = cachedRangeValue;
    result.value = cachedRangeValue;
 
    // Когда пользователь сделает выбор, обновить локальное хранилище
    range.addEventListener("mouseup", function() {
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
    }, false);
     
    // Отображаем выбранное число во время движения ползунка
    range.addEventListener("change", function() {
result.value = range.value;
    }, false);
     
})();

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

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

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

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

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

Suggested Posts

Руководство по кастомным типам записей WordPress + спец плагин

Batch Editor — пакетное редактирование товаров v0.4.8

Галерея для сайта в виде табов CSS3

Настройка эффектов слайдера и карусели в Opencart 1.5.x

15 новых и красивых JQuery сдайдеров

Selectric — пользовательский select