아코디언이라고도 하는 콘텐츠 섹션 접기는 일반적인 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가 있는 컨테이너 내에 중첩된 요소에 테두리를 추가합니다.