다음 사항에 유의하시기 바랍니다.
- 이제 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)인 경우 콘솔 경고를 표시하고 개발자가 이러한 가져오기 리스너를 삭제하도록 권장합니다.
그 외에도 다양한 기능 제공
물론 이 외에도 더 많은 기능이 있습니다.
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의 새로운 기능을 소개합니다.