Chrome 120에서 전방 탐색 중첩이 사용 설정되었습니다.
올해 초 Chrome은 112년에 CSS 중첩을 도입했으며, 사용할 수 있습니다.
브라우저 지원
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
하지만 한 가지 엄격하고 예기치 않은 요구사항이 있었습니다. 구문(잘못된 중첩 예의 첫 번째 도움말 참조) 이 후속 도움말에서는 사양 및 Chrome에서 변경된 사항을 다룹니다. 120입니다.
요소 태그 이름 중첩
CSS 중첩의 첫 번째 릴리스에서 가장 놀라운 제한 사항 중 하나는 구문은 기본 요소 태그 이름을 중첩할 수 없었다는 것입니다. 이러한 무능력은 삭제되어 다음 CSS 중첩이 유효합니다.
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
순서가 지정된 목록, 순서가 지정되지 않은 목록 또는 정의 목록을 중첩할 때 매우 유용합니다.
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
이 중첩을 허용하기 위해 변경된 사항은 무엇인가요?
Chrome 엔지니어가 탐색하고 프로토타입을 제작한 덕분입니다. 커뮤니티 및 CSS 실무 그룹의 요구가 결합된 것입니다.
CSS 파서가
다음과 같이 태그 이름 (div
)과 속성 이름 (visibility
)을 구별합니다.
파서에는 현재 미래에 대한 개념이 없습니다. Kubernetes가
토큰이 속성이므로 브라우저에서 :
이
알 수 없는 토큰입니다. 따라서 원래 사양에서는 &
기호가 사용되었습니다.
다음 내용이 일반 CSS가 아니라 중첩되었음을 브라우저에 알립니다.
속성 및 값입니다.
다행히 한 엔지니어가 파서가 중첩 선택기를 속성으로 사용하는 경우 속성 대신 선택기를 가정하는 모드에서 다시 시작되었습니다. 파싱 재개되며, 중첩을 선택기 중첩으로 간주합니다. 충분히 빠르고 문법을 릴리스할 만큼 충분히 신뢰할 수 있다고 판단되었습니다.