저는 Google I/O에서 지난해 I/O에서 발표한 이후 Baseline이 어떻게 발전해 왔는지에 대한 뉴스를 공유했습니다. 또한 웹 플랫폼 대시보드, RUM Archive와의 통합, 향후 RUMvision과의 통합도 발표했습니다. 이 게시물에서는 강연에서 다룬 모든 리소스를 한곳으로 모읍니다.
웹 플랫폼 대시보드는 전체 웹 플랫폼과 상호 운용성을 향한 개별 기능의 여정을 볼 수 있는 흥미롭고 새로운 방법이며, 기준의 일부가 되었습니다. 자세한 내용은 웹 플랫폼 대시보드 발표를 참조하세요.
매일 사용하는 도구와 Baseline을 통합하는 것은 항상 이 프로젝트의 비전의 일부였습니다. Google은 브라우저 호환성을 다룰 때 많은 시간을 들이지 않아도 되도록 만들고자 합니다. RUM Archive 통합에 대해 자세히 알아보고 이 공간에서 곧 더 많은 도구 제공업체에 대한 소식을 전합니다.
Baseline을 처음 사용하는 경우
I/O에서 저는 최근 Baseline Newly Available의 일부가 된 12가지 웹 플랫폼 기능을 공유했습니다. 이러한 기능은 현재 Chrome, Edge, Firefox, Safari에서 사용할 수 있으며 개발을 간소화할 수 있는 소규모 추가 기능부터 컨테이너 쿼리 및 :has()와 같이 개발자가 가장 원하는 기능에 이르기까지 다양합니다.
컨테이너 쿼리 크기 조정
크기 컨테이너 쿼리를 사용하면 미디어 쿼리로 표시 영역의 크기만 타겟팅하는 것이 아니라 컨테이너의 너비 또는 인라인 크기에 따라 디자인을 변경할 수 있습니다. 이를 통해 레이아웃에 배치될 때 사용 가능한 공간을 기반으로 자체를 수정할 수 있는 더 많은 재사용 가능한 구성요소가 가능합니다. 반응형 디자인의 개념이 존재하는 한 거의 오랫동안 가장 많은 요청이 있었던 기능 중 하나였습니다.
- 2023년 2월에 새로 제공됩니다.
- 2025년 8월에 널리 제공됩니다.
안정적인 브라우저에 적합한 컨테이너 쿼리에서 MDN의 컨테이너 쿼리에 대해 자세히 알아보고, 컨테이너 쿼리 우수사례에서 다른 개발팀이 이러한 쿼리를 어떻게 활용할 수 있는지 알아보세요.
:has() selector
:has() 선택기는 상위 선택기, 즉 내부에 있는 요소를 기반으로 요소를 선택하는 방법 등 여러 해 동안 개발자들이 가장 많이 요청한 기능을 제공합니다. 하지만 :has()는 그것뿐만이 아닙니다.
컨테이너 쿼리와 마찬가지로 이 방법은 포함된 항목에 맞게 조정할 수 있는 단일 구성요소를 만들 수 있으므로 재사용 가능한 구성요소를 만들 때 매우 유용합니다.
- 2023년 12월에 새롭게 제공됩니다.
- 2026년 6월에 널리 제공됩니다.
MDN의 :has(), :has() 계열 선택기, :has() 우수사례에서 자세히 알아보세요.
CSS 그리드 레이아웃 하위 그리드
Subgrid를 사용하면 중첩된 그리드 레이아웃이 상위 요소의 트랙을 상속할 수 있습니다. 중첩된 그리드 내에서 항목을 더 잘 정렬할 수 있습니다.
- 2023년 12월에 새롭게 제공됩니다.
- 2026년 6월에 널리 제공됩니다.
MDN의 서브그리드 및 다양한 다른 리소스로 연결되는 CSS 하위 그리드에 대해 자세히 알아보세요.
CSS 중첩
최근 몇 년 동안 CSS는 개발자가 Sass와 같은 전처리기에 사용한 기능에서 아이디어를 얻었습니다. 예를 들어 CSS 변수라고도 하는 CSS 맞춤 속성은 색상 등의 변수를 한 곳에서 설정하고 CSS 전체에서 사용할 수 있는 광범위한 기능으로 이전에는 전처리기를 사용할 때만 사용할 수 있었습니다.
전처리기의 또 다른 기능은 중첩입니다. 관련 항목을 더 쉽게 그룹화할 수 있으므로 중첩을 사용하면 선택기의 반복을 피하고 CSS의 가독성을 높이는 데 도움이 됩니다.
- 2023년 8월에 새로 출시됨
- 2026년 2월에 널리 제공됨
MDN의 CSS 중첩 및 CSS 중첩에 관해 자세히 알아보세요.
HTML <search> 요소
검색은 많은 사이트와 애플리케이션에서 나타나는 무언가이지만 최근까지는 페이지에서 검색이나 필터링에 사용되는 마크업 기능이 없었습니다. <search> 요소는 이러한 용도로 설계되었습니다. 내부에 검색 양식 또는 결과 필터링에 사용되는 기타 요소를 배치할 수 있는 요소로 존재합니다.
- 2023년 10월에 새로 출시됨
- 2026년 4월에 널리 제공됨
MDN의 <search> 요소에 관해 자세히 알아보세요.
반응형 동영상
이 기능은 <video> 요소 내에서 <source> 요소를 사용하여 다양한 크기의 이미지를 제공하는 것과 동일한 방식으로 적절한 크기의 동영상을 여러 기기에 제공하는 기능을 말합니다.
- 2023년 11월에 새로 출시됨
- 2026년 5월에 널리 제공됨
미디어 또는 이미지 소스 요소와 반응형 동영상 사용 방법에서 MDN에 관해 자세히 알아보세요.
inert 속성
요소가 비활성 상태인 경우 상호작용할 수 없습니다. 예를 들어 대화상자 뒤의 페이지에 있는 대화상자 창 요소를 열 때 이를 클릭하거나 탭으로 이동할 수 없습니다. inert 속성을 사용하면 UI의 모든 부분에서 무성성을 제어할 수 있습니다.
요소에 inert 속성을 적용하면 요소를 클릭해도 클릭 이벤트가 실행되지 않고 요소가 포커스를 얻을 수 없으며 요소와 그 콘텐츠는 접근성 트리에서 제외되므로 보조 기술에서 숨겨집니다.
- 2023년 4월에 새로 출시됨
- 2025년 10월에 널리 제공됨
MDN의 inert와 inert 속성도 자세히 알아보세요.
color-mix() 함수
color-mix() 함수를 사용하면 사용 가능한 모든 색상 공간에서 한 색상을 다른 색상으로 혼합할 수 있습니다. 여기에는 최근에 Baseline Newly Available의 일부가 된 새로운 색상 모델(LCH, Lab, OKLCH, OKLab)이 모두 포함됩니다.
- 2023년 4월에 새로 출시됨
- 2025년 10월에 널리 제공됨
MDN 및 CSS color-mix()에서 color-mix()에 관해 자세히 알아보세요. 또한 CSS에서 사용할 수 있는 새로운 색상 모델을 모두 다루는 고화질 CSS 색상 가이드도 제공하고 있습니다. 또한
gradient.style을 확인하여 새로운 색상을 활용하고
아름다운 그라데이션을 만들어 보세요.
:user-valid 및 :user-invalid
의사 클래스 :valid 및 :invalid는 브라우저에서 널리 사용되며 양식 요소가 현재 적용되는 제약 조건 규칙에 따라 유효한지 또는 유효하지 않은지를 나타냅니다. 따라서 이메일 유형의 필드가 있고 필드에 이름이 포함되어 있으면 :invalid 의사 클래스가 이 필드를 선택하고 수정해야 함을 나타내는 색상 또는 아이콘을 추가할 수 있습니다.
:valid 및 :invalid 유사 클래스의 문제는 사용자가 양식과 상호작용하기 전에 적용된다는 것입니다. 따라서 필요한 양식 요소가 있는데 사용자가 아직 양식 요소를 완료하지 않은 경우 잘못된 스타일이 표시됩니다. 일반적으로 개발자는 사용자가 잘못 입력하거나
입력란을 건너뛴 후 비워둔 경우에만 잘못된 스타일을
표시하려고 합니다.
이러한 상황에서 사용자 환경을 개선하려면 :user-valid 및 :user-invalid 의사 클래스를 사용하세요. 이는 사용자가 필드와 상호작용한 후에만 일치한다는 점을 제외하면 거의 동일하게 작동합니다. 따라서 필수 필드의 예에서는 사용자가 필드를 탭하거나 클릭하여 필드로 이동한 후 필드를 완성하지 않고 다른 곳으로 이동해야 잘못된 상태가 표시됩니다.
- 2023년 10월에 새로 출시됨
- 2026년 4월에 널리 제공됨
MDN에서 :user-valid 및 :user-invalid에 대해 자세히 알아보세요.
압축 스트림
많은 웹 애플리케이션은 ZIP 파일과 같은 압축된 형식으로 사용자에게 다운로드를 제공해야 합니다. 이전에는 모든 사용자를 위해 애플리케이션 크기를 늘리는 코드인 압축 라이브러리를 포함해야 했습니다. 압축 스트림 API는 데이터 스트림을 압축하는 기본 제공 방법을 제공합니다.
- 2023년 5월에 새로 출시됨
- 2025년 11월에 널리 제공됨
MDN의 압축 스트림 API 및 이제 모든 브라우저에서 압축 스트림이 지원됨에서 자세히 알아보세요.
선언적 Shadow DOM
선언적 Shadow DOM은 HTML에서 섀도우 트리를 만드는 새로운 방법으로, 이전에는 attachShadow()를 사용하여 JavaScript에서만 섀도 트리를 만들 수 있었습니다. HTML에서 이 작업을 하는 기능은 이메일 클라이언트와 같이 JavaScript가 실행되지 않을 수 있는 환경에서 특히 유용합니다. 이는 서버 측에서 렌더링된 웹 구성요소에도 중요합니다.
- 2024년 2월에 새로 출시됨
- 2026년 8월에 널리 제공됨
선언적 Shadow DOM에 관해 자세히 알아보세요.
팝오버 API
팝업은 웹 애플리케이션의 다양한 작업에 사용됩니다. 예를 들어 메뉴, 맞춤 토스트 메시지 알림, 콘텐츠 선택 도구가 있습니다. 이제 Popover API를 사용하여 장식적인 방식으로 이러한 팝업을 만드는 방법이 내장되어 있습니다.
- 2024년 4월에 새로 출시됨
- 2026년 10월에 널리 제공됨
MDN의 팝오버 API, 기준에 있는 팝오버 API, 팝오버 우수사례에 대해 자세히 알아보세요.
이 12가지 기능은 Baseline Newly Available의 일부일 뿐이며 이 사이트에서 자세히 알아볼 수 있습니다. Baseline 2023에 포함된 모든 기능과 Baseline 2024에 포함된 기능 모음에 대해 알아보세요.