Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Что нового в HTML5? Часть 3

hidden

Когда элемент сопровождается этим атрибутом, это значит, что он не релевантент. Браузеры, которые его не поддерживают, не отображают элементы, которые сопровождает он.

Если нужно просо спрятать элементы от пользователя, лучше не применять атрибут hidden. Причина: он имеет семантическое значение и указывает, что элемент устарел.

contenteditable

Атрибут показывает, какой элемент можно редактировать. Применение не сохраняет изменения, которые пользователь вносит в ваш контент. Их можно отправить на сервер. А там сохранить.

contenteditable поддерживается во всех мобильных браузерах, кроме Opera Mini Android 3.0 и выше и iOS 5 и выше.

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

contextmenu

Атрибут способствует связыванию одного элемента с <menu>, который сообщает дополнительный контекст. Или с элементом <command>. Принимает id того элемента <menu>, который хочет с ним ассоциировать.

Не поддерживается ни в одном браузере, кроме Chrome.

draggable

Атрибут указывает на возможность перетаскивания. По умолчанию можно перетаскивать изображение в браузере, но не ставить его на новое место.

Чтобы сделать полезным, его используют с обработчиками событий JavaScript. Книмотносятся dragstart, drag, dragenter, dragleave, dragover, drop иdragend. В мобильных браузерах перетаскивание почти не поддерживается.

dropzone

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

Делается это с помощью значений move, copy и link.

 

spellcheck

Атрибут указывает, будет ли включена проверка правописания и грамматики в этом отрезке. По умолчанию она стоит, хотя механизм не слишком удачен.

ARIA

В HTML5 есть поддержка атрибутов отдельного модуля ARIA – стандарта обеспечения доступности активных интернет-приложений.

role создает семантическую структуру на базе переопределенных элементов.

К атрибуту можно добавить элементы grid, listbox, menu, menubar, tablist, toolbar, tree или treegrid. Использование делает разметку удобной, доступной, хорошо взаимодействующей со вспомогательными технологиями. При полной поддержке новых элементов некоторые структурные роли имеют шанс стать нерелевантными. Ролевые значения article, application, banner, complementary, contentinfo, document, form, heading, main, navigation и search помогают работают с теми экранными дикторами, которые не поддерживают полностью HTML5, но делают это с ARIA.

Вместе с и его значениями атрибут role включает также значения свойств и состояний. Состояния: aria-disabled, aria-busy, aria-expanded, aria-hidden. Свойств: aria-describedby, aria-haspopup и aria-labelledby, которые предоставляют о переопределенных элементах дополнительную информацию.

Атрибуты данных с применением data-*

В HTML5 можно создавать собственные атрибуты. Ранее это было возможно, но разметка не проходила бы валидацию.

API Dataset – с ним применяют специальные атрибуты данных. С помощью этого API можно собрать пары «атрибут/значение», даже если имя специального атрибута данных сгенерировано динамически:

  1. // Получаем значения и позиции всех карт
  2. // Используем dataset для получения значений всех карт
  3. currCards = document.querySelectorAll('#board > div');
  4. for (i = 0; i < qbdoo.cards; i++) {
  5. cardinfo.push(currCards[i].dataset);
  6. }
  7. currentState.cardPositions = JSON.stringify(cardinfo);
  8. itemid, itemprop, itemref, itemscope и itemtype

Существует пять глобальных атрибутов, которые относятся к микроданным. Это: itemid, itemprop, itemref, itemscope и itemtype

Их исключили из основной части спецификации. В настоящее время описываются в спецификациях микроданных.