HTML5 Globals и вы

Много было написано о больших изменениях в HTML5, таких как формы, семантика и медиа, но информация о менее громких изменениях скудна. Хотя глобальные атрибуты не являются самым привлекательным изменением в HTML5, они являются тем изменением, которое вы будете использовать снова и снова и снова при переходе на новую спецификацию.

Введение: что такое глобальный атрибут?

Хотя термин «атрибут», относящийся к HTML, может показаться вам немного нечетким, вы, безусловно, используете его почти со всеми написанными вами элементами. Атрибуты HTML дают элементам смысл. Они также дают контекст. Они являются прилагательным и глаголом для элемента, если вы думаете об элементе как существительное. Например:

На самом деле не имеет большого значения. Это раздел страницы, и все тут. Когда мы добавляем атрибут, он имеет значение:

Теперь у нас есть разделение «Foo» с классом «Bar», который имеет красный цвет, заголовок «FooBar to the Rescue», отображается справа налево, должен читаться на американском английском языке, и когда вы нажимаете кнопку вкладки или «F», это первый элемент, который имеет фокус. Это просто, я знаю. Атрибуты — это все те вещи, которые придают элементам смысл. Отличие в HTML 5 от предыдущих версий спецификации состоит в том, что существуют атрибуты, которые можно использовать с любым элементом HTML. Теперь это глобальные атрибуты. Помимо тех, что проиллюстрированы в приведенном выше примере, есть и новые, которые также являются глобальными, что расширит возможности за пределы просто скучного арахисового масла.

«Атрибуты HTML придают элементам смысл. Они также дают контекст. Они являются прилагательным и глаголом для элемента, если вы думаете об элементе как о существительном».

Общие атрибуты: какие из них стали глобальными?

Это относительно небольшое изменение в HTML 5. Атрибуты id, class, style, title, dir, lang, accesskey и tabindex теперь являются допустимыми атрибутами для любого элемента HTML. Вы хотите присвоить метатегу идентификатор, который действителен сейчас. Можно даже дать этому метаэлементу направление, язык, класс или любой глобальный атрибут в этом отношении. Хотя они могут не иметь смысла на первый взгляд, совершенно правильно определить их в любом теге, который вы считаете нужным.

Приведенный выше пример отлично подходит для HTML5. Тем не менее, если нет никаких оснований для использования атрибута, и это выглядит глупо, возможно, лучший способ — не использовать этот глобальный атрибут. Табиндекс на элементе головы может быть не лучшим использованием времени и энергии. Важная часть для понимания — это не странный случай помещения глобального атрибута в нечто, что не совсем имеет смысла, а скорее тот факт, что они доступны в любом элементе.

Каждый из них был обычным атрибутом в прошлом, и хотя в прошлом их использование несколько ограничивалось , вы, вероятно, уже считали его глобальным. На самом деле мне пришлось искать идентификатор, потому что я не мог придумать элемент, который вы не могли бы использовать (основа, заголовок, HTML, мета, сценарий, стиль, заголовок). Старые общие атрибуты — это только половина новых глобальных атрибутов.

Редактировать встроенный: атрибуты Contenteditable и Spellcheck

Первыми из новых атрибутов, на которые стоит обратить внимание, являются contenteditable и spellcheck. Они не являются взаимоисключающими, и вы можете использовать одно без другого, но для иллюстрации имеет смысл взглянуть на них одновременно. Оба эти атрибута делают то, что подразумевают их имена; они позволяют элементу быть редактируемым (contenteditable) или разрешают / запрещают проверку орфографии в контенте. Давайте начнем с contenteditable:

Давайте сначала посмотрим на обработку чисел:

В этом фрагменте у нас есть один абзац, который нельзя редактировать, и один, который есть. Когда вы нажимаете на не редактируемый абзац, он работает так, как вы ожидаете, выделив слово и т. Д .:

Однако, когда вы нажимаете на редактируемую часть, открывается новый мир:

Теперь абзац становится редактируемым, просто добавляя атрибут contenteditable. Это становится еще круче, когда мы начинаем использовать contenteditable с несколькими элементами. Давайте посмотрим на большой фрагмент и посмотрим, что произойдет.

Начнем с того, что выглядит примерно так:

Когда мы фокусируем элемент article, у нас есть весь редактируемый диапазон:

Кроме того, мы можем стилизовать блок (из-за отсутствия лучшего термина), используя псевдокласс CSS3: focus

и это будет выглядеть примерно так:

>

Заключительные замечания о contenteditable: есть три основных условия: true, false, наследовать. Вы можете вкладывать приемлемые условия с помощью вложенных тегов. Например, если мы сделаем что-то вроде:

Мы могли бы редактировать абзацы в статье, но не заголовок группы. Поскольку это глобальный атрибут, вы можете теоретически добавить contenteditable для вашего элемента body, а затем выбрать и выбрать элементы, которые нельзя редактировать в документе.

Атрибут spellcheck сопровождает contenteditable, но его также можно использовать там, где ваш пользователь может взаимодействовать с вашим документом, например, с формами. Атрибут проверки орфографии считается включенным, если не указано иное:

Как видите, когда для проверки орфографии установлено значение false, мы не получаем указание на слово с ошибкой, но если для него установлено значение true, мы получаем. Это очень простой, но полезный функционал. Судя по моим тестам, реализация браузера немного сырая, но теперь она работает.

Добавление поведения: скрытый атрибут

Еще один новый глобальный атрибут скрыт. Он в основном выполняет ту же работу, что и «display: hidden» с CSS, но внутри элемента. Преимущество этого заключается в том, что он дает семантическое значение элементу, который не имеет значения в данный момент времени. Поэтому программы чтения с экрана и т. Д. Не будут упоминать элемент в скрытом состоянии, когда он использует стиль «display: hidden», поскольку он имеет дело с его представлением. Это логический атрибут, поэтому false — это предполагаемое состояние, и вам нужно только добавить имя атрибута к элементу, который вы хотите скрыть.

Перетаскивание элементов: перетаскиваемый атрибут

HTML5 реализует новый API «Drag and Drop». Хотя специфика API немного выходит за рамки данного руководства, атрибут, позволяющий перетаскивать что-либо, не является таковым. Любой элемент, который имеет перетаскиваемое значение true, можно перетаскивать:

Без JavaScript вы можете увидеть разницу в браузерах, которые поддерживают перетаскивание. При значении false, если вы наведете курсор мыши на элемент, он начнет выделять текст; однако при значении true это не так. В Chrome вы получаете значок перетаскивания, тогда как в Firefox вы просто не получаете выделение элемента. В любом случае, браузеры пытаются что-то сделать с этими элементами.

Экономия места с помощью меню: атрибут contextmenu

Атрибут contextmenu позволяет отображать меню, не занимая ценное пространство пользовательского интерфейса для меню. Это меню, которое запускает события, такие как mouseup или keyup, предоставляя всплывающее меню, которое предоставляет опции и действия на основе этих выборов.

В этом примере с контекстным меню происходит несколько новых вещей. Например, должно быть определено меню, чтобы контекстное меню знало, куда указывать. В приведенном выше примере мы говорим, что когда происходит событие мыши (в зависимости от реализации браузера), выйдите и найдите меню «foo» в DOM и отобразите его команды. Синтаксис относительно прост после этого. У нас есть метка меню, которая будет отображать текст атрибута, и у нас есть событие onclick, которое будет делать все, что мы определили.

Поймать все: данные- * атрибут

Когда вы добавляете двусмысленность в спецификацию, она, как правило, используется не по назначению, когда доступны лучшие варианты.

Я сохранил самый спорный глобальный атрибут для последнего. У меня смешанные чувства с этим новым. С одной стороны, я с нетерпением жду возможности связать свой логический уровень с моим уровнем поведения, не проходя слишком много обручей, или используя атрибуты и элементы вне их спецификаций проектирования. С другой стороны, я знаю, что когда вы добавляете двусмысленность в спецификацию, она имеет тенденцию чрезмерно использоваться и использоваться неправильно, когда есть лучшие варианты.

Что это за атрибут, является универсальным. По сути, в спецификации говорится, что мы никогда не сможем придумать все варианты использования для атрибутов, поэтому мы предоставим вам самим создавать их. Логика во мне считает, что спецификация должна дать нам набор правил, с которыми можно поиграть, и оставить все как есть, но новатор во мне любит иметь возможность определять новые атрибуты. Я просто знаю по своему опыту, когда есть шанс сделать что-то не совсем правильное, но более легкое, этот путь обычно кусает тебя сзади. Все, что сказал, давайте оставим это положительным и посмотрим на пару возможных случаев.

Я думаю, что этот атрибут будет прекрасным дополнением для микроформатов , и, возможно, это то, что ставит их на передний план развития. Я также могу видеть некоторые случаи, когда на бэкэнде я хочу предоставить несколько хлебных крошек для моего уровня поведения в JavaScript, чтобы закрыть некоторые пробелы. Другая идея, в которой вы можете использовать этот атрибут, — указать местоположение, в котором вы находитесь, когда публикуете статью. Это может выглядеть примерно так:

Теперь я могу взять эти атрибуты data- * и сделать что-то с помощью JavaScript или другого API, например, опубликовать карту, из атрибутов моего прикладного уровня. В конечном итоге это открывает массу возможностей, но не забывайте бессмертные слова Бена Паркера: «С большой силой приходит большая ответственность».

Вывод

Как и большинство вещей в HTML5 на данный момент, поддержка этих изменений в браузере в лучшем случае незначительна. Некоторые новые атрибуты поддерживаются. некоторые неправильно реализованы, некоторые вообще не имеют поддержки в данный момент! Тем не менее, все они, кажется, хорошо разлагаются без большого количества шумихи, поэтому нет веских оснований не начинать эксперименты и реализацию. Изменения в спецификации замедляются, поэтому, скорее всего, вы увидите, что вы получите … в какой-то момент. Спасибо за прочтение!