콘텐츠 섹션 축소(아코디언이라고도 함)는 일반적인 UI 패턴입니다. 하지만 접힌 섹션에 숨겨진 콘텐츠는 페이지 내 검색으로 검색할 수 없게 됩니다. 또한 접힌 영역 안에서는 텍스트 프래그먼트에 연결할 수 없습니다.
hidden=until-found HTML 속성과 beforematch 이벤트를 사용하면 이러한 문제를 해결할 수 있습니다. 숨겨진 콘텐츠의 컨테이너에 hidden=until-found를 추가하면 브라우저가 숨겨진 영역에서 텍스트를 검색하고 일치하는 항목이 발견되면 섹션을 표시할 수 있습니다.
이 기능은 Chrome 102부터 사용할 수 있으므로 작동 방식을 살펴보겠습니다.
사용 방법
검색 가능하도록 만들고자 하는 접을 수 있는 섹션이 웹사이트에 이미 있는 경우 섹션을 숨기는 스타일을 hidden=until-found 속성으로 바꿉니다. 페이지에 섹션 표시 여부와 관계없이 동기화를 유지해야 하는 다른 상태도 있는 경우 브라우저에서 요소가 표시되기 직전에 hidden=until-found 요소에서 실행될 beforematch 이벤트 리스너를 추가합니다.
주의사항
일관된 사용자 환경을 위해서는 페이지에서 찾기를 사용하지 않고도 hidden=until-found 콘텐츠를 표시할 수 있어야 합니다. 모든 사용자가 페이지에서 찾기를 사용하는 것은 아니며, hidden=until-found을(를) 지원하지 않는 브라우저는 페이지에서 찾기를 표시하지 않고 숨겨진 콘텐츠의 원래 환경을 사용할 수 있습니다.
hidden=until-found를 지원하지 않는 브라우저에서 숨겨진 콘텐츠를 검색할 수 있게 하려면 언제든지 해당 브라우저에서 숨겨진 콘텐츠를 펼치면 됩니다. 특성 감지는 beforematch 이벤트 핸들러가 있는지 확인하여 수행할 수 있습니다.
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
hidden=until-found는 일반 숨겨진 속성이 적용되는 display:none 속성 대신 content-visibility:hidden CSS 속성을 적용합니다. 이는 닫혀 있는 콘텐츠를 검색하는 데 필요하지만 다음과 같은 부작용도 있습니다.
getBoundingClientRect와 같은 일부 레이아웃 API는hidden=until-found요소 내부의 숨겨진 콘텐츠가 공간을 차지하고 페이지에 위치가 있다고 보고합니다.hidden=until-found요소의 하위 노드는 렌더링되지 않지만hidden=until-found요소 자체에는 여전히 상자가 있습니다. 즉, 테두리 및 명시적 크기와 같은 CSS 속성은 렌더링에 영향을 미칩니다.
예를 들어 다음 데모는 hidden=until-found가 적용된 요소에 여백, 테두리, 패딩을 추가합니다. 숨겨진 콘텐츠가 나타나는 곳에 회색 테두리가 있는 상자가 있으며, 상자가 표시되면 숨겨진 콘텐츠로 채워집니다. 숨겨진 요소의 상자입니다.
이 문제를 방지하려면 hidden=until-found가 있는 컨테이너 내에 중첩된 요소에 테두리를 추가합니다.
히어로 이미지: Thomas Bormans