Chrome 127의 새로운 기능

Adriana Jara

다음 사항에 유의하시기 바랍니다.

  • font-size-adjust를 사용하면 대체 글꼴 가독성을 개선할 수 있습니다.
  • 이제 사용자 활성화가 PIP 문서와 해당 문서를 여는 앱 간에 전파됩니다.
  • 이제 스크롤 컨테이너가 기본적으로 키보드 포커스를 받을 수 있습니다.
  • 그 밖에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. Chrome 127의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

CSS font-size-adjust

첫 번째 선택 글꼴 모음을 사용할 수 없고 대체 글꼴의 가로세로 값이 크게 다른 경우 사이트의 가독성이 저하될 수 있습니다.

다음 이미지는 텍스트 크기가 동일하더라도 Verdana와 Times 글꼴의 차이를 보여줍니다.

'이 텍스트는 상대적으로 큰 소문자가 있는 Verdana 글꼴 (14px)을 사용합니다.', '이 텍스트는 작은 크기로 읽기 어려운 Times 글꼴 (14px)을 사용합니다.'라는 텍스트 줄

사이트가 Times 글꼴로 대체되면 읽기가 훨씬 어려워집니다.

font-size-adjust CSS 속성을 사용하면 대체 글꼴의 글꼴 크기를 조정하여 가로세로 비율 값 (소문자 높이 / 글꼴 크기)을 일관되게 유지하여 사용된 글꼴과 관계없이 텍스트가 비슷하게 표시되도록 할 수 있습니다.

다음 이미지에서는 font-size-adjust를 사용하여 Verdana와 Times 글꼴 간의 가독성을 유지합니다.

   font-size-adjust: 0.545;

'이 텍스트는 상대적으로 큰 소문자가 있는 Verdana 글꼴 (14px)을 사용합니다.', '작은 크기로 읽기 어려운 Times 글꼴 (14px)을 사용합니다.', '14px Times 글꼴의 이 텍스트는 Verdana 글꼴과 동일한 가로세로 비율로 조정되므로 두 글꼴에서 소문자 글꼴이 표준화됩니다.

Chrome에서 font-size-adjust가 출시됨에 따라 이 기능이 새로운 기준으로 제공됩니다. CSS font-size-adjust가 이제 기준에 포함됨에서 세부정보를 확인하세요.

PIP 모드 문서: 사용자 활성화 전파

이제 Document Picture-in-Picture API가 문서 PIP 창과 해당 창을 연 앱 간에 사용자 활성화를 전파합니다.

사용자 동작 활성화 전파 데모를 방문하여 사용자 활성화가 감지될 때 페이지의 배경 색상이 변경되는 것을 확인합니다. 사용자 동작이 두 컨텍스트 모두에 전파되어 두 창의 배경이 변경됩니다.

이렇게 하면 문서 PIP 창에서의 사용자 활성화를 opener 창 내에서 사용할 수 있고 그 반대로도 사용할 수 있습니다. 이 변경사항으로 인해 문서 PIP 모드의 이벤트 핸들러가 실제로 오프너의 컨텍스트에서 실행되는 경우가 많아서 시작자의 컨텍스트가 사용자 동작에 액세스해야 하므로 사용자 활성화 제한 API의 사용이 더 인체공학적입니다.

자세한 내용은 <video>뿐만 아니라 모든 요소의 PIP 모드를 참고하세요.

키보드 포커스 가능 스크롤 컨테이너

모든 사용자가 스크롤러 내의 스크롤러와 콘텐츠에 더 쉽게 액세스할 수 있도록 하려면 스크롤 컨테이너가 키보드 포커스 가능 상태가 되는 것이 중요합니다.

이제 스크롤러는 기본적으로 프로그래매틱 방식으로 포커스 가능합니다. 이 변경사항 이전에는 tabindex가 0 이상으로 명시적으로 설정된 경우에만 스크롤러 요소에 탭 포커스가 설정될 수 있었습니다.

이 동작은 스크롤러에 포커스 가능 하위 요소가 없는 경우에만 발생합니다. 예를 들어 스크롤러에 이미 버튼이 포함되어 있으면 탭 포커스가 스크롤러를 건너뛰고 버튼에 직접 포커스를 둡니다.

접근성 권장사항에 따라 모든 기능을 키보드를 사용하여 사용할 수 있어야 합니다. 기본적으로 키보드 포커스 가능 스크롤러를 사용하면 사용자가 순차 포커스 탐색을 사용하여 스크롤러에 더 쉽게 액세스할 수 있습니다.

이 변경사항은 사용자에게 적용되는 속도가 매우 느리기 때문에 Google은 이러한 변경사항으로 인해 발생한 문제를 모니터링할 수 있습니다. 따라서 일부 사용자는 버전 130 이상이 되어야 이 기능이 사용 설정된 것을 볼 수 있습니다.

자세한 내용은 키보드 포커스 가능 스크롤러를 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

  • 이제 기본 프레임 및 동일 출처 iframe에서 동시 동일 문서 뷰 전환을 사용할 수 있습니다.

  • 이제 CSS 콘텐츠에서 생성된 대체 텍스트가 여러 인수를 지원합니다.

  • 이제 DevTools 성능 패널에서 WebSocket 메시지 이벤트를 캡처하여 성능 트레이스에 표시합니다.

전체 출시 노트 읽기

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 127의 추가 변경사항은 다음 링크를 확인하세요.

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 아드리아나 자라입니다. Chrome 127이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.