Чи дійсні порожні атрибути HTML5?

115

Я хотів би написати простий плагін jQuery, який відображає вбудовані модалі під вказаними елементами. Моя ідея полягає в тому, щоб сценарій був автоматично введений на основі атрибутів даних, зазначених у елементах.

Дуже базовий приклад:

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

Мені просто цікаво, чи data-modal-targetдійсний у наведеному вище прикладі чи це має бути data-modal-target="true"? Мене не хвилює нічого крапшого, ніж IE9 тощо. Єдина моя вимога - це те, щоб він був дійсним HTML5.

html custom-data-attribute html5-data

— Адам
джерело

Я не міг знайти, де атрибути спеціальних даних вимагають значення чи ні; і я все ще не впевнений, пропустити значення чи просто включити його в безпечне значення. Специфікація W3C заплутана (не дивно). Я думаю, це може залежати від сценарію з використанням значень. (приклад коментаря тривав нижче, через обмеження довжини).

— goodeye

наприклад, я використовую плагін, у якому є власні атрибути даних із значеннями за замовчуванням: деякі рядки, деякі булеві (що змушує мене шукати це питання). Булеві дані містять сукупність того, чи є за замовчуванням істинним, або хибним; він робить перевірку, щоб перевірити, чи існує вона чи має значення. Він перевіряє, чи значення є істинним, або порожнім (для істинного), або хибним. Але перевірка на порожнє явна в коді; це не "вбудований". І це не перевірка імені атрибута, як data-abc = "data-abc", як вимагає булевий атрибут; це спричиняє помилку.

— goodeye

52

Дійсні, але вони не є булевими.

Специфікація спеціальних атрибутів даних не зазначає жодних змін до обробки порожніх атрибутів, тому тут застосовуються загальні правила щодо порожніх атрибутів :

Деякі атрибути можуть бути визначені, надаючи лише ім’я атрибута, без значення.

У наступному прикладі disabledатрибут задається з синтаксисом порожнього атрибута:
<input disabled>
Зауважте, що синтаксис порожнього атрибута є рівнозначним визначенню порожнього рядка як значення для атрибута, як у наступному прикладі.
<input disabled="">

Таким чином, ви можете використовувати порожні власні атрибути даних, але для їх використання як булевих потрібна спеціальна обробка.

Коли ви отримуєте доступ до порожнього атрибуту, його значення становить "". Оскільки це фальшиве значення, ви не можете просто if (element.dataset.myattr)перевірити наявність атрибута.

Ви повинні використовувати element.hasAttribute('myattr')або if (element.dataset.myattr !== undefined)замість цього.

Відповідь Ллойда неправильна. Він згадує посилання на булеві атрибути мікросинтаксису, але data-*атрибути не вказані як булеві в специфікації.

— користувач
джерело

"Зауважте, що синтаксис порожнього атрибута точно еквівалентний заданню порожньої рядка як значення для атрибута, як у наступному прикладі." це саме те, що я шукав. Зокрема, параметр jQuery scriptAttrsне подобається простому deferзначенню, але defer: ""повинен виконувати трюк. Дякую!

— sfarbota

111

Так, цілком справедливо. У вашому випадку data-modal-targetбуде представляти булевий атрибут:

2.4.2 Булеві атрибути

Наявність булевого атрибута на елементі представляє справжнє значення, а відсутність атрибута представляє помилкове значення.

— Ллойд
джерело

3

Приємно! Дякую за посилання, як правило, у мене немає терпіння перебиратися через w3.org :)

— Адам

4

Я не знаю, якщо пропущення значення "перетворює його на" булевий атрибут - здається, булеві атрибути не є довільними; Я думаю, що є їх список. Можливо, не має значення, чи браузер розглядає сценарій як булеві або користувацькі дані; але, можливо, це залежить від сценарію його читання.

— goodeye

3

Я вважаю, що це змінилося. Звичайно, приклад, який я використовую у своєму коді, не трактується як булева, а як порожня рядок. Отже, тестування if ($('p').data('modal-target'))не працюватиме: stackoverflow.com/questions/16864999/… .

— Дерек Хендерсон

4

виглядає так, що це неправда, ви element.dataset.modalTarget

— отримаєте

20

Це здається помилковим тлумаченням специфікації. Розділ, на який ви посилаєтесь, описує булеві атрибути, але не говорить про те, чи можуть атрибути користувацьких даних бути булевими атрибутами.

— BoltClock

1

Так, для синтаксису допустимо опустити значення для спеціального атрибута даних.

"Атрибути можна вказати чотирма різними способами:

Порожній синтаксис атрибута Просто назва атрибута. Значення неявно порожній рядок. [...] " https://developers.whatwg.org/syntax.html#attributes-0

— олівець
джерело

1

З одного боку, він передає валідатор 16.5.7 https://validator.w3.org/nu/#textarea :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

З іншого боку, HTML5 у специфікації data-атрибутів не говорить про те, що вони булі: https://www.w3.org/TR/html5/dom.html#custom-data-attribute, в той час як це говорить дуже чітко для інших булевих такі атрибути, як checked https://www.w3.org/TR/html5/forms.html#attr-input-

— Ciro Santilli 郝海东冠状病六四事件法轮功
джерело