웹 개발자를 위한 Chrome 베타의 흥미로운 업데이트

Chrome 133 베타는 웹 개발자를위한 흥미로운 업데이트로 가득 차 있습니다! 이 게시물은 당신이 알아야 할 주요 개선 사항을 강조합니다. 모든 것을 즉시 마스터 할 필요는 없지만 이러한 기능에 익숙해지면 필요할 때이를 활용할 수 있습니다. 릴리스 노트를 정기적으로 확인하는 것은 재배하는 훌륭한 습관입니다.

의사 클래스 :

이 새로운 의사 급은 열린 상태에서 요소의 스타일링을 단순화합니다. 그것은 ,
1. 및 가시 피커가있는 요소 (예 : )와 함께 작동합니다. 코드 예 : :open

및

: <dialog> <details> <select> 이러한 특성은 스크롤 스냅 동작을 기반으로 스타일링을 가능하게합니다. 요소가 제자리에 고정 될 때

상태는 스타일을 적용하는 반면

는 요소가 지정된 위치로 스냅 할 때 스타일을 적용합니다. 스크롤 구동 애니메이션에 이상적입니다 코드 예 :

<code class="language-css">/* Style open dialogs/details */
:open {
  border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
  background: #f0f0f0;
}</code>

:

2. 이 대망의 기능을 사용하면 텍스트 상자 내 텍스트 주변의 추가 공간을 정확하게 제어 할 수 있습니다. scroll-state: stuck 및 scroll-state: snapped 트리밍 옵션을 제공합니다 코드 예 :

Popover 속성 값 :

stuck snapped

속성은 이제

, 및

DOM 상태 보존 모드 :

<code class="language-css">/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}</code>

새로운
3. 원시는 내부 상태를 재설정하지 않고 DOM 요소를 움직일 수 있습니다. text-box-trim 강화 함수 :

함수는 이제 사용자 정의 속성을 포함한 폴백 값을 지원합니다. 코드 예 :

x-height 이 Chrome 133 베타 릴리스는 웹 개발자에게 상당한 개선을 제공합니다. 보다 심층적 인 정보를 위해 공식 리소스로 업데이트하십시오. 이 정보를 네트워크와 공유하는 것을 고려하십시오! 추가 토론을 위해 LinkedIn, Medium 및 Bluesky에서 나와 연결하십시오. cap-height

위 내용은 웹 개발자를 위한 Chrome 베타의 흥미로운 업데이트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!