CSS Baseline 보는 법: 2026년 안전한 속성 사용 기준

핵심 요약

검증일: 2026년 7월 19일. CSS Baseline은 “모든 환경에서 무조건 안전하다”는 인증이 아니라, 핵심 브라우저 집합에서 웹 기능의 상호 운용 가능 시점을 요약한 기준입니다. 실무에서는 Baseline 상태를 출발점으로 삼고, 실제 사용자 브라우저·WebView·보조 기술·성능 요구와 폴백을 함께 확인해야 합니다.

Baseline 상태를 정확히 읽는 법

web.dev의 Baseline 개요는 웹 기능을 Limited availability, Newly available, Widely available의 세 상태로 설명합니다. 판단 대상인 핵심 브라우저는 Chrome 데스크톱·Android, Edge 데스크톱, Firefox 데스크톱·Android, Safari macOS·iOS입니다.

상태	뜻	실무 해석
Limited availability	핵심 브라우저 전체에서 아직 지원되지 않음	기본 UI를 먼저 만들고 기능 감지와 폴백을 필수로 둡니다.
Newly available	핵심 브라우저의 최신 안정 버전에서 상호 운용 가능	최신 브라우저 중심 서비스라면 후보가 되지만, 구형 기기와 이전 버전 비중을 확인합니다.
Widely available	상호 운용 가능 시점부터 30개월이 지남	대부분의 사이트가 채택하기 쉬운 기준이지만, 자체 사용자 데이터와 테스트는 여전히 필요합니다.

따라서 “Baseline 지원”이라는 한 문장보다 어느 상태인지, 언제 확인했는지, 프로젝트가 어떤 브라우저 범위를 지원하는지를 함께 기록하는 편이 정확합니다. 특히 Newly available은 최신 안정 버전 기준이므로 장기간 업데이트되지 않은 기기까지 포함한다는 뜻이 아닙니다.

CSS Baseline 보는 법: 2026년 안전한 속성 사용 기준 핵심 개념을 설명하는 첫 번째 본문 이미지

Baseline이 보장하지 않는 것

MDN의 Baseline compatibility 설명은 Baseline을 브라우저 지원의 요약으로 정의합니다. 접근성, 사용성, 성능, 보안 검증을 대신하지 않으며 다음 환경은 별도 확인 대상입니다.

지원 범위보다 오래된 브라우저와 운영체제
운영체제 WebView, 인앱 브라우저, 임베디드 브라우저처럼 핵심 집합에 포함되지 않은 런타임
스크린 리더, 키보드 탐색, 고대비 모드 같은 보조 기술과 접근성 조합
저사양 기기의 렌더링 비용, 메모리, 애니메이션 성능
제품의 보안 정책, 콘텐츠 정책, 규제 요구사항

또한 Baseline 상태와 W3C 명세의 성숙도는 같은 축이 아닙니다. Baseline은 구현 가용성을 요약하고, W3C 명세는 문법과 동작을 정의합니다. 예를 들어 CSS Conditional Rules의 @supports와 CSS Containment의 컨테이너 쿼리를 읽으면 기능의 의미를 확인할 수 있지만, 실제 채택 여부는 브라우저 데이터와 제품 요구를 함께 봐야 합니다.

프로젝트의 지원 기준 정하기

이동 목표와 고정 연도 목표

Baseline 목표 선택 가이드는 목표를 이동 목표와 고정 목표로 나눕니다. baseline widely available처럼 시간이 지나며 포함 기능이 바뀌는 목표는 자동으로 현대화되지만, 빌드 시점에 결과가 달라질 수 있습니다. baseline 2024 같은 연도 목표는 재현성이 높지만 시간이 지나면 낡으므로 정기 재평가가 필요합니다.

프로젝트 상황	권장 출발점	추가 조건
일반 공개 서비스	Widely available 또는 사용자 데이터가 지지하는 과거 연도	분기별 RUM과 오류율을 검토합니다.
최신 브라우저가 전제된 내부 도구	Newly available	관리형 기기의 업데이트 정책을 문서화합니다.
장기 유지·규제 환경	고정 Baseline 연도	업그레이드 일정과 예외 브라우저 목록을 둡니다.
WebView 중심 앱	Baseline만으로 결정하지 않음	실제 OS·WebView 버전 매트릭스를 기준으로 삼습니다.

2026년 7월 19일 현재 web.dev는 Baseline 2026을 아직 형성 중인 연도 기능 집합으로 표시합니다. “2026”이라는 숫자만 보고 연초부터 모든 기능이 안전했다고 해석하면 안 됩니다.

Browserslist로 정책을 실행 가능한 설정으로 남기기

web.dev의 Browserslist 가이드에 따르면 Newly, Widely, 연도 목표와 downstream 브라우저 포함 쿼리를 사용할 수 있습니다. 다음은 예시 정책이며, 프로젝트의 실제 사용자 데이터에 맞춰 하나를 선택해야 합니다.

{
  "browserslist": [
    "baseline widely available with downstream"
  ]
}

설정 문자열만 추가해도 모든 도구가 자동으로 같은 검사를 수행하는 것은 아닙니다. Autoprefixer, Babel, PostCSS, ESLint, Stylelint 등 소비 도구와 플러그인의 버전을 함께 고정하고, CI에서 해석 결과를 확인해야 합니다.

속성별 채택 판단 절차

요구사항을 먼저 씁니다. 새 기능이 없을 때도 콘텐츠와 핵심 동작이 가능한지 정합니다.
정확한 기능 단위를 확인합니다. 비슷한 이름의 속성 전체가 아니라 실제 사용하는 속성·값·의사 클래스·API의 MDN 호환성 표와 Baseline 배지를 봅니다.
명세로 의미를 확인합니다. 파싱 지원과 기대 동작을 혼동하지 않도록 W3C 정의와 제약을 읽습니다.
사용자 분포를 대조합니다. RUM 또는 분석 데이터에서 브라우저·OS·WebView 버전을 확인합니다.
폴백과 기능 감지를 설계합니다. 지원되지 않을 때도 읽기·탐색·제출 같은 핵심 흐름이 유지되어야 합니다.
회귀 테스트를 자동화합니다. 최소 지원 버전과 최신 안정 버전에서 스크린샷, 동작, 접근성 검사를 반복합니다.

컨테이너 쿼리를 점진적으로 적용하는 예

기본 레이아웃을 먼저 선언하고, 브라우저가 container-type을 이해할 때만 향상된 레이아웃을 적용합니다. @supports는 선언 지원 여부를 검사할 뿐, 디자인 품질이나 접근성을 보증하지는 않습니다.

.card-list {
  display: grid;
  gap: 1rem;
}

.card {
  display: block;
}

@supports (container-type: inline-size) {
  .card-list {
    container-type: inline-size;
  }

  @container (min-width: 480px) {
    .card {
      display: grid;
      grid-template-columns: 10rem 1fr;
      gap: 1rem;
    }
  }
}

컨테이너 쿼리의 개념과 미디어 쿼리와의 역할 차이는 미디어 쿼리와 컨테이너 쿼리 비교에서 이어서 확인할 수 있습니다.

CSS Baseline 보는 법: 2026년 안전한 속성 사용 기준 적용 흐름을 설명하는 두 번째 본문 이미지

예외 환경과 폴백 원칙

예외	왜 Baseline만으로 부족한가	대응
오래된 사내 브라우저	Newly 기준보다 이전 버전일 수 있음	지원 버전을 고정하고 핵심 흐름용 기본 스타일을 유지합니다.
모바일 앱 WebView	핵심 브라우저 집합 밖의 업데이트 주기를 따름	앱 최소 OS와 실제 WebView 엔진에서 테스트합니다.
스크린 리더·키보드	브라우저 파싱 지원과 보조 기술 동작은 별개	의미 구조, 초점 순서, 이름·역할·상태를 직접 검증합니다.
저사양 기기	지원되더라도 렌더링 비용이 클 수 있음	성능 예산을 두고 애니메이션·필터·레이아웃 비용을 측정합니다.
기능이 콘텐츠 접근을 좌우함	실패 시 핵심 정보가 사라질 수 있음	기본 HTML과 CSS에 콘텐츠를 남기고 향상 기능을 선택적으로 더합니다.

회귀 검증 체크리스트

배포 전에는 “배지가 초록색인가”보다 아래 증거가 남는지 확인합니다.

지원 정책: baseline widely available with downstream
검증일: 2026-07-19
최소 환경: 프로젝트 분석 데이터로 확정
최신 환경: Chrome / Edge / Firefox / Safari 안정 버전
예외 환경: iOS·Android WebView / 인앱 브라우저 / 보조 기술
실패 시 동작: 기본 콘텐츠와 핵심 조작 유지

각 새 기능의 MDN Baseline 상태와 호환성 표를 변경 요청에 링크했는가
Browserslist 결과와 빌드·린트 도구 버전을 잠갔는가
지원되지 않는 환경에서 폴백이 실제로 보이는가
키보드, 스크린 리더, 확대, 모션 감소 설정을 확인했는가
이미지·레이아웃 기본 점검은 HTML·CSS 이미지 체크리스트로 검증했는가
모션을 사용한다면 motion-reduce 적용 기준까지 확인했는가

기준 변경 이력

날짜	확인한 변화	이 글에 미치는 영향
2023-12-05	web.dev가 초기 “현재·이전 주요 버전” 정의에서 Newly와 Widely의 두 단계 및 모바일 핵심 브라우저를 명시하는 정의로 갱신	오래된 설명 대신 현재의 두 단계 정의를 사용합니다.
2025-09-17	Baseline용 Browserslist 안내가 갱신됨	Newly, Widely, 연도, downstream 쿼리를 실행 가능한 정책 예로 반영합니다.
2026-03-27	이 글의 최초 게시	2026이라는 연도만으로 안전성을 단정하지 않도록 재검토 대상이 됩니다.
2026-07-19	공식 문서, 라이브 링크, 이미지와 예제 문법을 재검증	Baseline 2026은 형성 중임을 명시하고 잘못 인코딩된 괄호 예제를 바로잡았습니다.