세부 사항 요소 스타일과이를 해결하는 방법

이전에는 간단한 확장 가능한 컨텐츠 블록을 생성하려면 JavaScript 또는 복잡한 CSS 해결 방법이 필요했습니다. HTML을 수정하는 것도 번거롭게 될 수 있습니다. 이제<details></details> 그리고<summary></summary> 요소 ( "공개 위젯"형성)는 이것을 크게 단순화합니다. 예를 들어 FAQ를 위해 직장에서 광범위하게 사용합니다.

일반적인 스타일 문제 해결

하는 동안<details></details> 그리고<summary></summary> 본질적으로 확장/붕괴 기능을 제공하면 최적의 프리젠 테이션을 위해서는 여전히 CS가 필요할 수 있습니다. 스타일이 없으면 두 가지 주요 문제가 발생합니다.

Issue 1:<summary></summary> 커서

그만큼<summary></summary> 요소는 대화식으로 기본적으로 예상 포인터 대신 텍스트 선택 커서로 기본값을 얻습니다.

문제 2 : 중첩 된 블록 요소<summary></summary>

내부의 중첩 블록 레벨 요소 (예 : 제목)<summary></summary> 인라인이 아닌 화살표 아래에 나타납니다.

CSS 솔루션

이를 해결하려면이 스타일을 CSS 재설정에 추가하십시오.

 세부 사항 요약 {
  커서 : 포인터;
}

세부 사항 요약> * {
  디스플레이 : 인라인;
}

각 문제와 솔루션을 자세히 살펴 보겠습니다.

사용자 정의<summary></summary> 커서

커서는 의도 된 상호 작용을 시각적으로 반영해야합니다. 기본 텍스트 커서 켜기<summary></summary> 기술적으로 정확하지만 (텍스트 는 선택 가능) 요소는 포인터보다 직관적이지 않습니다.

솔루션은 간단합니다.

 세부 사항 요약 {
  커서 : 포인터;
}

MDN Web Docs 및 Github를 포함한 많은 저명한 웹 사이트는 이미 공개 위젯 에이 스타일을 사용하고 있습니다. 기본 cursor: text 요약 텍스트의 선택 가능성을 반영 할 수 있지만, 대화 형 요소에는 일반적으로 포인터가 바람직합니다. 커서를 변경하는 것은 시각적 외관에만 영향을 미칩니다. 선택 가능성은 변경되지 않습니다.

중첩을 표시합니다<summary></summary> 내용 인라인

FAQ의 경우 종종 제목으로 질문을 마무리합니다 (예 :<h3></h3> ) 이내에<summary></summary> :

<details><summary><h3 id="자녀의-계획이-구현됩니까"> 자녀의 504 계획이 구현됩니까?</h3></summary><p> 예. 봄과 마찬가지로 사례 관리자는 학생들에게 연락 할 것입니다.</p></details>

이것은 몇 가지 장점을 제공합니다.

• 일관성있는 스타일 : 다른 제목과 시각적 일관성을 유지합니다.
• IE/Edgehtml 호환성 : 지원하지 않는 이전 브라우저에 대한 폴백을 제공합니다.<details></details> .
• 접근성 : AIDS 보조 기술 내비게이션 (스크린 리더에 의한 해석은 아래에 설명 된대로 다를 수 있지만).

제목 대 버튼

그만큼<summary></summary> 요소는 버튼처럼 작동하지만 (암시 적으로 role=button 있습니다) 버튼과 달리 중첩 된 제목을 허용합니다. 이것은 충돌을 일으킨다 :

• 제목은 항해를 원조합니다.
• 버튼은 일반적으로 중첩 요소에서 의미론을 제거합니다.

스크린 리더 호환성은 여기서 일치하지 않습니다. NVDA와 Voiceover는 내부의 제목을 인식합니다<summary></summary> 그러나 턱은 그렇지 않습니다. 따라서 제목을 스타일링하는 동안<summary></summary> 가능하면, 그들의 의미 적 해석은 보장되지 않습니다.

인라인 스타일링

화살이 제목 위에 나타나는 것을 방지하려면 직접 중첩 된 요소에 인라인 스타일을 사용하십시오.<summary></summary> :

 세부 사항 요약> * {
  디스플레이 : 인라인;
}

포장 문제를 피하기 위해 인라인 inline-block 아닌 inline 을 사용하십시오. display: flex on<summary></summary> , 이것은 화살을 숨 깁니다.

보너스 : 인터넷 익스플로러 스타일 제외

IE와 이전 에지 버전은 지원하지 않기 때문에<details></details> 기능 쿼리를 사용하여 사용자 정의 스타일을 적용하지 마십시오.

 @supports not (-ms-ime-align : auto) {
  세부 사항 요약 {
    커서 : 포인터;
  }
  세부 사항 요약> * {
    디스플레이 : 인라인;
  }
  /* 다른<details> /<summary> 스타일 */
}</summary></details>

즉,이 블록은 완전히 무시합니다. Edgehtml은 또한 -ms-ime-align check로 인해 그것을 무시합니다. 매우 오래된 크롬 및 사파리 버전 (무시할만한 시장 점유율)도 기능 쿼리 지원이 부족합니다. @supports (details) 블록은 이상적이지만 브라우저 지원은 훨씬 적습니다.

결론

올바른 HTML 구조와 이러한 CSS 스타일을 사용하면 공개 위젯을 쉽게 사용자 정의 할 수 있습니다. 스타일링 중에 기억하십시오<summary></summary> 요소는 간단하며 중첩 제목의 스크린 리더 호환성을 고려해야합니다.

위 내용은 세부 사항 요소 스타일과이를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!