CSS 중첩 완화 구문 업데이트

Chrome 120에서 룩아헤드 중첩이 사용 설정되었습니다.

Adam Argyle

올해 초 Chrome은 CSS 중첩을 112개로 출시했으며, 이제 모든 주요 브라우저에 적용됩니다.

하지만 이 문법에는 잘못된 중첩 예시의 첫 번째 문서에 나열된 한 가지 엄격하고 예기치 않은 요구사항이 있었습니다. 이 후속 도움말에서는 사양 및 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 속성 및 값이 아님을 알 수 있었습니다.

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