Chrome 118의 새로운 기능

Adriana Jara

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

• @scope CSS 규칙을 사용하여 구성요소 내에서 특정 스타일을 선언합니다.
• 새로운 미디어 기능: prefers-reduced-transparency

• DevTools의 Sources 패널이 개선되었습니다.

• 그 밖에도 다양한 기능이 있습니다.

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

CSS @scope 규칙

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

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

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

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

@scope 없이

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

범위를 사용하면 중첩된 요소가 있을 수 있으며 가장 가까운 상위 요소의 스타일이 적용됩니다.

@scope 사용

@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;
}

@scope 사용

<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입니다. 이 값을 사용하면 개발자가 macOS의 투명도 감소 설정과 같이 OS에서 투명도를 줄이기 위해 사용자가 선택한 환경설정에 맞게 웹 콘텐츠를 조정할 수 있습니다. 유효한 옵션은 reduce 또는 no-preference입니다.

.translucent {
  opacity: 0.4;
}

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

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

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

수정사항: 이 도움말의 이전 버전에서는 이 버전에 포함된 새로운 scripting 미디어 기능을 언급했습니다. 실제로는 버전 120에서 사용할 수 있습니다.

DevTools의 소스 패널 개선

DevTools의 소스 패널에 다음과 같은 개선사항이 적용되었습니다. 작업공간 기능의 일관성이 개선되었습니다. 특히 소스 > 파일 시스템 창의 이름을 다른 UI 텍스트와 함께 작업공간으로 바꾸었습니다. 소스 > 작업공간을 사용하면 DevTools에서 변경한 사항을 소스 파일에 직접 동기화할 수도 있습니다.

또한 이제 드래그 앤 드롭하여 소스 패널 왼쪽의 창을 재정렬할 수 있으며, 소스 패널은 이제 module, importmap, speculationrules 스크립트 유형 내에서 인라인 JavaScript를 멋진 형식으로 출력하고, JSON을 포함하는 importmap 및 speculationrules 스크립트 유형의 구문을 강조 표시할 수 있습니다.

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

그 외에도 다양한 기능 제공

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

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

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

• Chrome의 출시 주기가 점점 짧아지고 있습니다. 앞으로 3주마다 안정화 버전이 출시될 예정이며, 3주 후에는 Chrome 119가 출시될 예정입니다.

추가 자료

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

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

구독

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

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