이 페이지는 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-op) 가져오기 핸들러를 건너뜁니다.

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

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

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

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

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

그 외에도 다양한 기능 제공

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

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

추가 자료

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

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

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