Доброго времени суток!
Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.
Атрибут autofocus позволяет вам переключить фокус на любой элемент, такой как, например, текстовое поле, или кнопка. Фокус устанавливается на элемент после того, как страница будет полностью загружена. Раньше для реализации подобной фичи нам приходилось использовать JavaScript, но теперь есть HTML5, который позволяет нам сделать это очень быстро и просто.
Пример.
Атрибут download позволяет нам установить имя загружаемого файла. Теперь нам не нужно делать этого на серверной стороне. Например, у нас есть файл hello.js, который мы можем запросто сохранить под именем README. Всё делается очень просто: атрибут download используется в связке с атрибутом href, с помощью которого мы задаём путь до файла.
Пример.
Атрибут prefetch позволяет браузеру заранее загрузить нужную нам страницу для того, чтобы отобразить её сразу при переходе по ссылке, а не ждать утомительной и долгой загрузки. Например, статья поделена на несколько частей (каждая часть располагается на своей странице. /page1 и /page2). Теперь мы можем загрузить вторую страницу заранее, пока занимаемся прочтением первой. Делается это очень просто.
Пример.
Как вы уже, возможно, догадались, атрибут hidden используется для того, чтобы спрятать какой-либо элемент на странице. Данный атрибут выполняет сходную роль значения hidden атрибута type элемента input. Все мы помним спрятанные текстовые поля, которые хранились для сохранения данных, которых пользователю видеть не обязательно. Что же, с атрибутом hidden мы можем спрятать любой элемент.
Пример.
Атрибут spellcheck позволяет нам проверять орфографические ошибки при вводе данных. Работает данный атрибут со всеми инпутами (читай, текстовыми полями) и редактируемыми div'ами (contenteditable div, если кто не помнит).
Пример.
Тег datalist позволяет нам предлагать варианты слов при вводе текста в поле конечным пользователем. Например, мы хотим устроить опрос на тему, услугами какого мобильного оператора пользуется наш абонент. Если он не помнит, как он называется, а помнит лишь, скажем, первую букву в его названии, то мы можем предложить ему все доступные варианты.
Пример.
Элемент output предоставляет нам возможность выводить данные на экран. Он может быть полезен для вывода какого-либо типа данных. Например, мы написали веб-приложение, которое представляет собой калькулятор. Элемент output мы можем использовать для вывода результата на страницу.
Пример.
HTML5, несомненно, является новым этапом развития языка гипертекстовой разметки. Несмотря на то, что, он предоставляет некоторые совершенно бесполезные элементы: тот же output можно спокойно заменить на обычный div и не париться по поводу того, будет ли выведен результат вычисления какого-либо выражения, скажем, в старичке IE7; в его загашнике хранится несколько полезных фич: наример, autofocus и datalist. В данном случае HTML5 облегчает работу client-side программисту: позволяет забабахать хорошую фичу в одну-две строки, вместо того, чтобы реализовывать собственные костыли на JavaScript.
На этом всё. До новых встреч!
Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.
Чтобы проверить, в каком браузере работает та или иная фича, советую посетить Can I Use.
autofocus
Атрибут autofocus позволяет вам переключить фокус на любой элемент, такой как, например, текстовое поле, или кнопка. Фокус устанавливается на элемент после того, как страница будет полностью загружена. Раньше для реализации подобной фичи нам приходилось использовать JavaScript, но теперь есть HTML5, который позволяет нам сделать это очень быстро и просто.
Пример.
<input autofocus="autofocus" />
download
Атрибут download позволяет нам установить имя загружаемого файла. Теперь нам не нужно делать этого на серверной стороне. Например, у нас есть файл hello.js, который мы можем запросто сохранить под именем README. Всё делается очень просто: атрибут download используется в связке с атрибутом href, с помощью которого мы задаём путь до файла.
Пример.
<a href="hello.js" download="README">Загрузить</a>
prefetch
Атрибут prefetch позволяет браузеру заранее загрузить нужную нам страницу для того, чтобы отобразить её сразу при переходе по ссылке, а не ждать утомительной и долгой загрузки. Например, статья поделена на несколько частей (каждая часть располагается на своей странице. /page1 и /page2). Теперь мы можем загрузить вторую страницу заранее, пока занимаемся прочтением первой. Делается это очень просто.
Пример.
<link rel="prefetch" href="/page2">
hidden
Как вы уже, возможно, догадались, атрибут hidden используется для того, чтобы спрятать какой-либо элемент на странице. Данный атрибут выполняет сходную роль значения hidden атрибута type элемента input. Все мы помним спрятанные текстовые поля, которые хранились для сохранения данных, которых пользователю видеть не обязательно. Что же, с атрибутом hidden мы можем спрятать любой элемент.
Пример.
<div hidden="hidden">Привет, мир! К сожалению, ты так и не увидел меня... :(</div>
spellcheck
Атрибут spellcheck позволяет нам проверять орфографические ошибки при вводе данных. Работает данный атрибут со всеми инпутами (читай, текстовыми полями) и редактируемыми div'ами (contenteditable div, если кто не помнит).
Пример.
<input type="text" spellcheck="true">
datalist
Тег datalist позволяет нам предлагать варианты слов при вводе текста в поле конечным пользователем. Например, мы хотим устроить опрос на тему, услугами какого мобильного оператора пользуется наш абонент. Если он не помнит, как он называется, а помнит лишь, скажем, первую букву в его названии, то мы можем предложить ему все доступные варианты.
Пример.
<input list="provlist" name="list" >
<datalist id="provlist">
<option value="МТС">
<option value="Мегафон">
<option value="Билайн">
<option value="ТЕЛЕ2">
<option value="БобрДобр">
</datalist>
output
Элемент output предоставляет нам возможность выводить данные на экран. Он может быть полезен для вывода какого-либо типа данных. Например, мы написали веб-приложение, которое представляет собой калькулятор. Элемент output мы можем использовать для вывода результата на страницу.
Пример.
<output>Собственно, результат нашего вычисления</output>
Что я об этом всём думаю
HTML5, несомненно, является новым этапом развития языка гипертекстовой разметки. Несмотря на то, что, он предоставляет некоторые совершенно бесполезные элементы: тот же output можно спокойно заменить на обычный div и не париться по поводу того, будет ли выведен результат вычисления какого-либо выражения, скажем, в старичке IE7; в его загашнике хранится несколько полезных фич: наример, autofocus и datalist. В данном случае HTML5 облегчает работу client-side программисту: позволяет забабахать хорошую фичу в одну-две строки, вместо того, чтобы реализовывать собственные костыли на JavaScript.
На этом всё. До новых встреч!
