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 및 :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 조작 확인 를 참조하세요.

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

얼마 전 Web SQL에 대한 지원 중단 계획을 발표했습니다. 시작까지 남은 시간: Chrome 105, 웹 SQL은 비보안 컨텍스트에서 지원 중단됩니다.

비보안 컨텍스트에서 웹 SQL을 사용하는 경우 IndexDB로 마이그레이션해야 합니다. 다른 로컬 스토리지 컨테이너에서 실행하는 것이 좋습니다

그 외에도 다양한 기능 제공

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

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

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 105의 추가 변경사항

구독

최신 소식을 받아보려면 Chrome 개발자 YouTube 채널 새 동영상이 게시될 때마다 이메일 알림을 받게 됩니다.

저는 피트 르페이지입니다. Chrome 106이 출시되는 즉시 Chrome의 새로운 기능을 소개합니다.