콘텐츠 가시성에 대한 자세한 내용

CSS의 content-visibility 속성 : 성능 향상 및 접근성 문제

2020 년 8 월, CSS의 content-visibility 속성은 크롬 브라우저에서 사용되기 시작했으며 Una Kravets와 Vladimir Levin은 이에 대한 기사를 썼습니다. 성능 장점을 완전히 활용하려면 contain-intrinsic-size 속성과 함께 사용해야하며, 이는 페이지의 큰 컨텐츠 덩어리의 높이를 추정해야합니다. 이것의 가장 이상한 부분은이 큰 덩어리의 높이에 대해 대략적인 추측을해야한다는 것입니다.

전에 질문을했습니다. 추측 높이? 추측이 잘못되면 어떻게됩니까? 성능에 영향을 미칩니 까? 큰 화면과 작은 화면 사이에 큰 차이가있는 경우 다른 뷰포트 에서이 값 (또는)가 변경되어야합니까?

Jake Archibald와 Das Surma는 최근 이러한 문제를 명확히하기 위해 비디오를 만들었습니다. 비디오의 약 7 분 30 초에 이것이 얼마나 혼란스러워하는지 알 수 있습니다. Jake는 대규모 HTML 사양 페이지를 데모로 사용하고 HTML 컨텐츠의 큰 덩어리에 대한 래퍼를 추가하고 다음 코드를 적용했습니다.

 부분 {
  콘텐츠 가시성 : 자동; /* 지연 도면*/
  무질서한 크기를 포함합니다 : 1px 5000px; /* 내용 크기를 추측하고 너비는 중요하지 않습니다*/
}

분명히, 5000px 요소의 높이가 아니라 해당 요소의 내용의 크기입니다. 부모 요소가 자체 높이 속성으로 재정의하지 않는 한 부모 요소의 높이를이 값으로 증가시키기 때문에 중요합니다. 이것의 마법은 브라우저가 첫 번째 섹션 만 그릴 것이라는 것입니다 (뷰포트 높이는 5000px 미만일 가능성이 높습니다). 그것은 게으른 하중과 비슷하지만 미디어뿐만 아니라 모든 것에서 작동합니다. 다음 섹션의 높이가 5000px라고 가정하지만 상단이 보이면 실제로 그려지고 올바른 높이가 결정됩니다. 따라서 페이지가 함께 쌓인 큰 컨텐츠 블록이라면 매우 많은 수의 콘텐츠 블록이 잘 작동합니다. 웹 사이트가 이것보다 더 복잡하다면 행복하십시오.

이것은 당신이 확인해야 할 훌륭한 비디오입니다 : 비디오 링크

이것은 브라우저에 웹 사이트 정보를 제공하여 성능을 향상시킬 수 있도록 요구하는 또 다른 예입니다. 브라우저 자체는이 정보를 찾을 수 있지만 성능 비용으로 작업을 수행 한 후에 만 ​​수행 할 수 있습니다. 따라서 미리 알리므로 일부 유형의 추가 작업을 피해야합니다. 반응 형 이미지의 경우 srcset 속성을 사용하여 이미지를 제공하고 CSS 동작 정보가 포함 된 sizes 속성을 포함하여 크기를 미리 브라우저에 알리면 미리 계산할 수 있으며 최고의 이미지 만 다운로드합니다. 마찬가지로 CSS의 will-change 속성의 경우 브라우저에 미리 최적화 될 수 있도록 이동을 수행 할 것이라고 미리 알 수 있습니다. 그렇지 않으면 그렇게 할 수 없습니다. 이것은 이해할 수 있지만 약간 지루합니다. 브라우저가 다른 일을하기 전에 제공해야 할 파일을 제공 stuff-you-need-to-know.manifest 필요하지만 추가 요청이 될 것입니다!

접근성 문제도 중요합니다. Steve Faulkner는 content-visibility: auto :

콘텐츠는 시각적으로 숨겨져 있지만 턱과 NVDA에서 숨겨진 이미지가 발표되지만 요소의 내용은 발표되지 않았습니다. 이는 이미지 및 단락 요소의 내용이 브라우저 접근성 트리에 표시되는 방법과 관련이 있습니다. 이미지는 액세스 할 수있는 트리에 액세스 할 수있는 이름으로 접근성 트리에 표시됩니다. 단락 요소의 내용은 접근성 트리에 없습니다.

그는 사양에 따라 이러한 방식으로 숨겨진 콘텐츠는 스크린 리더에게 제공되어서는 안된다고 언급했다. display: none 또는 모든 것을 접근성 트리에 보관하십시오. 이제는 중간 상태에 있으며 Alt 텍스트를 제외한 다른 컨텍스트없이 접근성 트리에 고립 된 이미지가 많이 표시 될 수 있습니다. 이것은 새로운 기술 이보고 싶은 것보다 더 거칠다는 흥미로운 예입니다.

Alt Texts에 대해 말하면, 우리는 모두 볼 수없는 사람들에게 설명해야 할 중요한 것들을 나타낼 때 비워서는 안된다는 것을 알고 있습니다. Dave는 단락과 같아야 한다고 말합니다.

나는 마침내 가장 간단한 연결을 만들었습니다. 대체 텍스트는 단락과 같습니다. 텍스트 사진. 나는 이것이 기본이라는 것을 알고 있지만 좋은 텍스트와 내 코드의 소스 순서를 작성하는 방법을 이해하는 데 도움이됩니다.

나는 여기서 너무 부정적이고 싶지 않다! content-visibility 속성이있는 긴 스크롤 페이지를 설정하는 성능은 크기 때문에 훌륭합니다. 두 줄의 코드를 사용하여 브라우저에 그릴 수 없는 것을 알려주는 것이 좋습니다.

1. 나는 계속 "Draw"라고 말하지만 이것이 실제로 올바른 용어인지 아니면 더 구체적인 의미인지 모르겠습니다. 이 사양은 "사용자 에이전트가 잠재적으로 많은 레이아웃을 생략하고 필요하기 전에 작업을 렌더링 할 수 있도록 허용"(내 강조)과 같은 내용을 언급합니다.

위 내용은 콘텐츠 가시성에 대한 자세한 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!