이 편에서 하는 일

이 편은 파일을 고치지 않습니다. 대신 03편부터 만나는 모든 새 기능마다 “이거 지금 실제 서비스에 써도 되나?”를 스스로 확인하는 방법을 세웁니다. 이 과목은 <dialog>(2022년)부터 customizable <select>(2026년 기준 미도달)까지 지원 시기가 제각각인 기능을 다룹니다. 한 번 배운 지원 상태를 외우는 게 아니라, 여러분이 이 문서를 읽는 시점에 직접 다시 확인하는 절차를 배웁니다.

Baseline 세 단계

web.dev의 Baseline 은 웹 플랫폼 기능의 지원 상태를 세 단계로 나눕니다.

이 과목에서 <dialog>·popover·<details name>은 이미 Widely available입니다. 반면 customizable <select>(18편)는 2026년 9월 기준 Baseline에 아직 도달하지 못했습니다. 같은 “HTML 기능”이라도 단계가 다르면 실무에서 쓰는 방식이 완전히 달라집니다.

MDN 호환성 표 읽는 법

MDN의 모든 API·요소 문서 하단에는 “Browser compatibility” 표가 있습니다. 표에서 확인할 항목은 세 가지입니다.

1. 각 브라우저 열의 첫 지원 버전 숫자. 숫자가 비어 있거나 각주가 달려 있으면 아직 부분 지원입니다.
2. 표 위의 Baseline 배지. 초록(Widely) · 파랑(Newly) · 회색(Limited)으로 한눈에 단계를 알려줍니다.
3. 문서 상단의 “최종 업데이트” 또는 각주 날짜. 오늘 날짜와 비교해 최근 정보인지 확인합니다.

쉽게 말하면: 표의 초록 배지만 보고 넘어가지 말고, 배지 아래 실제 버전 숫자와 각주까지 읽는 것이 이 습관의 전부입니다.

@supports와 JS feature detection

Baseline 배지가 Newly이거나 Limited인 기능은 지원하지 않는 브라우저를 위한 폴백을 함께 설계합니다. CSS는 @supports, JavaScript는 기능 자체가 있는지 직접 검사하는 feature detection을 씁니다.

/* 지원 브라우저에서만 popover 관련 스타일 적용 */
@supports selector(:popover-open) {
  [popover]:popover-open {
    animation: fade-in 200ms ease;
  }
}

// portfolio/js/main.js (개념 예시, 아직 실제로 쓰지 않음)
if (typeof HTMLDialogElement.prototype.showModal === 'function') {
  // dialog API를 정상적으로 쓸 수 있는 환경
}

@supports는 CSS 속성 자체가 아니라 셀렉터 지원 여부를 검사할 때 selector() 함수를 함께 씁니다. :popover-open처럼 새 의사 클래스는 이 방식으로 검사합니다.

실습

직접 해보기

MDN에서 <selectedcontent> 문서를 찾아 호환성 표를 확인해 보세요. 18편에서 다룰 기능입니다. 지금 시점 배지가 무슨 색인지, 어떤 브라우저가 아직 지원하지 않는지 적어 보세요.

자주 하는 실수

확인 문제

참고 자료

• web.dev — Baseline 
• MDN — Browser compatibility data 
• MDN — @supports