"데이터"로 사용자 정의 속성을 준비 해야하는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/2450585

문제

따라서 사용하는 모든 사용자 정의 데이터 속성은 "데이터"로 시작해야합니다.

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

내가 이것을 무시하면 나쁜 일이 일어날까요? 즉:

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

한 가지 나쁜 점은 내 사용자 지정 속성이 특별한 의미로 HTML 속성과 충돌 할 수 있다는 것입니다. name), 그러나 이것을 제외하고, "data-example_text"대신 "example_text"를 작성하는 데 문제가 있습니까? (유효성이 없지만 누가 신경 쓰나요?)

도움이 되었습니까?

해결책

사용자 정의 속성을 데이터*와 접두사로 유지하는 데 몇 가지 이점이 있습니다.

  1. 향후 판에서 HTML에 대한 확장과 충돌이 없을 것임을 보장합니다. 이는 기존 사이트가 동일한 이름의 속성을 사용하고 다르고 호환되지 않는 사용자 지정 동작을 기대하는 HTML5에 도입 된 새로운 속성 중 일부와 어느 정도 발생한 문제입니다. (예 : required 속성을 켜십시오 input 요소는 과거에 인기있는 웹 사이트에서 약간의 충돌을 겪은 것으로 알려져 있습니다)

  2. 편리한 DOM API가 있습니다. htmlelement.dataset, 스크립트에서 이러한 속성에 액세스하기 위해. 지금이야 대부분의 브라우저에서 지원됩니다.

  3. 속성이 사용자 지정 속성이며 표준화 된 속성이라는 명확한 표시를 제공합니다. 이것은 유효성 검사기가 데이터가있는 속성을 허용함으로써 도움이 될뿐만 아니라 다른 속성 (예 : 오타를 잡기위한 유용한 오류 확인)을 수행하는 데 도움이되며, 소스 코드의 이러한 측면을 사람들을 포함하여 읽기 사람들에게 더 명확하게 만드는 데 도움이됩니다. 원래 저자 이후 웹 사이트에서 일할 수있는 사람.

다른 팁

에 따르면 John Resig, HTML5 SEPCS에 이러한 사용자 정의 데이터 속성을 추가하는 전체 목적은 HTML에 사용자 정의 데이터를 포함시키는 것입니다. 여전히 유효하지만.

유효성 검사에 신경 쓰지 않는 경우 (그리고 말했듯이, 사용자 정의 속성이 기존 HTML 속성과 충돌하지 않습니다. name, id, style, 등), 그런 다음, 당신은 data- 접두사. 그러나 이것이 유효하고 호환 가능한 코드를 작성하는 데 큰 비용이 아니라는 점을 고려하면 왜 그렇게하지 않을지 모르겠습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top