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 속성 및 값이 아닌 중첩된 속성임을 나타내는 데 사용되었습니다.

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