Chrome 114의 새로운 기능

Adriana Jara

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

  • CSS text-wrap: balance를 사용하여 텍스트 레이아웃을 개선할 수 있습니다.
  • 최상위 사이트 (CHIPS)로 파티션을 나눈 쿠키가 여기에 나와 있습니다.
  • Popover API를 사용하면 팝오버를 더 쉽게 만들 수 있습니다.
  • 그 외에도 다양한 기능이 있습니다.

저는 아드리아나 자라입니다. Chrome 114의 새로운 개발자 기능을 자세히 살펴보겠습니다.

text-wrap:balance.

text-wrap: balance를 사용하여 텍스트 레이아웃을 개선합니다. 아래 애니메이션은 이 한 줄로 만들 수 있는 차이를 보여줍니다.

데모 사용해 보기

개발자는 텍스트의 최종 크기, 글꼴 크기, 언어를 알 수 없습니다. 텍스트 줄바꿈을 효과적으로 처리하려면 모든 변수가 필요합니다. 브라우저는 모든 요소를 알고 있으므로 text-wrap:balance를 사용하여 브라우저에 가장 균형 잡힌 줄 바꿈 솔루션을 찾도록 요청할 수 있습니다.

위의 두 예시가 함께 표시되어 있습니다. 하나는 불균형으로, 다른 하나는 균형으로 표시되어 있습니다.

균형 잡힌 텍스트 블록은 독자의 눈에 더 잘 띄게 됩니다. 사용자의 관심을 더 잘 끌 수 있고 전반적으로 가독성이 높습니다.

광고 제목 균형 조정은 text-wrap: balance의 기본 사용 사례입니다. 텍스트의 균형을 맞추는 데는 성능 비용이 들기 때문에 비용을 완화하기 위해 최대 4줄까지만 작동합니다.

텍스트 레이아웃을 개선하기 위한 샘플과 자세한 내용이 포함된 이 도움말을 확인하세요.

CHIPS: 독립적으로 파티셔닝된 상태의 쿠키

CHIPS (Cookies Having Independent Partitioned State): 새 쿠키 속성 Partitioned를 사용하여 최상위 사이트별로 분할된 서드 파티 쿠키를 선택할 수 있습니다.

CHIPS 이전에는 사용자가 사이트 A를 방문할 때 삽입된 사이트 C가 사용자의 머신에 쿠키를 설정할 수 있었습니다. 그런 다음 사용자가 사이트 C도 삽입된 사이트 B를 방문하면 사이트 C는 사이트 A에 설정된 것과 동일한 쿠키에 액세스할 수 있습니다. 이렇게 하면 사이트 C에서 사이트 A, B, 삽입된 모든 사이트에서 사용자의 탐색 활동을 컴파일할 수 있습니다.

파티션되지 않은 쿠키가 있는 사이트와 저장소를 보여주는 다이어그램

크로스 사이트 추적은 문제가 되지만, 쿠키 파티셔닝을 통해 개인 정보를 보호하는 방식으로 달성할 수 있는 유효한 크로스 사이트 쿠키 요구사항이 있습니다.

CHIPS를 사용하면 사용자가 사이트 A를 방문하고 사이트 C에 삽입된 콘텐츠가 Partitioned 속성으로 쿠키를 설정할 때 쿠키는 사이트 C에서 사이트 A에 삽입할 때 설정한 쿠키에 대해서만 파티션을 나눈 jar에 저장됩니다. 브라우저는 최상위 사이트가 A인 경우에만 이 쿠키를 전송합니다.

쿠키가 있는 사이트 및 파티션 스토리지를 보여주는 다이어그램

사용자가 새로운 사이트(예: 사이트 B)를 방문하면 사이트 C는 사이트 A에 C가 삽입되었을 때 설정된 쿠키를 받지 못합니다.

서드 파티 쿠키를 단계적으로 중단하는 절차에 관한 자세한 내용은 이 도움말을 참고하세요.

Popover API

Popover API를 사용하면 다른 모든 웹 앱 UI 위에 표시되는 일시적인 사용자 인터페이스 (UI) 요소를 더 쉽게 빌드할 수 있습니다.

여기에는 작업 메뉴, 양식 요소 추천, 콘텐츠 선택 도구, 교육 UI와 같은 사용자 상호작용 요소가 포함됩니다.

새로운 팝오버 속성을 사용하면 모든 요소가 상단 레이어에 자동으로 표시될 수 있습니다. 즉, 개발자는 더 이상 요소의 위치 지정, 스택, 포커스 또는 키보드 상호작용에 관해 걱정할 필요가 없습니다.

<dialog> 요소와 유사하지만 조용히 닫기 동작, 팝오버 상호작용 관리, 이벤트 지원, '모달' 모드가 없음 등 몇 가지 중요한 차이점이 있습니다.

자세한 내용은 이 도움말을 참고하세요.

그 외에도 다양한 기능 제공

물론 그 외에도 많은 기능이 있습니다.

  • DevTools를 사용하면 DWARF 지원을 통해 WebAssembly 앱에서 C 및 C++ 코드를 일시중지하고 디버그할 수 있습니다.
  • navigator.bluetooth.requestDevice()의 exclusionFilters 옵션을 사용하면 웹 개발자가 브라우저 선택 도구에서 일부 기기를 제외할 수 있습니다.
  • 배경 흐리게 처리의 오리진 트라이얼이 있습니다.

추가 자료

여기에는 일부 주요 내용만 포함되어 있습니다. Chrome 114의 추가 변경사항은 아래 링크를 확인하세요.

구독

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

저는 아드리아나 자라입니다. Chrome 115가 출시되는 대로 Chrome의 새로운 기능을 바로 알려드리겠습니다.