- CSS 중첩(CSS Nesting) 사양에
CSSNestedDeclarations
인터페이스가 추가되어 중첩으로 인한 이슈들이 해결됨
- 이 외에도 스타일 규칙 뒤에 오는 선언문들이 더 이상 위로 이동하지 않는 등의 개선 사항이 있음
- Chrome 130 버전, Firefox Nightly 132, Safari Technology Preview 204 버전부터 적용됨
CSSNestedDeclarations
도입 이전의 CSS 중첩 이슈
- 중첩된 선언문들이 예상과 다르게 동작하는 문제가 있었음
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
- Chrome 130 이전 버전에서는
background-color
가 green
이 아닌 red
로 적용됨
- 파싱 이후 실제 적용되는 규칙은 아래와 같이 변경됨
.foo {
width: fit-content;
background-color: green;
@media screen {
& {
background-color: red;
}
}
}
-
background-color: green;
이 다른 선언문들과 함께 위로 이동하고, 중첩된 CSSMediaRule
이 &
선택자를 사용하는 추가 CSSStyleRule
로 감싸짐
- 이는 CSS 엔진이 스타일 규칙의 시작 부분에 나타나는 속성과 다른 규칙 사이에 나타나는 속성을 구별할 수 없기 때문
해결 방안 - CSSNestedDeclarations
인터페이스 도입
- CSS 작업 그룹은 이를 해결하기 위해 중첩 선언 규칙(nested declarations rule)을 도입함
- Chrome 130부터 연속적으로 중첩된 선언문들을 자동으로
CSSNestedDeclarations
인스턴스로 감쌈
- 이를 통해
background-color: green
선언문의 위치를 background-color: red
선언문 뒤로 유지할 수 있음
-
CSSNestedDeclarations
는 부모 스타일 규칙과 동일한 요소 및 의사 요소와 일치하며, 특이성 동작도 동일함
개발자에게 미치는 영향
- Chrome 130부터 CSS 중첩이 크게 개선됨
- 그러나 선언문과 중첩 규칙을 혼용한 경우 코드를 수정해야 할 수 있음
/* Chrome 130에서 동작하지 않음 */
#mypopover:popover-open {
@starting-style {
opacity: 0;
scale: 0.5;
}
opacity: 1;
scale: 1;
}
- 위 코드는
@starting-style
선언문이 CSSNestedDeclarations
에 포함된 선언문에 의해 덮어씌워져 entry animation이 제거됨
- 아래와 같이 수정해야 함
/* Chrome 130에서 동작함 */
#mypopover:popover-open {
opacity: 1;
scale: 1;
@starting-style {
opacity: 0;
scale: 0.5;
}
}
- CSS 중첩 사용 시 중첩 선언문을 중첩 규칙 위에 두면 대부분의 브라우저 버전에서 잘 동작함
CSSNestedDeclarations
기능 감지
if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {
// CSSNestedDeclarations를 지원하지 않음
}
GN⁺의 의견
- CSS 중첩은 코드의 가독성과 유지보수성을 높여주는 유용한 기능임. 그러나 중첩 규칙과 선언문의 혼용으로 인한 이슈가 있었는데,
CSSNestedDeclarations
도입으로 이 문제가 해결되어 다행임.
-
CSSNestedDeclarations
가 도입되기 전에는 중첩 선언문의 위치가 변경되거나 의도치 않게 덮어씌워지는 문제가 있었음. 이는 개발자들에게 혼란을 줄 수 있는 부분이었음.
-
@nest
규칙을 사용하거나 중첩 선언문을 CSSStyleRule
로 감싸는 등의 다른 해결 방안도 고려되었으나, 개발 경험의 저하 등의 이유로 채택되지 않았음. 중첩 선언 규칙의 도입이 가장 적절한 해결책으로 보임.
- 다만
CSSNestedDeclarations
는 아직 일부 브라우저에서만 지원되므로, 크로스 브라우징을 위해서는 중첩 선언문을 항상 중첩 규칙보다 위에 두는 것이 안전할 것 같음.
- PostCSS, Sass 등의 CSS 전처리기에서도
CSSNestedDeclarations
와 유사한 기능을 제공하고 있음. 전처리기를 사용 중이라면 해당 기능을 활용해볼 수 있을 것임.