CSS 중첩 완화 구문 업데이트

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

Adam Argyle

올해 초 Chrome은 112에 CSS 중첩을 출시했으며 현재 모든 주요 브라우저에서 지원됩니다.

브라우저 지원

• 120
• 120
• 117
• 17.2

소스

그러나 잘못된 중첩 예의 첫 번째 도움말에 나와 있는 엄격하면서도 예상치 못한 구문의 요구사항이 있었습니다. 이 후속 도움말에서는 사양 및 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)을 구별하도록 학습시킬 수 있을지는 의문이 들었습니다. 토큰이 속성임을 파악하려면 브라우저에서 :가 알 수 없는 토큰을 따르는지 확인해야 합니다. 따라서 원래 사양에서는 & 기호를 사용하여 일반 CSS 속성 및 값이 아니라 뒤따르는 항목이 중첩되었음을 브라우저에 표시했습니다.

다행히 엔지니어는 파서가 중첩된 선택기를 일반 소비 패스에 따라 속성으로 파싱하지 못하면 속성 대신 선택기를 가정하는 모드에서 다시 시작될 수 있다는 사실을 발견했습니다. 중첩이 선택기 중첩으로 인식되어 파싱이 재개됩니다. 문법을 해제하기에 충분하다고 판단될 만큼 충분히 빠르고 신뢰할 수 있습니다.