주간 플랫폼 뉴스 : HTML로드 속성, 주요 ARIA 사양 및 iframe에서 Shadow Dom으로 이동

이번 주 플랫폼 뉴스 라운드 업 : Chrome은 웹 개발자에게 접근성 사양을 제공하는 새로운로드 속성과 BBC가 Shadow Dom으로 시각화하는 마이그레이션을 소개합니다.

크롬은 로딩 속성을 시작합니다

Chrome은 이제 게으른 로딩 이미지 및 Iframes의 HTML 로딩 특성을 지원합니다.<mark>延迟加载图像</mark>와 iframe (뷰포트 아래에 위치)에 loading="lazy" 추가 할 수 있으며 사용자가 근처에 스크롤 할 때까지로드되지 않습니다.

Google 은이 기능을 점진적인 향상으로 취급하거나 기존 JavaScript 기반 게으른로드 솔루션 위에 사용하는 것이 좋습니다.

이 기능은 HTML 표준에 추가되지 않았지만 (열린 풀 요청이 있음) Chrome 상태 페이지에는 Google 문서에 대한 여러 링크가 나열됩니다. (Web.dev에서)

ARIA 사양 개요

웹 개발자를위한 주요 접근성 사양 :

관련 : Simon Pieters와 Valerie Young의“Aria Authoring Practices Guide와의 관계”

BBC 웹 사이트의 Shadow Dom

BBC는 웹 사이트에서 임베디드 대화식 시각화를 구현했습니다.<iframe></iframe> 섀도우 돔으로 마이그레이션하십시오. 이로 인해 로딩 성능이 크게 향상됩니다 ( "25% 이상").

사용 가능한 Shadow Dom Polyfills는 Shadow Dom 경계를 가로 질러 스타일이 새는 것을 안정적으로 방지 할 수 없으므로 Shadow Dom을 지원하지 않는 브라우저로 돌아 가기로 결정했습니다.<iframe></iframe> .

Shadow Dom [...]은 캡슐화 측면에서 iframe과 유사한 방식으로 콘텐츠를 제공 할 수 있지만 부정적인 오버 헤드없이 [...] 컨텐츠가 페이지의 일부로 완벽하게 표시되는 요소를 캡슐화하려고합니다. Shadow Dom은 사용자 지정 요소없이 우리에게 이것을 제공합니다.

이 새로운 접근법의 주요 단점은 CSS 미디어 쿼리를 더 이상 컨텐츠의 너비에 따라 조건부로 적용하는 데 CSS 미디어 쿼리를 사용할 수 없다는 것입니다 (콘텐츠가 더 이상 별도의 임베디드 문서에로드되지 않기 때문에).

iframe을 사용할 때 미디어 쿼리는 컨텐츠 너비를 제공합니다. Shadow Dom을 사용할 때 Media Query는 장치 자체의 너비를 제공합니다. 이것은 우리에게 큰 도전입니다. 콘텐츠가 제공 될 때 콘텐츠의 크기를 알 수있는 방법이 없습니다.

(Toby Cox에서)

기타 뉴스 ...

• Chrome의 다음 버전은 가장 큰 콘텐츠 페인트 성능 메트릭을 소개합니다. 이 새로운 메트릭은 첫 번째 의미있는 도면을 더 정확하게 대체합니다.이 그림은 뷰포트에서 가장 큰 요소가 렌더링 될 때 측정합니다 (일반적으로 가장 큰 이미지 또는 텍스트 단락) (Phil Walton).
• Microsoft는 3D에서 Web Dom을 볼 수있는 새로운 도구의 프로토 타입을 만들었습니다. 이 도구는 이제 Edge Preview (Edge Devtools)에서 실험적으로 사용할 수 있습니다.
• Edge 미리보기에서 기본적으로 추적 보호 기능이 활성화됩니다. 기본적으로 밸런싱 모드로 설정되며 "악성 추적기와 일부 타사 트래커를 차단합니다"(Techdows의)

새로운 주간 일요일 판 에서 더 많은 뉴스를 읽으십시오. 자세한 내용은 webplatform.news를 방문하십시오.

위 내용은 주간 플랫폼 뉴스 : HTML로드 속성, 주요 ARIA 사양 및 iframe에서 Shadow Dom으로 이동의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!