주간 플랫폼 뉴스 : WebKit Autofill, 커서 포인터 사용, 자동 재생 비디오 지연

이번 주 웹 개발 뉴스는 다양한 브라우저 기능에서 중요한 업데이트를 다룹니다. 주요 하이라이트로는 WebKit의 자동 수제 표준화, 포인터 커서의 확장 된 사용 및 자동 배송 비디오를위한 브라우저 최적화가 포함됩니다. 세부 사항을 탐구합시다.

CSS :-webkit-autofill 표준이됩니다

수년 동안, 대부분의 최신 브라우저 (Firefox 제외)는 브라우저-아우 토링 된 양식 필드를위한 :-webkit-autofill CSS 의사 클래스를 지원했습니다. 이를 통해 개발자는 자동화 된 입력을 시각적으로 사용자 정의하고 JavaScript를 통해이를 감지 할 수있었습니다.

 autofilled = document.querySelectorALL ( ": -WebKit-AutoFill");

표준 자동 이벤트는 여전히 부족하지만 개발자는 input 이벤트를 활용하고 다음을 확인할 수 있습니다 :-webkit-autofill .

HTML 표준에는 이제 공식적으로 다음을 포함합니다 ( :autofill ( :-webkit-autofill as alias),이 기능을 모든 호환 브라우저로 확장합니다. Firefox 86은 곧이를 구현할 것으로 예상됩니다.

:autofill and :-webkit-autofill 의사 클래스 대상 요소는 브라우저에 의해 자동으로 공급되어 사용자가 필드를 수정하는 경우 적용을 중단합니다.

버튼 및 링크 간격 용 CSS 그리드

Josh W. Comeau의 기사 인 "Spacer GIF를 가져 오자!"는 CSS 마진에만 의존하는 것에 대해 논쟁하면서 버튼 구성 요소 간격을 위해 전용 스페이서 요소를 사용하여 옹호합니다. 그는 아이콘이나 텍스트에 여백 할당의 모호성을 지적합니다.

CSS 그리드는 우수한 솔루션을 제공합니다. CSS 트릭 뉴스 레터와 같은 비 분쇄 공간을 사용하는 대신 그리드 레이아웃은 gap 속성을 통해보다 정확한 간격 제어를 제공합니다.

pointer 커서를 링크 너머로 확장합니다

CSS 기본 사용자 인터페이스 모듈은 cursor 속성을 정의합니다. 사양에 따라 cursor: pointer (핸드 커서)가 링크를 나타내고 브라우저 기본적으로 링크에 적용하고 버튼에 화살표 커서 (Wikipedia 포함) cursor: pointer 확장합니다. 그만큼<summary></summary> 요소 (for<details></details> )는 포인터 커서의 또 다른 적합한 후보입니다.

자동 재생 비디오 최적화 : 가시가 될 때까지 지연됩니다

GIF에 비해 에너지 소비를 줄이기 위해 브라우저는 자동 재생 제한을 완화하여 비디오 사용을 장려했습니다. 그러나 요소가 오프 화면에있을 때 불필요한 비디오 재생은 비효율적입니다. 대부분의 주요 브라우저 (Firefox 제외)는 이제 자동으로 일시 중지됩니다<video autoplay="" muted=""></video> 뷰포트에서 볼 때까지 요소로 Intersection Observer 와 수동 처리가 필요하지 않습니다.

<video autoplay=""></video> 요소는 한 번만 보이는 화면에서만 재생됩니다 (예 :보기,보기, CSS를 통해 드러나거나 DOM에 추가).

(Zach Leatherman을 통해)

Chrome의 새로운 @font-face 디스크립터

브라우저 및 운영 체제의 일관되지 않은 글꼴 메트릭은 수직 텍스트 오정렬로 이어질 수 있습니다. 특히 대형 제목에서 눈에 띄고 글꼴 스와핑 중 레이아웃 이동이 발생할 수 있습니다. Chrome은 다음을 해결하기 위해 3 개의 새로운 @font-face 디스크립터를 도입했습니다.

• ascent-override (기준 위의 높이)
• descent-override (기준 아래 깊이)
• line-gap-override

 @font-face {
  유대 가족 : 로봇;
  /* Merriweather Sans는 125.875px 상승 을가집니다 
   * 128px 글꼴 크기에서 35px 하강.
   */
  상승-오버 라이드 : calc (125.875 / 128 * 100%);
  하강-오버 라이드 : calc (35 / 128 * 100%);
  SRC : 로컬 (Roboto-Regular);
}

이러한 메트릭을 무시하면 다른 글꼴에 걸쳐 일관된 레이아웃이 보장되어 레이아웃 이동이 방지됩니다.

위 내용은 주간 플랫폼 뉴스 : WebKit Autofill, 커서 포인터 사용, 자동 재생 비디오 지연의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!