CSS 중첩 완화 구문 업데이트

Chrome 120에서 전방 탐색 중첩이 사용 설정되었습니다.

Adam Argyle
Adam Argyle
X GitHub

올해 초 Chrome은 112년에 CSS 중첩을 도입했으며, 사용할 수 있습니다.

브라우저 지원

  • Chrome: 120 <ph type="x-smartling-placeholder">
  • Edge: 120. <ph type="x-smartling-placeholder">
  • Firefox: 117 <ph type="x-smartling-placeholder">
  • Safari 17.2. <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가 아니라 중첩되었음을 브라우저에 알립니다. 속성 및 값입니다.

다행히 한 엔지니어가 파서가 중첩 선택기를 속성으로 사용하는 경우 속성 대신 선택기를 가정하는 모드에서 다시 시작되었습니다. 파싱 재개되며, 중첩을 선택기 중첩으로 간주합니다. 충분히 빠르고 문법을 릴리스할 만큼 충분히 신뢰할 수 있다고 판단되었습니다.