Chrome 118의 새로운 기능

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

저는 아드리아나 자라입니다. 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>

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

@scope 없이
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

두 개의 링크가 있습니다. 첫 번째 링크에는 &#39;I&#39;m lightpink!&#39;라고 표시되고 두 번째 링크에는 &#39;Different pink&#39;라고 표시됩니다. 두 링크 모두 실제로 연한 분홍색이며 링크 아래의 텍스트에는 소스 순서 선언 스타일이 표시됩니다.

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

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

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

링크 2개, 첫 번째 링크에는 &#39;I&#39;m lightpink!&#39;라고, 두 번째 링크에는 &#39;Different pink&#39;라고 표시되어 있습니다. 두 번째 링크는 더 진한 분홍색이며, 상위 요소 스타일에 가장 가까운 링크 텍스트 아래에 있으며 옆에 녹색 체크표시가 있습니다.

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

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

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

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

위의 html 표현으로, 첫 번째 및 세 번째 div 옆에 범위 내 단어가 있고 두 번째 및 네 번째 div 옆에 제외된 단어가 있습니다.

<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을 포함하는 importmapspeculationrules 스크립트 유형의 구문을 강조 표시할 수 있습니다.

추측 규칙 스크립트 유형의 형식 지정 및 구문 강조 표시 전과 후

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

그 외에도 다양한 기능 제공

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

추가 자료

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

구독

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

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