Chrome 118의 새로운 기능

Adriana Jara

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

• @scope CSS 규칙으로 구성요소 내에 특정 스타일을 선언합니다.
• 새로운 미디어 기능인 prefers-reduced-transparency이(가) 있습니다.

• DevTools의 Sources 패널에 개선사항이 있습니다.

• 이 외에도 다양한 기능이 준비되어 있습니다.

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

CSS @scope 규칙

@scope at-rule을 사용하면 개발자가 지정된 범위 지정 루트로 스타일 규칙의 범위를 지정하고 범위 지정 루트의 근접도에 따라 요소의 스타일을 지정할 수 있습니다.

@scope를 사용하면 근접성을 기반으로 스타일을 재정의할 수 있습니다. 이는 소스 순서와 특정성에만 의존하여 적용되는 일반적인 CSS 스타일과 다릅니다. 다음 예에는 두 가지 테마가 있습니다.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

범위가 없으면 적용된 스타일이 마지막으로 선언된 스타일입니다.

.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

범위를 사용하면 중첩된 요소를 가질 수 있으며 적용되는 스타일은 가장 가까운 상위 항목의 스타일입니다.

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

또한 Scope를 사용하면 길고 복잡한 클래스 이름을 작성하지 않아도 되며, 더 큰 프로젝트를 쉽게 관리하고 이름 충돌을 피할 수 있습니다.

<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}

<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

범위를 사용하면 중첩된 특정 항목에 스타일을 지정하지 않고 구성요소의 스타일을 지정할 수 있습니다. 범위 지정 스타일이 적용되지 않는 '구멍'이 있을 수 있습니다.

다음 예에서와 같이 텍스트에 스타일을 적용하고 컨트롤을 제외하거나 그 반대로 적용할 수 있습니다.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

자세한 내용은 CSS @scope at-rule로 선택자의 도달범위 제한 도움말을 참조하세요.

미디어 기능 prefers-reduced-transparency개

Google에서는 미디어 쿼리를 사용하여 사용자의 환경설정과 기기 조건에 맞는 사용자 환경을 제공합니다. 이 Chrome 버전은 사용자 환경을 조정하는 데 사용할 수 있는 새로운 값(prefers-reduced-transparency)을 추가합니다.

미디어 쿼리로 테스트할 수 있는 새로운 값은 prefers-reduced-transparency입니다. 이를 통해 개발자는 OS에서 투명도를 낮추기 위해 사용자가 선택한 환경설정에 맞게 웹 콘텐츠를 조정할 수 있습니다(예: macOS의 투명도 줄이기 설정). 유효한 옵션은 reduce 또는 no-preference입니다.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

또한 DevTools에서 어떻게 표시되는지 확인할 수 있습니다.

자세한 내용은 prefers-reduced-transparency 문서를 확인하세요.

수정: 이 도움말의 이전 버전에는 이번 출시에 포함된 새로운 scripting 미디어 기능에 관한 언급이 있었습니다. 실제로는 버전 120에서 출시됩니다.

DevTools의 소스 패널 개선

DevTools의 Sources 패널에 다음과 같은 개선사항이 적용되었습니다. workspace 기능이 일관성을 개선했으며, 특히 Sources > Filesystem 창의 이름을 다른 UI 텍스트와 함께 Workspace로 변경함으로써 Sources > Workspace를 통해 DevTools의 변경사항을 소스 파일에 직접 동기화할 수 있습니다.

또한 이제 드래그 앤 드롭으로 Sources 패널 왼쪽의 창을 재정렬할 수 있으며 Sources 패널에서 module, importmap, speculationrules 스크립트 유형 내에서 인라인 JavaScript를 예쁘게 인쇄하고 importmap 및 speculationrules 스크립트 유형의 구문을 강조 표시할 수 있습니다. 두 스크립트 유형 모두 JSON을 포함합니다.

Chrome 118 DevTools 업데이트에 관한 자세한 내용은 DevTools의 새로운 기능을 참고하세요.

그 외에도 다양한 기능 제공

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

• 이제 WebUSB API가 브라우저 확장 프로그램으로 등록된 서비스 워커에 노출되어 개발자가 확장 프로그램 이벤트에 응답할 때 이 API를 사용할 수 있습니다.

• 개발자가 결제 요청 절차의 불편을 줄일 수 있도록 Payment Request 및 Secure Payment Confirmation에서 사용자 활성화 요구사항이 삭제됩니다.

• Chrome의 출시 주기가 짧아지고 있습니다. 안정화 버전은 3주마다 출시되며, Chrome 119부터 3주 후에 출시될 예정입니다.

추가 자료

여기에서는 몇 가지 주요 사항만 다룹니다. 아래 링크에서 Chrome 118의 추가 변경사항을 확인하세요.

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

구독

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

안녕하세요, 아드리아나 자라님. Chrome 119가 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.