이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome 112의 새로운 기능

Adriana Jara

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

이제 CSS가 중첩 규칙을 지원합니다.
<dialog> 요소에 초기 포커스를 설정하는 알고리즘이 업데이트되었습니다.
탐색 속도를 높이기 위해 지금부터 서비스 워커의 노옵스(no-ops) fetch() 핸들러를 건너뜁니다.
그 외에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. 자세히 알아보고 개발자를 위한 Chrome 112의 새로운 기능을 살펴보겠습니다.

중첩을 위한 CSS 지원

이제 우리가 즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이 언어에 내장되어 있습니다.

중첩하기 전에 모든 선택자가 있습니다. 이로 인해 반복이 발생하고, 스타일시트가 대량으로 작성되며, 작성이 산만해지게 됩니다. 경험해 볼 수 있습니다

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

중첩 후에 선택기는 연속 및 관련 스타일 규칙을 그룹화할 수 있습니다.

이후

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

중첩은 선택기를 반복할 필요를 줄이는 동시에 관련 요소에 대한 스타일 규칙을 공동으로 배치하여 개발자를 지원합니다. 또한 스타일이 타겟팅하는 HTML과 일치시키는 데 도움이 될 수 있습니다.

예에 있는 .nesting 구성요소가 프로젝트에서 삭제된 경우 파일에서 관련 선택기 인스턴스를 검색하는 대신 전체 그룹을 삭제할 수 있습니다.

수습 기간은 다음과 같은 경우에 도움이 됩니다.

정리
파일 크기 줄이기
리팩터링.

CSS 중첩을 최대한 활용하기 위한 팁은 이 도움말을 확인하세요. devtools의 중첩 지원은 여기에서 확인할 수 있습니다.

`<dialog>` 초기 포커스의 알고리즘 업데이트

HTML <dialog> 요소는 웹페이지의 다른 모든 콘텐츠 위에 표시되어야 하는 대화상자나 기타 상호작용 구성요소(예: 닫을 수 있는 알림 또는 하위 창)를 나타내는 표준화된 방법입니다.

이 HTML 요소는 더 우수하고 일관된 사용성과 접근성을 제공하도록 빌드되었기 때문에 이러한 콘텐츠를 만드는 데 권장되는 방법입니다.

이러한 기능 중 하나는 대화상자가 열릴 때 포커스가 맞춰지는 요소를 처리하는 것입니다. 이 버전에서는 해당 요소를 선택하는 알고리즘이 업데이트되었습니다.

지금부터

대화상자 포커스 단계는 포커스 가능 요소 대신 키보드 포커스 가능 요소를 봅니다. 자동 초점 속성이 설정되어 있으면 <dialog> 요소 자체가 포커스를 받습니다.

<dialog> 요소 자체는 포커스가 '재설정'되는 대신 대체로 포커스를 받습니다. <body> 요소에 추가합니다.

<dialog> 요소에 관한 자세한 내용은 문서를 참고하세요.

서비스 워커 노옵스(no-ops) 가져오기 핸들러를 건너뜁니다.

사용자 에이전트가 서비스 워커의 모든 가져오기 리스너가 노옵스(no-ops)라고 식별하면 Chrome 112부터 서비스 워커 시작과 탐색 중요 경로의 리스너 전달이 생략됩니다.

이 기능을 사용하면 해당 페이지를 더 빠르게 탐색할 수 있습니다.

가져오기 핸들러는 웹 앱을 설치할 수 있는 PWA 요구사항 중 하나였습니다. 일부 사이트의 가져오기 핸들러가 기본적으로 비어 있는 것이 이러한 이유 때문일 수 있습니다. 그러나 서비스 워커를 시작하고 노옵스(no-ops) 리스너를 실행하는 경우 오버헤드만 발생하며 캐싱 또는 오프라인 기능과 같은 올바른 서비스 워커로 구현할 수 있는 이점은 제공하지 않습니다. 따라서 이제 Chrome은 탐색 개선을 위해 이러한 이벤트를 건너뜁니다.

이러한 변경의 일환으로 Chrome은 모든 서비스 워커의 가져오기 리스너가 노옵스(no-ops)인 경우 콘솔 경고를 표시하고 개발자가 이러한 가져오기 리스너를 삭제하도록 권장합니다.

DevTools에서 빈 서비스 워커 가져오기 핸들러에 대한 경고가 표시됨

그 외에도 다양한 기능 제공

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

document.domain의 setter가 이제 지원 중단됩니다.
WebView의 X-Requested-With header 지원 중단에 대한 오리진 트라이얼이 있습니다.
이제 devtools의 레코더에서 피어스 선택기를 사용하여 녹화할 수 있습니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 112의 추가 변경사항

최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 아드리아나 자라입니다. Chrome 113이 출시되는 즉시 Chrome의 새로운 기능을 소개합니다.