빈 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

예를 들어, 기본값이있는 사용자 정의 데이터 속성이있는 플러그인을 사용하고 있습니다. 일부 문자열, 일부 부울 (이 질문을 찾도록 유도). 부울 데이터에는 기본값이 참인지 거짓인지가 혼합되어 있습니다. 그것이 존재하는지 또는 가치가 있는지 확인하는 것입니다. 값이 true인지 비어 있는지 (true 인 경우) 또는 false인지 확인합니다. 그러나 비어 있는지 확인하는 것은 코드에서 명시 적입니다. "내장"이 아닙니다. 그리고 부울 속성이 요구하는대로 data-abc = "data-abc"와 같은 속성 이름을 확인하지 않습니다. 이로 인해 오류가 발생합니다.

— goodeye

52

유효하지만 부울이 아닙니다.

사용자 지정 데이터 속성 사양 은 빈 속성 처리에 대한 변경 사항을 언급하지 않으므로 빈 속성에 대한 일반 규칙이 여기에 적용됩니다.

특정 속성은 값없이 속성 이름 만 제공하여 지정할 수 있습니다.

다음 예에서 disabled속성은 빈 속성 구문으로 제공됩니다.
<input disabled>
빈 속성 구문은 다음 예제에서와 같이 속성 값으로 빈 문자열을 지정하는 것과 정확히 동일합니다.
<input disabled="">

따라서 빈 사용자 지정 데이터 속성을 사용할 수 있지만 부울로 사용하려면 특별한 처리가 필요합니다.

빈 속성에 액세스 할 때 해당 값은 ""입니다. 거짓 값이기 때문에 if (element.dataset.myattr)속성이 있는지 확인하는 데 사용할 수 없습니다 .

element.hasAttribute('myattr')또는 if (element.dataset.myattr !== undefined)대신 사용해야 합니다.

로이드의 대답은 틀 렸습니다. 그는 부울 속성 microsyntax에 대한 링크를 언급했지만 data-*속성은 사양에서 부울로 지정되지 않았습니다.

— 사용자
소스

"빈 속성 구문은 다음 예제에서와 같이 속성 값으로 빈 문자열을 지정하는 것과 정확히 동일합니다." 정확히 내가 찾고 있던 것입니다. 특히 jQuery의 scriptAttrs설정은 평범한 defer값 defer: ""을 좋아하지 않지만 트릭을 수행해야합니다. 감사!

— sfarbota

111

예, 완벽하게 유효합니다. 귀하의 경우 data-modal-target부울 속성을 나타냅니다.

2.4.2 부울 속성

요소에 부울 속성이 있으면 참 값을 나타내고 속성이 없으면 거짓 값을 나타냅니다.

— 로이드
소스

3

좋은! 링크 주셔서 감사합니다. 저는 보통 w3.org를 통해 걸어 갈 인내심이 없습니다. :)

— Adam

4

부울 속성으로 "turns it into"라는 값을 생략하는 것은 모르겠습니다. 부울 속성이 임의적이지 않은 것 같습니다. 목록이있는 것 같아요. 브라우저 / 스크립트에서 부울 또는 사용자 지정 데이터로 처리되는지 여부는 중요하지 않을 수 있습니다. 그러나 아마도 그것을 읽는 스크립트에 달려 있습니다.

— goodeye

3

나는 이것이 변했다고 믿는다. 확실히 내 코드에서 사용하는 예제는 부울이 아니라 빈 문자열로 취급됩니다. 따라서 테스트 if ($('p').data('modal-target'))가 작동하지 않습니다 : stackoverflow.com/questions/16864999/… .

— Derek Henderson

4

이것이 사실이 아닌 것처럼 보입니다. element.dataset.modalTargetjQuery와 동일한 결과 (Chrome 32) 인 빈 문자열이 생성됩니다

— H1D

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 다른 부울에 대해 매우 명확하게 말합니다. https://www.w3.org/TR/html5/forms.html#attr-input-checked 와 같은 속성checked

— Ciro Santilli 郝海东冠状病六四事件法轮功
소스