세부 사항 요소 수정

html5

요소는 붕괴 가능한 컨텐츠를 생성하는 간결한 방법을 제공하지만 상당한 사용성 문제가 발생합니다. 해시 링크는 붕괴 된 <details></details> 섹션 내에서 컨텐츠를 대상으로하는 컨텐츠를 공개하지 않습니다. 이 기사는이 문제를 해결하기 위해 기본 지원이없는 브라우저에 대한 액세스 가능한 폴리 필을 포함하여 점차 강화 된 JavaScript 솔루션을 자세히 설명합니다. 키 테이크 아웃 : <details></details>

요소는 유용하지만 숨겨진 컨텐츠를 대상으로 해시 링크의 유용성 문제로 고통받습니다. 폴리 필은 지원되지 않는 브라우저의

기능을 효과적으로 모방합니다 해시 링크가 붕괴 된 영역 내부의 요소를 가리킬 때 폴리 필의 효과가 손상됩니다. 페이지는 맨 위에 남아 대상을 가리고 있습니다 재귀 함수는 관련

요소를 자동으로 확장하여이를 해결합니다.
1. 소개 <details></details>
2. 요소와 쌍을 이루는 요소는 접을 수있는 컨텐츠를 생성합니다. <details></details> (현재)는 첫 번째 또는 마지막 자녀 여야합니다. 다른 모든 콘텐츠는 접을 수 있습니다.
속성은 컨텐츠가 처음에 보이도록 강요합니다. 현재 Chrome만이
3. 를 완전히 지원합니다. 다음 이미지는 Chrome의 렌더링을 보여줍니다
4. <details></details> 폴리 플릴 생성
기본 폴리 필은 속성을 ​​통해 기본지지를 감지합니다. 기본 구현에는 매뉴얼

속성 업데이트가 필요하지 않지만 ARIA 속성에는 여전히 관리가 필요합니다. 일반적인 구조는 다음과 같이 보입니다

스크립트는 속성을 ​​관리하고 시각적 붕괴를위한 CSS 선택기로 사용합니다. <details></details> aprapping 는 및 속성을 ​​관리하는 것을 단순화합니다. 특히 IE7과 같은 이전 브라우저의 경우 추가 스타일 처리가 필요했습니다. 함수는 키보드에서 브라우저 불일치를 처리합니다. 클릭 이벤트 발사 :

해시 문제를 강조하는

핵심 문제는 해시 링크 (예를 들어, 1 차 콘텐츠)가 붕괴 된 영역 내에서 요소를 대상으로 할 때 발생합니다. 페이지는 대상으로 스크롤하지 않습니다. 그것은 맨 위에 남아있어 대상을 숨겨 놓았습니다. <details></details> <summary></summary> 해시 문제 수정 <summary></summary> open recursive <details></details> 함수는 이것을 해결합니다

<details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details>

이 함수는 대상을 포함하는 조상

요소를 재귀 적으로 확장합니다. <details></details>에 대한 페이지로드와 내부 링크 클릭으로 호출됩니다. 신뢰할 수있는 스크롤을 보장하기 위해 location.hash는 확장 후 사용되며 뷰포트 내에 대상을 배치합니다. 원래 동작 (페이지 새로 고침의 자동 스크롤 없음)이 유지됩니다. window.scrollBy 결론 location.hash

"Omnifill"이라고 불리는이 향상된 솔루션은 기본 폴리 칠을 넘어 확장됩니다. 모든 브라우저의 유용성과 접근성을 향상시켜 요소의 고유 한 제한을 해결합니다.

HTML 세부 사항 요소 에 대한 자주 묻는 질문 (FAQ) (원래 입력의 FAQS 섹션은 변경되지 않았습니다.)

위 내용은 세부 사항 요소 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!