Атрибуты и аксессуары
Прежде всего о глобальных атрибутах. Хотя, конечно, этот термин довольно нечеткий и неофициальный, но тут под ним принимаются атрибуты, присутствующие у большего числа элементов. Это, например, атрибуты class или id. В HTML5 их стало несколько больше.
Официально введен в спецификацию довольно давно предлагаемый Microsoft атрибут contentediteble. На самом деле достаточно симпатичная идея, поначалу встретила некоторые трудности в кроссбраузерной реализации, но теперь она поддержана всеми ведущими производителями. Суть очень проста — при установке этого атрибута содержимое элемента становится доступным для редактирования в браузере:
<div contenteditable >
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with
The user’s address book, and submit a defined format to the <span style="color:green">server</span>. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
</div>
Со следующим глобальным атрибутом, contextmenu, добавляющим контекстные меню к любым элементам на странице, ситуация в настоящее время не очень понятна. Он также выдвинут Microsoft и, судя по спецификации, должен был применяться следующим образом:
<p>
<img src="Http://html5.png" alt="" contextmenu="edit">
</p>
<menu type="context" id="edit">
<П>Вырезать</П>
<П>Копировать</П>
<li>Вставить</li>
<li>Редактировать</li>
<li>Выравнивание</li>
</menu>
Но не работает. Ни в Internet Explorer, ни в любом другом браузере. Реализация контекстного меню HTML-разметкой существует только для Mozilla Firefox с помощью нестандартизированного тега <р enuitem>. Естественно, нигде больше это не работает, но сам подход, по-моему, настолько удачен, что имеет все шансы стать стандартом, судите сами (чуть модифицированный пример c Http://www. whatwg. org):
<!DOCTYPE html>
<html dir=”ltr” >
<head>
<title >HTML5 — путеводитель по технологии
<style>
Img { — moz-transition: 0.2s; }
.rotate { — moz-transform: rotate(90deg); }
.resize { — moz-transform: pcale(0.7); }
. resize. rotate { — moz-transform: pcale(0.7) rotate(90deg); }
</style>
<script>
Function rotate() { document. querySelector(”img”). classList. toggle(”rotate”); }
Function resize() { document. querySelector(”img”).classList. toggle(”resize”); }
</script>
</head>
<body>
<div contextmenu=”supermenu”>
<img src=”http://html5.png”>
</div>
<menu type=”context” id=”supermenu”>
<menuitem label=”rotate” onclick=”rotate()” icon=”Http://cdn1.iconfinder. com/data/icons/silk2/arrow_rotate_clockwise. png”></menuitem>
<menuitem label=”resize” onclick=”resize()” icon=”Http://cdn3.iconfinder. com/data/icons/fugue/icon/image-resize. png”></menuitem>
<menu label=”share”>
<menuitem label=”twitter” onclick=”alert(‘foo’)”></menuitem>
<menuitem label=”facebook” onclick=”alert(‘bar’)”></menuitem>
</menu>
</menu>
</body>
</html>
Результат — на рис. 11.
Рис. 11. Реализация контекстного меню HTML-разметкой
Еще один полезный глобальный атрибут hidden в полном соответствии со своим названием делает объект не отображаемым в любых средствах просмотра. При этом сам элемент не исчезает — он доступен для сценариев в объектной модели документа. С одной стороны, может показаться странным — в новом стандарте все, что касается внешнего вида элемента, стремится быть перенесено в зону ответственности CSS, а с подобной задачей вполне справляются стили display и visibility. Но на самом деле все логично: состояние hidden — это скорее логика, а не внешний вид, да и стиль display (и тем более visibilyty) — это немного не то.
Еще один новый атрибут — spellcheck — отвечает (как нетрудно догадаться) за проверку орфографии в текстовых полях ввода. Такая проверка уже несколько лет по умолчанию включается в некоторых браузерах, теперь этим можно разумно управлять. Главное — помнить: spellcheck теперь можно включать не только для элементов <texarea> или <input type = "text">, но и у любого подходящего контейнера, у которого активирован другой, уже упомянутый новый атрибут — contenteditable:
<div contenteditable spellcheck >
Графиня изменившимся лицом бежит к пруду </div>
Результат работы — на рис. 12.
Рис. 12. Проверка орфографии прямо в div
Еще один элемент — вроде довольно старый знакомый, но теперь он выступает несколько в ином качестве. Я говорю про tabindex — атрибут, определяющий порядок перемещения фокуса по элементам HTML-форм с помощью специальных клавиш (обычно Tab). Теперь этот атрибут глобален, то есть доступен для большинства HTML-элементов. Причин тому несколько. Во-первых, HTML-документы теперь воспроизводятся на совершенно различных устройствах, и подобный способ навигации по странице должен быть доступен. Во-вторых, появляется возможность посредством JavaScript-сценария (методом focus()) установить фокус на любом элементе страницы. Для того чтобы элемент был доступен только для сценариев, значением tabindex должно быть отрицательное число (tabindex = -1, например).
Добавить комментарий