Chrome 105의 새로운 기능

Pete LePage

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

저는 피트 레페이지입니다. 이제 Chrome 105의 개발자를 위한 새로운 기능을 살펴보겠습니다

컨테이너 쿼리 및 :has() CSS 속성

가장 많은 요청이 있었던 기능 중 하나인 컨테이너 쿼리는 Chrome 105에 출시되었습니다. 개발자가 상위 선택기를 쿼리하여 크기 및 스타일 지정 정보를 확인할 수 있으므로 하위 요소가 페이지의 어디에 있든 관계없이 반응형 스타일 지정 로직을 소유할 수 있습니다.

표시 영역의 크기가 아닌 컨테이너 크기를 기준으로 평가한다는 점을 제외하면 @media 쿼리와 유사합니다.

컨테이너 쿼리와 미디어 쿼리 비교

컨테이너 쿼리를 사용하려면 상위 요소에 포함을 설정해야 합니다. 예를 들어 이미지와 텍스트가 포함된 카드가 있을 수 있습니다.

2열 카드 1개.

컨테이너 쿼리를 만들려면 카드 컨테이너에서 container-type를 설정합니다. container-type를 inline-size로 설정하면 상위 요소의 inline-direction 크기를 쿼리합니다.

.card-container {
  container-type: inline-size;
}

이제 이 컨테이너를 사용하여 @container로 하위 요소에 스타일을 적용할 수 있습니다.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

이 경우 container가 400px 미만이면 단일 열 레이아웃으로 전환됩니다.

CSS :has() 의사 클래스

CSS :has() 의사 클래스를 사용하면 한 단계 더 나아갈 수 있습니다. 이를 통해 상위 요소에 특정 매개변수가 있는 하위 요소가 포함되어 있는지 확인할 수 있습니다.

예를 들어 p:has(span)는 내부에 스팬이 있는 단락 선택기를 나타냅니다. 이를 사용하여 상위 단락 자체 또는 상위 단락 내의 모든 항목에 스타일을 지정할 수 있습니다. 또는 figure:has(figcaption)를 사용하여 캡션이 포함된 그림 요소의 스타일을 지정할 수 있습니다.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

자세한 설명과 재미있는 데모는 Una의 문서 @container and :has(): 두 가지 강력한 새 반응형 API를 확인하세요.

새니타이저 API

대부분의 웹 앱은 신뢰할 수 없는 문자열을 처리하는 경우가 많지만 콘텐츠를 안전하게 렌더링하는 것은 까다로울 수 있습니다. 충분히 주의하지 않으면 실수로 교차 사이트 스크립팅 취약점을 만들 수 있습니다.

도움이 되는 DomPurify와 같은 라이브러리가 있지만 약간의 유지보수 부담이 추가됩니다. HTML Sanitizer API는 플랫폼에 제거 기능을 구축하여 교차 사이트 스크립팅 취약점의 수를 줄이는 데 도움이 됩니다.

사용하려면 Sanitizer의 새 인스턴스를 만드세요. 그런 다음 정리된 콘텐츠를 삽입할 요소에서 setHTML()를 호출합니다.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Sanitizer API는 기본적으로 안전하고 맞춤설정이 가능하도록 설계되었으므로 특정 요소 삭제 또는 다른 요소 허용과 같은 다양한 구성 옵션을 지정할 수 있습니다.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

자세한 내용은 Sanitizer API를 사용한 안전한 DOM 조작을 참고하세요.

비보안 컨텍스트용 웹 SQL 지원 중단

얼마 전 Google에서는 웹 SQL 지원을 중단한다는 계획을 발표했습니다. Chrome 105부터 웹 SQL이 비보안 컨텍스트에서 지원 중단됩니다.

비보안 컨텍스트에서 웹 SQL을 사용하는 경우 최대한 빨리 IndexDB 또는 다른 로컬 스토리지 컨테이너로 마이그레이션해야 합니다.

그 외에도 다양한 기능 제공

물론 더 많은 기능이 있습니다.

  • 이제 웹 앱 매니페스트를 업데이트하여 데스크톱과 모바일 모두에서 설치된 PWA의 이름을 업데이트할 수 있습니다.
  • 멀티스크린 창 배치 API는 정확한 화면 이름 라벨을 가져옵니다.
  • 이제 창 컨트롤 오버레이 API를 사용할 수 있습니다. 이를 통해 PWA는 기존의 전체 너비 제목 표시줄을 작은 오버레이로 전환하여 앱과 같은 느낌을 더할 수 있습니다. 따라서 맞춤 콘텐츠를 제목 표시줄 영역에 배치할 수 있습니다.

추가 자료

여기에서는 주요 특징 중 일부만 다루었습니다. 아래 링크에서 Chrome 105의 추가 변경사항을 확인하세요.

구독

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

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