Chrome 99의 새로운 기능

Pete LePage

다음 사항에 유의하시기 바랍니다.

• Chrome 및 Firefox의 버전 100 출시까지 몇 주만 남았습니다.
• CSS 계층 구조 레이어를 사용하면 CSS를 더 효과적으로 제어하고 스타일 특정 충돌을 방지할 수 있습니다.
• showPicker() 메서드를 사용하면 date, color, datalist과 같은 <input> 요소의 브라우저 선택 도구를 프로그래매틱 방식으로 표시할 수 있습니다.
• 그 밖에도 다양한 기능이 있습니다.

저는 피트 르페이지입니다. Chrome 99의 개발자용 새로운 기능을 자세히 살펴보겠습니다.

Chrome 100 및 Firefox 100

Chrome 100은 2022년 3월 말 (2022년)에 출시되고 Firefox 100은 5월 초에 출시됩니다. 두 버전 모두 주요 버전 번호의 주요 시점이며 3자리로 이월됩니다. 하지만 코드에서 두 자리 숫자를 예상하는 경우 새 버전 번호로 인해 문제가 발생할 수 있습니다.

버전 번호를 확인하거나 사용자 에이전트 문자열을 파싱하는 모든 코드는 문제가 없는지 확인해야 합니다.

Chrome에서 #force-major-version-to-100 플래그는 현재 버전 번호를 100으로 변경합니다.

Firefox Nightly의 설정 메뉴에서 'Firefox 100 User-Agent 문자열' 옵션을 사용 설정할 수 있습니다. 모든 것이 예상대로 작동하는지 확인할 수 있도록 사이트를 테스트하는 것이 좋습니다.

자세한 내용은 Chrome 및 Firefox 메이저 버전 100 출시 예정을 확인하세요.

CSS 계층 구조 레이어

CSS 계층 구조 레이어 및 CSS @layer 규칙에 대한 지원이 Chrome 99에서 제공됩니다. 스타일별 특이성 충돌을 방지하기 위해 CSS 파일을 더 명시적으로 제어할 수 있습니다. 이는 대규모 코드베이스, 디자인 시스템, 애플리케이션에서 서드 파티 스타일을 관리할 때 특히 유용합니다.

CSS 캐스케이드에 새로운 레이어를 도입합니다. 레이어 스타일을 사용하면 레이어의 우선순위가 항상 선택기의 특정성을 능가합니다.

.card 내의 .post 내에서 링크의 스타일을 지정하려는 경우 더 구체적인 선택기가 적용됩니다. @layer 규칙을 사용하면 각 스타일의 고유성을 더 명시적으로 지정하고 카드의 링크 스타일이 게시물의 링크 스타일보다 우선 적용되도록 할 수 있습니다.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

이는 계단식 우선순위 때문입니다. 계층화된 스타일은 새로운 계단식 평면을 만듭니다.

CSS @layer 규칙을 사용하는 계층 캐스케이딩은 Chrome 99, Firefox 97, Safari 15.4 베타에서 지원됩니다. 자세한 내용은 브라우저에 캐스케이드 레이어가 도입됩니다를 참고하세요.

입력 요소의 showPicker()

오랫동안 날짜 선택 도구를 표시하려면 맞춤 위젯 라이브러리 또는 해킹을 사용해야 했습니다. HTML InputElements에 새로운 showPicker() 메서드가 있습니다. date뿐만 아니라 선택 도구가 있는 time, color, 기타 <input> 요소에도 브라우저 선택 도구를 표시하는 표준 방법입니다.

이 기능을 사용하려면 <input> 요소에서 showPicker()를 호출합니다. 이 예에서는 try…catch 블록으로 래핑했습니다. 이렇게 하면 브라우저가 API를 지원하지 않거나 선택 도구를 표시할 수 없는 경우 대체를 제공할 수 있습니다. 따라서 사용자는 계속해서 우수한 환경을 이용할 수 있습니다.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

showPicker()를 사용할 수 있는 다양한 <input> 유형과 자세한 내용은 날짜, 시간, 색상, 파일의 브라우저 선택기 표시를 참고하세요.

그 외에도 다양한 기능 제공

물론 이 외에도 많은 것이 있습니다.

Canvas2D API가 업데이트되어 다음과 같은 새로운 기능이 추가되었습니다.

• ContextLost 및 ContextRestored의 두 가지 새로운 이벤트
• willReadFrequently 옵션
• 더 많은 CSS 텍스트 수정자 지원
• 다양한 기능을 활용해 보세요.

PWA가 어두운 모드용 웹 앱 매니페스트에서 대체 색상을 제공할 수 있는 새로운 오리진 트라이얼이 있습니다.

이제 필기 인식 API가 출시되었습니다.

추가 자료

여기에는 주요 내용 중 일부만 다룹니다. Chrome 99의 추가 변경사항은 아래 링크를 확인하세요.

• Chrome DevTools의 새로운 기능 (99)
• Chrome 99 지원 중단 및 삭제
• Chrome 99의 ChromeStatus.com 업데이트
• Chromium 소스 저장소 변경사항 목록
• Chrome 출시 캘린더

구독

최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.

저는 Pete LePage입니다. Chrome 100이 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.