다음 사항에 유의하시기 바랍니다.
- 세 가지 새로운 CSS 기능을 통해 원활한 시작 및 종료 애니메이션을 쉽게 추가할 수 있습니다.
- 배열 그룹화를 사용하여 고차 데이터 세트를 계산합니다.
- DevTools를 사용하면 로컬 재정의가 더 쉬워집니다.
- 이 외에도 다양한 기능이 제공됩니다.
저는 아드리아나 자라입니다. Chrome 117의 개발자를 위한 새로운 기능을 자세히 살펴보겠습니다.
들어가기 및 나가기 애니메이션을 위한 새로운 CSS 기능.
이러한 세 가지 새로운 CSS 기능으로 시작 및 종료 애니메이션을 쉽게 추가하고 대화상자 및 팝오버와 같은 상단 레이어 닫을 수 있는 요소 간에 부드럽게 애니메이션을 적용할 수 있습니다.
첫 번째 특성은 transition-behavior
입니다. display
와 같은 개별 속성을 전환하려면 transition-behavior
에 allow-discrete
값을 사용합니다.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
그런 다음 @starting-style
규칙을 사용하여 display: none
에서 최상위 레이어로 항목 효과를 애니메이션 처리합니다. @starting-style
를 사용하여 요소가 페이지에서 열리기 전에 브라우저가 조회할 수 있는 스타일을 적용합니다.
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
마지막으로 상단 레이어에서 popover
또는 dialog
를 페이드 아웃하려면 전환 목록에 overlay
속성을 추가합니다. 전환 또는 애니메이션에 오버레이를 포함하여 나머지 지형지물과 함께 오버레이에 애니메이션을 적용하고 애니메이션 작업 시 상단 레이어에 유지되도록 합니다. 이렇게 하면 훨씬 더 매끄럽게 표시됩니다.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
이러한 기능을 사용하여 모션으로 사용자 환경을 개선하는 방법을 자세히 알아보려면 원활한 시작 및 종료 애니메이션을 위한 4가지 새로운 CSS 기능을 확인하세요.
배열 그룹화
프로그래밍에서 배열 그룹화는 매우 일반적인 작업으로, SQL의 GROUP BY 절과 맵리듀스 프로그래밍 (map-group-reduce으로 더 적합하다고 간주됨)을 사용할 때 가장 흔히 볼 수 있습니다.
데이터를 그룹으로 결합할 수 있는 기능을 통해 개발자는 더 높은 순서의 데이터 세트를 계산할 수 있습니다. 예를 들어 동질 집단의 평균 연령이나 웹페이지의 일일 LCP 값이 있습니다.
배열 그룹화는 Object.groupBy
및 Map.groupBy
정적 메서드를 추가하여 이러한 시나리오를 사용 설정합니다.
groupBy
는 제공된 콜백 함수를 반복 가능 항목의 각 요소에 한 번씩 호출합니다. 콜백 함수는 연결된 요소의 그룹을 나타내는 문자열이나 기호를 반환해야 합니다.
다음 예의 MDN 문서에는 제품을 유형별로 그룹화하여 반환하는 데 사용되는 groupBy
메서드가 포함된 제품 배열이 있습니다.
const inventory = [
{ name: "asparagus", type: "vegetables", quantity: 5 },
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "goat", type: "meat", quantity: 23 },
{ name: "cherries", type: "fruit", quantity: 5 },
{ name: "fish", type: "meat", quantity: 22 },
];
const result = Object.groupBy(inventory, ({ type }) => type);
/* Result is:
{
vegetables: [
{ name: 'asparagus', type: 'vegetables', quantity: 5 },
],
fruit: [
{ name: "bananas", type: "fruit", quantity: 0 },
{ name: "cherries", type: "fruit", quantity: 5 }
],
meat: [
{ name: "goat", type: "meat", quantity: 23 },
{ name: "fish", type: "meat", quantity: 22 }
]
}
*/
자세한 내용은 groupBy
문서를 참고하세요.
DevTools에서 로컬 재정의가 간소화되었습니다.
이제 로컬 재정의 기능이 간소화되어 원격 리소스에 액세스하지 않고도 Network 패널에서 원격 리소스의 응답 헤더와 웹 콘텐츠를 쉽게 모의 처리할 수 있습니다.
웹 콘텐츠를 재정의하려면 네트워크 패널을 열고 요청을 마우스 오른쪽 버튼으로 클릭한 다음 콘텐츠 재정의를 선택합니다.
로컬 재정의를 설정했지만 비활성화한 경우 DevTools에서 이를 사용 설정합니다. 아직 설정하지 않은 경우 DevTools가 상단의 작업 모음에 메시지를 표시합니다. 재정의를 저장할 폴더를 선택하고 DevTools에서 액세스하도록 허용합니다.
재정의가 설정되면 DevTools에서 Sources > Overrides > Editor로 이동하여 웹 콘텐츠를 재정의할 수 있습니다.
재정의된 리소스는 Network 패널에 로 표시됩니다. 아이콘 위로 마우스를 가져가면 재정의된 항목이 표시됩니다.
Chrome 117의 DevTools에 관한 자세한 내용과 자세한 내용은 DevTools의 새로운 기능을 확인하세요.
그 외에도 다양한 기능 제공
물론 더 많은 기능이 있습니다.
기대했던
grid-template-columns
및grid-template-rows
의subgrid
값이 이제 Chrome에 구현되었습니다.WebSQL
지원 중단 체험판과unload
이벤트 지원 중단을 위한 개발자 체험판이 있습니다.Chrome 116용 동영상에 언급된 bfcache용
notRestoredReasons
API가 이 버전으로 출시됩니다.
추가 자료
여기에서는 몇 가지 주요 사항만 다룹니다. Chrome 117의 추가 변경사항은 아래 링크를 확인하세요.
- Chrome DevTools의 새로운 기능 (117)
- Chrome 117 지원 중단 및 삭제
- Chrome 117용 ChromeStatus.com 업데이트
- Chromium 소스 저장소 변경사항 목록
- Chrome 출시 캘린더
구독
최신 소식을 확인하려면 Chrome 개발자 YouTube 채널을 구독하세요. 그러면 새 동영상이 출시될 때마다 이메일 알림을 받게 됩니다.
안녕하세요. 아드리아나 자라님, Chrome 117이 출시되는 대로 Chrome의 새로운 기능을 알려드리겠습니다.