다음 사항에 유의하시기 바랍니다.
- 이제 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)인 경우 콘솔 경고를 표시하고 개발자에게 해당 가져오기 리스너를 삭제하도록 권장합니다.
그 외에도 다양한 기능 제공
물론 더 많은 기능이 있습니다.
- 이제
document.domain
의 setter가 지원 중단됩니다. - WebView에서
X-Requested-With header
지원 중단을 위한 오리진 트라이얼이 있습니다. - 이제 devtools의 레코더에서 피어스 선택기를 사용하여 녹음할 수 있습니다.
추가 자료
여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 112의 추가 변경사항을 확인하세요.
- Chrome DevTools의 새로운 기능 (112)
- Chrome 112 지원 중단 및 삭제
- Chrome 112용 ChromeStatus.com 업데이트
- Chromium 소스 저장소 변경사항 목록
- Chrome 출시 캘린더
구독
최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
저는 아드리아나 자라입니다. Chrome 113이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.