Перевод: 25 возможностей, подсказок и техник HTML5 которые вы должны знать
Перевод статьи “28 HTML5 Features, Tips, and Techniques you Must Know“.
Это индустрия движется быстро, очень быстро! Если вы будете не внимательны, то останетесь не у дел. Итак, если вы слегка оконфужены предстоящими изменениями в HTML5, то эта статья может стать основой для вещей, которые вы должны знать.
1. Новый Doctype
Всё ещё используете этот надоедливый, не запоминаемый XHTML doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Если это так, то почему? Переходите на новый HTML5 doctype. Вы будете жить долго , как бы сказал Douglas Quaid.
<!DOCTYPE html>
На самом деле, Вы знаете, что это даже не столь важно для HTML5? Тем не менее, он используется в текущих и старых браузерах, которые требуют указания doctype. Браузеры, которые не понимают этот doctype будут просто прорисовывать содержание разметки в стандартном режиме. По этому, не стоит беспокоится, а просто принять новый doctype.
2. Елемент Figure
Рассмотрим разметку для рисунка:
<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>
К сожалению, нет легкого и семантического пути для указания подписи к рисунку, которая завёрнута в тэг <p>. В HTML5 это исправлено с помощью элемента <figure>. В сочетании с тэгом <figcaption>, мы можем семантически ассоциировать подписи соответственным рисункам.
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. <small> переопределен
Не так давно я использовал <small> для создания подзаголовков, которые тесно связаны с логотипом. Это полезный презентационный элемент; тем не менее, теперь это будет не корректным использованием. Элемент small был переопределён, отныне более уместен он для указания мелкого шрифта. Более корректно, согласно новому определению HTML5, его использовать для обрамления информации о авторских правах в футтере вашего сайта.
Элемент
smallтеперь означает «маленький шрифт».
4. Никаких Type для Script и Link
Вы, возможно, всё ещё добавляете атрибут type к тэгам link и script.
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>
Теперь это не требуется. Теперь подразумевается, что оба этих тэга ссылаются на CSS и скрипты соответственно. Таким образом, можно удалить атрибут type.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
5. To Quote or Not to Quote
…Вот в чём вопрос. Помните же, что HTML5 не XHTML. Вы не должны оборачивать ваши атрибуты в кавычки, если вы это не хотите. Вы можете не закрывать тэги. Что уж говорить, нет ничего плохого в этом, коль вам так комфортнее. Как по мне, то это хорошо.
<p id=someId> Start the reactor.
Можете думать иначе. Если вы предпочитаете более структурированные документы, то можете лепить эти кавычки.
6. Делайте Ваш контент редактируемым
Новые браузеры поддерживают модный новый атрибут элементов contenteditable. Как говорит его название, он позволяет редактировать пользователем текст внутри его, включая и дочерние элементы. Это можно использовать в многих целях, включая приложение, столь простое, как список дел, которое к тому же может использовать локальное хранилище.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
Или, как мы уже знаем с предыдущей подсказки, мы можем написать так:
<ul contenteditable=true>
7. Email Inputs
Если указать в атрибуте type значение “email” в поле формы, мы укажем браузеру, что значение поля может быть только правильным адресом электронной почты. Всё правильно: скоро будет встроенная валидация форм! Мы не можем полагаться на это на все 100% по понятным причинам. Старые браузеры не понимают тип «email» и будут воспринимать его как простой текст.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
Следует упомянуть, что текущие браузеры слегка ненадёжны, когда дело доходит до того, какие элементы и атрибуты они поддерживают, а какие – нет. Например, Opera кажется поддерживает валидацию email только когда указан атрибут name. Тем не менее, она не поддерживает атрибут placeholder, который мы рассмотрим в следующей главе. Резюмируя: не стоит зависеть от этой валидации форм пока… Но можно использовать!
8. Placeholder`ы
Раньше мы должны были использовать JavaScript для создания placeholder`ов в текстовых полях. Конечно, мы можем просто инициализировать атрибут value как мы бы хотели, но потом, когда пользователь сотрёт этот текст и кликнет за границей поля, оно останется пустым. Атрибут placeholder исправляет положение.
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
Опять же, поддержка атрибута сомнительна в лучших браузерах, однако, это будет исправляться от релиза к релизу. По этому, если браузеры, такие как Firefox и Opera, сейчас не поддерживают placeholder, не стоит переживать по этому поводу.
9. Локальное хранилище
Благодаря локальному хранилищу (официально ещё не HTML5, но сгруппировано для удобства), мы можем заставить продвинутые браузеры «вспомнить», что мы собирали даже когда браузер был закрыт или обновлена страница.
“localStorage устанавливает поля для домена. Даже когда вы закроете ваш браузер, откроете и вернётесь на тот сайт, браузер вспомнит поля с localStorage.”
-QuirksBlog
Пока, очевидно, это не поддерживается всеми браузерами, но можно ожидать, что, скоре всего, поддержка появится в Internet Explorer 8, Safari 4 и Firefox 3.5. Отметим, что старые браузеры могут не поддерживать локальное хранилище, поэтому следует проверить на существование window.localStorage.
10. Семантические Header и Footer
В прошлом те дни, когда:
<div id="header">
...
</div>
<div id="footer">
...
</div>
Тэг div по своей природе, не имеет семантической составляющей — даже когда присуствует аттрибут id. Теперь в HTML5 есть возможность использовать <header> и <footer> елементы. Теперь структура, которая представлена выше, можно заменить на :
<header>
...
</header>
<footer>
...
</footer>
Это также позволяет иметь несколько елементов
headerиfooterв ваших проектах.
Постарайтесь не путать эти элементы с “header-ом” and “footer-ом” вашего сайта. Они просто ссылаются на своё содержимое. Например, его можно использовать для вывода мета-информации в посте блога. Это применимо и для header.
11. Больше возможностей с формами HTML5
Давайте узнаем о полезных возможностях форм HTML5 с помощью этого короткого видео-урока.
12. Internet Explorer и HTML5
К сожалению, этот чёртов Internet Explorer требует немного костылей, дабы заставить его понимать новые HTML5 элементы.
Все элементы, по-умолчанию, имеют свойство
display:inline.
В целях обеспечения правильного отображения новых элементов 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. Чтобы упростить этот процесс, Remy Sharp создал скрипт, как правило, называющийся «костылём» для HTML5. Он исправляет и некоторые проблемы с печатью.
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
13. hgroup
Представте, что в шапке ( header ) моего сайта есть название моего сайта, сразу под заголовком. По этому я могу использовать тэги <h1> и <h2>, соответственно, создать разметку, которая бы легко семантически указывала на их отношения. Кроме того, использование тэгов h2 принесёт много проблем, с точки зрения иерархии, когда дело дойдёт до отображения их в других частях сайта. Использовав элемент hgroup, можно группировать эти заголовки вместе, не переживая за схему документа.
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
14. Атрибут required
Формы имеют новый атрибут required, который, разумеется, указывает, что данное поле ввода input обязательное. В зависимости от вашего стиля кодирования, этот атрибут вы можете описать одним с двух способов:
<input type="text" name="someInput" required>
Или более структурированным методом.
<input type="text" name="someInput" required="required">
Любой метод будет работать. Благодаря этому коду, в браузерах, которые поддерживают этот атрибут, форма не может быть отправлена, если текстовое поле “someInput” пустое. Ниже простеньки пример; также мы добавили атрибут placeholder так как нет причины этого не делать:
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
Если поле ввода оставить пустым и попробовать отправить форму, то оно подсветится.
15. Атрибут Autofocus
Опять же, с приходом HTML5, потребность в JavaScript для решения этой проблемы отпала. Если определённое текстовое поле должно быть выделенным или с фокусом ввода, можно использовать атрибут autofocus.
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
Хотя я лично предпочитаю более XHTML-ый подход (используя кавычки и т. д.), записывая "autofocus=autofocus", но чувствую себя немножечко странно. Таким образом, ми будем придерживаться подхода с использованием одного слова.
16. Поддержка аудио
Не надо больше полагаться на сторонние плагины, чтобы играть аудио. В HTML5 предлагается использовать элемент <audio>. Ну, по крайней мере, в конце концов, не надо беспокоится о плагинах. Пока только несколько браузеров поддерживают <audio>. В то же время, хорошая практика использовать некоторые формы обратной совместимости.
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="#">Download file</a>
</audio>
Mozilla и Webkit не полностью ещё готовы, когда заходит речь о поддержке аудио. Firefox хочет видеть файл .ogg, когда как Webkit-браузеры хорошо работают с .mp3. Это значит, по крайней мере сейчас, что вы должны сделать 2 версии аудиофайла.
Когда Safari загружает страницу, то не понимает формат .ogg и пропустит его, и, соответственно, дойдёт до mp3-версии. Прошу заметить, что IE, как всегда, не поддерживает этого и Opera 10 и ниже может работать только с wav-файлами.
17. Поддержка видео
Так же, как и <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">Download this video instead.</a> </p>
</video>
Chrome корректно отображает видео, кодированное обеими, “ogg” и «mp4», форматами.
Есть несколько вещей, которые стоит отметить.
- Мы, технически, можем и не указывать атрибут
type; тем не менее, если он не указан, браузер должен выяснить тип сам. Поберегите нервы и укажите его сами. - Не все браузеры поддерживают элемент video. Под элементом
sourceнадо указать ссылку на закачку или встроить Flash-плеер. Всё зависит от вас. - Атрибуты
controlsиpreloadбудут рассмотрены в следующих друх главах.
18. Preload видео
Атрибут preload не совсем то, что вы могли подумать. Хотя, сначала вы должны решить хотите вы или не хотите, чтобы браузер начинал предварительно загружать видео. Важно это? Пожалуй, если пользователь попал на страницу, которая предназначена для показа видео, вы точно должны заставить браузер предварительно загружать его и сохранить пользователю время. Видео может загружаться предварительно установкой preload="preload", или просто preload. Я предпочитаю второй вариант — меньше лишнего.
<video preload>
19. Вывод кнопок управления
Если вы внимательно следите за каждой главой этой статьи, вы могли заметить что видео выше в виде простой картинки, без каких либо средств для управления. Чтобы показать их, следует указать атрибут controls в обьекте video.
<video preload controls>
Заметьте, что каждый браузер по разному их рисует.
20. Регулярные выражения
Как часто вы находили в себе желание быстренько вставить регулярное выражение для проверки значения какого-то текстового поля. Спасибо новому атрибуту pattern, мы можем вставлять регулярные выражения прямо в разметку.
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
Если вы хоть как-то знакомы с регулярами, вы поймёте этот шаблон: [A-Za-z]{4,10} принимает только буквы в верхнам и нижнем регистре. Эта сторока должна быть минимум 4 символа и максимум 10.
Заметьте, что мы может обьединять эти замечательные выражения!
21. Определение поддержки атрибутов
Какой смысл от всех этих атрибутов, когда мы не знаем, поддержывает ли браузер их? Ну, резонный вопрос: но есть несколько способов выяснить это. Мы рассмотрим два. Первый — использовать чудесную библиотеку Modernizr. Кроме того, мы можем создавать и анализировать эти елементы, чтобы определить способность браузеров понимать их. Например, в предыдущем примере, если мы хотим определить, может ли браузер реализовать атрибут pattern, может добавить кусок кода на JavaScript:
alert( 'pattern' in document.createElement('input') ) // boolean;
По сути, это популярный метод определения совместимости браузеров. Библиотека jQuery использует этот трюк. Выше, мы создали новый обьект input и определили, может ли браузер поддерживать pattern. Если это так, то браузер будет использывать эту функциональность. Иначе — се ля ви ).
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
Имейте ввиду, что это зависит от JavaScript!
22. Елемент Mark
Думайте о <mark> как о маркере. Строка, обрамлённая этим тэгом, должна быть связана с текущим действием пользователя. Например, если я искал “Open your Mind” в блоге, я мог бы, с помощью некоторого Javascript-а, обернуть строку поиска в тэг <mark>.
<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
23. Когда же использовать <div>
Некоторые теряются в сомнениях, когда же мы должны использовать обычный и привычный div. Теперь у нас есть header, article, section и footer, когда же тогда исползовать …div? Непременно.
Divследует использовать, когда нет подходящего елемента.
Например, если вы обнаружили, что надо обернуть кусок кода для позиционирования, <div> как раз кстати. Тем не менее, если вы собираетесь обернуть новый пост в блог или, возможно, список ссылок в подвале сайта, то следует подумать о <article> и <nav> соотведственно. Это более семантически правильно.
24. Что уже сейчас использовать
Рассказывая, что HTML5 не будет готов полностью до 2022, многие не используют его, что является большой ошибкой. В самом деле, есть несколько полезностей HTML5, которые можно использовать прямо сейчас! Простой и чистый код — это всегда хорошо. В сегодняшнем видео я покажу несколько примеров.
25. Что же не является HTML5
Люди могут быть прощены за то, что удивительные JavaScript подходы сгруппированы в всеобъемлющей HTML5. Эй, даже Apple за эту идею! (тоже мне, авторитет. Прим.пер). Для не-разработчиков, кому не всё равно: это лёгкий путь для внедрения web-стандартов. Но для нас важно понять, что такое не HTML5.
- SVG: Не HTML5. Ему, по меньшей мере, лет 5.
- CSS3: Не HTML5. Это…CSS.
- Client Storage: Не HTML5. Это было в одной связке, но исключено, потому что многие переживали, что идея становится слишком сложной. Это теперь имеет свою собственную спецификацию.
- Web Sockets: Не HTML5. Опять же, имеет свою спецификацию.
Не смотря на различия, все эти технологии можно сгруппировать в один современный web-стэк. В самом деле, многие с этих спецификаций курируются одними и теми же людьми.
Заключение
Спасибо за прочтение! Мы рассмотрели многое, но всё же это просто вершки от того, что может HTML5. Надеюсь, этот обзор был вам полезен!
такое впечатление, что это перевод с английского )
Так она и есть перевод с английского.Спасибо автору за хороший перевод хорошей статьи.