▲

GN⁺: CSSNestedDeclarations로 개선된 CSS Nesting

 (web.dev)
5P by neo 2달전 | favorite | 댓글과 토론
  • 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와 유사한 기능을 제공하고 있음. 전처리기를 사용 중이라면 해당 기능을 활용해볼 수 있을 것임.