→   Несколько удобных штук html5

Еще не давно было впечатление, что за последние 10 лет html развился, лишь до того, чтобы кое-как скруглять уголки без использования графики, с помощью border-radius. Но с выходом html5 появилось много удобных фишек. Пока, конечно, не все браузеры между собой договорились, но времена IE6 прошли, и теперь все не так плачевно. На сайте Can I Use можно проверить, в каких браузерах работают фишки.

prefetch

Prefetch позволяет управлять загрузкой определнных страниц. Например, у нас есть список статей разбитый постраничной навигацией, чтобы пользователь не ждал загрузки других страниц, то в атрибуте rel можно прописать значение prefetch. Вот так:

<link rel="prefetch" href="/page2">

spellcheck

Атрибут spellcheck имеет два значения – true и false. И указывает, надо ли проверять правописание текста в элементе. Например, в textarea иногда раздражительно подчеркиваются красной линией сленговые слова.

<input type="text" spellcheck="false">

datalist

Новый тэг datalist позволит организовать управляемый autocomplete при вводе текста в поле input [type=text]. Ну то есть, допустим, в одном из полей формы нам нужно, чтобы пользователь ввел марку своего фотоаппарата. Мы догадываемся, что у пользователя, какой-то популярный фотоаппарат – Canon, Nikon, Sony, Olympix или FujiFilm, а может быть у него и какой-нибудь другой фотоаппарат. Чтобы минимизировать действия пользователя при заполнении формы, мы предложим ему список подсказок из популярных фотоаппартатов, чтобы при введении первой буквы пользователю выпала подсказка в виде марки его фотоаппарата.

                
<input list="g-name" name="list" >
<datalist id="g-name">
  <option value="Canon">
  <option value="Nikon">
  <option value="FujiFilm">
  <option value="Sony">
  <option value="Olympix">
</datalist>

hidden

Раньше для скрытия блока все писали в css display: none, а вот если нужно было скрыть input в атрибутах в тэгу прописывали hidden. Теперь с помощью атрибута hidden можно скрыть любой блочный элемент – div. Вот так: 

<div hidden="hidden"></div>

autofocus

Если зайти на главную страницу какого-нибудь поисковика, то в поле поиска уже будет мигать курсор. Раньше для такого трюка надо было использовать javascript. Теперь в html5, есть атрибут autofocus.

<input autofocus="autofocus" />

download

Часто на сайтах дают скачивать разные файлы, которые лежат на полке или на сервере, а т.к. там частенько бардак и в имени файлов содержатся какие-то не понятные литеры. Поддерживать порядок на сервере довольно сложно, и иногда невозможно, если на сайт через разные модули заливают разные люди заливают файлы. Атрибут download создан как раз для того, чтобы пользователь мог скачать файл с красивым именем, которое можно написать у ссылки, прямо рядом с атрибутом href. Вот так:

<a href="guide0012tr.txt" download="readme">
html5