2026년 CSS 신기능 총정리 sibling-index()부터 container stuck 쿼리까지

들어가며: 2026년 중반, 웹 플랫폼은 지금 어디쯤일까?

CSS는 예전처럼 "1년에 한두 개 신기능" 시대가 아니에요. Firefox 153, Chrome 151이 연달아 릴리스되면서 Baseline에 편입되는 기능들이 눈에 띄게 늘었고, 반대로 Safari·Firefox가 아직 따라오지 못한 기능도 뚜렷하게 갈리고 있습니다.

이번 글에서는 최근 웹 플랫폼 업데이트 중 실무에서 바로 써먹을 수 있는 4가지만 골라서 정리했어요. 각 항목마다 "언제 쓸 수 있는지(Baseline 여부)"와 "실무 적용 시 주의점"을 같이 짚었으니, 사내 CSS 컨벤션이나 디자인 시스템 논의할 때 참고하시면 좋습니다.

이 글은 CSS-Tricks의 What's !important #16 (근거자료)을 바탕으로, 국내 프론트엔드 실무 관점에서 재구성한 글입니다.

1. sibling-index() — 애니메이션의 판을 바꾸는 함수

nth-child()로 일일이 인덱스를 계산하던 시절은 끝나가고 있어요. sibling-index()는 형제 요소 중 자신의 위치를 숫자로 반환하는데, 이걸 animation-delay나 transition-duration에 바로 꽂을 수 있습니다.

/* 카드 리스트가 순차적으로 나타나는 stagger 애니메이션 */
.card {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
  /* 각 카드가 자기 순서에 맞춰 지연됨 */
  animation-delay: calc(sibling-index() * 80ms);
}

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

기존에는 :nth-child(1) { animation-delay: 0ms }, :nth-child(2) { animation-delay: 80ms } … 이렇게 10개, 20개를 손으로 나열하거나 SCSS @for 루프를 돌려야 했죠. 이제는 한 줄이면 끝납니다.

Baseline 상태: Firefox 154에서 2026년 8월 18일 정식 지원 예정 → Baseline: Newly Available. 즉, 크롬·사파리는 이미 지원 중이고 Firefox만 기다리면 되는 상황이에요.

실무 팁

• sibling-index()는 1부터 시작합니다. 0-based에 익숙한 분들은 calc((sibling-index() - 1) * 80ms) 형태로 보정하세요.
• 서버사이드 렌더링(SSR)과는 무관하게 순수 CSS 계산이라 하이드레이션 이슈가 없습니다.
• 단, DOM 순서가 바뀌면 애니메이션 순서도 바뀝니다. 정렬 기능이 있는 리스트에서는 의도한 순서인지 꼭 확인하세요.

2. infinity 키워드와 container stuck 쿼리

infinity: "무한"을 숫자로 쓰는 시대

calc() 안에서 infinity(그리고 -infinity)를 숫자처럼 쓸 수 있게 됐어요. 실무에서 가장 체감되는 건 corner-shape입니다.

/* 둥근 모서리를 완전히 각지게 */
.box-square {
  corner-shape: superellipse(infinity);
  /* corner-shape: square; 와 동일 */
}

/* 노치(오목) 모양으로 */
.box-notch {
  corner-shape: superellipse(-infinity);
  /* corner-shape: notch; 와 동일 */
}

"그냥 border-radius: 0 쓰면 되는 거 아니냐" 싶지만, border-radius는 곡률 자체를 제거하는 반면 superellipse(infinity)는 둥글지만 눈에 안 보이는 상태를 만든다는 차이가 있어요. 애니메이션 중간 상태를 부드럽게 이어가야 할 때 유용합니다.

container scroll-state(stuck:) — sticky 감지의 정석

position: sticky가 실제로 "붙었는지(stuck)"를 CSS만으로 감지하는 기능입니다.

.sticky-header {
  position: sticky;
  top: 0;
}

/* 부모 컨테이너 안에서 헤더가 stuck 상태일 때만 스타일 변경 */
@container scroll-state(stuck: top) {
  .sticky-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: var(--bg-elevated);
  }
}

지금까지는 IntersectionObserver + 센티넬 엘리먼트로 하던 짓을 CSS 한 줄로 대체할 수 있어요. 다만 2026년 중반 기준 Safari·Firefox는 미지원입니다. 프로덕션에 넣으려면 @supports로 감싸고 폴백(JS 옵저버)을 유지하세요.

lazy loading, 기본값이 되어야 할까?

Lea Verou가 던진 화두는 "loading="lazy"가 기본값이어야 하지 않나?" 였습니다. 현재는 img, iframe에 매번 명시해야 하는데, CAS(Cascade Attribute Sheet) 같은 제안이 실현되면 img, video { loading: lazy; }로 전역 기본값을 바꾸고 예외만 loading="eager"로 오버라이드하는 그림이 가능해져요.

실무 관점에서는 여전히 LCP 이미지에는 eager + fetchpriority="high" 조합이 정석입니다. 무조건 lazy로 밀면 상단 히어로 이미지가 늦게 뜨면서 Core Web Vitals가 역주행하는 경우가 많아요. 이 부분은 Vercel CLI로 실시간 웹 바이탈 데이터 조회하기 글과 함께 보시면 감이 더 잘 잡힙니다.

3. 한국 프론트엔드 생태계에서의 적용 맥락

국내 SI·금융권 프로젝트에서는 브라우저 지원 매트릭스가 곧 일정입니다. sibling-index()나 scroll-state(stuck:) 같은 기능을 도입할 때는 다음 순서로 판단하시길 권합니다.

1. Baseline 신규 편입 여부 확인 → 아직이면 @supports + JS 폴백 필수
2. 점유율 높은 구형 브라우저(예: 사내 IE 대체 브라우저, 구형 Edge)가 타깃인지 확인
3. 디자인 시스템에 이미 유사 컴포넌트가 있는지 확인 → 새 CSS 기능 도입보다 기존 컴포넌트 확장이 유지보수에 유리

특히 관공서·금융권처럼 크로스브라우징 QA가 긴 프로젝트에서는 신기능을 "실험적 유틸 클래스"로 격리해두고, Baseline 전환 시점에 정식 편입하는 전략이 안전합니다.

4. 이 기술들의 한계와 주의사항

• sibling-index(): DOM 순서 의존적. 가상 스크롤(virtual scroll) 환경에서는 인덱스와 시각적 순서가 어긋날 수 있음.
• infinity: corner-shape는 아직 실험 단계. 프로덕션 도입은 이름 그대로 "무한"을 기다려야 할 수도 있습니다.
• container scroll-state(stuck:): Safari·Firefox 미지원. @supports 폴백 없이 쓰면 iOS 사용자에게 레이아웃이 깨져 보일 수 있어요.
• lazy loading 기본값 논쟁: 표준화 논의 단계이며, 브라우저 기본값이 바뀌면 기존 사이트의 LCP 측정값이 흔들릴 수 있음.

5. 다음 단계 학습 방향

• Baseline 대시보드를 북마크해두고, 신기능 편입 시점을 분기별로 체크하는 습관을 들이세요.
• Container Queries 시리즈를 순서대로 훑으면 scroll-state()가 왜 나왔는지 흐름이 잡힙니다.
• 포스트 트레이닝·모델 파이프라인 쪽에 관심 있다면 Hugging Face TRL v1.0 릴리스 정리도 함께 보시길 추천합니다.

마무리

2026년 CSS는 "할 수 있는 게 너무 많아진" 상태예요. 중요한 건 무엇을 쓸 수 있느냐가 아니라 무엇을 안 써도 되는지를 판단하는 감각입니다. 위 4가지 중 최소 하나는 다음 스프린트에 실험해보시고, 결과를 팀 위키에 공유해보세요. 그게 가장 빠른 학습 루프입니다 🚀